/* TrackerX — Twitter/X Dark Theme */
:root {
  --bg: #000000;
  --surface: #000000;
  --border: #2f3336;
  --text-primary: #e7e9ea;
  --text-secondary: #71767b;
  --accent: #1d9bf0;
  --accent-hover: #1a8cd8;
  --danger: #f4212e;
  --success: #00ba7c;
  --hover: #080808;
  --tweet-hover: #080808;
  --verified: #1d9bf0;
  --sidebar-width: 275px;
  --feed-width: 600px;
  --right-width: 350px;
}

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

html, body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: -0.011em;
  font-size: 15px;
  line-height: 1.3125;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  height: 100%;
}

/* ── 3-Column Layout ── */
#layout {
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

/* ── Left Sidebar ── */
#sidebar {
  width: var(--sidebar-width);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-right: 12px;
  border-right: 1px solid var(--border);
}

.sidebar-inner {
  width: 220px;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.nav-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: var(--text-primary);
  transition: background 0.2s;
  margin-bottom: 8px;
}

.nav-logo:hover { background: rgba(231, 233, 234, 0.1); }

.nav-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px;
  border-radius: 50px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 20px;
  font-weight: 400;
  transition: background 0.2s;
  margin-bottom: 4px;
  position: relative;
}

.nav-item:hover { background: rgba(231, 233, 234, 0.1); }
.nav-item.active { font-weight: 700; }
.nav-item svg { flex-shrink: 0; }

.nav-badge {
  position: absolute;
  top: 6px;
  left: 32px;
  background: var(--accent);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.sidebar-bottom {
  margin-top: auto;
  flex-shrink: 0;
}

.nav-status {
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-secondary);
}

/* ── Main Feed ── */
#main {
  width: var(--feed-width);
  border-right: 1px solid var(--border);
  min-height: 100vh;
}

header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 0;
}

.header-content h1 {
  font-size: 20px;
  font-weight: 700;
}

.header-stats {
  font-size: 13px;
  color: var(--text-secondary);
}

.header-tabs {
  display: flex;
  margin-top: 8px;
}

.tab {
  flex: 1;
  padding: 14px 0;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
}

.tab:hover { background: rgba(231, 233, 234, 0.05); }

.tab.active {
  color: var(--text-primary);
  font-weight: 700;
}

.tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
}

