:root {
  color-scheme: dark;
  --bg: #070a0f;
  --surface: #0d1118;
  --surface-raised: #121824;
  --surface-hover: #182132;
  --border: #243043;
  --text: #f4f7fb;
  --text-secondary: #93a4b8;
  --text-muted: #5f7086;
  --accent: #14f195;
  --accent-secondary: #8b5cf6;
  --accent-cyan: #22d3ee;
  --buy: #16c784;
  --sell: #ea3943;
  --warning: #f5b849;
  --danger: #ff5c7a;
  --shadow: 0 12px 40px rgb(0 0 0 / 0.28);
  --avatar-bg: #d8e0ea;
  --avatar-fg: #1c2534;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f8fc;
  --surface: #ffffff;
  --surface-raised: #f0f4fa;
  --surface-hover: #e8eef7;
  --border: #d5dfec;
  --text: #101724;
  --text-secondary: #4e6076;
  --text-muted: #7a8ba1;
  --accent: #059669;
  --accent-secondary: #7c3aed;
  --accent-cyan: #0284c7;
  --buy: #0e9f6e;
  --sell: #d92d3a;
  --warning: #b7791f;
  --danger: #d9365e;
  --shadow: 0 12px 36px rgb(16 23 36 / 0.12);
  --avatar-bg: #1c2534;
  --avatar-fg: #d8e0ea;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--bg);
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

button {
  font: inherit;
  color: inherit;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10;
  transform: translateY(-140%);
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  padding: 8px 10px;
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

.detail-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.top-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 64px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  padding: 10px clamp(12px, 2vw, 24px);
  backdrop-filter: blur(14px);
}

.app-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/*
 * The sidebar lives below the sticky top-nav in normal document flow (not an overlay), so it
 * structurally can never cover it -- collapsing only ever changes its width, never its
 * position. Two layers on purpose: .sidebar itself has no position/height rules of its own, so
 * the flex row's default stretch alignment makes it run the full remaining page height
 * (edge-to-edge, pump.fun-style) even on a page taller than the viewport. .sidebar-inner is
 * the one that's actually sticky, capped to the viewport height -- if position:sticky were put
 * on .sidebar directly instead, its height would equal its own containing block's height
 * (they're stretched to match), leaving sticky with zero room to move within its container and
 * silently doing nothing while the whole box scrolled away with the page.
 *
 * No overflow rule on .sidebar itself, on purpose: overflow:hidden (or any value other than
 * visible) on an ancestor of a position:sticky element makes that ancestor the sticky
 * element's scrolling container per the CSS spec, even though it never actually scrolls
 * itself (it just clips). .sidebar-inner would then stick relative to .sidebar's own box --
 * which scrolls away with the page -- instead of relative to the real viewport, breaking
 * sticky entirely once the page is taller than one screen. .sidebar-inner already has its own
 * overflow-x: hidden below to clip collapsed-state content, so nothing here needs to
 * duplicate that.
 */
.sidebar {
  flex: 0 0 208px;
  width: 208px;
  border-right: 1px solid var(--border);
  background: var(--surface);
  transition: flex-basis 0.15s ease, width 0.15s ease, border-color 0.15s ease;
}

/* display: flex + column, with min-height matching max-height, so .sidebar-footer (the
   Shrink/Expand toggle) can be pushed all the way to the bottom of the visible viewport via
   margin-top: auto -- without a real height here the column would only hug its own content
   and the footer would sit right after the last nav link instead of pinned to the bottom. */
.sidebar-inner {
  position: sticky;
  top: 64px;
  min-height: calc(100vh - 64px);
  max-height: calc(100vh - 64px);
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Collapses to a narrow icon-only rail: every item (including the footer toggle) keeps its
   icon and just hides its text label -- see .sidebar.collapsed .sidebar-nav a span,
   .sidebar.collapsed .sidebar-toggle span below. */
.sidebar.collapsed {
  flex-basis: 60px;
  width: 60px;
}

.sidebar-nav {
  display: grid;
  gap: 4px;
  padding: 8px 8px 12px;
}

.sidebar-footer {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding: 8px;
}

/* .sidebar-toggle sits in .sidebar-footer, below the nav links, styled identically to the
   a. links above it (same layout/spacing/type) so it still reads as a menu item rather than
   a separate control bolted onto the sidebar. */
.sidebar-nav a,
.sidebar-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  overflow: hidden;
  border: none;
  border-radius: 8px;
  padding: 0 12px;
  background: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 650;
  font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.sidebar-nav a svg,
.sidebar-toggle svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-toggle-icon-chevron {
  transform: none;
}

/* Collapsed shows a menu (hamburger) icon instead of the collapse chevron -- a clearer "open
   the sidebar" affordance than a lone chevron once the sidebar itself is down to its icon
   rail. */
.sidebar-toggle-icon-menu {
  display: none;
}

.sidebar.collapsed .sidebar-toggle-icon-chevron {
  display: none;
}

.sidebar.collapsed .sidebar-toggle-icon-menu {
  display: block;
}

.sidebar-nav a span,
.sidebar-toggle span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar.collapsed .sidebar-nav a span,
.sidebar.collapsed .sidebar-toggle span {
  display: none;
}

.sidebar-nav a[data-admin-nav][hidden] {
  display: none;
}

.sidebar-nav a:hover,
.sidebar-nav a:focus-visible,
.sidebar-nav a[aria-current="page"],
.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
  background: var(--surface-raised);
  color: var(--text);
  outline: none;
}

.brand,
.icon-button {
  color: var(--text);
  text-decoration: none;
}

.brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.token-avatar {
  background: var(--avatar-bg);
}

.brand-mark {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
}

.brand-mark img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}

.brand-mark svg,
.icon-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.icon-button svg.brand-glyph {
  fill: currentColor;
  stroke: none;
}

.brand-mark svg {
  width: 25px;
  height: 25px;
  color: #07100d;
}

