:root {
  color-scheme: dark;
  --bg: #0a0e13;
  --card: #12181f;
  --muted: #8b9bac;
  --text: #e8f0f7;
  --accent: #3d9eff;
  --accent-2: #7bc7ff;
  --danger: #ff6b6b;
  --ok: #51d88a;
  --warn: #ffb454;
  --border: #1f2937;
  --shadow: 0 10px 30px rgba(0, 0, 0, .4);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, .5);
  --glow: 0 0 20px rgba(61, 158, 255, .15);
}

* {
  box-sizing: border-box
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: linear-gradient(135deg, rgba(18, 24, 31, .95), rgba(12, 16, 22, .92));
  backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .3)
}

.brand {
  font-weight: 700;
  letter-spacing: .5px;
  font-size: 1.1rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.status {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 500
}

.pump-ws-status {
  font-size: .85rem;
  margin-left: -2px;
  cursor: help;
  user-select: none;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}

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

/* Platform controls */
.platform-controls,
.buy-amount-controls {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.platform-label,
.buy-amount-label {
  font-size: .7rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px
}

.platform-select,
.buy-amount-input {
  background: rgba(18, 24, 31, .6);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: .9rem;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s;
  backdrop-filter: blur(8px);
  font-weight: 500
}

.platform-select:hover,
.buy-amount-input:hover {
  background: var(--card);
  border-color: var(--accent)
}

.platform-select:focus,
.buy-amount-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(61, 158, 255, .15)
}

.buy-amount-input {
  width: 100px;
  font-family: monospace
}

.buy-amount-input::-webkit-inner-spin-button,
.buy-amount-input::-webkit-outer-spin-button {
  opacity: 1
}

/* Buy amount (header) */
.buy-amount-controls {
  display: grid;
  grid-template-columns: repeat(6, auto);
  column-gap: 6px;
  row-gap: 4px;
  align-items: center
}

.buy-amount-controls .buy-amount-label {
  grid-column: 1 / -1
}

.buy-amount-btn {
  background: rgba(18, 24, 31, .6);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: .85rem;
  font-weight: 700;
  min-width: 38px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
  line-height: 1
}

.buy-amount-btn:hover {
  background: var(--card);
  border-color: #2a3847
}

.buy-amount-btn.active {
  background: linear-gradient(135deg, var(--accent), #1a8cd8);
  border-color: #1a8cd8;
  color: #fff;
  box-shadow: 0 4px 12px rgba(61, 158, 255, .25)
}

.buy-amount-unit {
  color: var(--muted);
  font-size: .85rem;
  font-weight: 600;
  margin-left: 4px
}

/* Buy amount presets in modals */
.preset-group {
  display: flex;
  gap: 6px;
  align-items: center
}

.preset-btn {
  background: #0e1420;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: .85rem;
  font-weight: 700;
  min-width: 36px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s
}

.preset-btn:hover {
  background: var(--card);
  border-color: #2a3847
}

.preset-btn.active {
  background: linear-gradient(135deg, var(--accent), #1a8cd8);
  border-color: #1a8cd8;
  color: #fff
}

/* Platform tabs (modal button group) */
.platform-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px
}

.platform-tab {
  background: #0e1420;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: .82rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
  flex: 1 1 auto;
  min-width: 60px;
  text-align: center
}

.platform-tab:hover {
  background: var(--card);
  border-color: #2a3847
}

.platform-tab.active {
  background: linear-gradient(135deg, var(--accent), #1a8cd8);
  border-color: #1a8cd8;
  color: #fff;
  box-shadow: 0 3px 10px rgba(61, 158, 255, .25)
}

/* Responsive: stack slightly on very small widths */
@media (max-width: 400px) {
  .platform-tab {
    padding: 6px 10px;
    font-size: .78rem;
    min-width: 50px
  }
}

/* Header platform tabs - smaller variant for app header */
.header-platform-tabs {
  margin-top: 0;
  gap: 4px
}

.header-platform-tabs .platform-tab {
  padding: 5px 10px;
  font-size: .78rem;
  min-width: 40px;
  flex: 0 0 auto
}

.dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--warn);
  box-shadow: 0 0 16px rgba(255, 180, 84, .6);
  animation: pulse-dot 2s ease-in-out infinite
}

@keyframes pulse-dot {

  0%,
  100% {
    box-shadow: 0 0 16px rgba(255, 180, 84, .6)
  }

  50% {
    box-shadow: 0 0 24px rgba(255, 180, 84, .9)
  }
}

.main {
  /* Tightened from 1250px → 1180px per client feedback. Still wide enough
   * to show full tweet text + 2-card suggestion panel without truncation. */
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px
}

.banner {
  /* Sticky at top of viewport per user request — was scrolling out of view.
     Now stays visible regardless of feed scroll position. */
  position: fixed;
  top: 32px;          /* below the dry-run banner if active */
  left: 50%;
  transform: translateX(-50%);
  z-index: 9998;
  max-width: 90vw;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(14, 20, 32, .95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text, #e7e0ff);
  font-size: .9rem;
  line-height: 1.3;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.banner[hidden] {
  display: none;
}
/* When dry-run banner is active, push the notification down so they don't overlap. */
body.dry-run-active .banner {
  top: 50px;
}

.feed {
  display: flex;
  flex-direction: column;
  gap: 16px
}

/* Pinned feed section (high priority tweets) */
#pinnedFeed:empty {
  display: none
}

/* #5e fix (2026-05-03): pinned-card styles applied via class instead of
   inline styles — inline border/box-shadow was clobbering follow-event /
   suspend / liked-tweet card-specific border-left accents and they never
   came back when the card was un-pinned (because we restored to ''). */
.pinned-glow {
  border: 2px solid #5b8aff !important;
  box-shadow: 0 0 15px rgba(91, 138, 255, 0.3) !important;
  position: relative;
}

#pinnedFeed {
  border: 1px solid rgba(91, 138, 255, 0.3);
  background: rgba(91, 138, 255, 0.04);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 8px;
  position: relative;
  box-shadow: 0 0 20px rgba(91, 138, 255, 0.08);
  animation: pinnedGlow 3s ease-in-out infinite
}

@keyframes pinnedGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(91, 138, 255, 0.08) }
  50% { box-shadow: 0 0 28px rgba(91, 138, 255, 0.15) }
}

#pinnedFeed::before {
  content: '📌 PINNED';
  position: absolute;
  top: -10px;
  left: 16px;
  background: #5b8aff;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 2px 10px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(91, 138, 255, 0.4);
  z-index: 5
}

/* Row layout: tweet on the left, suggestions on the right.
 * Tweet column gets more weight (1.5fr vs 1fr) so long tweets fill horizontally
 * instead of growing vertically. Suggestions panel keeps a reasonable minimum
 * so the cards stay readable. */
.tweet-row {
  display: grid;
  /* Tweet card narrowed from 1.5fr → 1.2fr (~52%) so portrait images and
     short tweets don't leave a wall of empty black space on the right.
     Suggestions panel gets the recovered width. */
  grid-template-columns: minmax(0, 1.2fr) minmax(380px, 1fr);
  gap: 16px;
  align-items: start;
  animation: fadeIn .3s ease-out
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

/* Suggestions panel (separate card, not inside tweet card) */
.sugg-panel {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 16px;
  min-height: 64px;
  transition: all .3s ease;
  overflow: hidden
}

.sugg-panel:hover {
  box-shadow: var(--shadow-lg), var(--glow)
}

.sugg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: .9rem
}

.sugg-head .title {
  font-weight: 700;
  color: var(--text);
  font-size: .95rem
}

.sugg-status {
  color: var(--muted);
  font-size: .85rem;
  font-weight: 500
}

.sugg-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%
}

.sugg-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--border);
  background: #0e1420;
  border-radius: 12px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 0;
  position: relative;
  min-height: 94px;
}

.sugg-item:hover {
  background: #141c28;
  border-color: #3b82f644;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 10px rgba(59, 130, 246, 0.05);
}

.sugg-card-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.sugg-buy-group {
  display: flex;
}

