:root {
  --bg: #07070a;
  --panel: #121218;
  --panel-2: #171720;
  --line: #252533;
  --text: #f1f1f6;
  --muted: #9c9caf;
  --profit: #1ad57a;
  --loss: #ff596f;
  --purple-1: #7a4dff;
  --purple-2: #965bff;
  --radius: 16px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: radial-gradient(70% 50% at 80% 0%, #2a1f4a 0%, transparent 60%), #050507;
  color: var(--text);
  font-family: "Manrope", sans-serif;
}

.app-shell {
  max-width: 460px;
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: linear-gradient(180deg, rgba(8,8,12,0.95), rgba(6,6,9,0.98));
}

header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(9, 9, 12, 0.9);
  backdrop-filter: blur(8px);
}

.brand-row { display: flex; justify-content: space-between; align-items: flex-start; }
.kicker { margin: 0 0 4px; font-size: 10px; color: #b6a7ff; letter-spacing: 1.1px; text-transform: uppercase; }
h1 { margin: 0; font-size: 24px; }

.header-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }

main { padding: 12px; padding-bottom: 95px; }

.panel {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 12px;
}

.profile-hero {
  border-color: #34324a;
  background: linear-gradient(130deg, rgba(122,77,255,0.22), rgba(18,18,24,0.9));
}