.brand-copy {
  display: grid;
  min-width: 0;
}

.brand-name {
  display: inline-flex;
  overflow: hidden;
  font-size: 16px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.3px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-name-curve {
  color: var(--text);
}

.brand-name-radar {
  color: var(--accent);
  text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 65%, transparent);
}

.brand-subtitle {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.icon-button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-raised);
}

.icon-button[hidden] {
  display: none;
}

.search-wrap {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 0 12px;
}

.search-wrap svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  color: var(--text-muted);
}

.search-wrap input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 14px;
}

.search-wrap input::placeholder {
  color: var(--text-muted);
}

.search-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: rgb(3 6 12 / 0.6);
  backdrop-filter: blur(2px);
  padding: 12vh 16px 16px;
}

.search-dialog-backdrop[hidden] {
  display: none;
}

.search-dialog {
  width: min(100%, 640px);
  max-height: 76vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 12px;
}

.search-dialog .search-wrap {
  grid-template-columns: 20px minmax(0, 1fr) auto;
  min-height: 46px;
}

.search-dialog-close {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.search-dialog-close:hover {
  color: var(--text);
  background: var(--surface-raised);
}

.search-dialog-close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.search-dialog .search-results {
  margin-top: 12px;
}

.search-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.search-results[hidden] {
  display: none;
}

.search-result {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
}

.search-result:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--border));
  outline: none;
}

.search-result-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--accent);
  font-size: 11px;
  font-weight: 820;
  text-transform: uppercase;
}

.search-result-icon img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.search-result-title,
.search-result-subtitle,
.search-result-kind {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-title {
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
}

.search-result-subtitle {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 11px;
}

.search-result-kind {
  max-width: 72px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 780;
  text-align: right;
  text-transform: uppercase;
}

.wallet-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--text);
  padding: 0 12px;
  font-size: 15px;
  font-weight: 500;
}

.wallet-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.wallet-button.connected {
  border-color: transparent;
  background: transparent;
  color: var(--accent);
}

.icon-button:hover,
.icon-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: var(--surface-hover);
  color: var(--text);
  outline: none;
}

.wallet-button:hover,
.wallet-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: var(--surface-hover);
  outline: none;
}

.wallet-button.connected:hover,
.wallet-button.connected:focus-visible {
  border-color: transparent;
  background: var(--surface-hover);
}

.wallet-button:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

.wallet-button-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--avatar-bg);
  color: var(--avatar-fg);
  font-size: 11px;
  font-weight: 750;
}

.wallet-button-avatar[hidden] {
  display: none;
}

.wallet-button-icon-hidden {
  display: none;
}

.scroll-locked {
  overflow: hidden;
}

.wallet-popover-position-name-col {
  display: grid;
  min-width: 0;
}

.clipboard-fallback-textarea {
  position: fixed;
  opacity: 0;
}

.wallet-button-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wallet-popover-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  background: rgb(3 6 12 / 0.4);
  padding: calc(56px + 8px) 16px 16px;
}

.wallet-popover-backdrop[hidden] {
  display: none;
}

.wallet-popover {
  width: min(100%, 320px);
  max-height: 80vh;
  overflow-y: auto;
  display: grid;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 16px;
}

.wallet-popover-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.wallet-popover-section {
  display: grid;
  gap: 6px;
}

.wallet-popover-total {
  font-size: 26px;
  font-weight: 800;
}

.wallet-popover-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wallet-popover-sol {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  background: var(--surface-raised);
  padding: 4px 10px 4px 6px;
  font-size: 12px;
  font-weight: 720;
}

.wallet-popover-sol-icon {
  width: 14px;
  height: 14px;
}

.wallet-popover-address-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}

.wallet-popover-address-row code {
  overflow: hidden;
  color: var(--text-secondary);
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-popover-copy {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.wallet-popover-copy:hover {
  color: var(--text-secondary);
  background: var(--surface-raised);
}

.wallet-popover-copy-icon-copy,
.wallet-popover-copy-icon-check {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wallet-popover-copy-icon-check {
  display: none;
  color: var(--buy);
}

.wallet-popover-copy.copied .wallet-popover-copy-icon-copy {
  display: none;
}

.wallet-popover-copy.copied .wallet-popover-copy-icon-check {
  display: block;
}

.wallet-popover-provider {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 720;
}

.wallet-popover-provider svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wallet-popover-positions-head {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.wallet-popover-positions {
  display: grid;
  gap: 6px;
}

.wallet-popover-empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
}

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

.wallet-popover-position-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  background: var(--avatar-bg);
  color: var(--avatar-fg);
  font-size: 10px;
  font-weight: 850;
}

.wallet-popover-position-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wallet-popover-position-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-popover-position-meta {
  color: var(--text-muted);
  font-size: 11px;
}

.wallet-popover-position-value {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 720;
  text-align: right;
}

.wallet-popover-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.wallet-popover-profile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text);
  font-size: 13px;
  font-weight: 720;
  text-decoration: none;
}

.wallet-popover-profile svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.wallet-popover-profile:hover,
.wallet-popover-profile:focus-visible {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-raised));
}

.wallet-popover-disconnect {
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--sell);
  font-size: 13px;
  font-weight: 720;
  cursor: pointer;
}

.wallet-popover-disconnect:hover {
  background: color-mix(in srgb, var(--sell) 14%, var(--surface-raised));
}

.detail-terminal {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: clamp(12px, 2vw, 22px);
}

.profile-banner {
  max-height: 260px;
  aspect-ratio: 3 / 1;
  margin-top: calc(clamp(12px, 2vw, 22px) * -1);
  margin-inline: calc(clamp(12px, 2vw, 22px) * -1);
  margin-bottom: 12px;
  overflow: hidden;
  background: var(--avatar-bg);
}

.profile-banner[hidden] {
  display: none;
}

.profile-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--avatar-bg);
}

.profile-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
}