.sugg-buy-btn {
  min-width: 64px;
  height: 34px;
  padding: 0 16px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 7px;
  color: #f87171;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.3px;
}

.sugg-buy-btn:hover {
  background: rgba(239, 68, 68, 0.3);
  border-color: rgba(239, 68, 68, 0.7);
  color: #fff;
}

.sugg-buy-btn:active {
  transform: scale(0.93);
}

.sugg-buy-btn:disabled {
  opacity: 0.4;
  cursor: wait;
}

.sugg-card-body {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.sugg-item.auto-deployed {
  cursor: default
}

.sugg-item.auto-deployed:hover {
  background: #0e1420;
  border-color: var(--border);
  transform: none;
  box-shadow: none
}

.token-logo {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--border);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  cursor: pointer;
  transition: all .2s
}

.token-logo:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(61, 158, 255, .2)
}

.sugg-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
  align-self: stretch;
}

.sugg-name {
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.25;
  color: #f8fafc;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
}

.sugg-ticker {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.3;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word
}

/* Google image popup with arrow */
.google-popup {
  position: absolute;
  z-index: 1000;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  animation: popupSlide .2s ease-out
}

@keyframes popupSlide {
  from {
    opacity: 0;
    transform: translateY(-10px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.google-popup-arrow {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--accent);
  filter: drop-shadow(0 -1px 2px rgba(61, 158, 255, .4))
}

.google-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: all .2s;
  flex-shrink: 0
}

.google-thumb:hover {
  border-color: var(--accent);
  transform: scale(1.15);
  box-shadow: 0 4px 16px rgba(61, 158, 255, .4)
}

.auto-deploy-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border: 1px solid #15803d;
  color: white;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 5px;
  font-size: .7rem;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(34, 197, 94, .4);
  animation: pulse 2s ease-in-out infinite;
  z-index: 2
}

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 2px 8px rgba(34, 197, 94, .3)
  }

  50% {
    box-shadow: 0 2px 12px rgba(34, 197, 94, .6)
  }
}

.deploy-status-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  border: 1px solid;
  color: white;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 5px;
  font-size: .7rem;
  line-height: 1;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 3px
}

.deploy-status-badge.deploying {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border-color: #1e40af;
  box-shadow: 0 2px 6px rgba(59, 130, 246, .4)
}

.deploy-status-badge.success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-color: #15803d;
  box-shadow: 0 2px 6px rgba(34, 197, 94, .4);
  animation: pulse 2s ease-in-out infinite
}

.deploy-status-badge.error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border-color: #991b1b;
  box-shadow: 0 2px 6px rgba(239, 68, 68, .4)
}

.spinner {
  width: 10px;
  height: 10px;
  border: 2px solid rgba(255, 255, 255, .3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin .6s linear infinite
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

/* Monogram logo placeholder */
.token-logo.monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  position: relative;
  overflow: hidden;
  background: #000000;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .08)
}

.token-logo.monogram .mono {
  position: relative;
  z-index: 1;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0;
  background: linear-gradient(90deg, var(--m1), var(--m2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
  line-height: 1.15;
  padding: 2px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip
}

/* ⏸️ Feed Pause Indicator Pill */
.feed-paused-indicator {
  position: fixed;
  top: 80px; /* Below header */
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: rgba(13, 19, 28, 0.9);
  backdrop-filter: blur(8px);
  border: 1px border rgba(245, 158, 11, 0.4);
  color: #f59e0b;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1000;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.feed-paused-indicator.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  border-color: rgba(245, 158, 11, 0.6);
  animation: pulse-pause 2s infinite ease-in-out;
}

@keyframes pulse-pause {
  0%, 100% { border-color: rgba(245, 158, 11, 0.4); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); }
  50% { border-color: rgba(245, 158, 11, 0.8); box-shadow: 0 4px 20px rgba(245, 158, 11, 0.2); }
}

/* Suggestion skeletons */
.sugg-item.skeleton {
  cursor: default;
  opacity: .9
}

.sugg-item.skeleton:hover {
  background: #0e1420;
  border-color: var(--border);
  transform: none;
  box-shadow: none
}

.token-logo.skeleton-logo {
  background: #0f1724;
  border: 1px solid #223146
}

.skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: #0f1724;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden
}

.skeleton-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent);
  animation: shimmer 1.2s infinite
}

.skeleton-line.w-70 {
  width: 70%
}

.skeleton-line.w-40 {
  width: 40%
}

.card {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 18px;
  transition: all .3s ease
}

.card:hover {
  border-color: #2a3f56;
  box-shadow: var(--shadow-lg), var(--glow);
  transform: translateY(-2px)
}

/* Quick Name/Ticker bar below each tweet card */
.quick-name-bar {
  transition: border-color .3s ease;
}

.quick-name-bar input:focus {
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, .2);
}

.quick-name-bar input::placeholder {
  color: #475569;
  font-weight: 500;
}

.header {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 10px
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  object-fit: cover;
  background: #0e1420;
  border: 2px solid var(--border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  transition: all .2s ease
}

.avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35)
}

.h-meta {
  display: flex;
  flex-direction: column;
  gap: 2px
}

.h-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}

.name {
  font-weight: 700;
  font-size: 1rem
}

.handle {
  color: var(--muted);
  font-weight: 500;
  font-size: .92rem
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8dcaff;
  background: #0f2740;
  border: 1px solid #1b3d5f;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: .75rem;
  font-weight: 600
}

.time {
  color: var(--muted);
  font-size: .88rem;
  margin-left: auto;
  font-weight: 500;
  transition: color .2s ease
}

.time:hover {
  text-decoration: underline;
  color: var(--accent)
}

.dotsep {
  color: var(--muted)
}

.tweet-link {
  color: var(--accent);
  font-size: .9rem;
  margin-left: 8px;
  text-decoration: none
}

.tweet-link:hover {
  filter: brightness(1.2)
}

.body {
  white-space: pre-wrap;
  line-height: 1.6;
  font-size: .98rem;
  color: var(--text);
  cursor: default
}

.body a {
  color: var(--accent);
  font-weight: 500;
  transition: color .2s ease
}

.body a:hover {
  color: var(--accent-2)
}

.media-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px
}

.media-grid.cols-1 {
  grid-template-columns: 1fr
}

.media-grid.cols-2 {
  grid-template-columns: 1fr 1fr
}

.media-grid.cols-3 {
  grid-template-columns: 1fr 1fr 1fr
}

.media-grid img,
.media-grid video {
  width: 100%;
  height: 100%;
  max-height: 440px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #0e1420;
  object-fit: cover;
  /* For multi-image grids (cols-2, cols-3) anchor crop to top so headlines /
     text at the top stay visible when each tile is shorter than its image.
     Single-image posts override this entirely below — they show full picture
     at natural aspect ratio (matches X / Twitter behavior). */
  object-position: top;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
  transition: all .3s ease
}

/* Single-image post: show the FULL image at its natural aspect ratio, no
   crop. Tall portrait photos (e.g. screenshots, vertical posters) get the
   bottom of the picture preserved instead of cut off. Cap at 80vh so an
   extremely tall image doesn't push the rest of the feed off-screen. */
.media-grid.cols-1 img,
.media-grid.cols-1 video {
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  object-position: center;
}

.media-grid img:hover,
.media-grid video:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3)
}