.panel-title { display: flex; justify-content: space-between; align-items: center; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { background: #101018; border: 1px solid #2c2c3a; border-radius: 12px; padding: 10px; }
.stat small { color: var(--muted); display: block; font-size: 11px; }
.stat strong { font-size: 15px; }

.market-ticker { overflow-x: auto; white-space: nowrap; margin-bottom: 10px; scrollbar-width: none; }
.market-ticker::-webkit-scrollbar { display: none; }
.ticker-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
  border: 1px solid #2d2d3b;
  border-radius: 999px;
  background: #11111a;
  color: var(--text);
  padding: 8px 11px;
  font-size: 12px;
}

.feed-card {
  border: 1px solid #2a2a37;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
  background: #101017;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  will-change: transform;
}
.feed-card:hover {
  transform: translateY(-2px);
  border-color: #3e3860;
  box-shadow: 0 10px 24px rgba(122,77,255,.18);
}

.inline-left { display: flex; align-items: center; }
.token-avatar {
  width: 28px; height: 28px; border-radius: 9px; border: 0; margin-right: 8px;
  background: linear-gradient(140deg, #7a4dff, #965bff); color: #f6f0ff; font-weight: 800; font-size: 10px;
}
.action-badge {
  border-radius: 999px; border: 1px solid #3b3458; background: rgba(122,77,255,0.18);
  color: #c7b9ff; font-size: 11px; padding: 5px 9px;
}

button {
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 12px;
  font-weight: 700;
  color: #f5f2ff;
  background: #1b1b25;
  transition: transform .14s ease, filter .14s ease, box-shadow .2s ease;
}
button:hover { filter: brightness(1.04); }
button:active { transform: translateY(1px) scale(.99); }
button.primary {
  background: linear-gradient(100deg, var(--purple-1), var(--purple-2));
  box-shadow: 0 0 20px rgba(122, 77, 255, 0.4);
}
button.warn { background: linear-gradient(100deg, #7a4dff, #965bff); }
button.ghost { background: #14141c; border: 1px solid #2e2e3b; color: #bbb8cf; }
button.wide { width: 100%; margin-top: 10px; }

input, textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #2f2f3c;
  background: #0f0f17;
  color: var(--text);
  padding: 11px;
  margin-top: 8px;
  margin-bottom: 8px;
  font-family: inherit;
}
textarea { min-height: 80px; resize: vertical; }

.pill {
  font-size: 11px;
  border-radius: 999px;
  padding: 6px 11px;
  color: #d6cdf8;
  border: 1px solid #40385f;
  background: #161422;
}
.badge {
  font-size: 10px;
  border-radius: 999px;
  padding: 4px 8px;
  font-weight: 700;
}
.badge.hot {
  color: #d8ceff;
  border: 1px solid #473c6d;
  background: rgba(122,77,255,0.2);
}

.token-filter-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.token-filter-row::-webkit-scrollbar { display: none; }
.token-filter {
  white-space: nowrap;
  border-radius: 999px;
  background: #151522;
  border: 1px solid #323246;
  color: #b8b4ce;
}
.token-filter.active {
  background: linear-gradient(100deg, rgba(122,77,255,.35), rgba(150,91,255,.22));
  border-color: #56478c;
  color: #ece7ff;
}

.board-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #2d2d3a;
  border-radius: 12px;
  background: #0f0f16;
  margin-bottom: 8px;
}
.board-title {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
}
.tag {
  font-size: 10px;
  border-radius: 999px;
  padding: 3px 7px;
  border: 1px solid #3f3a5d;
  color: #cbc0fb;
  background: rgba(122,77,255,.16);
}
.tag.verified { border-color: #5b49a4; color: #d9ccff; }
.tag.inapp { border-color: #2a5f43; color: #92f4be; background: rgba(17, 91, 53, .22); }

.muted { color: var(--muted); font-size: 12px; }
.tiny { font-size: 11px; margin: 3px 0 0; }
.profit { color: var(--profit); }
.loss { color: var(--loss); }

.sparkline-wrap { margin-top: 8px; border: 1px solid #2d2d3a; border-radius: 12px; padding: 8px; background: #0f0f16; }
.sparkline { width: 100%; height: 92px; display: block; }

.buyer-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid #2d2d3a; border-radius: 12px; background: #0f0f16; padding: 10px; margin-bottom: 8px;
}
.rank {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 8px;
  border-radius: 9px; background: linear-gradient(140deg, #7a4dff, #965bff); color: #fff; font-size: 11px; font-weight: 800;
}

.mini-list { margin-top: 10px; }
.pulse-item { border: 1px solid #2c2c39; border-radius: 10px; padding: 9px; background: #101018; margin-bottom: 8px; }

.tabs {
  position: fixed;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: min(445px, calc(100% - 16px));
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  border-radius: 16px;
  padding: 8px;
  background: rgba(12, 12, 18, 0.95);
  border: 1px solid #2f2f40;
}

.tab {
  border-radius: 10px;
  font-size: 11px;
  color: #9f9fbb;
  padding: 9px 4px;
  background: transparent;
  border: 1px solid transparent;
}
.tab.active {
  color: #e7dcff;
  border-color: #4b3f74;
  background: linear-gradient(180deg, rgba(122,77,255,0.2), rgba(27,27,37,0.9));
}

.hidden { display: none; }
.screen { animation: fadeIn .22s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px);} to { opacity:1; transform: translateY(0);} }

@media (max-width: 360px) { .header-actions { grid-template-columns: 1fr; } }
.social-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.social-stat {
  border: 1px solid #2d2d3a;
  border-radius: 12px;
  background: #101018;
  padding: 10px;
}

.social-stat small {
  color: var(--muted);
  display: block;
  font-size: 11px;
}

.social-stat strong {
  font-size: 16px;
}

.copy-settings {
  border: 1px solid #313145;
  border-radius: 12px;
  background: #0f0f17;
  padding: 10px;
}

.profile-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mini-pill {
  font-size: 11px;
  border-radius: 999px;
  border: 1px solid #34344a;
  background: #131320;
  color: #bdb9d2;
  padding: 4px 8px;
}

.mini-pill.on {
  border-color: #2d6446;
  color: #9ff5c6;
  background: rgba(17, 91, 53, .22);
}

.mini-pill.off {
  border-color: #5e3851;
  color: #f2b3ca;
  background: rgba(116, 35, 72, .22);
}

.followers-block {
  margin-top: 12px;
  border: 1px solid #313145;
  border-radius: 12px;
  background: #0f0f17;
  padding: 10px;
}

.followers-list {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}

.follower-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #2d2d3a;
  border-radius: 10px;
  padding: 8px 10px;
  background: #11111a;
}

.board-left {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.board-right {
  text-align: right;
  min-width: 86px;
  align-self: center;
}

.board-desc {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.25;
}

.board-title {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
}


.sell-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}