.profile-card-actions {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-card-actions .icon-button {
  border-color: transparent;
  background: none;
}

.profile-card-actions .icon-button:hover,
.profile-card-actions .icon-button:focus-visible {
  border-color: transparent;
  background: none;
  outline: none;
}

.profile-card-actions .icon-button:hover svg,
.profile-card-actions .icon-button:focus-visible svg {
  color: var(--accent);
}

.telegram-connect,
.x-connect {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised, transparent);
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.35;
}

.telegram-connect[hidden],
.x-connect[hidden] {
  display: none;
}

.field .telegram-connect > span:first-child,
.field .x-connect > span:first-child {
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 400;
  text-transform: none;
}

.telegram-connect .notif-device-actions,
.x-connect .notif-device-actions {
  display: flex;
  flex: none;
  gap: 8px;
}

#telegramLink:hover svg,
#telegramLink:focus-visible svg {
  color: #26a5e4;
}

.token-price {
  text-align: right;
}

.token-price span {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.token-price strong {
  display: block;
  margin-top: 4px;
  font-size: 22px;
  line-height: 1.1;
}

.follow-stats {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 12px;
}

.follow-stats-tips {
  color: var(--accent);
  font-weight: 700;
}

.follow-stats-trigger {
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  padding: 0;
  text-decoration: none;
  cursor: pointer;
}

.follow-stats-trigger:hover,
.follow-stats-trigger:focus-visible {
  color: var(--text);
  text-decoration: underline;
  outline: none;
}

.follow-button {
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--border));
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 20%, var(--surface-raised));
  color: var(--text);
  font-weight: 780;
  font-size: 13px;
  padding: 0 16px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.follow-button:hover,
.follow-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 80%, var(--border));
  background: color-mix(in srgb, var(--accent) 30%, var(--surface-hover));
  outline: none;
}

.follow-button:disabled,
.follow-button.is-loading {
  cursor: not-allowed;
  opacity: 0.68;
}

.follow-button.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.follow-button.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, var(--text) 30%, transparent);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: preview-button-spin 0.6s linear infinite;
}

.follow-button.following {
  border-color: var(--border);
  background: var(--surface-raised);
  color: var(--text-secondary);
}

.follow-button.following:hover {
  border-color: color-mix(in srgb, var(--danger) 60%, var(--border));
  background: var(--surface-hover);
  color: var(--danger);
}

.token-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: var(--avatar-fg);
  font-size: 18px;
  font-weight: 850;
}

.token-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.token-title {
  min-width: 0;
  flex: 1 1 auto;
  padding-right: 140px;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  overflow: hidden;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

h2 {
  font-size: 15px;
  line-height: 1.2;
}

.token-title p,
.panel-heading p {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.profile-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: 12px;
}

.profile-meta-row[hidden] {
  display: none;
}

.profile-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.profile-meta-icon {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--text-muted);
}

.profile-meta-row code {
  overflow: hidden;
  color: var(--text-secondary);
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-meta-copy {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 5px;
  background: none;
  color: var(--text-muted);
  padding: 0;
  cursor: pointer;
}

.profile-meta-copy:hover,
.profile-meta-copy:focus-visible {
  color: var(--text-secondary);
  background: var(--surface-raised);
  outline: none;
}

.profile-meta-copy-icon-copy,
.profile-meta-copy-icon-check {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-meta-copy-icon-check {
  display: none;
  color: var(--buy);
}

.profile-meta-copy.copied .profile-meta-copy-icon-copy {
  display: none;
}

.profile-meta-copy.copied .profile-meta-copy-icon-check {
  display: block;
}

.profile-meta-sep {
  color: var(--text-muted);
}

.profile-bio {
  margin-top: 12px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.balance-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 16px;
}

.balance-card {
  align-items: stretch;
}

.balance-card-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
}

/* The right column: the refresh and SOL buttons on top, Total PnL under them, on the row of the unrealized PnL. */
.balance-card-right {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}

.balance-card-right .crdr-pnl-section {
  margin-top: 0;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

/* Phones: the title and the refresh / SOL buttons share the first row, then the balance, then Total PnL. */
@media (max-width: 560px) {
  .balance-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 12px;
    padding: 12px 14px;
  }

  .balance-card-main,
  .balance-card-right {
    display: contents;
  }

  .balance-card-total {
    margin-top: 0;
    font-size: 28px;
  }

  .balance-card-main .crdr-balance-line {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .balance-card-main .crdr-pnl-chip {
    font-size: 12px;
  }

  .balance-card-label {
    grid-column: 1;
    grid-row: 1;
  }

  .balance-card-side {
    grid-column: 2;
    grid-row: 1;
  }

  /* Right under the title, at the top of its row (the Total PnL block beside it is taller). */
  .balance-card-main .crdr-balance-line {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin-top: -2px;
  }

  /* Total PnL on the right of the balance, its range buttons on the line below it. */
  .balance-card-right .crdr-pnl-section {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: end;
    align-items: center;
    gap: 6px 8px;
  }

  .balance-card-right .crdr-pnl-tabs {
    grid-column: 1 / -1;
    justify-self: end;
  }
}

.balance-card-label {
  grid-column: 1 / -1;
}

/* Total PnL sits on the right of the balance value, on the same row as its bottom edge. */
.balance-card-main .crdr-pnl-section {
  grid-column: 2;
  grid-row: 2;
  justify-content: flex-end;
  margin-top: 0;
  padding-bottom: 3px;
}

@media (max-width: 560px) {
  .balance-card-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .balance-card-main .crdr-pnl-section {
    grid-column: 1;
    grid-row: auto;
    justify-content: space-between;
    margin-top: 8px;
  }
}

.balance-card-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.balance-card-total {
  display: block;
  margin-top: 6px;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
}

.balance-card-side {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.balance-card-side #refreshButton {
  border-color: transparent;
  background: none;
  color: var(--text-muted);
}

.balance-card-side #refreshButton:hover,
.balance-card-side #refreshButton:focus-visible {
  background: none;
  color: var(--accent);
  outline: none;
}

.balance-card-side #refreshButton:disabled svg {
  animation: refresh-spin 0.7s linear infinite;
}