/* Glassmorphism Centered Video Play Button */
.video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  overflow: hidden;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.3s ease;
  z-index: 10;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.play-overlay svg {
  width: 32px;
  height: 32px;
  fill: white;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.video-wrapper:hover .play-overlay {
  transform: translate(-50%, -50%) scale(1.1);
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.video-wrapper.playing .play-overlay {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
}

.video-wrapper.playing:hover .play-overlay {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}



.subtweet {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(13, 19, 28, .8);
  backdrop-filter: blur(8px);
  margin-top: 12px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15)
}

.subtweet .avatar.mini {
  width: 28px;
  height: 28px
}

.subtweet .name {
  font-size: .95rem
}

/* Nested subtweet (3rd layer): RETWEET -> QUOTE/REPLY -> ORIGINAL */
.nested-subtweet {
  border: 1px solid rgba(61, 158, 255, .25);
  border-radius: 12px;
  background: rgba(18, 28, 42, .7);
  backdrop-filter: blur(6px);
  margin-top: 10px;
  padding: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(61, 158, 255, .1)
}

.nested-subtweet .avatar.mini {
  width: 24px;
  height: 24px
}

.nested-subtweet .name {
  font-size: .9rem;
  color: #a8c5e8
}

.nested-subtweet .handle {
  font-size: .85rem
}

.nested-subtweet .body {
  font-size: .92rem;
  color: #c8d5e5
}

.card-embed {
  display: flex;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  margin-top: 12px;
  background: rgba(14, 20, 32, .8);
  backdrop-filter: blur(8px);
  transition: all .2s ease
}

.card-embed:hover {
  border-color: var(--accent);
  background: rgba(14, 20, 32, .95)
}

.card-embed img {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  border: 1px solid var(--border);
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2)
}

.card-embed .meta {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.card-embed .title {
  font-weight: 600
}

.card-embed .desc {
  color: var(--muted);
  font-size: .9rem
}

.metrics {
  display: flex;
  gap: 20px;
  color: var(--muted);
  font-size: .9rem;
  margin-top: 12px;
  font-weight: 500
}

.metric {
  display: flex;
  align-items: center;
  gap: 7px
}

.metric b {
  color: var(--text)
}

.small {
  font-size: .9rem;
  color: var(--muted)
}

.event {
  border-left: 4px solid #243348
}

.event.follow {
  border-left-color: var(--ok)
}

.event.profile {
  border-left-color: var(--accent)
}

.event.deleted {
  border-left-color: var(--danger)
}

/* ======================== PROFILE UPDATE CARD ======================== */
.profile-update-card {
  padding: 20px;
  background: linear-gradient(135deg, rgba(18, 24, 31, 0.95), rgba(15, 22, 32, 0.9))
}

.profile-update-header {
  font-size: .95rem;
  color: var(--muted);
  margin-bottom: 16px;
  font-weight: 600
}

.profile-content {
  display: flex;
  gap: 16px;
  margin-bottom: 20px
}

.profile-avatar-container {
  flex-shrink: 0
}

.profile-update-avatar {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
  background: #0e1420;
  border: 2px solid var(--border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3)
}

.profile-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.profile-name-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap
}

.profile-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text)
}

.profile-handle {
  font-size: .95rem;
  color: var(--muted);
  font-weight: 500
}

.profile-bio {
  font-size: .92rem;
  color: var(--text);
  line-height: 1.5;
  max-width: 100%;
  word-wrap: break-word
}

.profile-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap
}

.profile-stat {
  font-size: .88rem;
  color: var(--muted)
}

.profile-stat b {
  color: var(--text);
  font-weight: 700
}

.profile-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap
}

.profile-link {
  font-size: .85rem;
  color: var(--accent);
  text-decoration: none;
  transition: color .2s
}

.profile-link:hover {
  color: var(--accent-2);
  text-decoration: underline
}

/* Changes section */
.profile-changes {
  background: rgba(10, 15, 22, 0.6);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px
}

.changes-title {
  font-size: .85rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 12px;
  letter-spacing: 0.5px
}

.change-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px
}

.change-row:last-child {
  margin-bottom: 0
}

.change-label {
  font-size: .8rem;
  font-weight: 700;
  color: var(--accent);
  min-width: 70px;
  letter-spacing: 0.5px
}

.change-content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1
}

.avatar-change {
  gap: 12px
}

.change-avatar {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25)
}

.change-avatar.before {
  opacity: 0.7
}

.change-avatar.after {
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(61, 158, 255, .3)
}

.change-arrow {
  font-size: 1.2rem;
  color: var(--muted);
  font-weight: 700
}

.change-item {
  font-size: .88rem;
  color: var(--muted);
  margin-bottom: 6px;
  padding-left: 16px;
  border-left: 2px solid rgba(61, 158, 255, 0.2)
}

.change-item:last-child {
  margin-bottom: 0
}

.skeleton {
  position: relative;
  overflow: hidden
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent);
  animation: shimmer 1.2s infinite
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%)
  }

  100% {
    transform: translateX(100%)
  }
}

@media (max-width:900px) {
  .tweet-row {
    grid-template-columns: 1fr
  }

  /* stack on small screens */
  .sugg-list {
    grid-template-columns: 1fr
  }

  /* single column on small screens */
}

@media (max-width:560px) {
  .main {
    padding: 8px
  }

  .card {
    padding: 12px
  }

  .card-embed {
    flex-direction: column
  }

  .card-embed img {
    width: 100%;
    height: 160px
  }
}

/* ======================== SETTINGS UI ======================== */

/* Header buttons */
.deploy-btn {
  background: linear-gradient(135deg, var(--ok), #1ea85f);
  border: 1px solid #177a44;
  color: #08140e;
  font-weight: 700;
  font-size: .95rem;
  padding: 9px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 4px 16px rgba(34, 197, 94, .2)
}

.deploy-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(34, 197, 94, .35)
}

.settings-btn {
  background: rgba(18, 24, 31, .6);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1.2rem;
  padding: 7px 13px;
  border-radius: 10px;
  cursor: pointer;
  transition: all .2s;
  backdrop-filter: blur(8px)
}

.settings-btn:hover {
  background: var(--card);
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(61, 158, 255, .15)
}

/* Auto-deploy toggle */
.auto-deploy-toggle {
  background: rgba(18, 24, 31, .6);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: .9rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(8px)
}

.auto-deploy-toggle:hover {
  background: var(--card);
  border-color: #2a3847
}

.auto-deploy-toggle[data-enabled="true"] {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-color: #15803d;
  color: white;
  box-shadow: 0 4px 16px rgba(34, 197, 94, .25)
}

.auto-deploy-toggle[data-enabled="true"]:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 20px rgba(34, 197, 94, .35)
}

.auto-deploy-toggle .toggle-icon {
  font-size: 1.1rem
}

.auto-deploy-toggle .toggle-label {
  font-size: .85rem
}

/* Cashback toggle */
.cashback-toggle {
  background: rgba(18, 24, 31, .6);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: .9rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(8px)
}

.cashback-toggle:hover {
  background: var(--card);
  border-color: #2a3847
}

.cashback-toggle[data-enabled="true"] {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: #047857;
  color: white;
  box-shadow: 0 4px 16px rgba(16, 185, 129, .25)
}

.cashback-toggle[data-enabled="true"]:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 20px rgba(16, 185, 129, .35)
}

.cashback-toggle .toggle-icon {
  font-size: 1rem
}

.cashback-toggle .toggle-label {
  font-size: .8rem
}

/* Modal overlay */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .75);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px
}

.modal[hidden] {
  display: none
}

/* Modal content */
.modal-content {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  max-width: 650px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6)
}

.article-viewer-content {
  max-width: 800px !important;
  background: linear-gradient(180deg, #151b23 0%, #0d1217 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.article-viewer-body {
  padding: 0 30px 30px 30px;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.open-on-x {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.2s;
}

.open-on-x:hover {
  opacity: 0.8;
}

.av-divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin: 0 0 20px 0;
}

.article-full-text {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #e2e8f0;
  white-space: pre-wrap;
  word-break: break-word;
}

.article-full-text h1, .article-full-text h2, .article-full-text h3 {
  color: #fff;
  margin-top: 30px;
  margin-bottom: 15px;
}

.article-full-text p {
  margin-bottom: 20px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border)
}

.modal-header h2 {
  margin: 0;
  font-size: 1.3rem
}

.close-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px
}

.close-btn:hover {
  background: #1a2430;
  color: var(--text)
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1
}

.modal-footer {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-top: 1px solid var(--border)
}

.footer-left {
  display: flex;
  gap: 8px
}

.footer-right {
  display: flex;
  gap: 12px;
  align-items: center
}

/* Settings sections */
.settings-section {
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  overflow: hidden
}

.settings-section:last-child {
  margin-bottom: 0
}

.settings-section h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px
}

.section-desc {
  margin: 0 0 16px 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.5
}

/* Collapsible sections */
.settings-section.collapsible {
  transition: all .2s ease
}

.section-header {
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(10, 14, 22, 0.3);
  transition: all .2s ease;
  user-select: none
}

.section-header:hover {
  background: rgba(10, 14, 22, 0.5)
}

.section-arrow {
  font-size: .9rem;
  color: var(--muted);
  transition: transform .2s ease;
  min-width: 12px;
  display: inline-block
}

.section-arrow.expanded {
  transform: rotate(90deg)
}

.section-content {
  padding: 0 16px;
  max-height: 0;
  overflow: hidden;
  transition: all .3s ease
}

.section-content.expanded {
  padding: 16px;
  max-height: 2000px
}

/* Form groups */
.form-group {
  margin-bottom: 16px
}

.form-group.inline {
  display: flex;
  align-items: center;
  gap: 10px
}

.form-group.horiz {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end
}

.form-group .flex-1 {
  flex: 1
}

.form-group .btn-col {
  display: flex
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: .9rem
}

.form-group input,
.form-group textarea {
  width: 100%;
  background: #0e1420;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: .95rem;
  font-family: inherit
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent)
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted)
}

.form-group .hint {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.4
}

.list-manager .hint {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.4
}

/* Account list manager */
.list-manager {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.input-row {
  display: flex;
  gap: 8px
}

.input-row input {
  flex: 1;
  background: #0e1420;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: .9rem
}

.input-row input:focus {
  outline: none;
  border-color: var(--accent)
}

/* Account list */
.account-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto
}

.account-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0e1420;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px
}

.account-item span {
  color: var(--text);
  font-size: .9rem
}

/* Buttons */
.add-btn,
.save-btn {
  background: linear-gradient(135deg, var(--accent), #1a8cd8);
  border: 1px solid #1a8cd8;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: .9rem;
  transition: all .2s
}

.add-btn:hover,
.save-btn:hover {
  filter: brightness(1.15);
  transform: translateY(-1px)
}

.cancel-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: .9rem;
  transition: all .2s
}

.cancel-btn:hover {
  background: var(--bg);
  border-color: #223146
}

.remove-btn {
  background: transparent;
  border: 1px solid #3d2020;
  color: #ff8888;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: .85rem;
  transition: all .2s
}

.remove-btn:hover {
  background: #2a1616;
  border-color: #5a2020
}

/* Scrollbar styling for account lists */
.account-list::-webkit-scrollbar {
  width: 8px
}

.account-list::-webkit-scrollbar-track {
  background: #0e1420;
  border-radius: 4px
}

.account-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px
}

.account-list::-webkit-scrollbar-thumb:hover {
  background: #2a3847
}

/* Wallet management */
.wallet-manager {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.key-input-wrapper {
  display: flex;
  gap: 8px;
  align-items: stretch
}

.key-input-wrapper input {
  flex: 1
}

.toggle-key-btn {
  background: #0e1420;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 0 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all .2s
}

.toggle-key-btn:hover {
  background: var(--card);
  border-color: var(--accent);
  color: var(--accent)
}

.wallet-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px
}

.secondary-btn {
  background: #0e1420;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: .9rem;
  transition: all .2s;
  flex: 1
}

.secondary-btn:hover {
  background: var(--card);
  border-color: #223146
}

.danger-btn {
  background: #2a1616;
  border: 1px solid #5a2020;
  color: #ff8888;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: .9rem;
  transition: all .2s;
  flex: 1
}

.danger-btn:hover {
  background: #3d2020;
  border-color: #8a3030
}

/* Deployment parameters grid */
.params-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

/* Drop zone */
.drop-zone {
  border: 2px dashed #2a3847;
  background: #0e1420;
  border-radius: 12px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  text-align: center;
  color: var(--muted)
}

.drop-zone.dragover {
  border-color: var(--accent);
  color: var(--accent);
  background: #0f1724
}

.dz-instructions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center
}

/* Image preview */
.image-preview {
  width: 200px;
  height: 200px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #0e1420;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background-size: cover;
  background-position: center;
  font-size: .9rem;
  margin: 0 auto
}

/* Image actions */
.image-actions {
  /* R10 wrap fix: was display:flex with no wrap → 7 buttons squeezed,
     History got truncated. Now wraps to 2+ rows so all buttons visible. */
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px
}

.img-action-btn {
  /* min-width replaces flex:1 so buttons keep readable size on wrap.
     ~110px gives 5-6 buttons per row depending on container width. */
  flex: 0 1 calc(33.333% - 8px);
  min-width: 110px;
  background: #0e1420;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: .9rem;
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px
}

.img-action-btn:hover {
  background: var(--card);
  border-color: var(--accent)
}

.img-action-btn .icon {
  font-size: 1.1rem
}

/* Action buttons */
.action-btn {
  padding: 8px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 600;
  transition: all .2s;
  border: 1px solid transparent
}

.letter-btn {
  background: linear-gradient(135deg, #ff8c42, #ff6b1a);
  border-color: #e85d0a;
  color: white
}

.letter-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px)
}

.ascii-btn {
  background: #1a1a1a;
  border-color: #2a2a2a;
  color: var(--text)
}

.ascii-btn:hover {
  background: #252525;
  border-color: #3a3a3a
}

.launch-btn {
  background: linear-gradient(135deg, #5b8aff, #3a6edb);
  border: 1px solid #2a5ac7;
  color: white;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 16px rgba(91, 138, 255, .25)
}

.launch-btn:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(91, 138, 255, .4)
}

@media (max-width:720px) {
  .modal-content {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0
  }

  .modal {
    padding: 0
  }

  .params-grid {
    grid-template-columns: 1fr
  }
}

/* Image Library Gallery */
.image-gallery {
  margin-top: 20px
}

.gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px
}

.gallery-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text)
}

.image-count {
  display: inline-block;
  background: var(--accent);
  color: white;
  font-size: .8rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 6px
}

.refresh-library-btn {
  background: #0e1420;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: .85rem;
  transition: all .2s
}

.refresh-library-btn:hover {
  background: var(--card);
  border-color: var(--accent)
}

.refresh-progress {
  margin-bottom: 12px
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: #0e1420;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .3s ease
}

.progress-text {
  font-size: .85rem;
  color: var(--muted);
  margin-top: 6px;
  text-align: center
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  background: #0e1420
}

.image-grid::-webkit-scrollbar {
  width: 8px
}

.image-grid::-webkit-scrollbar-track {
  background: #0e1420;
  border-radius: 4px
}

.image-grid::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px
}

.image-grid::-webkit-scrollbar-thumb:hover {
  background: #2a3847
}

.image-tile {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--card);
  cursor: pointer;
  transition: all .2s
}

.image-tile:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(61, 158, 255, .2)
}

.image-thumbnail {
  width: 100%;
  height: 120px;
  background-size: cover;
  background-position: center;
  background-color: #0e1420
}

.image-info {
  padding: 8px
}

.image-filename {
  font-size: .8rem;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px
}

.image-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 4px
}

.keyword-chip {
  display: inline-block;
  background: rgba(61, 158, 255, .15);
  border: 1px solid rgba(61, 158, 255, .3);
  color: var(--accent);
  font-size: .7rem;
  padding: 2px 6px;
  border-radius: 4px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

/* Keyword Editor Modal */
.keyword-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .8);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 101;
  padding: 20px
}

.keyword-modal[hidden] {
  display: none
}

.keyword-modal-content {
  background: var(--card);
  border: 2px solid var(--accent);
  border-radius: 12px;
  max-width: 500px;
  width: 100%;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6)
}

.keyword-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px
}

.keyword-modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text)
}

.keyword-preview {
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-bottom: 16px
}

.keyword-filename {
  font-size: .9rem;
  color: var(--muted);
  margin-bottom: 12px;
  word-break: break-all
}

.keyword-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  min-height: 32px
}