/* ── Right Sidebar ── */
#right-sidebar {
  width: var(--right-width);
  padding-left: 30px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.right-inner {
  padding: 12px 16px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.search-box {
  position: relative;
  margin-bottom: 4px;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
}

.search-box input {
  width: 100%;
  padding: 12px 12px 12px 44px;
  background: #202327;
  border: 1px solid transparent;
  border-radius: 50px;
  color: var(--text-primary);
  font-size: 15px;
  outline: none;
  transition: all 0.2s;
}

.search-box input:focus {
  background: var(--bg);
  border-color: var(--accent);
}

.search-box input::placeholder { color: var(--text-secondary); }

/* Cards */
.card {
  background: #0e0f11;
  border-radius: 16px;
  padding: 12px 16px;
  margin-bottom: 12px;
}

.card h3 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.stat-row:last-child { border-bottom: none; }
.stat-label { color: var(--text-secondary); font-size: 14px; }
.stat-value { font-weight: 600; font-family: "SF Mono", Monaco, monospace; font-size: 14px; }

.muted { color: var(--text-secondary); font-size: 14px; }

/* Inputs */
.input {
  width: 100%;
  padding: 10px 12px;
  background: #0a0a0b;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  margin-bottom: 8px;
  transition: border 0.2s;
}

.input:focus { border-color: var(--accent); }
.input::placeholder { color: var(--text-secondary); }

/* Buttons */
.btn-primary {
  padding: 8px 16px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-primary:hover { background: var(--accent-hover); }

.btn-outline {
  padding: 8px 16px;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-outline:hover { background: rgba(231, 233, 234, 0.1); }

.btn-sm { padding: 6px 12px; font-size: 13px; }

.btn-ghost {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}

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

.btn-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.error-text {
  color: var(--danger);
  font-size: 13px;
  margin-top: 8px;
}

/* Handle management */
.handle-input-row {
  display: flex;
  gap: 8px;
}

.handle-input-row .input {
  flex: 1;
  margin-bottom: 0;
  border: none;
  background: transparent;
  padding: 4px 0;
  font-size: 14px;
}

.handle-input-row .input:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

.handle-input-row .input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.handle-input-row .input.shake {
  animation: shake 0.3s ease;
}

.handle-input-row .input.shake::placeholder {
  color: #f43f5e;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.handle-list {
  max-height: 400px;
  overflow-y: auto;
  overflow-x: visible;
}

.handle-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.handle-item:last-child { border-bottom: none; }

.handle-name {
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.handle-added-by {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 400;
}

a.handle-name:hover { text-decoration: underline; }



.handle-count {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.handle-tabs {
  display: flex;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.handle-tab {
  flex: 1;
  padding: 12px 0;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
}

.handle-tab:hover { background: rgba(255,255,255,0.03); color: var(--text-primary); }
.handle-tab.active { color: var(--text-primary); font-weight: 700; }
.handle-tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

.handle-added-by {
  font-size: 11px;
  color: var(--text-secondary);
}



.handle-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.handle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  color: var(--text-secondary);
  opacity: 0.4;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.handle-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.06);
}

.handle-btn.handle-tg-toggle.active {
  opacity: 1;
  color: var(--accent);
}

.handle-btn.handle-tg-toggle:hover { color: var(--accent); }
.handle-btn.handle-exclude:hover { color: #f59e0b; }
.handle-btn.handle-remove:hover { color: #f43f5e; background: rgba(244, 63, 94, 0.08); }

.handle-type {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  background: none;
  transition: all 0.15s;
}

.handle-type.dev { color: #60a5fa; border-color: #60a5fa44; }
.handle-type.project { color: #a78bfa; border-color: #a78bfa44; }
.handle-type.none { color: rgba(255,255,255,0.25); border-color: var(--border); }
.handle-type:hover { opacity: 0.8; }

.type-menu {
  position: fixed;
  background: #16181c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 6px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  min-width: 140px;
  max-height: 280px;
  overflow-y: auto;
  backdrop-filter: blur(16px);
  animation: menuPop 0.12s ease;
}

@keyframes menuPop {
  from { opacity: 0; transform: translateY(-4px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.type-opt {
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  transition: all 0.12s;
  background: transparent;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

.type-opt:hover {
  background: rgba(255, 255, 255, 0.06);
}

.type-opt.none { color: var(--text-secondary); }
.type-opt.dev { color: #60a5fa; }
.type-opt.project { color: #a78bfa; }
.type-opt.base { color: #3b82f6; }
.type-opt.solana { color: #9945ff; }
.type-opt.bsc { color: #f0b90b; }
.type-opt.ethereum { color: #627eea; }
.type-opt.arbitrum { color: #28a0f0; }

.handle-meta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.handle-note {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  padding: 0;
  cursor: pointer;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.3;
  margin-top: 1px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.15s;
}

.handle-note:not(.empty) { color: #e8a43a; font-size: 12px; }
.handle-note.empty { color: rgba(255,255,255,0.35); font-size: 12px; }
.handle-note:hover { color: #f0b856; }

/* Note modal */
.note-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.12s ease;
}

.note-modal {
  background: #16181c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px;
  width: 340px;
  max-width: 90vw;
  animation: slideDown 0.15s ease;
}

.note-modal-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.note-modal-input {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  background: #0a0a0b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
}

.note-modal-input:focus {
  border-color: var(--accent);
}

.note-modal-input::placeholder {
  color: rgba(255, 255, 255, 0.2);
}

.note-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.note-modal-cancel,
.note-modal-save {
  padding: 8px 20px;
  border-radius: 9999px;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.note-modal-cancel {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
}

.note-modal-cancel:hover {
  background: rgba(255, 255, 255, 0.04);
}

.note-modal-save {
  background: var(--accent);
  color: #fff;
}

.note-modal-save:hover {
  background: #1a8cd8;
}

/* Handle footer */
.handle-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.handle-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  margin-left: 8px;
  vertical-align: middle;
}

.handle-footer .handle-count {
  font-size: 12px;
  color: var(--text-secondary);
}

.hidden-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.15s;
  opacity: 0.6;
}

.hidden-toggle:hover { opacity: 1; background: rgba(255,255,255,0.04); }

/* Hidden handles list */
.hidden-list {
  padding-top: 8px;
  animation: slideDown 0.15s ease;
}

.hidden-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

.hidden-item:last-child { border-bottom: none; }

.hidden-handle {
  font-size: 13px;
  color: var(--text-secondary);
}

.hidden-restore {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.hidden-restore:hover {
  color: var(--text-primary);
  border-color: var(--accent);
  background: rgba(29, 155, 240, 0.08);
}

/* Handle contracts display */
.handle-contracts {
  margin-top: 8px;
}

.handle-contract-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}

.contract-addr {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  color: #a78bfa;
  letter-spacing: 0.01em;
  text-decoration: none;
}

a.contract-addr:hover { text-decoration: underline; }

.contract-addr.ens-name {
  font-family: inherit;
  color: #60a5fa;
}

.contract-copy,
.contract-del {
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  transition: all 0.12s;
}

.contract-copy:hover { color: var(--accent); background: rgba(29, 155, 240, 0.08); }
.contract-del:hover { color: #f43f5e; background: rgba(244, 63, 94, 0.08); }

/* Others toggle */
.others-toggle {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
  padding: 3px 0;
  margin-top: 6px;
  opacity: 0.5;
  transition: opacity 0.12s;
  margin-top: 2px;
}

.others-toggle:hover { opacity: 1; }

.others-panel {
  padding: 4px 0 0;
  animation: slideDown 0.12s ease;
}

.others-section {
  margin-bottom: 6px;
}

.others-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.25);
  display: block;
  margin-bottom: 2px;
}

.project-row-display {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}

.project-twitter {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
}

.project-twitter:hover { text-decoration: underline; }

.others-subsection {
  margin-top: 6px;
  padding-left: 8px;
  border-left: 2px solid rgba(255, 255, 255, 0.04);
}

.others-sublabel {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  display: block;
  margin-bottom: 2px;
}

.others-add-btn {
  display: block;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 0;
  transition: color 0.12s;
}

.others-add-btn:hover { color: var(--accent); }

/* Single input in modal */
.note-modal-single-input {
  width: 100%;
  padding: 10px 12px;
  background: #0a0a0b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  outline: none;
  transition: border-color 0.15s;
}

.note-modal-single-input:focus { border-color: var(--accent); }
.note-modal-single-input::placeholder { color: rgba(255, 255, 255, 0.2); }

/* Card title row */
.card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title-row h3 { margin-bottom: 12px; }

.import-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.import-btn:hover {
  color: var(--text-primary);
  border-color: var(--accent);
  background: rgba(29, 155, 240, 0.06);
}

/* Import preview */
.import-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 0;
  max-height: 120px;
  overflow-y: auto;
}

/* Card header split */
.card-header-left {
  flex: 1;
  cursor: pointer;
}

.card-header-left h3 { margin-bottom: 0; }

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

/* Export menu */
.export-menu {
  background: #1e2025;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 4px;
  z-index: 10000;
  min-width: 160px;
  animation: menuPop 0.12s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.export-opt {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s;
}

.export-opt:hover {
  background: rgba(255, 255, 255, 0.06);
}

.import-tag {
  display: inline-block;
  background: rgba(29, 155, 240, 0.12);
  color: var(--accent);
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: 'SF Mono', monospace;
}

/* Collapsible cards */
.collapsible .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.collapsible .card-header h3 { margin-bottom: 0; }

.card-chevron {
  font-size: 20px;
  color: var(--text-secondary);
  transition: transform 0.2s;
  font-weight: 300;
}

.card-chevron.open { transform: rotate(90deg); }

.card-body { padding-top: 12px; }

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

code { background: #2d333b; padding: 2px 6px; border-radius: 4px; font-size: 13px; }

.tg-ok { color: #22c55e; font-weight: 600; font-size: 14px; }

.btn-danger-sm {
  padding: 6px 12px;
  background: rgba(244, 33, 46, 0.15);
  color: var(--danger);
  border: 1px solid rgba(244, 33, 46, 0.3);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-danger-sm:hover { background: rgba(244, 33, 46, 0.3); }

/* Toast notifications */
#toast-container {
  position: fixed;
  bottom: 80px;
  right: 32px;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
  max-width: 380px;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  color: #e7e9ea;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(32, 35, 39, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03);
  animation: toastSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1), toastFadeOut 0.35s ease 4.5s forwards;
  position: relative;
  overflow: hidden;
}

.toast::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--toast-accent, var(--accent));
  animation: toastProgress 4.85s linear forwards;
  border-radius: 0 0 12px 12px;
}

.toast-icon {
  font-size: 18px;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--toast-icon-bg, rgba(29, 155, 240, 0.15));
}

.toast-body {
  flex: 1;
  min-width: 0;
}

.toast-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 2px;
  color: var(--toast-accent, var(--accent));
}

.toast-msg {
  color: #a0a4a8;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast.toast-added { --toast-accent: #22c55e; --toast-icon-bg: rgba(34, 197, 94, 0.12); }
.toast.toast-removed { --toast-accent: #f43f5e; --toast-icon-bg: rgba(244, 63, 94, 0.12); }
.toast.toast-edited { --toast-accent: #f59e0b; --toast-icon-bg: rgba(245, 158, 11, 0.12); }
.toast.toast-contract { --toast-accent: #8b5cf6; --toast-icon-bg: rgba(139, 92, 246, 0.12); }

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

@keyframes toastFadeOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(30px) scale(0.96); }
}

@keyframes toastProgress {
  from { width: 100%; }
  to { width: 0%; }
}

/* User info */
#user-info {
  padding: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 8px;
  min-height: 56px;
}

#user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
  font-size: 14px;
}

.user-badge {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: white;
  overflow: hidden;
  flex-shrink: 0;
}

.user-avatar-sm img.my-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.user-avatar-sm .my-avatar-placeholder {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Tweet Card ── */
/* Tweet card wrapper */
.tweet-card {
  background: #0d0d0d;
  border-radius: 16px;
  margin: 8px 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: border-color 0.15s;
}

.tweet-card:hover {
  border-color: rgba(255, 255, 255, 0.08);
}

.tweet-main:hover { background: rgba(255, 255, 255, 0.02); }

.tweet-card.tracked {
  border-left: 3px solid var(--accent);
  background: rgba(29, 155, 240, 0.03);
}

.tweet-card.tweet-enter {
  animation: cardSlideIn 0.25s ease-out;
}

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

.tweet-main, .tweet {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  transition: background 0.15s;
}

.tweet-name-link {
  text-decoration: none;
  color: inherit;
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.tweet-name-link:hover { text-decoration: underline; }

.tweet-reply-original .tweet-name-link,
.tweet-quote-subcard .tweet-name-link { font-size: 13px; }

.tweet-handle-copy {
  cursor: pointer;
  transition: opacity 0.15s;
  position: relative;
}

.tweet-handle-copy:hover { opacity: 0.7; }

.tweet-handle-copy.copied::after {
  content: "copied";
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: #fff;
  background: rgba(255,255,255,0.12);
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 9999;
  animation: copiedFade 1s ease-out forwards;
}

@keyframes copiedFade {
  0% { opacity: 1; transform: translateX(-50%) translateY(0); }
  70% { opacity: 1; transform: translateX(-50%) translateY(4px); }
  100% { opacity: 0; transform: translateX(-50%) translateY(8px); }
}

.tweet-card-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 4px 16px 10px;
}

.tweet-card-footer .tweet-link-out {
  align-self: flex-end;
}

.tweet-contract-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 12px;
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
  color: #39e58c;
  background: rgba(57, 229, 140, 0.06);
  border: 1px solid rgba(57, 229, 140, 0.2);
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
  letter-spacing: 0.02em;
}

.tweet-contract-badge:hover {
  background: rgba(57, 229, 140, 0.12);
  border-color: rgba(57, 229, 140, 0.4);
}

.tweet-contract-badge svg {
  opacity: 0.6;
}

.tweet-link-out {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  color: var(--text-secondary);
  opacity: 0.3;
  transition: opacity 0.15s, color 0.15s;
}

.tweet-link-out:hover {
  opacity: 1;
  color: var(--accent);
}

.subcard-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 6px;
}

.subcard-footer .tweet-link-out {
  align-self: flex-end;
}

.subcard-footer .tweet-contract-badge {
  padding: 3px 8px;
  font-size: 11px;
}

.subcard-link {
  margin-left: auto;
}

/* Sub-cards (reply + quote) — identical style, embedded inside main card */
.tweet-reply-original,
.tweet-quote-subcard {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  margin: 0 16px 14px 16px;
  background: #0f0f0f;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  transition: background 0.15s;
}

.tweet-reply-original:hover,
.tweet-quote-subcard:hover { background: #181818; }

.reply-avatar, .quote-avatar { width: 28px; height: 28px; flex-shrink: 0; }
.reply-avatar img, .quote-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.tweet-reply-original .tweet-name,
.tweet-reply-original .tweet-handle,
.tweet-quote-subcard .tweet-name,
.tweet-quote-subcard .tweet-handle { font-size: 13px; }

.reply-text, .quote-text {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  line-height: 17px !important;
}

.tweet-reply-label {
  display: inline-block;
  font-size: 12px;
  color: #4ade80;
  opacity: 0.7;
  margin-bottom: 2px;
}

.tweet-quote-label {
  display: inline-block;
  font-size: 12px;
  color: #f472b6;
  opacity: 0.7;
  margin-bottom: 2px;
  margin-top: 4px;
}

.tweet-retweet-label {
  display: inline-block;
  font-size: 12px;
  color: #60a5fa;
  opacity: 0.7;
  margin-bottom: 2px;
}

.tweet-media-small[data-count="1"] img,
.tweet-media-small[data-count="1"] video {
  max-height: 180px;
}

.tweet-media-small[data-count="2"] img,
.tweet-media-small[data-count="2"] video,
.tweet-media-small[data-count="3"] img,
.tweet-media-small[data-count="3"] video,
.tweet-media-small[data-count="4"] img,
.tweet-media-small[data-count="4"] video {
  height: 140px;
}

.tweet.new-flash { animation: flash 0.5s ease-out; }

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes flash {
  0% { background: rgba(29, 155, 240, 0.15); }
  100% { background: transparent; }
}

/* Avatar */
.tweet-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #333639;
  overflow: hidden;
}

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

/* Tweet Body */
.tweet-body { flex: 1; min-width: 0; }

.tweet-header {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.tweet-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.tweet-verified { color: var(--verified); font-size: 16px; flex-shrink: 0; }

.tweet-verified-badge {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  vertical-align: -3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.855-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.69-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.636.433 1.221.878 1.69.47.446 1.055.752 1.69.883.635.13 1.294.083 1.902-.143.271.586.702 1.084 1.24 1.438.54.354 1.167.551 1.813.569.646-.018 1.273-.215 1.813-.569.54-.354.97-.852 1.244-1.438.608.226 1.267.276 1.9.143.636-.13 1.22-.436 1.69-.882.445-.47.749-1.054.88-1.69.13-.634.08-1.29-.143-1.897.588-.273 1.088-.704 1.444-1.244.354-.543.551-1.171.569-1.818z' fill='%231D9BF0'/%3E%3Cpath d='M9.585 14.929l-3.28-3.28 1.168-1.168 2.112 2.112 5.06-5.06 1.168 1.168-6.228 6.228z' fill='white'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.tweet-reply-original .tweet-verified-badge,
.tweet-quote-subcard .tweet-verified-badge {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
}

.tweet-handle {
  color: var(--text-secondary);
  font-size: 15.5px;
  white-space: nowrap;
}

.tweet-time {
  color: var(--text-secondary);
  font-size: 15px;
  white-space: nowrap;
}

.tweet-time::before { content: "·"; margin: 0 4px; }

/* Content */
.tweet-followers {
  font-size: 13px;
  color: var(--text-secondary);
  margin-left: 4px;
  flex-shrink: 0;
}

.tweet-followers::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 3px;
  vertical-align: -2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E") no-repeat center;
}

.tweet-note {
  font-size: 13px;
  color: #e8a43a;
  margin-top: 2px;
  opacity: 0.7;
}

.tweet-text {
  margin-top: 4px;
  font-size: 15px;
  line-height: 20px;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.tweet-text a { color: var(--accent); text-decoration: none; }
.tweet-text a:hover { text-decoration: underline; }
.tweet-text .hashtag { color: var(--accent); }
.tweet-text .mention { color: var(--accent); }
.tweet-text .cashtag { color: var(--accent); }

/* Media */
.tweet-media {
  margin-top: 12px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  display: grid;
  gap: 2px;
}

.tweet-media[data-count="1"] { grid-template-columns: 1fr; }
.tweet-media[data-count="2"] { grid-template-columns: 1fr 1fr; }
.tweet-media[data-count="3"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.tweet-media[data-count="3"] > :first-child { grid-row: 1 / 3; }
.tweet-media[data-count="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.tweet-media img, .tweet-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tweet-media[data-count="1"] img,
.tweet-media[data-count="1"] video {
  max-height: 300px;
  object-fit: contain;
  background: #000;
}

.tweet-media[data-count="2"] img,
.tweet-media[data-count="2"] video,
.tweet-media[data-count="3"] img,
.tweet-media[data-count="3"] video,
.tweet-media[data-count="4"] img,
.tweet-media[data-count="4"] video {
  height: 200px;
  object-fit: cover;
}

/* Quote */
.tweet-quote {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
}

.tweet-quote:hover { background: var(--hover); }

.tweet-quote .quote-header {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}

.tweet-quote .quote-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--border);
  overflow: hidden;
}

.tweet-quote .quote-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tweet-quote .quote-name { font-weight: 700; font-size: 13px; }
.tweet-quote .quote-handle { color: var(--text-secondary); font-size: 13px; }
.tweet-quote .quote-text { font-size: 14px; line-height: 18px; }

/* Actions */
.tweet-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  max-width: 425px;
}

.tweet-action {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 50px;
  transition: all 0.15s;
}

.tweet-action:hover { background: rgba(29, 155, 240, 0.1); color: var(--accent); }
.tweet-action.reply:hover { color: var(--accent); }
.tweet-action.retweet:hover { color: var(--success); background: rgba(0, 186, 124, 0.1); }
.tweet-action.like:hover { color: #f91880; background: rgba(249, 24, 128, 0.1); }
.tweet-action.views:hover { color: var(--accent); }

/* Latency */
.tweet-latency {
  display: inline-block;
  font-size: 11px;
  color: var(--text-secondary);
  background: rgba(29, 155, 240, 0.1);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 8px;
  font-family: "SF Mono", Monaco, monospace;
}

.tweet-latency.fast { color: var(--success); background: rgba(0, 186, 124, 0.1); }
.tweet-latency.medium { color: #ffd700; background: rgba(255, 215, 0, 0.1); }
.tweet-latency.slow { color: var(--danger); background: rgba(244, 33, 46, 0.1); }

/* Status dot */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.status-dot.connected { background: var(--success); }
.status-dot.disconnected { background: var(--danger); }
.status-dot.connecting { background: #ffd700; animation: pulse 1s infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* FAB */
.fab {
  position: fixed;
  z-index: 200;
}

.fab-top {
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  height: 36px;
  border-radius: 18px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 700;
  background: var(--accent);
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  gap: 4px;
}

.fab-top:hover { background: var(--accent-hover); }

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  color: var(--text-secondary);
  text-align: center;
}

.empty-state .icon { font-size: 48px; margin-bottom: 16px; }
.empty-state h2 { font-size: 20px; color: var(--text-primary); margin-bottom: 8px; }

/* ── Mobile Top Bar ── */
#mobile-topbar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(52px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
  align-items: center;
  justify-content: space-between;
  padding-left: 12px;
  padding-right: 12px;
}

.topbar-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--text-primary);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s;
}

.topbar-btn:hover { background: rgba(231, 233, 234, 0.1); }

.topbar-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ── Overlay ── */
#overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#overlay.active {
  display: block;
  opacity: 1;
}

/* ── Responsive ── */

/* Large: show everything normally */
@media (min-width: 1281px) {
  #mobile-topbar { display: none !important; }
  #overlay { display: none !important; }
}

/* Medium: hide right sidebar */
@media (max-width: 1280px) {
  #mobile-topbar { display: flex; }
  #main { padding-top: 52px; }
  header { top: 52px; }

  #right-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 340px;
    z-index: 999;
    background: var(--bg);
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    padding-top: 52px;
    overflow-y: auto;
  }

  #right-sidebar.panel-open {
    transform: translateX(0);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
  }
}

/* Narrow: also collapse left sidebar */
@media (max-width: 1000px) {
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100dvh;
    z-index: 999;
    background: var(--bg);
    border-right: 1px solid var(--border);
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    padding-top: 52px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    align-items: flex-start;
    padding-right: 0;
    overflow-y: auto;
  }

  #sidebar.panel-open {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.5);
  }

  .sidebar-inner {
    width: 100%;
    padding: 12px 16px;
    min-height: 100%;
  }

  .nav-item span { display: inline; }
  .nav-item { justify-content: flex-start; }

  #main {
    width: 100%;
    border: none;
  }
}

/* Mobile: full width feed */
@media (max-width: 620px) {
  #right-sidebar {
    width: 100%;
    padding-top: 52px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  #sidebar { width: 85%; max-width: 320px; }

  /* Tweet cards: tighter on mobile */
  .tweet-card { margin: 6px 4px; border-radius: 12px; }
  .tweet-main, .tweet { padding: 10px 12px; gap: 10px; }
  .tweet-avatar { width: 38px; height: 38px; }
  .tweet-avatar img { width: 38px; height: 38px; }
  .tweet-name, .tweet-name-link { font-size: 14px; max-width: 140px; }
  .tweet-handle { font-size: 13px; }
  .tweet-text { font-size: 14px; line-height: 19px; }
  .tweet-followers { font-size: 11px; }
  .tweet-note { font-size: 12px; }

  /* Sub-cards */
  .tweet-reply-original, .tweet-quote-subcard { padding: 8px 10px; gap: 8px; }
  .tweet-reply-original .tweet-avatar { width: 28px; height: 28px; }
  .tweet-reply-original .tweet-avatar img { width: 28px; height: 28px; }

  /* Media smaller on mobile */
  .tweet-media[data-count="1"] img,
  .tweet-media[data-count="1"] video { max-height: 220px; }
  .tweet-media[data-count="2"] img,
  .tweet-media[data-count="2"] video,
  .tweet-media[data-count="3"] img,
  .tweet-media[data-count="3"] video,
  .tweet-media[data-count="4"] img,
  .tweet-media[data-count="4"] video { height: 140px; }

  /* Header tabs */
  .header-tabs .tab { font-size: 14px; padding: 12px 0; }

  /* Right sidebar cards */
  .card { border-radius: 12px; }
  .card h3 { font-size: 15px; }

  /* Handle items */
  .handle-item { padding: 8px 0; }
  .handle-info .handle-name { font-size: 14px; }

  /* Settings/Admin content */
  .settings-header { padding: 12px 14px 10px; }
  .settings-header h2 { font-size: 16px; }
  .settings-content { padding: 0 14px; }
  .admin-create-form { max-width: 100%; }
  .admin-user-row { gap: 8px; flex-wrap: wrap; }
  .admin-user-date { font-size: 11px; }

  /* Contract badges */
  .tweet-card-footer { padding: 6px 12px 10px; }

  /* OCR section */
  .tweet-ocr { margin: 6px 12px 0; padding: 6px 8px; }

  /* Toast notifications */
  .toast { max-width: 85vw; right: 8px; font-size: 13px; }
}

/* ── Activity Panel ── */
#activity-panel {
  border-bottom: 1px solid var(--border);
  padding: 0 16px 16px;
}

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 12px;
}

.settings-header h2 {
  font-size: 18px;
  font-weight: 700;
}

.settings-content {
  padding: 0 20px;
}

.settings-section {
  margin-bottom: 24px;
}

.settings-section h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.settings-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.bot-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.bot-toggle-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bot-toggle-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bot-toggle-label {
  font-size: 14px;
  font-weight: 500;
}

.bot-default-btn {
  background: none;
  border: none;
  font-size: 16px;
  color: rgba(255,255,255,0.2);
  cursor: pointer;
  padding: 2px 4px;
  transition: color 0.15s;
}

.bot-default-btn:hover { color: rgba(255,255,255,0.5); }

.bot-default-btn.active { color: #facc15; }

.bot-save-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.bot-save-btn {
  padding: 8px 24px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.bot-save-btn:hover { opacity: 0.85; }

.bot-toggle-btn {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  border: none;
  background: #333;
  cursor: pointer;
  transition: background 0.2s;
  padding: 0;
}

.bot-toggle-btn.active {
  background: #39e58c;
}

.bot-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}

.bot-toggle-btn.active .bot-toggle-knob {
  transform: translateX(20px);
}

.contract-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.contract-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: none;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  color: var(--text-secondary);
  opacity: 0.3;
  cursor: pointer;
  transition: opacity 0.15s;
  vertical-align: middle;
}

.contract-copy-btn:hover { opacity: 0.8; }

.contract-copy-btn.copied {
  opacity: 1;
  color: #39e58c;
}

.auth-msg {
  font-size: 13px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  line-height: 1.4;
}

.auth-msg.error {
  color: #ef4444;
  background: rgba(239,68,68,0.08);
}

.auth-msg.success {
  color: #39e58c;
  background: rgba(57,229,140,0.08);
}

/* Admin avatars */
.admin-avatar-wrap {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
}

.admin-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.admin-avatar-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  color: var(--text-secondary);
}

.admin-avatar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.15s;
}

.admin-avatar-wrap:hover .admin-avatar-overlay {
  opacity: 1;
}

/* My avatar in nav */
.my-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.my-avatar-placeholder {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

.admin-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 14px;
}

.admin-user-name {
  font-weight: 600;
  min-width: 120px;
}

.admin-user-role {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  opacity: 0.5;
}

.admin-user-role.superadmin {
  color: #facc15;
  opacity: 1;
}

.admin-user-date {
  font-size: 12px;
  color: var(--text-secondary);
  opacity: 0.4;
  margin-left: auto;
}

.admin-btn {
  padding: 4px 12px;
  border-radius: 6px;
  border: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.admin-btn.approve {
  background: rgba(57,229,140,0.15);
  color: #39e58c;
}

.admin-btn.reject {
  background: rgba(239,68,68,0.15);
  color: #ef4444;
}

.admin-btn:hover { opacity: 0.8; }

.admin-create-form {
  display: flex;
  flex-direction: column;
  max-width: 300px;
}

.handle-search-input {
  width: 100%;
  padding: 8px 12px;
  margin-bottom: 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #0a0a0b;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}

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

.handle-search-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.5;
}

.tweet-avatar {
  position: relative;
}

.tweet-hide-btn {
  position: absolute;
  top: -4px;
  left: -4px;
  padding: 3px;
  background: rgba(0,0,0,0.6);
  border: none;
  border-radius: 50%;
  color: var(--text-secondary);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.15s;
  z-index: 2;
  line-height: 0;
}

.tweet-card:hover .tweet-main > .tweet-avatar > .tweet-hide-btn {
  opacity: 0.3;
}

.tweet-hide-btn:hover {
  opacity: 0.8 !important;
  color: #facc15;
}

.tweet-ocr {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary);
}

.tweet-ocr-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #a78bfa;
  opacity: 0.7;
  margin-right: 8px;
  vertical-align: middle;
}

.tweet-ocr-text {
  word-break: break-word;
}

.inline-contract,
.inline-contract:link,
.inline-contract:visited,
.inline-contract:active {
  color: #f59e0b !important;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.92em;
  text-decoration: none;
  transition: color 0.15s;
  word-break: break-all;
}

.inline-contract:hover {
  color: #fbbf24 !important;
}

.inline-contract-wrap {
  display: inline;
}

.inline-contract-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  margin-left: 4px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.25);
  cursor: pointer;
  transition: color 0.15s;
  vertical-align: middle;
}

.inline-contract-copy:hover { color: rgba(255,255,255,0.7); }

.inline-contract-copy.copied { color: #39e58c; }

.contract-chain-select {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.chain-option {
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.chain-option:hover {
  border-color: rgba(255,255,255,0.2);
  color: var(--text-primary);
}

.chain-option.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(29,155,240,0.08);
}

.linked-chain-select {
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  background: #0a0a0b;
  color: var(--text-secondary);
  cursor: pointer;
  min-width: 70px;
}

.linked-chain-select:focus {
  border-color: var(--accent);
  outline: none;
}

.contract-chain-tag {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.5;
  letter-spacing: 0.04em;
  margin-right: 4px;
}

.contract-badge-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0 12px;
}

.activity-header h2 {
  font-size: 18px;
  font-weight: 700;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(47, 51, 54, 0.5);
}

.activity-item:last-child { border-bottom: none; }

.activity-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.activity-icon.added { background: rgba(34, 197, 94, 0.12); }
.activity-icon.removed { background: rgba(244, 63, 94, 0.12); }
.activity-icon.edited { background: rgba(245, 158, 11, 0.12); }
.activity-icon.contract { background: rgba(139, 92, 246, 0.12); }

.activity-body { flex: 1; min-width: 0; }

.activity-text {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.4;
}

.activity-text strong { font-weight: 700; }
.activity-text .handle-link { color: var(--accent); text-decoration: none; }
.activity-text .handle-link:hover { text-decoration: underline; }

.activity-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 3px;
}

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

.activity-undo {
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  font-weight: 500;
}

.activity-undo:hover {
  color: var(--text-primary);
  border-color: var(--accent);
  background: rgba(29, 155, 240, 0.08);
}

/* Add handle form */
.add-handle-form {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  transition: border-color 0.2s;
}

.add-handle-form:focus-within {
  border-color: rgba(29, 155, 240, 0.3);
}

.add-handle-form .cs-dropdown {
  max-width: 100%;
}

.add-handle-msg {
  font-size: 12px;
  font-weight: 500;
  padding: 6px 0 0;
  text-align: center;
  animation: fadeIn 0.15s ease;
}

.add-handle-msg.error { color: #f43f5e; }
.add-handle-msg.success { color: #22c55e; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.add-handle-extra {
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 10px;
  animation: slideDown 0.15s ease;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.add-handle-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.add-handle-row .custom-select.full-row {
  grid-column: 1 / -1;
}

/* Custom select dropdowns */
.custom-select {
  flex: 1;
  min-width: 0;
  position: relative;
}

.cs-trigger {
  width: 100%;
  padding: 8px 28px 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  position: relative;
}

.cs-trigger::after {
  content: '›';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  font-size: 14px;
  color: var(--text-secondary);
  transition: transform 0.15s;
}

.cs-trigger.open::after {
  transform: translateY(-50%) rotate(-90deg);
}

.cs-trigger.has-value {
  color: var(--text-primary);
}

.cs-trigger:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

.cs-trigger.base { color: #3b82f6; border-color: #3b82f644; }
.cs-trigger.solana { color: #9945ff; border-color: #9945ff44; }
.cs-trigger.bsc { color: #f0b90b; border-color: #f0b90b44; }
.cs-trigger.ethereum { color: #627eea; border-color: #627eea44; }
.cs-trigger.arbitrum { color: #28a0f0; border-color: #28a0f044; }
.cs-trigger.bankr { color: #f97316; border-color: #f9731644; }
.cs-trigger.clanker { color: #22d3ee; border-color: #22d3ee44; }
.cs-trigger.flaunch { color: #a3e635; border-color: #a3e63544; }
.cs-trigger.fourmeme { color: #f0b90b; border-color: #f0b90b44; }
.cs-trigger.pumpfun { color: #22c55e; border-color: #22c55e44; }
.cs-trigger.bonk { color: #f59e0b; border-color: #f59e0b44; }
.cs-trigger.bags { color: #ec4899; border-color: #ec489944; }
.cs-trigger.meteora { color: #6366f1; border-color: #6366f144; }
.cs-trigger.normal { color: var(--text-secondary); }
.cs-trigger.dev { color: #60a5fa; border-color: #60a5fa44; }
.cs-trigger.project { color: #a78bfa; border-color: #a78bfa44; }

.cs-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #16181c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 4px;
  z-index: 300;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  animation: menuPop 0.12s ease;
}

.cs-dropdown.show { display: block; }

.cs-opt {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.1s;
}

.cs-opt:hover { background: rgba(255, 255, 255, 0.06); }
.cs-opt.none { color: var(--text-secondary); }
.cs-opt.dev { color: #60a5fa; }
.cs-opt.project { color: #a78bfa; }
.cs-opt.base { color: #3b82f6; }
.cs-opt.solana { color: #9945ff; }
.cs-opt.bsc { color: #f0b90b; }
.cs-opt.ethereum { color: #627eea; }
.cs-opt.arbitrum { color: #28a0f0; }

/* Launchpad colors (shared: cs-opt, type-opt, handle-launchpad) */
.cs-opt.bankr, .type-opt.bankr { color: #f97316; }
.cs-opt.clanker, .type-opt.clanker { color: #22d3ee; }
.cs-opt.flaunch, .type-opt.flaunch { color: #a3e635; }
.cs-opt.fourmeme, .type-opt.fourmeme { color: #f0b90b; }
.cs-opt.pumpfun, .type-opt.pumpfun { color: #22c55e; }
.cs-opt.bonk, .type-opt.bonk { color: #f59e0b; }
.cs-opt.bags, .type-opt.bags { color: #ec4899; }
.cs-opt.meteora, .type-opt.meteora { color: #6366f1; }
.cs-opt.normal, .type-opt.normal { color: var(--text-secondary); }

/* Handle card launchpad colors */
.handle-launchpad.bankr { color: #f97316; border-color: #f9731655; }
.handle-launchpad.clanker { color: #22d3ee; border-color: #22d3ee55; }
.handle-launchpad.flaunch { color: #a3e635; border-color: #a3e63555; }
.handle-launchpad.fourmeme { color: #f0b90b; border-color: #f0b90b55; }
.handle-launchpad.pumpfun { color: #22c55e; border-color: #22c55e55; }
.handle-launchpad.bonk { color: #f59e0b; border-color: #f59e0b55; }
.handle-launchpad.bags { color: #ec4899; border-color: #ec489955; }
.handle-launchpad.meteora { color: #6366f1; border-color: #6366f155; }
.handle-launchpad.normal { color: var(--text-secondary); border-color: rgba(255,255,255,0.1); }

.input-note {
  width: 100%;
  font-size: 13px;
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: all 0.15s;
  box-sizing: border-box;
}

.input-note:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(29, 155, 240, 0.04);
}

.input-note::placeholder {
  color: rgba(255, 255, 255, 0.2);
}

/* Linked data sections */
.linked-section {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 6px;
  margin-top: 6px;
}

.linked-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.15s;
}

.linked-header:hover { color: var(--text-primary); }

.linked-count {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.2);
}

.linked-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 0;
  animation: slideDown 0.12s ease;
}

.linked-field-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.linked-field-row input {
  flex: 1;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 12px;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

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

.linked-field-row input::placeholder {
  color: rgba(255, 255, 255, 0.15);
  font-family: inherit;
}

.linked-field-remove {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  font-size: 16px;
  padding: 2px;
  transition: color 0.15s;
  flex-shrink: 0;
}

.linked-field-remove:hover { color: #f43f5e; }

.linked-add-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 0;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.linked-add-btn:hover { opacity: 1; }

/* Project fields (two inputs side by side) */
.linked-project-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 6px;
  align-items: center;
}

.linked-project-row input {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 12px;
  min-width: 0;
}

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

.linked-project-row input::placeholder {
  color: rgba(255, 255, 255, 0.15);
}

/* Chain & Launchpad badges */
.handle-chain, .handle-launchpad {
  background: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  color: rgba(255,255,255,0.25);
  transition: all 0.15s;
}

.handle-chain:hover, .handle-launchpad:hover { opacity: 0.8; }

.handle-chain.base { color: #3b82f6; border-color: #3b82f644; }
.handle-chain.solana { color: #9945ff; border-color: #9945ff44; }
.handle-chain.bsc { color: #f0b90b; border-color: #f0b90b44; }
.handle-chain.ethereum { color: #627eea; border-color: #627eea44; }
.handle-chain.arbitrum { color: #28a0f0; border-color: #28a0f044; }

/* Reply context */
.reply-context {
  margin-bottom: 8px;
  padding: 8px 12px;
  border-left: 2px solid var(--border);
  border-radius: 0 8px 8px 0;
  background: rgba(255, 255, 255, 0.03);
}

.reply-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

.reply-original {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.3;
}

.activity-empty {
  text-align: center;
  padding: 32px 0;
  color: var(--text-secondary);
  font-size: 14px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }