: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)
}

/* In suggestion cards the logo becomes a big, full-width image on TOP of the
   card. Scoped to .sugg-card-body so the 44px side-logo used elsewhere
   (manual modal preview, history rows, etc.) is unchanged. */
@media not all {  /* ⛔ DISABLED (revert B): image-on-top suggestion logo — restore by removing this wrapper */
.sugg-card-body .token-logo {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
}
}

.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;
  max-height: 90dvh;            /* (#modal-cutoff) dvh accounts for mobile browser chrome (address bar) so the modal doesn't render past the visible viewport. Browsers without dvh support fall back to the 90vh line above — zero regression. */
  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;
    max-height: 100dvh;         /* (#modal-cutoff) Same fix as desktop — fall back to 100vh for browsers without dvh. */
    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)
}

/* Dashboard (middle-zone) image tiles: click selects the image into the deploy
   bar below; the ✎ opens the keyword editor. Selected tile is highlighted. */
.image-tile.dash-tile { position: relative; }
.image-tile.dash-tile.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(61, 158, 255, .35);
}
.dash-tile-edit {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(13, 17, 23, .85);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  opacity: 0;
  transition: opacity .15s;
}
.image-tile.dash-tile:hover .dash-tile-edit { opacity: 1; }
.dash-tile-edit:hover { border-color: var(--accent); }

@media not all {  /* ⛔ DISABLED (revert B 2026-05-26): Feed Size resize feature. RE-ENABLE: delete this "@media not all {" line and its matching "}" (marked "end disabled Feed Size CSS") below. */
/* ============================ FEED SIZE (resizable feed) ============================
   `zoom` is layout-safe in Chrome (the dashboard target). applyFeedSize() sets these
   vars on :root; streaming tweets inherit automatically. Effective size per area =
   global × that area's individual factor (sell/images get global×individual computed). */
/* GLOBAL — zoom scales the whole view proportionally (feed + side zones). */
#feed, #pinnedFeed, #sellPanel, #dashImageZone { zoom: var(--fz-global, 1); }
/* INDIVIDUAL — width shrinks the CARD BOX (text reflows, no zoom). The width % is
   taken within the .tweet-row GRID CELL, so a smaller card just leaves empty space
   in its own cell — it can NEVER overlap the neighbouring suggestions column.
   justify-self:start keeps the (now narrower) card pinned to the start of its cell. */
#feed .card, #pinnedFeed .card { width: var(--fz-tweet-w, 100%); justify-self: start; }
.tweet-row .sugg-panel { width: var(--fz-sugg-w, 100%); justify-self: start; }

/* Edit pill / bar (fixed, top-centre) */
.fz-edit-bar { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 4000;
  display: flex; align-items: center; gap: 10px; background: #11161e; border: 1px solid var(--accent);
  border-radius: 999px; padding: 8px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.55); }
.fz-edit-bar[hidden] { display: none; }
.fz-edit-bar.fz-indiv-bar { border-color: #a855f7; }
.fz-step { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border);
  background: #1b2330; color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; padding: 0; }
.fz-step:hover { border-color: var(--accent); }
.fz-val { min-width: 56px; text-align: center; font-weight: 800; }
.fz-tip { font-size: 13px; color: var(--text); }
.fz-step-text { background: #1b2330; border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 12px; }
.fz-done { background: #22c55e; border: none; color: #04210f; border-radius: 8px; padding: 7px 14px; font-weight: 800; cursor: pointer; }

/* Individual-edit drag handles — BOTH edges of each card — + area outlines */
.fz-handle { position: absolute; top: 8%; width: 12px; height: 84%; cursor: ew-resize;
  z-index: 4001; border-radius: 6px; }
/* Handles sit flush INSIDE the edge (right:0 / left:0) so panels with
   overflow:hidden (suggestions, sell, cached-images) don't clip them. */
.fz-handle.fz-right { right: 0; background: linear-gradient(90deg, transparent, rgba(168,85,247,.85)); }
.fz-handle.fz-left  { left: 0;  background: linear-gradient(270deg, transparent, rgba(168,85,247,.85)); }
.fz-handle::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  width: 4px; height: 38px; background: #a855f7; border-radius: 3px; }
.fz-handle.fz-right::after { right: 3px; }
.fz-handle.fz-left::after  { left: 3px; }
body.fz-indiv-editing #feed .card,
body.fz-indiv-editing .tweet-row .sugg-panel,
body.fz-indiv-editing #sellPanel,
body.fz-indiv-editing #dashImageZone {
  outline: 2px dashed rgba(168,85,247,.6);
  outline-offset: 2px;
  transition: none !important;   /* resize instantly while dragging — no animated drift */
}
}  /* ⛔ end disabled Feed Size CSS (revert B) */

/* Host for the single quick-deploy bar under the cached-image grid. The bar is
   built by buildQuickDeployBar() with small inline styles for the tweet-card
   context; scale it up here for the roomier dashboard column (!important is
   needed to beat the inline styles). */
/* (#feed-back-to-top 2026-05-30) Floating button on the FEED column only
   (tweets + AI suggestions). Lives inside <main class="main">. Hidden until
   the feed/main scrolls past ~600px; smooth-scrolls back to top on click.
   The JS handler (app.js DOMContentLoaded) re-aligns its right offset to
   main's right edge at wide screens so it never overlaps the cached-images
   or sell-panel columns. */
.feed-back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #5b8aff;                            /* solid bright blue — stands out on dark theme */
  border: 2px solid rgba(255, 255, 255, 0.45);    /* white-ish ring for extra pop */
  color: #ffffff;                                 /* white icon */
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 6px 22px rgba(91, 138, 255, 0.55),          /* coloured glow */
    0 4px 14px rgba(0, 0, 0, 0.55);               /* depth */
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.9);
  transition: opacity 220ms ease, transform 220ms ease, background 120ms, box-shadow 120ms;
  z-index: 9999;                                  /* over everything in the feed area */
}
.feed-back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.feed-back-to-top:hover {
  background: #4a78ee;
  box-shadow:
    0 8px 28px rgba(91, 138, 255, 0.75),
    0 4px 14px rgba(0, 0, 0, 0.6);
}
.feed-back-to-top:active { transform: translateY(0) scale(0.96); }

#dashDeployBar { flex: 0 0 auto; margin-top: 14px; }
/* (#split-view 2026-05-30) The OLD small Name|Ticker bar (.quick-name-bar)
   is replaced by .dash-full-deploy-bar (built by buildDashFullDeployBar() in
   app.js) — manual-modal-like form, no name/ticker. Old .quick-name-bar styles
   left harmless in case any other mount still uses it. */