.keyword-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(61, 158, 255, .2);
  border: 1px solid rgba(61, 158, 255, .4);
  color: var(--accent);
  font-size: .85rem;
  padding: 4px 8px;
  border-radius: 6px
}

.keyword-tag.default {
  background: rgba(81, 216, 138, .2);
  border-color: rgba(81, 216, 138, .4);
  color: var(--ok)
}

.keyword-remove {
  background: transparent;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: .9rem;
  padding: 0;
  margin-left: 2px;
  transition: color .2s
}

.keyword-remove:hover {
  color: #ff6b6b
}

.keyword-add-row {
  display: flex;
  gap: 6px
}

.keyword-input {
  flex: 1;
  background: #0e1420;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: .9rem
}

.keyword-input:focus {
  outline: none;
  border-color: var(--accent)
}

.keyword-add-btn {
  background: linear-gradient(135deg, var(--accent), #1a8cd8);
  border: 1px solid #1a8cd8;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  font-size: .9rem;
  transition: all .2s
}

.keyword-add-btn:hover {
  filter: brightness(1.15)
}

/* Edit popup for suggestions */
.edit-popup {
  background: var(--card);
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 250px;
  animation: popupFadeIn 0.2s ease-out;
}

@keyframes popupFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.edit-label {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: -6px;
}

.edit-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.95rem;
  color: var(--text);
  font-family: inherit;
  transition: all 0.2s;
}

.edit-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

.edit-input::placeholder {
  color: var(--muted);
  opacity: 0.6;
}

/* ======================== IMAGE PICKER MODAL ======================== */
.picker-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px
}

.picker-tab {
  background: rgba(18, 24, 31, .6);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: .9rem;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  transition: all .2s;
  border-bottom: none
}

.picker-tab:hover {
  background: var(--card);
  border-color: var(--accent)
}

.picker-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  box-shadow: 0 4px 12px rgba(61, 158, 255, .25)
}

.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  max-height: 500px;
  overflow-y: auto;
  padding: 4px
}

.picker-item {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  border: 2px solid var(--border);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: all .2s;
  position: relative;
  overflow: hidden
}

.picker-item:hover {
  border-color: var(--accent);
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(61, 158, 255, .3)
}

.picker-item::after {
  content: attr(data-filename);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, .8));
  color: white;
  font-size: .7rem;
  padding: 6px 4px 4px;
  text-align: center;
  opacity: 0;
  transition: opacity .2s;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden
}

.picker-item:hover::after {
  opacity: 1
}

.picker-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted)
}

/* Task Image Cards (alternative style) */
.image-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
  transition: all .2s;
  display: flex;
  flex-direction: column
}

.image-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(61, 158, 255, .2)
}

.image-card-preview {
  width: 100%;
  height: 120px;
  background-size: cover;
  background-position: center;
  background-color: #0e1420
}

.image-card-info {
  padding: 10px;
  flex: 1
}

.image-card-name {
  font-size: .82rem;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px
}

.image-card-keywords {
  font-size: .75rem;
  color: var(--muted);
  font-weight: 500
}

.image-card-edit-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(12, 16, 20, .85);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1.1rem;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .2s;
  backdrop-filter: blur(4px)
}

.image-card-edit-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(61, 158, 255, .3)
}

/* ======================== SIGNALORY EVENT CARDS ======================== */
/* Liked Tweet Event - Purple theme */
.card.liked-tweet-event {
  border-left: 4px solid rgb(168, 85, 247) !important;
  background: rgba(168, 85, 247, 0.03) !important;
}

.card.liked-tweet-event:hover {
  background: rgba(168, 85, 247, 0.08) !important;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.2);
}

/* Following Event - Blue theme */
.card.following-event {
  border-left: 4px solid rgb(59, 130, 246) !important;
  background: rgba(59, 130, 246, 0.03) !important;
}

.card.following-event:hover {
  background: rgba(59, 130, 246, 0.08) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

/* Watched Removed Event - Red theme */
.card.watched-removed-event {
  border-left: 4px solid rgb(239, 68, 68) !important;
  background: rgba(239, 68, 68, 0.03) !important;
}

.card.watched-removed-event:hover {
  background: rgba(239, 68, 68, 0.08) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

/* Profile Update Event - Amber theme (already has styling, this enhances it) */
.card.profile-update:hover {
  background: rgba(245, 158, 11, 0.08) !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

/* Event card text styling */
.liked-tweet-event .time,
.following-event .time,
.watched-removed-event .time,
.profile-update .time {
  opacity: 0.7;
}

/* ======================== AVATAR DISPLAYS IN EVENT CARDS ======================== */
/* Following event avatars */
.following-event img {
  object-fit: cover;
}

/* Profile update avatars */
.profile-update img {
  object-fit: cover;
}

/* Liked tweet quoted content */
.liked-tweet-event img {
  max-height: 300px;
  object-fit: contain;
}

/* ======================== MULTI-PLATFORM FEED BADGES ======================== */

/* Platform badge - shown at top of multi-platform cards */
.platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.platform-badge span {
  font-weight: 700;
}

/* Truth Social - Blue theme */
.platform-badge-truth {
  background: linear-gradient(135deg, rgba(29, 161, 242, 0.15), rgba(29, 161, 242, 0.08));
  border: 1px solid rgba(29, 161, 242, 0.4);
  color: #1DA1F2;
}

/* Instagram - Gradient theme */
.platform-badge-instagram {
  background: linear-gradient(135deg, rgba(240, 148, 51, 0.12), rgba(188, 24, 136, 0.12));
  border: 1px solid rgba(225, 48, 108, 0.4);
  color: #E1306C;
}

/* Twitter/X - Dark theme */
.platform-badge-twitter {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e8f0f7;
}

/* Truth Social post card */
.card.truth-post {
  border-left: 4px solid #1DA1F2;
  background: linear-gradient(135deg, rgba(18, 24, 31, 0.95), rgba(29, 161, 242, 0.03));
}

.card.truth-post:hover {
  background: linear-gradient(135deg, rgba(18, 24, 31, 0.98), rgba(29, 161, 242, 0.08));
  box-shadow: 0 8px 24px rgba(29, 161, 242, 0.15);
}

/* Instagram post card */
.card.instagram-post {
  border-left: 4px solid #E1306C;
  background: linear-gradient(135deg, rgba(18, 24, 31, 0.95), rgba(225, 48, 108, 0.03));
}

.card.instagram-post:hover {
  background: linear-gradient(135deg, rgba(18, 24, 31, 0.98), rgba(225, 48, 108, 0.08));
  box-shadow: 0 8px 24px rgba(225, 48, 108, 0.15);
}

/* Instagram post media constraints — single-item posts. */
.card.instagram-post .media {
  max-height: 400px;
  overflow: hidden;
  border-radius: 8px;
}

.card.instagram-post .media img,
.card.instagram-post .media video {
  max-height: 400px;
  width: 100%;
  object-fit: contain;
  border-radius: 8px;
}

/* Carousel posts (2+ images) — switch to a grid so every image is visible.
   Removes the 400px overflow clip that was hiding all but the first image. */
.card.instagram-post .media.media-carousel {
  max-height: none;
  overflow: visible;
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.card.instagram-post .media.media-carousel img,
.card.instagram-post .media.media-carousel video {
  max-height: 220px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
/* For 3+ items, allow rows of three. */
.card.instagram-post .media.media-carousel.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.card.instagram-post .media.media-carousel.cols-3 img,
.card.instagram-post .media.media-carousel.cols-3 video {
  max-height: 180px;
}

/* Media type badge (for Instagram) */
.media-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(225, 48, 108, 0.12);
  border: 1px solid rgba(225, 48, 108, 0.3);
  color: #E1306C;
  font-size: .7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 6px;
}

/* Multi-platform connection status indicator */
#multiPlatformStatus {
  transition: all 0.3s ease;
}

#multiPlatformDot {
  transition: background 0.3s ease;
}

#multiPlatformDot.connected {
  background: #51d88a !important;
  box-shadow: 0 0 8px rgba(81, 216, 138, 0.6);
}

#multiPlatformDot.connecting,
#multiPlatformDot.reconnecting {
  background: #ffb454 !important;
  animation: pulse-dot 1.5s ease-in-out infinite;
}