@keyframes refresh-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.balance-card-cash {
  position: relative;
}

.balance-cash-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-raised);
  padding: 6px 10px 6px 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 720;
  cursor: pointer;
}

.balance-cash-pill:hover,
.balance-cash-pill:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: var(--surface-hover);
  outline: none;
}

.balance-cash-sol-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.balance-cash-chevron {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}

.balance-cash-pill[aria-expanded="true"] .balance-cash-chevron {
  transform: rotate(180deg);
}

.balance-cash-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 4;
  width: min(80vw, 320px);
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-raised);
  box-shadow: var(--shadow);
  padding: 10px;
}

.balance-cash-dropdown[hidden] {
  display: none;
}

.balance-cash-dropdown-head {
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.balance-cash-dropdown-list {
  display: grid;
  gap: 4px;
}

.balance-cash-dropdown-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  padding: 5px 8px;
  color: var(--text-secondary);
  font-size: 12px;
}

/* Every logo the same size: a rounded square, whatever shape the picture itself is. */
.balance-cash-logo {
  display: block;
  width: 28px;
  height: 28px;
  flex: none;
  overflow: hidden;
  border-radius: 7px;
  background: var(--surface-raised);
}

.balance-cash-logo img {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  object-fit: cover;
}

.balance-cash-name {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}

.balance-cash-name strong {
  overflow: hidden;
  color: var(--text);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.balance-cash-name span {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.balance-cash-value {
  display: grid;
  justify-items: end;
  line-height: 1.25;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.balance-cash-value strong {
  color: var(--text);
  font-size: 12.5px;
}

.balance-cash-value span {
  color: var(--text-muted);
  font-size: 11px;
}

.balance-cash-dropdown-item:hover {
  background: var(--surface-hover);
}

.balance-cash-dropdown-empty {
  margin: 0;
  padding: 6px 8px;
  color: var(--text-muted);
  font-size: 12px;
}

.profile-tabs-panel {
  margin-top: 16px;
}

.profile-tabs {
  display: flex;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  padding: 0 8px;
}

/* The tabs share the row and shrink with it (a long label is cut with an ellipsis), so the row never scrolls sideways. */
.profile-tab {
  display: inline-flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 46px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  padding: 0 8px;
  white-space: nowrap;
  cursor: pointer;
}

.profile-tab > span:not(.profile-tab-count) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-tab .profile-tab-count {
  flex: 0 0 auto;
}

/* Medium desktop widths: the icons give way first. */
@media (min-width: 1023px) and (max-width: 1360px) {
  .profile-tab svg {
    display: none;
  }
}

.profile-tab[hidden] {
  display: none;
}

.profile-tab svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-tab:hover {
  color: var(--text-secondary);
}

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

.profile-tab-count {
  border-radius: 999px;
  background: var(--surface-raised);
  padding: 1px 7px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 760;
}

.profile-tab.active .profile-tab-count {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface-raised));
  color: var(--text);
}

.profile-tab-panel[hidden] {
  display: none;
}

.profile-select {
  display: none;
}

.feed-panel {
  min-width: 0;
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
}

.panel-heading.compact {
  min-height: auto;
  align-items: flex-start;
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.detail-grid .feed-panel {
  margin-top: 0;
}

.chart-panel {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

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

table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
}

th,
td {
  height: 40px;
  border-bottom: 1px solid var(--border);
  padding: 0 10px;
  text-align: right;
  white-space: nowrap;
}

th {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
}

th:first-child,
td:first-child {
  text-align: left;
}

td {
  color: var(--text-secondary);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
}

td a {
  color: var(--accent-cyan);
}

.token-link {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
}

.token-link:hover .token-sym {
  color: var(--accent-cyan);
}

.share-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}

.share-col,
.share-cell {
  width: 44px;
  padding-left: 4px;
  padding-right: 8px;
}

.share-cell .post-share-button {
  margin-left: auto;
}

.token-logo-wrap {
  border-radius: 6px;
  position: relative;
  display: inline-flex;
  flex: none;
}

.token-line {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
}

.token-logo {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 6px;
  background: var(--surface-raised);
  object-fit: cover;
}

.token-sym {
  overflow: hidden;
  font-size: 13px;
  font-weight: 780;
  text-overflow: ellipsis;
}

.token-sub {
  display: block;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 600;
}

.pnl-up {
  color: var(--buy);
}

.pnl-down {
  color: var(--danger);
}

.pnl-sub {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
}

.side-buy {
  color: var(--buy);
}

.side-sell {
  color: var(--danger);
}

.side-label {
  font-weight: 800;
}

th,
td {
  padding-top: 0;
}

.status-pill {
  display: inline-block;
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 820;
  text-transform: uppercase;
}

.status-pill.confirmed,
.status-pill.finalized,
.status-pill.active {
  background: color-mix(in srgb, var(--buy) 16%, transparent);
  color: var(--buy);
}

.status-pill.pending,
.status-pill.submitted,
.status-pill.new {
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  color: var(--warning);
}

.status-pill.failed,
.status-pill.expired {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--danger);
}

.launchpad-list {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.launchpad-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
  padding: 8px 10px;
  text-decoration: none;
}

.launchpad-item:hover,
.launchpad-item:focus-visible {
  background: var(--surface-hover);
  outline: none;
}

.launchpad-item .token-avatar {
  width: 36px;
  height: 36px;
  font-size: 12px;
}

/* Wraps a token avatar so a launchpad badge can be pinned to its bottom-right corner without
   being clipped by the avatar's own overflow:hidden image mask -- the badge is a sibling of the
   avatar, not a child, so JS that replaces the avatar's children never touches it. */
.token-avatar-frame {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.launchpad-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  width: 40%;
  height: 40%;
  min-width: 14px;
  min-height: 14px;
  place-items: center;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #0a0f0c;
  box-sizing: content-box;
}