.dash-full-deploy-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: #0d1117;
  border: 1px solid #1e293b;
  border-radius: 10px;
}
.dfd-row { display: flex; flex-direction: column; gap: 6px; }
.dfd-label {
  font-size: 11px;
  color: #8b92a8;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.dfd-platform-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.dfd-agent-row { display: flex; justify-content: flex-end; margin-top: 4px; }
.dfd-pill {
  padding: 5px 10px;
  background: #1c2330;
  border: 1px solid #1f2733;
  color: #e5e9f0;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.dfd-pill:hover { background: #27303d; }
.dfd-pill.active { background: #1f3b8a; border-color: #5b8aff; color: #fff; }
.dfd-quote-row { display: flex; gap: 14px; }
.dfd-radio-label { display: flex; align-items: center; gap: 5px; font-size: 13px; cursor: pointer; }
.dfd-feeshare {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: #0a0e13;
  border: 1px solid #1f2733;
  border-radius: 6px;
  font-size: 12px;
}
.dfd-buy-row { display: flex; gap: 6px; align-items: center; }
.dfd-input {
  flex: 1;
  background: #0a0e13;
  border: 1px solid #1f2733;
  border-radius: 6px;
  color: #e5e9f0;
  padding: 6px 10px;
  font: inherit;
  outline: none;
  min-width: 0;
}
.dfd-input:focus { border-color: #5b8aff; }
textarea.dfd-input { resize: vertical; min-height: 50px; }
.dfd-cb-toggle { width: 100%; text-align: center; padding: 8px; }
.dfd-cb-toggle.active { background: rgba(91, 138, 255, .15); border-color: #5b8aff; color: #5b8aff; }
.dfd-preset-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.dfd-btn {
  padding: 7px 14px;
  background: #1c2330;
  border: 1px solid #1f2733;
  color: #e5e9f0;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
.dfd-btn:hover { background: #27303d; }
.dfd-btn-small { padding: 4px 8px; font-size: 11px; }
.dfd-action-row { flex-direction: row; align-items: center; gap: 10px; }
.dfd-img-preview {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #1a1f2e;
  background-size: cover;
  background-position: center;
  border: 2px dashed #334155;
  cursor: pointer;
  flex-shrink: 0;
}
.dfd-img-preview.has-image { border-style: solid; border-color: #8b5cf6; }
.dfd-btn-deploy {
  flex: 1;
  padding: 10px;
  background: #10b981;
  border-color: #10b981;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.dfd-btn-deploy:hover { background: #0e9d72; }

/* Legacy quick-name-bar styles (kept harmless for non-dash mounts of the bar) */
#dashDeployBar .quick-name-bar { padding: 10px 12px !important; gap: 8px !important; }
#dashDeployBar .quick-name-input,
#dashDeployBar .quick-ticker-input {
  padding: 10px 12px !important;
  font-size: 14px !important;
}
#dashDeployBar .quick-ticker-input { width: 110px !important; }
#dashDeployBar .quick-bar-img-preview { width: 38px !important; height: 38px !important; }
#dashDeployBar .quick-name-bar button {
  font-size: 16px !important;
  padding: 9px 13px !important;
}

.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;
}

/* (#148 2026-05-18) Truth Social media — previously letterboxed because the
   .video-wrapper class applied height:100% + black background + flex centering
   and there was no platform-specific rule sizing the inner <video> (Instagram
   has one, tweets get it via .media-grid.cols-1). Result: video rendered at
   intrinsic size with massive black bars around it. Mirror Instagram's pattern
   so Truth videos fill the card width and hug their natural aspect ratio. */
.card.truth-post .media video {
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}
.card.truth-post .media .video-wrapper {
  height: auto;
  background: transparent;
}

/* 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);
}

/* ============================================================================
   (#wide-layout Stage 1 — 2026-05-25) Wide-monitor dashboard reflow per the
   client's mockup. STAGE 1 = existing elements only:
     • tweet feed stays on the LEFT (same size — just left-aligned, not centered)
     • Sell panel is DOCKED always-on (right) instead of a pop-on-demand drawer
   Gated to wide screens (>=1600px) so the normal/narrow layout is 100%
   unchanged. Tweet card + suggestion-panel sizes are NOT touched.
   (Stage 2 = surface the Cached-Images box in the center; Stage 3 = AI image
   edit/generate panel; Stage 4 = bottom ticker bar — not built yet.)
   ============================================================================ */
/* Dashboard wrapper is transparent below 1600px (display:contents), so the
   narrow/mobile layout is completely unchanged. The middle image zone and the
   rail AI generator are wide-only — hidden until the grid kicks in. */
.dash-layout { display: contents; }
#dashImageZone { display: none; }
.rail-ai-image { display: none; }

@media (min-width: 1600px) {  /* ✅ RE-ENABLED 2026-05-30 (#split-view): wide 3-zone layout (feed | cached images | rail). Was disabled by "not all" since 2026-05-26 revert B; re-enabled per Janny's split-view request. */
  /* Fill the monitor with a responsive 3-zone grid (feed | cached images | rail)
     instead of a centered 1180px column + dead space. Columns use fr/minmax so
     every zone grows as the monitor widens — no void. */
  .dash-layout {
    display: grid;
    /* (#split-view 2026-05-30 v3) Gentler nudge after v2 went too far.
       Mid was 340/1fr -> shaved to 320/1fr (a bit thinner). Rail was 380px
       fixed -> 470px fixed (a bit wider, ~+24%). Feed (1.7fr) untouched. */
    grid-template-columns: minmax(620px, 1.7fr) minmax(320px, 1fr) 470px;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "header header header"
      "feed   mid    rail";
    column-gap: 18px;
    height: 100vh;
    box-sizing: border-box;
    padding: 0 18px 18px;
  }
  .app-header { grid-area: header; }

  /* Feed zone — grows with the monitor, scrolls independently (cards keep a
     readable width; no longer pinned to 1180px with empty space beside it). */
  .main {
    grid-area: feed;
    max-width: none;
    margin: 0;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
  }

  /* MIDDLE — Cached Images dashboard. */
  #dashImageZone {
    grid-area: mid;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    overflow: hidden;
    width: var(--fz-images-w, 100%);  /* individual resize (shrinks within the mid grid cell) */
    justify-self: start;
  }
  .dash-zone-header {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
    margin-bottom: 10px;
    flex: 0 0 auto;
  }
  .dash-image-grid {
    flex: 1 1 auto;
    max-height: none;        /* override the .image-grid 400px cap so it fills */
    min-height: 0;
    border: none;
    background: transparent;
    padding: 0;
    overflow-y: auto;        /* scroll within the column when 312 images overflow */
    /* (#tiny-tiles 2026-05-30 per Janny) 4-per-row + 60px thumbs + filename
       hidden so the whole library is browseable inside the dash column instead
       of being clipped by the parent zone's overflow:hidden. Was 1fr 1fr with
       120px-tall thumbs — that put only ~6 tiles on screen and chopped the rest. */
    grid-template-columns: repeat(4, 1fr);
  }
  .dash-image-grid .image-thumbnail {
    height: 60px;            /* was inherited 120px — Janny: "very small so can come out" */
  }
  .dash-image-grid .image-info {
    display: none;           /* filename row hidden in compact mode — still on hover via title attr */
  }
  .dash-image-empty {
    color: var(--muted);
    text-align: center;
    margin: auto 0;
  }
  .dash-image-empty p { margin: 0 0 4px; font-weight: 600; }

  /* RIGHT RAIL — docked sell panel + AI generator stacked, fills the column.
     Skipped when the user has detached/dragged the panel (keeps drag feature). */
  #sellPanel:not(.detached) {
    grid-area: rail;
    position: static;
    transform: none;
    width: var(--fz-sell-w, 100%);  /* individual resize (shrinks within the rail grid cell) */
    justify-self: start;
    height: auto;
    min-height: 0;
    z-index: auto;
    box-shadow: none;
    pointer-events: auto;
    border-left: none;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
  }
  #sellPanel:not(.detached) .sell-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }
  #sellPanel:not(.detached) .sell-token-list {
    flex: 1 1 auto;
    min-height: 80px;
  }
  /* The ✕ close button is meaningless when the panel is permanently docked. */
  #sellPanel:not(.detached) .sell-drawer-header .close-btn { display: none; }

  /* Reveal the rail AI generator only in the wide docked layout. */
  #sellPanel:not(.detached) .rail-ai-image {
    display: block;
    flex: 0 0 auto;
    margin: 0;
    border-top: 1px solid var(--border);
    overflow-y: auto;
    max-height: 46%;
  }
}

/* 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;
  flex-shrink: 0;
}

.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); }

/* ======================== AI IMAGE DROPDOWN (#26B) ======================== */
/* Used in manual modal AND suggestion edit modal. Native <details>/<summary>
   handles open/close so no JS toggling needed. */
.ai-image-dropdown {
  margin-top: 12px;
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 8px;
  background: rgba(20, 18, 32, 0.5);
  overflow: hidden;
}
.ai-image-summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  background: rgba(139, 92, 246, 0.08);
  font-weight: 600;
  color: #c4b5fd;
  transition: background 0.15s ease;
}
.ai-image-summary::-webkit-details-marker { display: none; }
.ai-image-summary:hover { background: rgba(139, 92, 246, 0.15); }
.ai-image-title { font-size: 14px; }
.ai-image-arrow {
  font-size: 11px;
  color: #8b5cf6;
  transition: transform 0.2s ease;
}
.ai-image-dropdown[open] .ai-image-arrow { transform: rotate(180deg); }
.ai-image-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-image-prompt {
  width: 100%;
  background: #0d1117;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
  outline: none;
  transition: border-color 0.15s ease;
}
.ai-image-prompt:focus { border-color: #8b5cf6; }
.ai-image-hint {
  font-size: 11px;
  color: #64748b;
  font-style: italic;
}
.ai-image-refs-label {
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}
.ai-image-ref-slots {
  display: flex;
  gap: 8px;
}
.ai-image-ref-add {
  flex: 1;
  height: 70px;
  background: #1a1f2e;
  border: 1px dashed #475569;
  border-radius: 6px;
  color: #64748b;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.ai-image-ref-add:hover {
  border-color: #8b5cf6;
  color: #c4b5fd;
}
.ai-image-ref-add.has-image {
  border-style: solid;
  border-color: #8b5cf6;
  color: transparent;
}
.ai-image-ref-add.has-image::after {
  content: '✕';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-image-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.ai-image-btn {
  flex: 1;
  padding: 8px 14px;
  background: #1a1f2e;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ai-image-btn:hover {
  background: #283142;
  border-color: #475569;
}
.ai-image-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ai-image-btn-primary {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
  border-color: transparent;
  color: #fff;
}
.ai-image-btn-primary:hover {
  background: linear-gradient(135deg, #6d28d9, #7c3aed);
}
.ai-image-result {
  margin-top: 6px;
  padding: 10px;
  background: #0a0e13;
  border: 1px solid #1e293b;
  border-radius: 6px;
}
.ai-image-result-status {
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 8px;
  text-align: center;
}
.ai-image-result-preview {
  width: 100%;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
}
.ai-image-result-preview img {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
}
.ai-image-result-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}