#multiPlatformDot.disconnected {
  background: #8b92a8 !important;
}

#multiPlatformStatusText.connected {
  color: #51d88a !important;
}

#multiPlatformStatusText.connecting,
#multiPlatformStatusText.reconnecting {
  color: #ffb454 !important;
}

/* ============================================
   COIN PRESET STYLES
   ============================================ */

/* Preset Form Card */
.preset-form-card {
  background: rgba(14, 20, 32, 0.8);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}

.preset-form-title {
  text-align: center;
  font-weight: 700;
  margin: 0 0 16px 0;
  color: var(--text);
}

.preset-label {
  display: block;
  text-align: center;
  color: var(--text);
  font-size: 13px;
  margin: 12px 0 6px;
  font-weight: 500;
}

.preset-form-card input,
.preset-form-card select {
  width: 100%;
  background: #0e1420;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: .95rem;
  font-family: inherit;
}

.preset-form-card input:focus,
.preset-form-card select:focus {
  outline: none;
  border-color: var(--accent);
}

.preset-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Keybind */
.keybind-row {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.keybind-display {
  background: #1a2332;
  color: #58a6ff;
  border: 1px solid #2d4a6a;
  padding: 8px 20px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  min-width: 100px;
}

.keybind-display.listening {
  background: #2d4a6a;
  animation: pulse-keybind 1s ease-in-out infinite;
}

@keyframes pulse-keybind {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(88, 166, 255, 0.4);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(88, 166, 255, 0);
  }
}

.set-keybind-btn {
  background: #2563eb;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}

.set-keybind-btn:hover {
  background: #3b82f6;
}

/* Add Preset Button */
.add-preset-btn {
  width: 100%;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 12px;
  font-size: 15px;
  transition: all 0.2s;
}

.add-preset-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.35);
}

/* Preset List */
.preset-list-header {
  text-align: center;
  font-weight: 600;
  margin: 24px 0 12px;
  color: var(--text);
}

.preset-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.preset-card {
  background: #0e1420;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  position: relative;
}

.preset-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.preset-card-name {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 6px;
}

.preset-keybind {
  background: #1e3a5f;
  color: #58a6ff;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
  display: inline-block;
}

.preset-card-actions {
  display: flex;
  gap: 8px;
}

.preset-card-actions button {
  background: transparent;
  border: none;
  color: #8b949e;
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
  transition: all 0.2s;
}

.preset-card-actions button:hover {
  color: var(--text);
}

.preset-card-actions button.delete-btn:hover {
  color: var(--danger);
}

.preset-card-info {
  margin-top: 12px;
  text-align: center;
  color: #8b949e;
  font-size: 12px;
  line-height: 1.6;
}

/* ========================================
   SELL PANEL SIDE DRAWER
   ======================================== */

/* Sell button in header */
.sell-btn {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border: 1px solid #15803d;
  color: white;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;
}

.sell-btn:hover {
  background: linear-gradient(135deg, #16a34a, #15803d);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

/* Side drawer container */
.sell-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  height: 100vh;
  background: linear-gradient(180deg, #0f1419 0%, #0a0e13 100%);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
  z-index: 100;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.sell-drawer:not([hidden]) {
  transform: translateX(0);
}

.sell-drawer[hidden] {
  display: flex !important;
  transform: translateX(100%);
  pointer-events: none;
}

/* Drawer header */
.sell-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(18, 24, 31, 0.8);
  backdrop-filter: blur(8px);
}

.sell-drawer-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

.sell-drawer-header .close-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.8rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.2s;
}

.sell-drawer-header .close-btn:hover {
  color: var(--danger);
}

/* Token list */
.sell-token-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Empty state */
.sell-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--muted);
  text-align: center;
}

.sell-empty-state p {
  margin: 0 0 8px 0;
  font-size: 1rem;
  font-weight: 600;
}

.sell-empty-state small {
  font-size: 0.85rem;
  opacity: 0.7;
}

/* Token card - base */
.sell-token-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s;
}

.sell-token-card:hover {
  border-color: #2a4a6a;
}

/* Token card - collapsed */
.sell-token-card.collapsed {
  cursor: pointer;
}

.sell-token-card.collapsed .sell-card-header {
  padding: 12px 14px;
}

.sell-token-card.collapsed .sell-card-body {
  display: none;
}

.sell-token-card.collapsed:hover {
  background: #141c28;
}

/* Token card - expanded */
.sell-token-card.expanded {
  border-color: var(--accent);
  box-shadow: 0 4px 20px rgba(61, 158, 255, 0.15);
}

.sell-token-card.expanded .expand-icon {
  transform: rotate(90deg);
}

/* Card header */
.sell-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  cursor: pointer;
}

.expand-icon {
  color: var(--muted);
  font-size: 0.75rem;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.sell-token-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #0e1420;
  border: 1px solid var(--border);
  flex-shrink: 0;
  object-fit: cover;
}

.sell-token-info {
  flex: 1;
  min-width: 0;
}

.sell-token-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sell-token-ticker {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 500;
}

.sell-token-balance {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ok);
  text-align: right;
  white-space: nowrap;
}

.sell-token-balance-mini {
  font-size: 0.75rem;
  color: var(--muted);
}

/* Card body (expanded only) */
.sell-card-body {
  padding: 0 14px 14px;
  border-top: 1px solid var(--border);
}

.sell-token-address {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  padding: 8px 10px;
  background: #0a0e13;
  border-radius: 6px;
  font-family: monospace;
  font-size: 0.8rem;
  color: var(--muted);
}

.sell-token-address span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sell-copy-btn {
  background: transparent;
  border: none;
  color: var(--accent);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 0.9rem;
  transition: transform 0.2s;
}

.sell-copy-btn:hover {
  transform: scale(1.1);
}

/* Sell presets grid - 2 rows of 5 pills */
.sell-presets-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 12px 0;
}

.sell-preset-pill {
  background: #0d0d14;
  border: 1px solid #3a3a52;
  color: #e5e5e5;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 10px 2px;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  min-width: 0;
}

.sell-preset-pill:hover {
  background: #1a2a3a;
  border-color: #22c55e;
  color: #22c55e;
  transform: scale(1.08);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
}

.sell-preset-pill:disabled {
  opacity: 0.7;
  cursor: wait;
}

.sell-preset-pill.loading {
  background: #2a2a4e;
  color: #888;
  animation: pulse 1s infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 0.7;
  }

  50% {
    opacity: 1;
  }
}

.sell-preset-pill.success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-color: #15803d;
  color: white;
}

.sell-preset-pill.error {
  background: #dc2626;
  border-color: #b91c1c;
  color: white;
}

/* Legacy preset button styles (keep for backward compatibility) */
.sell-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 12px 0;
}

.sell-preset-btn {
  background: #0e1420;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 10px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.sell-preset-btn:hover {
  background: #1a2636;
  border-color: #2a4a6a;
}

.sell-preset-btn.active {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-color: #15803d;
  color: white;
}

/* Loading state */
.sell-execute-btn.loading {
  position: relative;
  color: transparent;
}

.sell-execute-btn.loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Estimated output */
.sell-estimate {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 6px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ok);
}

/* Platform badge in card */
.sell-platform-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  margin-left: 6px;
}

.sell-platform-badge.pump {
  background: rgba(61, 158, 255, 0.15);
  color: var(--accent);
}

.sell-platform-badge.bags {
  background: rgba(153, 69, 255, 0.15);
  color: #9945FF;
}

/* Monogram fallback for missing images */
.sell-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  border: 1px solid var(--border);
}

/* Edit presets button */
.sell-edit-presets-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.sell-edit-presets-btn:hover {
  background: var(--card);
  color: var(--text);
  border-color: var(--accent);
}

/* Responsive */
@media (max-width: 480px) {
  .sell-drawer {
    width: 100%;
  }
}

/* ========================================
   SELL PANEL DRAG/DETACH STYLES
   ======================================== */