.launchpad-badge[hidden] {
  display: none;
}

.launchpad-badge svg {
  width: 60%;
  height: 60%;
  fill: #14f195;
  stroke: none;
}

.launchpad-item-name {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.launchpad-item-meta {
  display: block;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.launchpad-item-price {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 760;
  text-align: right;
  white-space: nowrap;
}

/* No bottom padding: the last comment's own action bar (flush against its own bottom edge --
   see .comment-item) should be the true end of the list, not followed by a second gap here. */
.comment-list {
  display: grid;
  width: 100%;
  max-width: 462px;
  margin: 0 auto;
  padding: 4px 12px 0;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

/* Full-bleed the same way .token-social-links escapes its card's own padding: width/margin
   extend .comment-item past .comment-list's 12px side padding to its actual border edge, with
   that same 12px folded into this item's own padding (4px original + 12px list padding = 16px)
   so the content sits at exactly the same visual inset as before -- only the hover/focus
   background (which paints this box, padding included) actually reaches the vertical borders. */
/* No bottom padding: .comment-item-footer (the React/Reply/Share bar) is meant to sit flush
   against this item's bottom edge, right up to the divider line, rather than leaving a second
   gap below an already-boxed-off action bar. */
/* No longer a link, and no longer hovers as one whole block -- only .comment-token-card (its
   own real <a> to the token page) and the individual .comment-action-button segments get their
   own hover feedback now, see below. */
.comment-item {
  position: relative;
  display: block;
  width: calc(100% + 24px);
  margin: 0 -12px;
  padding: 10px 16px 0;
}

.comment-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 1px solid var(--accent);
}

.comment-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.comment-item-avatar {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--avatar-bg);
  color: var(--avatar-fg);
  font-size: 10px;
  font-weight: 850;
}

.comment-item-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The follow button after an author's name (follow-buttons.ts). Styled here too, so it is visible even before the shared script
   arrives, or while a browser still holds an older copy of it. */
.comment-follow-button {
  display: inline-grid;
  width: 22px;
  height: 22px;
  flex: none;
  place-items: center;
  margin-left: -4px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
}

.comment-follow-button[hidden] {
  display: none;
}

.comment-follow-button.is-disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.45;
}

.comment-follow-button svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.comment-item-author {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comment-item-time {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--text-muted);
  font-size: 11px;
}

/* The author row and the text together open the post in a dialog (nothing in them is a control except the author link and the buttons). */
.comment-item-main {
  /* Room on all four sides for the hover highlight, taken back with a negative margin so the text does not move. */
  margin: -6px -10px -6px;
  border-radius: 10px;
  cursor: pointer;
  padding: 6px 10px;
  transition: background 0.1s ease;
}

.comment-item-main:hover {
  background: color-mix(in srgb, var(--surface-hover) 45%, transparent);
}

.comment-item-main:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* In the dialog the post is the whole card, edge to edge. */
.modal-dialog.post-dialog {
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.post-dialog-body {
  min-width: 0;
  margin: 0 -16px -16px;
}

.post-dialog-body .comment-item-body,
.post-dialog-body .comment-item-main {
  min-width: 0;
  overflow-wrap: anywhere;
}

.post-dialog-body .comment-item {
  width: 100%;
  margin: 0;
  padding: 10px 16px 0;
}

.post-dialog-body .comment-item-main {
  cursor: default;
}

.post-dialog-body .comment-item-main:hover {
  background: transparent;
}

.post-dialog-body .comment-token-card,
.post-dialog-body .comment-item-footer {
  width: calc(100% + 32px);
  margin-left: -16px;
  margin-right: -16px;
}

.comment-item-body {
  display: block;
  margin-top: 8px;
  margin-left: 34px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: break-word;
  /* Line breaks and blank lines are shown as typed. */
  white-space: pre-wrap;
}

.comment-item-attachment {
  width: auto;
  height: auto;
  display: block;
  max-width: 260px;
  max-height: 200px;
  margin: 8px auto 0;
  border-radius: 8px;
  object-fit: cover;
}

/* Border-top only (no side/bottom box), full-bleed past .comment-item's own 16px side padding
   (same technique the item itself and .comment-item-footer use) so this border -- and
   .comment-token-stats's own internal border-top below -- both reach .comment-list's actual
   vertical border lines instead of stopping short of them. Its own horizontal padding is put
   back so the card's *content* still lines up with the comment body text above it. */
.comment-token-card {
  display: block;
  width: calc(100% + 32px);
  margin: 10px -16px 0;
  border-top: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
  background: var(--surface);
  padding: 10px 16px 0;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.1s ease;
}

.comment-token-card:hover,
.comment-token-card:focus-visible {
  background: var(--surface-hover);
  outline: none;
}

.comment-token-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 1px;
  align-items: center;
}

.comment-token-head .token-avatar-frame {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.comment-token-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  overflow: hidden;
  border-radius: 9px;
  background: var(--avatar-bg);
  color: var(--avatar-fg);
  font-size: 11px;
  font-weight: 850;
}

.comment-token-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comment-token-name {
  grid-column: 2;
  grid-row: 1;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comment-token-symbol {
  grid-column: 2;
  grid-row: 2;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comment-token-price {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  color: var(--text);
  font-size: 14px;
  font-weight: 780;
  white-space: nowrap;
}

.comment-token-volume {
  display: inline-flex;
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.comment-token-volume svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Full-bleed the same way .comment-token-card itself is -- this divider is nested one level
   deeper (inside the card's own 16px padding), so it needs the same escape to actually reach
   the list's vertical borders instead of just the card's own (already full-bleed) edges. A
   small bottom padding keeps the row from sitting flush against .comment-item-footer right
   below it, so it reads as vertically centered in its own space rather than crowded at the top. */
.comment-token-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: calc(100% + 32px);
  gap: 6px;
  margin: 8px -16px 0;
  padding: 8px 16px 10px;
  border-top: 1px solid var(--border);
}

.comment-token-stat {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.comment-token-stat-label {
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
}

.comment-token-stat-value {
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.comment-token-stat-value.positive {
  color: var(--buy);
}

.comment-token-stat-value.negative {
  color: var(--sell);
}

.comment-token-stat-value.risk-low {
  color: var(--buy);
}

.comment-token-stat-value.risk-medium {
  color: var(--warning);
}

.comment-token-stat-value.risk-high {
  color: var(--danger);
}

.comment-token-stat-value.risk-unknown {
  color: var(--text-secondary);
}

/* Same "React | Reply | Share" segmented bar as token-detail-page.ts, full-bleed past
   .comment-item's own 16px side padding so the divider lines reach the card's actual edges
   (same technique .comment-item itself uses to reach .comment-list's border). */
.comment-item-footer {
  display: flex;
  width: calc(100% + 32px);
  margin: 0 -16px;
  border-top: 1px solid var(--border);
}

.comment-action-button {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}

.comment-action-button:last-child {
  border-right: 0;
}

.comment-action-button:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.comment-share-button:hover {
  color: var(--accent-cyan);
}

.comment-react-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  font-size: 12px;
  line-height: 12px;
  overflow: hidden;
}

/* React is now interactive (a real <button>), unlike Reply which stays a display-only segment
   until it gets its own function -- wrapped so the popup picker below can anchor to it without
   disturbing the footer's flex layout. */
.comment-reaction-wrap {
  position: relative;
  display: flex;
  flex: 1;
}

.comment-react-button.active {
  color: var(--accent-cyan);
}

.comment-share-button.active {
  color: var(--accent-cyan);
}

.comment-share-button:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

.comment-share-button:disabled:hover {
  background: transparent;
  color: var(--text-muted);
}

.comment-repost-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.comment-repost-badge svg {
  flex: 0 0 auto;
}

.comment-reaction-picker {
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: 5;
  display: flex;
  gap: 2px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 4px;
}

.comment-reaction-picker[hidden] {
  display: none;
}

.comment-reaction-picker button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.1s ease;
}

.comment-reaction-picker button:hover,
.comment-reaction-picker button:focus-visible {
  background: var(--surface-hover);
  transform: scale(1.2);
}

.comment-reaction-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-raised);
  overflow: hidden;
}

.comment-reaction-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 16px;
}

.comment-action-count:empty {
  display: none;
}

.empty-state {
  display: grid;
  gap: 12px;
  min-height: 100px;
  place-items: center;
  margin: 12px 0;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  padding: 10px;
  text-align: center;
}

.empty-state[hidden] {
  display: none;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: rgb(3 6 12 / 0.6);
  backdrop-filter: blur(2px);
  padding: 10vh 16px 16px;
}

.modal-backdrop[hidden] {
  display: none;
}

.modal-dialog {
  width: min(100%, 480px);
  max-height: 78vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 16px;
}

@keyframes modal-sheet-up {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.modal-head h2 {
  font-size: 16px;
}

.modal-meta {
  margin: 0 0 10px;
  color: var(--text-secondary);
  font-size: 12px;
}

.comment-signed-out {
  margin: 12px 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.comment-signed-out a {
  color: var(--accent-cyan);
}

.turnstile-wrap {
  min-height: 1px;
}

.turnstile-wrap:empty {
  display: none;
}

.comment-error {
  color: var(--danger);
  font-size: 12px;
}

.reply-thread-list {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

/* Extra horizontal inset beyond .modal-dialog's own 16px padding, specifically for the "No
   replies yet" dashed box -- at the dialog's full content width it read as stretching edge to
   edge with no breathing room of its own. */
.reply-thread-list .empty-state {
  margin-left: 8px;
  margin-right: 8px;
}

.reply-thread-composer-footer .preview-button {
  flex: 0 0 auto;
  width: 88px;
  height: 32px;
  padding: 0 14px;
  font-size: 12px;
}

.reply-thread-item {
  padding: 8px 8px 12px;
  border-bottom: 1px solid var(--border);
}

.reply-thread-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.reply-thread-composer {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.reply-thread-composer-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 8px;
}

.preview-button {
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-raised));
  color: var(--text-secondary);
  font-weight: 780;
  padding: 0 16px;
  cursor: pointer;
}
.preview-button {
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.preview-button:hover,
.preview-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 20%, var(--surface-hover));
  color: var(--text);
  outline: none;
}

.preview-button.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.preview-button.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, var(--text-secondary) 30%, transparent);
  border-top-color: var(--text-secondary);
  border-radius: 50%;
  animation: preview-button-spin 0.6s linear infinite;
}

@keyframes preview-button-spin {
  to {
    transform: rotate(360deg);
  }
}


.preview-button:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

#profileForm {
  display: grid;
  gap: 16px;
}

.field {
  display: grid;
  gap: 6px;
}

.field span:first-child {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.avatar-upload {
  display: flex;
  align-items: center;
  gap: 14px;
}

.avatar-upload-preview {
  display: grid;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--avatar-bg);
  color: var(--avatar-fg);
  font-size: 16px;
  font-weight: 850;
}

.avatar-upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-upload-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.avatar-upload-status {
  color: var(--text-muted);
  font-size: 12px;
}

.avatar-upload-status.error {
  color: var(--danger);
}

.avatar-upload-status.success {
  color: var(--buy);
}

.banner-upload {
  display: grid;
  gap: 10px;
}

.banner-upload-preview {
  display: grid;
  width: 100%;
  aspect-ratio: 3 / 1;
  place-items: center;
  overflow: hidden;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--avatar-bg);
  color: var(--text-muted);
  font-size: 12px;
}

.banner-upload-preview:empty::before {
  content: "No banner uploaded";
}

.banner-upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--avatar-bg);
}

.banner-upload-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.banner-upload-status {
  color: var(--text-muted);
  font-size: 12px;
}