/* Drag handle at top of header */
.sell-drawer-header {
  cursor: move;
  user-select: none;
}

/* Visual indicator for drag area */
.sell-drawer-header::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.2s;
}

.sell-drawer-header:hover::before {
  opacity: 1;
}

/* Detached state - floating panel */
.sell-drawer.detached {
  position: fixed;
  transform: none !important;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
  height: auto;
  max-height: 80vh;
  min-height: 200px;
  resize: both;
  overflow: hidden;
}

.sell-drawer.detached .sell-drawer-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.sell-drawer.detached .sell-token-list {
  flex: 1;
  overflow-y: auto;
}

/* Dragging state */
.sell-drawer.dragging {
  opacity: 0.9;
  cursor: grabbing !important;
  transition: none !important;
}

.sell-drawer.dragging .sell-drawer-header {
  cursor: grabbing !important;
}

/* Dock button (appears when detached) */
.sell-dock-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.2s;
  margin-right: 4px;
}

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

/* ==================== POLL STYLES ==================== */
.poll-container {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(14, 20, 32, 0.6);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.poll-choice {
  position: relative;
  border-radius: 8px;
  background: rgba(31, 41, 55, 0.5);
  border: 1px solid var(--border);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  overflow: hidden;
}

.poll-progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(61, 158, 255, 0.25), rgba(61, 158, 255, 0.15));
  border-radius: 8px 0 0 8px;
  transition: width 0.3s ease;
}

.poll-progress-bar.winning {
  background: linear-gradient(90deg, rgba(81, 216, 138, 0.35), rgba(81, 216, 138, 0.2));
}

.poll-choice-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.poll-choice-image {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.poll-choice-label {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.poll-choice-stats {
  position: relative;
  z-index: 1;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  margin-left: 10px;
}

.poll-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid rgba(47, 51, 54, 0.5);
  margin-top: 4px;
}

.poll-votes {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 500;
}

.poll-time {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 500;
}

.poll-time.ended {
  color: var(--ok);
}

/* ==================== ARTICLE STYLES ==================== */
.article-embed {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(14, 20, 32, 0.8);
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}

.article-embed:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(61, 158, 255, 0.15);
}

.article-thumbnail {
  width: 100%;
  height: 160px;
  object-fit: cover;
  background: #0e1420;
  border-bottom: 1px solid var(--border);
}

.article-content {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.article-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  background: rgba(61, 158, 255, 0.1);
  border: 1px solid rgba(61, 158, 255, 0.25);
  border-radius: 4px;
  padding: 2px 8px;
  width: fit-content;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.article-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-author {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 500;
}

.article-preview {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
}

/* Article in subtweet - slightly smaller */
.subtweet .article-embed {
  margin-top: 10px;
}

.subtweet .article-thumbnail {
  height: 120px;
}

.subtweet .article-content {
  padding: 10px 12px;
}

.subtweet .article-title {
  font-size: 0.92rem;
}

/* Poll in subtweet - slightly smaller */
.subtweet .poll-container {
  margin-top: 10px;
  padding: 10px;
}

.subtweet .poll-choice {
  padding: 8px 12px;
  min-height: 38px;
}

.subtweet .poll-choice-label {
  font-size: 0.88rem;
}

/* ======================== HISTORICAL COINS FEATURE ======================== */
.sugg-search-btn {
  background: rgba(61, 158, 255, 0.1);
  border: 1px solid rgba(61, 158, 255, 0.2);
  color: var(--accent);
  border-radius: 6px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
  flex-shrink: 0;
}

/* Row that holds search + translate buttons side by side at bottom-left */
.sugg-btn-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  gap: 4px;
  margin-top: auto;
  padding-top: 4px;
  align-items: center;
}

.sugg-search-btn:hover {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 10px rgba(61, 158, 255, 0.4);
  transform: scale(1.1);
}

/* Agent deploy button — green robot icon */
.sugg-agent-btn {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

.sugg-agent-btn:hover {
  background: #22c55e;
  color: #fff;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
  transform: scale(1.1);
}

/* Agent platform tab — distinct purple/green accent */
.platform-tab.agent-tab {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.4);
  color: #a78bfa;
}

.platform-tab.agent-tab:hover {
  background: rgba(139, 92, 246, 0.3);
  border-color: #8b5cf6;
  color: #fff;
}

.platform-tab.agent-tab.active {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
  border-color: #7c3aed;
  color: #fff;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.5);
}

.history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 16px;
  padding: 8px;
  max-height: 60vh;
  overflow-y: auto;
}

.history-item {
  background: rgba(18, 24, 31, 0.6);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.history-item:hover {
  background: rgba(61, 158, 255, 0.1);
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.history-logo {
  width: 70px;
  height: 70px;
  border-radius: 10px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.history-ticker {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.history-age {
  font-size: 0.65rem;
  color: var(--muted);
  opacity: 0.8;
}

.history-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  gap: 16px;
  color: var(--muted);
}

.history-empty {
  text-align: center;
  padding: 40px;
  color: var(--muted);
}

/* Custom Modal Size for History */
#historicalCoinsModal .modal-content {
  max-width: 600px;
}

/* ======================== PUMP FEE SHARING UI ======================== */
.pfs-panel {
  margin-top: 10px;
  background: rgba(14, 20, 32, .6);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: all .2s;
}

.pfs-panel[data-active="true"] {
  border-color: rgba(61, 158, 255, .3);
}

.pfs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(14, 20, 32, .4);
}

.pfs-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: .88rem;
  color: var(--text);
}

.pfs-header-left svg {
  width: 16px;
  height: 16px;
}

.pfs-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pfs-icon-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: .85rem;
  transition: all .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pfs-icon-btn:hover {
  background: rgba(255, 255, 255, .06);
  color: var(--text);
}

.pfs-icon-btn.active {
  color: var(--accent);
  border-color: rgba(61, 158, 255, .3);
  background: rgba(61, 158, 255, .08);
}

/* Turbo pill */
.pfs-turbo {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
}

.pfs-turbo-pill {
  background: var(--ok);
  color: #000;
  font-size: .65rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: .3px;
}

.pfs-body {
  padding: 12px 14px;
}

/* Counter + Lock row */
.pfs-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: .82rem;
}

.pfs-counter {
  color: var(--muted);
  font-weight: 500;
}

.pfs-counter span {
  color: var(--text);
  font-weight: 700;
}

/* Lock toggle */
.pfs-lock-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: var(--muted);
  cursor: pointer;
}

.pfs-lock-toggle input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 32px;
  height: 18px;
  background: #1a2332;
  border: 1px solid var(--border);
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  transition: all .2s;
}

.pfs-lock-toggle input[type=checkbox]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: var(--muted);
  border-radius: 50%;
  transition: all .2s;
}

.pfs-lock-toggle input[type=checkbox]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.pfs-lock-toggle input[type=checkbox]:checked::after {
  left: 16px;
  background: #fff;
}

/* Distinct color for cashback toggle */
.pfs-lock-toggle input[id$="Cashback"]:checked {
  background: #ffb454;
  /* warm orange/gold */
  border-color: #ffb454;
}

/* Shareholder rows */
.pfs-shareholders {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pfs-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: #0e1420;
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: all .15s;
}

.pfs-row:hover {
  border-color: #2a3847;
}

/* Type selector buttons */
.pfs-type-btns {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.pfs-type-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 5px;
  border-radius: 5px;
  font-size: .78rem;
  transition: all .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.pfs-type-btn:hover {
  background: rgba(255, 255, 255, .05);
  color: var(--text);
}

.pfs-type-btn.active {
  color: #fff;
  border-color: var(--accent);
  background: rgba(61, 158, 255, .15);
}

.pfs-type-btn.active[data-type="github"] {
  color: #c9a0ff;
  border-color: rgba(153, 69, 255, .4);
  background: rgba(153, 69, 255, .12);
}

.pfs-type-btn.active[data-type="twitter"] {
  color: #e8f0f7;
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .08);
}

.pfs-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: .85rem;
  padding: 4px 6px;
  outline: none;
  min-width: 0;
}