.banner-upload-status.error {
  color: var(--danger);
}

.banner-upload-status.success {
  color: var(--buy);
}

.banner-upload-hint {
  color: var(--text-muted);
  font-size: 11px;
}

.field input,
.field textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--text);
  padding: 9px 10px;
  font: inherit;
}

.field input {
  height: 38px;
}

.field textarea {
  resize: vertical;
  min-height: 80px;
}

.char-counter {
  justify-self: end;
  color: var(--text-muted);
  font-size: 11px;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.form-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.save-status {
  color: var(--text-secondary);
  font-size: 12px;
}

.save-status.error {
  color: var(--danger);
}

.save-status.success {
  color: var(--buy);
}

.list-tabs {
  display: flex;
  gap: 4px;
}

.list-tab {
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 10px;
  cursor: pointer;
}

.list-tab.active {
  background: var(--surface-raised);
  color: var(--text);
}

.account-list {
  display: grid;
  gap: 8px;
}

.account-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
  padding: 8px 10px;
  text-decoration: none;
}

.account-item:hover,
.account-item:focus-visible {
  background: var(--surface-hover);
  outline: none;
}

.account-avatar {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--avatar-bg);
  color: var(--avatar-fg);
  font-size: 13px;
  font-weight: 850;
}

.account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-name {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-username {
  display: block;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.load-more {
  width: 100%;
  margin-top: 8px;
}

.mobile-dock,
.sidebar-backdrop,
.sheet-close {
  display: none;
}

@media (max-width: 1022px) {
  .modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .modal-dialog {
    width: 100%;
    max-height: 85vh;
    border-width: 1px 0 0;
    border-radius: 20px 20px 0 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    animation: modal-sheet-up 0.22s ease-out;
  }

  .token-title {
    padding-right: 0;
  }

  /*
   * Phone tables become compact cards: the header row is hidden and every row is its own card,
   * with each cell labelled from its data-label. Positions: token on top, then Amount / Price /
   * Value across. Trades: token and status on top, then Confirmations / Submitted / Explorer.
   */
  .trade-table-wrap {
    overflow-x: visible;
    padding: 8px;
  }

  table {
    min-width: 0;
  }

  thead {
    display: none;
  }

  tbody {
    display: grid;
    gap: 8px;
  }

  tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-raised);
    padding: 8px 10px;
  }

  tbody td {
    display: flex;
    height: auto;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
    border: 0;
    padding: 0;
    color: var(--text);
    font-size: 12.5px;
    font-weight: 700;
    text-align: left;
  }

  tbody td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
  }

  tbody td:first-child {
    grid-column: 1 / -1;
    font-size: 13px;
    font-weight: 760;
  }

  tbody td:first-child::before,
  #tradesPanel tbody td:nth-child(2)::before {
    display: none;
  }

  /* Positions on a phone, as in the wallet popover: logo, ticker with its badges over the amount, value over PnL, share at the end. */
  #positionsPanel tbody tr {
    grid-template-columns: 24px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 2px 10px;
  }

  #positionsPanel tbody td::before {
    display: none;
  }

  #positionsPanel tbody td:nth-child(1),
  #positionsPanel tbody td:nth-child(1) .token-link {
    display: contents;
  }

  #positionsPanel .token-logo-wrap {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  #positionsPanel .token-link > span:last-child {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  #positionsPanel tbody td:nth-child(2) {
    grid-column: 2;
    grid-row: 2;
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
  }

  #positionsPanel tbody td:nth-child(2)::after {
    content: " " attr(data-sym);
  }

  #positionsPanel tbody td:nth-child(3) {
    display: none;
  }

  #positionsPanel tbody td:nth-child(4) {
    grid-column: 3;
    grid-row: 1;
    align-items: flex-end;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 750;
  }

  #positionsPanel tbody td:nth-child(5) {
    grid-column: 3;
    grid-row: 2;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-end;
    gap: 3px;
    font-size: 10.5px;
  }

  #positionsPanel tbody td:nth-child(5) .pnl-sub::before {
    content: "(";
  }

  #positionsPanel tbody td:nth-child(5) .pnl-sub::after {
    content: ")";
  }

  #positionsPanel tbody td.share-cell {
    position: static;
    grid-column: 4;
    grid-row: 1 / span 2;
    width: auto;
    padding: 0;
  }

  #tradesPanel tbody tr {
    gap: 4px 10px;
    padding: 6px 8px;
    grid-template-columns: minmax(max-content, 1fr) auto auto auto;
    align-items: center;
  }

  #tradesPanel tbody td:first-child {
    grid-column: auto;
    overflow: visible;
  }

  /* The whole ticker is always shown on a phone; the other columns give way. */
  #tradesPanel .token-sym {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }

  #tradesPanel tbody td {
    font-size: 12px;
  }

  #tradesPanel tbody td:nth-child(3) {
    align-items: flex-end;
  }

  #tradesPanel tbody td:nth-child(2) {
    align-items: flex-start;
  }

  #tradesPanel tbody td::before {
    display: none;
  }

  tbody tr.empty-row {
    display: block;
    border: 0;
    background: none;
    padding: 12px 4px;
  }

  tbody tr.empty-row td {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    text-align: center;
  }

  tbody tr.empty-row td::before {
    display: none;
  }

  .launchpad-list,
  .comment-list {
    gap: 6px;
    padding: 8px;
  }

  .comment-list {
    padding-bottom: 0;
    border-left: 0;
    border-right: 0;
  }

  .launchpad-item {
    gap: 8px;
    padding: 6px 8px;
  }

  .launchpad-item .token-avatar {
    width: 30px;
    height: 30px;
  }

  .comment-item {
    width: calc(100% + 16px);
    margin: 0 -8px;
    padding: 8px 18px 0;
  }

  .comment-item-footer {
    width: calc(100% + 36px);
    margin: 0 -18px;
  }

  .comment-item-avatar {
    width: 22px;
    height: 22px;
  }

  .comment-item-body {
    margin-top: 6px;
    margin-left: 0;
    font-size: 13px;
  }

  .comment-item-attachment {
    max-width: 180px;
    max-height: 130px;
    margin-top: 6px;
  }

  .comment-token-card {
    width: calc(100% + 36px);
    margin: 8px -18px 0;
    padding: 8px 18px 0;
  }

  .comment-token-head {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    column-gap: 8px;
  }

  .comment-token-avatar {
    width: 28px;
    height: 28px;
  }

  .comment-token-name {
    font-size: 12px;
  }

  .comment-token-price {
    font-size: 13px;
  }

  .comment-token-stats {
    width: calc(100% + 36px);
    gap: 6px;
    margin: 6px -18px 0;
    padding: 6px 18px 8px;
  }

  .comment-token-stat-label {
    font-size: 10px;
  }

  .comment-token-stat-value {
    font-size: 11px;
  }

  /* Phones swap the tab row for a dropdown that drives the same tab buttons. */
  .profile-tabs {
    display: none;
  }

  .profile-select {
    position: relative;
    display: block;
    padding: 8px;
    border-bottom: 1px solid var(--border);
  }

  .profile-select-trigger,
  .profile-select-option {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 720;
    text-align: left;
    cursor: pointer;
  }

  .profile-select-trigger {
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    padding: 0 10px;
  }

  .profile-select svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .profile-select-icon,
  .profile-select-option-icon {
    display: inline-flex;
    flex: 0 0 auto;
  }

  .profile-select-label {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .profile-select-chevron {
    color: var(--text-muted);
    transition: transform 0.15s ease;
  }

  .profile-select-trigger[aria-expanded="true"] .profile-select-chevron {
    transform: rotate(180deg);
  }

  .profile-select-menu {
    position: absolute;
    top: calc(100% - 2px);
    right: 8px;
    left: 8px;
    z-index: 12;
    display: grid;
    gap: 2px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    padding: 4px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  }

  .profile-select-menu[hidden] {
    display: none;
  }

  .profile-select-option {
    height: 40px;
    border-radius: 8px;
    color: var(--text-secondary);
    padding: 0 10px;
  }

  .profile-select-option .profile-select-option-label {
    flex: 1;
  }

  .profile-select-option[aria-selected="true"] {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
  }

  .profile-card {
    flex-wrap: wrap;
  }

  .profile-card-actions {
    position: static;
    margin-left: 60px;
  }

  .token-avatar {
    width: 48px;
    height: 48px;
  }

  .top-nav {
    min-height: 52px;
    padding: 8px 12px;
  }

  .wallet-button {
    display: none;
  }

  .detail-terminal {
    padding: 10px 10px calc(80px + env(safe-area-inset-bottom));
  }

  .profile-banner {
    margin-top: -10px;
    margin-inline: -10px;
  }

  /* The menu is a bottom sheet: it slides up from the bottom edge with rounded top corners. */
  .sidebar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    flex: none;
    width: 100%;
    border-top: 1px solid var(--border);
    border-right: 0;
    border-radius: 20px 20px 0 0;
    transform: translateY(102%);
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0s linear 0.22s;
  }

  .sidebar.collapsed {
    flex: none;
    width: 100%;
  }

  .sidebar.mobile-open {
    transform: translateY(0);
    visibility: visible;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
    transition: transform 0.22s ease;
  }

  .sidebar-inner {
    position: static;
    max-height: 78vh;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .sidebar-inner::before,
  .search-dialog::before,
  .wallet-popover::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: 36px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 999px;
    background: var(--border);
  }

  .sidebar-nav {
    padding: 8px 10px 4px;
  }

  .sidebar.collapsed .sidebar-nav a span {
    display: inline;
  }

  .sidebar-footer {
    display: none;
  }

  .sheet-close {
    display: block;
    margin: 4px 10px 12px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-raised);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }

  .sidebar-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 39;
    background: rgba(0, 0, 0, 0.55);
  }

  /* The dock hides behind every bottom sheet: the menu, search and wallet dialogs. */
  body.menu-open .mobile-dock,
  body:has(#walletPopoverBackdrop:not([hidden])) .mobile-dock,
  body:has(#postDialogBackdrop:not([hidden])) .mobile-dock,
  body:has(#replyThreadDialogBackdrop:not([hidden])) .mobile-dock,
  body:has(#searchDialogBackdrop:not([hidden])) .mobile-dock {
    display: none;
  }

  .mobile-dock {
    position: fixed;
    left: 50%;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 15;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    width: min(calc(100% - 16px), 400px);
    transform: translateX(-50%);
    border: 1px solid var(--border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    padding: 4px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(14px);
  }

  .dock-item {
    display: flex;
    min-width: 0;
    height: 40px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 0 4px;
    text-decoration: none;
    cursor: pointer;
  }

  .dock-item svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .dock-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dock-item[aria-current="page"] {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
  }

  #dockWalletText {
    font-size: 11px;
  }

  .dock-avatar {
    display: grid;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--avatar-bg);
    color: var(--avatar-fg);
    font-size: 9px;
    font-weight: 800;
  }

  .dock-avatar[hidden] {
    display: none;
  }

  .dock-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Popups: full-width bottom sheets with rounded top corners, flush with the screen bottom. */
  .search-dialog-backdrop,
  .wallet-popover-backdrop {
    align-items: flex-end;
    justify-content: center;
    padding: 0;
  }

  .search-dialog,
  .wallet-popover {
    width: 100%;
    max-height: 88vh;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 20px 20px 0 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .search-dialog {
    padding-top: 0;
  }

  .search-dialog::before {
    margin-bottom: 10px;
  }

  .wallet-popover::before {
    margin: -6px auto 0;
  }
}

@media (max-width: 374px) {
  .detail-terminal {
    padding: 10px;
  }

  .brand-name {
    font-size: 14px;
  }
}