.pfs-input::placeholder {
  color: #3a4a5c;
}

.pfs-percent-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.pfs-percent-input {
  background: rgba(14, 20, 32, .5);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: .85rem;
  font-weight: 700;
  width: 52px;
  padding: 4px 6px;
  border-radius: 5px;
  text-align: center;
  outline: none;
  transition: border-color .15s;
}

.pfs-percent-input:focus {
  border-color: var(--accent);
}

.pfs-percent-unit {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
}

.pfs-remove-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 4px;
  font-size: .85rem;
  transition: color .15s;
  flex-shrink: 0;
}

.pfs-remove-btn:hover {
  color: var(--danger);
}

/* Add row */
.pfs-add-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  padding: 6px;
  border: 1px dashed rgba(61, 158, 255, .2);
  border-radius: 8px;
  cursor: pointer;
  color: var(--accent);
  font-size: .82rem;
  font-weight: 500;
  transition: all .15s;
  gap: 4px;
}

.pfs-add-row:hover {
  background: rgba(61, 158, 255, .05);
  border-color: var(--accent);
}

/* Quick Add section */
.pfs-quick-add {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.pfs-quick-label {
  font-size: .75rem;
  color: var(--muted);
  font-weight: 500;
}

.pfs-quick-btn {
  background: #0e1420;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: .72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.pfs-quick-btn:hover {
  border-color: var(--accent);
  background: rgba(61, 158, 255, .06);
}

.pfs-quick-btn .pfs-quick-icon {
  font-size: .7rem;
}

.pfs-quick-settings {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: .82rem;
  padding: 2px;
  transition: color .15s;
}

.pfs-quick-settings:hover {
  color: var(--text);
}

/* Toggle switch for enable/disable */
.pfs-toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}

.pfs-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.pfs-toggle-slider {
  position: absolute;
  inset: 0;
  background: #1a2332;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all .2s;
}

.pfs-toggle-slider::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--muted);
  border-radius: 50%;
  transition: all .2s;
}

.pfs-toggle-switch input:checked+.pfs-toggle-slider {
  background: var(--accent);
  border-color: var(--accent);
}

.pfs-toggle-switch input:checked+.pfs-toggle-slider::before {
  left: 18px;
  background: #fff;
}

/* LIVE STATUS NOTIFICATIONS */
.live-status-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column-reverse;  /* newest on top, stack grows upward */
  gap: 8px;
  pointer-events: none;
}

.live-status-item {
  pointer-events: none;          /* click-through so buttons beneath stay usable */
  min-width: 140px;
  max-width: 220px;
  padding: 6px 10px;
  background: rgba(18, 24, 31, 0.85);
  backdrop-filter: blur(16px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 8px;
  animation: slideInNotification 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.15s ease;
}

@keyframes slideInNotification {
  from {
    opacity: 0;
    transform: translateX(40px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.live-status-item.success {
  border-left-color: var(--ok);
}

.live-status-item.error {
  border-left-color: var(--danger);
}

.live-status-item.fade-out {
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
}

.live-status-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.live-status-title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
}

.live-status-item.pending .live-status-title {
  color: var(--accent);
}

.live-status-item.success .live-status-title {
  color: var(--ok);
}

.live-status-item.error .live-status-title {
  color: var(--danger);
}

.live-status-text {
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-status-icon {
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.live-status-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: liveSpin 0.8s linear infinite;
}

@keyframes liveSpin {
  to {
    transform: rotate(360deg);
  }
}

/* 🌐 Automatic Tweet Translation styling */
.tweet-translation {
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  margin-top: 8px;
  padding-top: 8px;
  color: #94a3b8;
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.4;
  animation: fadeIn 0.3s ease;
}

.tweet-translation strong {
  color: var(--accent);
  font-weight: 600;
  margin-right: 4px;
}
/* Historical Coins Grid - Premium Style */
.history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
  margin-top: 15px;
}

.history-item {
  background: #111827;
  border: 1px solid #1f2937;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.history-item:hover {
  background: #1e293b;
  border-color: #3b82f6;
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4), 0 0 15px rgba(59, 130, 246, 0.1);
}

.history-logo {
  width: 100%;
  aspect-ratio: 16/9; /* Adjusted for standard token banners */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 8px;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.history-ticker {
  font-weight: 800;
  color: #f8fafc;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.history-age {
  font-size: 10px;
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
  background: rgba(0,0,0,0.3);
  padding: 2px 8px;
  border-radius: 14px;
  overflow: hidden;
}

.read-full-btn {
  margin-top: 12px;
  padding: 8px 16px;
  background: rgba(61, 158, 255, 0.1);
  border: 1px solid rgba(61, 158, 255, 0.3);
  border-radius: 8px;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-block;
}

.read-full-btn:hover {
  background: rgba(61, 158, 255, 0.2);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* Horizontal Search Strip for Modals */
.search-strip {
  display: flex;
  flex-direction: row;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 4px;
  margin-bottom: 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  border: 1px solid var(--border);
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
  min-height: 66px;
  align-items: center;
}

.search-strip::-webkit-scrollbar {
  height: 4px;
}

.search-strip::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 10px;
}

.search-strip .search-thumb {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  border: 2px solid transparent;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  background-color: #0a0e13;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.search-strip .search-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.3);
}

.search-strip .search-thumb.active {
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(61, 158, 255, 0.4);
  transform: scale(1.05);
}

.search-strip .search-thumb.library-thumb {
  border-color: rgba(81, 216, 138, 0.3);
}

.search-strip .search-thumb.library-thumb.active {
  border-color: var(--ok);
  box-shadow: 0 0 12px rgba(81, 216, 138, 0.4);
}

.search-strip .search-thumb.ascii-thumb {
  background-size: contain;
  background-repeat: no-repeat;
}
/* ======================== LOGIN SCREEN ======================== */
.login-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, #1a222c, #0a0e13);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 20px;
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
  padding: 40px 32px;
  animation: loginFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes loginFadeIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.login-header {
  text-align: center;
  margin-bottom: 32px;
}

.login-logo {
  font-size: 40px;
  margin-bottom: 16px;
  filter: drop-shadow(0 0 10px rgba(61, 158, 255, 0.3));
}

.login-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.login-header p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.login-group input {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  color: #fff;
  font-size: 15px;
  transition: all 0.2s;
  outline: none;
}

.login-group input:focus {
  border-color: var(--accent);
  background: rgba(61, 158, 255, 0.05);
  box-shadow: 0 0 0 4px rgba(61, 158, 255, 0.15);
}

.login-btn {
  background: linear-gradient(135deg, var(--accent), #1a8cd8);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 8px;
  box-shadow: 0 8px 20px rgba(29, 161, 242, 0.2);
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(29, 161, 242, 0.3);
  filter: brightness(1.1);
}

.login-btn:active {
  transform: translateY(0);
}

.login-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  text-align: center;
  font-weight: 500;
  margin-top: 8px;
}

/* ── Solana wallet QR badge (#15) — appears under any feed image whose QR decodes to a valid Solana address ── */
.qr-wallet-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 2px 0;
  padding: 4px 10px;
  background: rgba(20, 241, 149, 0.08);
  border: 1px solid rgba(20, 241, 149, 0.35);
  border-radius: 14px;
  font-family: monospace;
  font-size: 11px;
  color: #14F195;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  user-select: text;
}
.qr-wallet-badge .qr-label {
  font-weight: 700;
  letter-spacing: 0.3px;
}
.qr-wallet-badge .qr-addr {
  color: #fff;
  font-weight: 600;
}
.qr-wallet-badge .qr-action {
  background: rgba(20, 241, 149, 0.15);
  border: 1px solid rgba(20, 241, 149, 0.35);
  color: #14F195;
  padding: 1px 6px;
  font-size: 10px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.15s ease;
}
.qr-wallet-badge .qr-action:hover {
  background: rgba(20, 241, 149, 0.3);
  color: #fff;
}
.qr-wallet-badge .qr-copied { color: #fbbf24; border-color: rgba(251, 191, 36, 0.4); }