/* AlphaBros design system (from the exevia.html sandbox). Change these tokens to restyle every screen. */
:root {
  color-scheme: light;
  --bg:#f0edf8;
  --surface:#fffefd;
  --panel:#fcfbff;
  --soft:#f5f1ff;
  --text:#25203c;
  --muted:#80769c;
  --faint:#aaa1bd;
  --border:#e0d9f3;
  --shadow:#dbd3ef;
  --accent:#7147f7;
  --accent-hover:#6035e5;
  --accent-soft:#eee7ff;
  --green:#008f66;
  --green-soft:#dff6ed;
  --red:#d75362;
  --red-soft:#ffeaeb;
  --yellow:#fff0c8;
  --gold:#9b7016;
  --sidebar:218px;
  --header:76px;
  --radius:17px;
  --font:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[data-theme="dark"] {
  color-scheme:dark;
  --bg:#15131f;
  --surface:#211d2d;
  --panel:#211e2d;
  --soft:#292336;
  --text:#f1ebff;
  --muted:#a69abb;
  --faint:#7b708d;
  --border:#3a314e;
  --shadow:#100d19;
  --accent:#9a75ff;
  --accent-hover:#ac8dff;
  --accent-soft:#3a2b58;
  --green:#65d9b0;
  --green-soft:#183a32;
  --red:#ff8995;
  --red-soft:#432630;
  --yellow:#433923;
  --gold:#ecd187;
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  font-family:var(--font);
  font-size:14px;
  line-height:1.5;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased
}

button,input,select,textarea {
  font:inherit
}

button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}

button,a {
  touch-action:manipulation
}

button {
  color:inherit;
  cursor:pointer
}

button {
  border:0;
  background:none
}

a {
  color:inherit;
  text-decoration:none
}

svg {
  flex-shrink:0;
  vertical-align:middle
}

button svg,a svg {
  pointer-events:none
}

input,select,textarea {
  color:var(--text);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:9px;
  padding:10px 12px;
  outline:none;
  width:100%;
  transition:.15s
}

input:focus,select:focus,textarea:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)
}

input[type="checkbox"],input[type="radio"] {
  accent-color:var(--accent);
  width:16px;
  height:16px;
  box-shadow:none;
  cursor:pointer
}

textarea {
  resize:vertical;
  min-height:94px
}

select {
  padding-right:24px;
  cursor:pointer
}

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

button:not(:disabled):active {
  transform:translateY(1px)
}

:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:3px
}

h1,h2,h3,h4,p {
  margin:0
}

h1 {
  font-size:32px;
  line-height:1.18;
  letter-spacing:-1.2px;
  font-weight:780
}

h2 {
  font-size:20px;
  letter-spacing:-.5px;
  line-height:1.3
}

h3 {
  font-size:15px;
  font-weight:750;
  letter-spacing:-.15px
}

h4 {
  font-size:13px;
  font-weight:750
}

p {
  line-height:1.7
}

small {
  font-size:11px
}

hr {
  border:0;
  border-top:1px solid var(--border);
  margin:20px 0
}

.icon {
  width:19px;
  height:19px
}

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

.faint {
  color:var(--faint)
}

.positive {
  color:var(--green)
}

.negative {
  color:var(--red)
}

.accent {
  color:var(--accent)
}

.mono {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace
}

.nowrap {
  white-space:nowrap
}

.right {
  text-align:right
}

.center {
  text-align:center
}

.full {
  width:100%
}

.hide {
  display:none!important
}

.small {
  font-size:12px
}

.tiny {
  font-size:10px
}

.bold {
  font-weight:750
}

.flex {
  display:flex;
  align-items:center
}

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

.gap6 {
  gap:6px
}

.gap8 {
  gap:8px
}

.gap12 {
  gap:12px
}

.gap16 {
  gap:16px
}

.wrap {
  flex-wrap:wrap
}

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

.spacer {
  flex:1
}

.mt8 {
  margin-top:8px
}

.mt12 {
  margin-top:12px
}

.mt16 {
  margin-top:16px
}

.mt24 {
  margin-top:24px
}

.mb16 {
  margin-bottom:16px
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:1.8px;
  font-size:10px;
  font-weight:800;
  color:var(--accent);
  margin-bottom:9px
}

.tag {
  font-size:10px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 8px;
  border-radius:6px;
  line-height:1.3;
  background:var(--soft);
  color:var(--muted);
  font-weight:650;
  white-space:nowrap
}

.tag.green {
  background:var(--green-soft);
  color:var(--green)
}

.tag.red {
  background:var(--red-soft);
  color:var(--red)
}

.tag.purple {
  background:var(--accent-soft);
  color:var(--accent)
}

.tag.gold {
  background:var(--yellow);
  color:var(--gold)
}

.tag.outline {
  background:transparent;
  border:1px solid var(--border)
}

.badge-dot {
  width:6px;
  height:6px;
  background:currentColor;
  border-radius:50%;
  display:inline-block
}

.skip-link {
  position:fixed;
  z-index:1000;
  left:20px;
  top:-80px;
  background:var(--surface);
  padding:12px;
  border:2px solid var(--accent)
}

.skip-link:focus {
  top:12px
}

/* Shell */
.sidebar {
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  width:var(--sidebar);
  background:var(--panel);
  border-right:1px solid var(--border);
  padding:25px 15px 16px;
  z-index:40;
  display:flex;
  flex-direction:column
}

.brand {
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 5px 28px
}

.brand-symbol {
  width:34px;
  height:29px
}

.brand-name {
  font-size:23px;
  font-weight:820;
  letter-spacing:-1px;
  line-height:1
}

.brand-sub {
  font-size:8px;
  letter-spacing:1.5px;
  color:var(--muted);
  margin-top:5px;
  text-transform:uppercase
}

.sidebar-section {
  font-size:9px;
  letter-spacing:1.7px;
  color:var(--faint);
  font-weight:750;
  padding:17px 13px 9px
}

.nav-link {
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px 13px;
  margin:3px 0;
  border:1px solid transparent;
  border-radius:10px;
  font-size:12px;
  color:var(--muted);
  font-weight:620;
  min-height:42px
}

.nav-link:hover {
  background:var(--soft);
  color:var(--text)
}

.nav-link.active {
  background:var(--accent-soft);
  border-color:#bdabfb;
  color:var(--accent);
  font-weight:750
}

.nav-link .icon {
  width:18px;
  height:18px
}

.nav-link .nav-count {
  margin-left:auto;
  font-size:10px;
  background:var(--surface);
  padding:0 6px;
  border-radius:5px
}

.sidebar-create {
  margin:20px 0 10px
}

.sidebar-foot {
  margin-top:auto;
  padding-top:12px
}

.sidebar-foot .nav-link {
  font-size:11px;
  min-height:34px;
  padding:7px 12px
}

.theme-control {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 10px 6px;
  color:var(--muted);
  font-size:11px;
  border-top:1px dashed var(--border);
  margin-top:10px
}

.theme-buttons {
  display:flex;
  border:1px solid var(--border);
  background:var(--soft);
  padding:3px;
  border-radius:8px
}

.theme-buttons button {
  border-radius:5px;
  padding:3px 6px;
  line-height:1
}

.theme-buttons button.active {
  background:var(--text);
  color:var(--panel)
}

.theme-buttons .icon {
  width:14px;
  height:14px
}

.sidebar-sandbox {
  font-size:9px;
  letter-spacing:.35px;
  color:var(--faint);
  padding:10px 10px 0
}

.topbar {
  height:var(--header);
  position:fixed;
  left:var(--sidebar);
  right:0;
  top:0;
  background:var(--panel);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  padding:0 26px;
  gap:14px;
  z-index:30
}

.search-box {
  display:flex;
  align-items:center;
  position:relative;
  gap:8px;
  max-width:458px;
  width:42%;
  min-width:200px
}

.search-box .icon {
  position:absolute;
  left:13px;
  color:var(--muted);
  width:17px
}

.search-box input {
  padding:11px 38px;
  background:var(--surface);
  font-size:12px;
  border-radius:10px
}

.search-box kbd {
  position:absolute;
  right:11px;
  color:var(--faint);
  font-size:10px;
  border:1px solid var(--border);
  border-radius:4px;
  padding:0 5px
}

.topbar-spacer {
  flex:1
}

.sandbox-pill {
  font-size:10px;
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--muted);
  white-space:nowrap
}

.sandbox-pill .badge-dot {
  color:#a38ec7
}

.chain-select {
  width:133px;
  font-size:11px;
  background:var(--surface);
  padding:9px 12px
}

.topbar .btn {
  font-size:11px;
  padding:10px 14px;
  white-space:nowrap
}

.mobile-menu {
  display:none
}

.search-results {
  position:fixed;
  left:calc(var(--sidebar) + 26px);
  top:65px;
  width:458px;
  max-height:420px;
  overflow:auto;
  padding:8px;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:0 16px 60px #20113725;
  border-radius:12px;
  z-index:90
}

.search-result {
  display:flex;
  padding:9px;
  gap:12px;
  align-items:center;
  border-radius:8px
}

.search-result:hover {
  background:var(--soft)
}

.search-result strong {
  font-size:12px
}

.search-result small {
  display:block;
  color:var(--muted);
  font-size:10px
}

.main {
  margin-left:var(--sidebar);
  padding:calc(var(--header) + 25px) 25px 40px;
  min-height:100vh;
  background-image:radial-gradient(var(--border) .8px,transparent .8px);
  background-size:18px 18px
}

.content-width {
  max-width:1740px;
  margin:0 auto
}

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

.page-head p {
  color:var(--muted);
  font-size:12px;
  margin-top:9px
}

.head-actions {
  display:flex;
  gap:9px;
  align-items:center
}

.view-note {
  color:var(--muted);
  font-size:10px;
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:18px
}

.view-note .icon {
  width:13px;
  height:13px
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:9px;
  min-height:39px;
  padding:9px 14px;
  font-weight:700;
  font-size:12px;
  border:1px solid var(--border);
  background:var(--surface);
  transition:background .15s,box-shadow .15s,transform .15s;
  line-height:1.4
}

.btn:hover {
  background:var(--soft);
  border-color:#bdb0dd
}

.btn.primary {
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  box-shadow:0 3px 0 #4f2bc7
}

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

.btn.dark {
  background:var(--text);
  border-color:var(--text);
  color:var(--panel)
}

.btn.ghost {
  border-color:transparent;
  box-shadow:none;
  background:transparent;
  color:var(--accent)
}

.btn.ghost:hover {
  background:var(--accent-soft)
}

.btn.danger {
  color:var(--red);
  border-color:var(--red);
  background:var(--red-soft)
}

.btn.sm {
  min-height:30px;
  padding:6px 10px;
  font-size:10px;
  border-radius:7px
}

.btn .icon {
  width:15px;
  height:15px
}

.icon-btn {
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--muted)
}

.icon-btn:hover {
  color:var(--accent);
  background:var(--accent-soft)
}

.icon-btn .icon {
  width:15px;
  height:15px
}

.icon-btn.bookmarked {
  color:var(--accent);
  background:var(--accent-soft)
}

.text-link {
  display:inline-flex;
  gap:5px;
  align-items:center;
  color:var(--accent);
  font-weight:700;
  font-size:11px
}

.text-link:hover {
  text-decoration:underline
}

.text-link .icon {
  width:13px;
  height:13px
}

.panel {
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 3px 0 var(--shadow);
  min-width:0;
  overflow:hidden
}

.panel-pad {
  padding:20px
}

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

.panel-title {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:14px;
  font-weight:750;
  letter-spacing:-.2px
}

.title-icon {
  width:29px;
  height:29px;
  background:var(--accent-soft);
  color:var(--accent);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px
}

.title-icon .icon {
  width:15px;
  height:15px
}

.title-icon.green {
  background:var(--green-soft);
  color:var(--green)
}

.title-icon.gold {
  background:var(--yellow);
  color:var(--gold)
}

.panel-bottom {
  padding:13px 20px;
  border-top:1px dashed var(--border)
}

.segmented {
  display:inline-flex;
  gap:2px;
  padding:3px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--soft);
  flex-shrink:0
}

.segmented button {
  font-size:10px;
  font-weight:650;
  color:var(--muted);
  border-radius:6px;
  padding:4px 10px;
  white-space:nowrap;
  min-height:25px
}

.segmented button.active {
  background:var(--text);
  color:var(--panel);
  box-shadow:0 1px 3px #0002
}

.tabs {
  display:flex;
  gap:6px;
  align-items:center;
  border-bottom:1px solid var(--border);
  padding:12px 18px;
  overflow:auto;
  scrollbar-width:thin
}

.tabs button,.tab {
  font-size:11px;
  line-height:1.4;
  white-space:nowrap;
  font-weight:700;
  padding:8px 12px;
  border:1px solid transparent;
  color:var(--muted);
  border-radius:8px
}

.tabs button:hover,.tab:hover {
  background:var(--soft)
}

.tabs button.active,.tab.active {
  background:var(--accent-soft);
  border-color:#bca7ff;
  color:var(--accent)
}

.tabs.clean {
  border:0;
  padding:0
}

.filter-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:20px
}

.filters {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap
}

.filter-select {
  width:auto;
  min-width:114px;
  font-size:11px;
  padding:8px 10px;
  background:var(--panel)
}

/* Avatars are original, editable vector artwork, not scraped assets. */
.avatar {
  display:inline-flex;
  position:relative;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:38px;
  height:38px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid #00000009;
  background:#e3d8ff;
  color:#6d44b8;
  box-shadow:inset 0 -3px 0 #0000000c
}

.avatar.violet {
  background:#e7dfff;
  color:#8358cb
}

.avatar.mint {
  background:#dcf3e9;
  color:#3a947c
}

.avatar.peach {
  background:#ffe5d4;
  color:#cc8953
}

.avatar.blue {
  background:#daeaff;
  color:#498bd2
}

.avatar.rose {
  background:#fddfea;
  color:#c96b97
}

.avatar.gold {
  background:#fff0c4;
  color:#b58b26
}

.avatar.slate {
  background:#e0e4ec;
  color:#64758d
}

.avatar.cyan {
  background:#d5f2f5;
  color:#499baa
}

.avatar .bot-art {
  width:100%;
  height:100%
}

.avatar.sm {
  width:32px;
  height:32px;
  border-radius:10px
}

.avatar.xs {
  width:24px;
  height:24px;
  border-radius:8px
}

.avatar.lg {
  width:56px;
  height:56px;
  border-radius:17px
}

.avatar.xl {
  width:76px;
  height:76px;
  border-radius:22px
}

.token-avatar {
  border-radius:50%;
  font-weight:850;
  font-size:15px;
  width:33px;
  height:33px
}

.avatar.token-avatar.lg {
  width:46px;
  height:46px;
  font-size:20px
}

.chain-dot {
  display:inline-flex;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#2c6cf6;
  color:#fff;
  font-size:8px;
  align-items:center;
  justify-content:center;
  font-weight:800;
  flex-shrink:0
}

.chain-dot.ethereum {
  background:#8b91be
}

.chain-dot.arbitrum {
  background:#263e61
}

.chain-dot.bnb {
  background:#e5b42c;
  color:#392f11
}

.network-label {
  display:inline-flex;
  gap:4px;
  align-items:center;
  font-size:10px;
  color:var(--muted)
}

.social-check {
  display:inline-flex;
  color:var(--accent);
  margin-left:3px
}

.social-check .icon {
  width:13px;
  height:13px
}

.sparkline {
  display:block;
  width:100%;
  height:52px;
  overflow:visible
}

.sparkline.mini {
  width:62px;
  height:27px
}

.chart-line {
  fill:none;
  stroke:var(--accent);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round
}

.chart-line.negative {
  stroke:var(--red)
}

.chart-line.positive {
  stroke:var(--green)
}

/* Feed */
.feed-grid {
  display:grid;
  grid-template-columns:minmax(220px,.8fr) minmax(365px,1.65fr) minmax(228px,.83fr);
  gap:18px;
  align-items:start
}

.feed-grid>.stack {
  position:sticky;
  top:calc(var(--header) + 20px)
}

.list-controls {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:14px 16px 8px;
  color:var(--muted);
  font-size:10px
}

.leader-row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 16px;
  transition:.12s;
  min-width:0
}

.leader-row:hover {
  background:var(--soft)
}

.leader-row .info {
  flex:1;
  min-width:0
}

.leader-row strong {
  display:block;
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.leader-row small {
  display:block;
  font-size:9px;
  color:var(--muted);
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.leader-row .value {
  font-size:11px;
  font-weight:800;
  white-space:nowrap
}

.rank {
  font-size:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  background:var(--soft);
  border-radius:6px;
  min-width:22px;
  height:24px;
  font-weight:800
}

.rank.rank1 {
  background:#ffe59a;
  color:#976816
}

.rank.rank2 {
  background:#e5e1f2;
  color:#6d648d
}

.rank.rank3 {
  background:#ffdec4;
  color:#a36e3c
}

.leader-foot {
  font-size:9px;
  color:var(--muted);
  padding:11px 15px;
  border-top:1px dashed var(--border)
}

.feed-composer {
  padding:17px 20px;
  display:flex;
  gap:10px;
  border-bottom:1px dashed var(--border);
  align-items:center
}

.composer-btn {
  flex:1;
  color:var(--faint);
  font-size:11px;
  text-align:left;
  border-radius:9px;
  border:1px solid var(--border);
  background:var(--soft);
  padding:10px 13px
}

.feed-post {
  padding:20px;
  border-bottom:1px solid var(--border)
}

.feed-post:last-child {
  border-bottom:0
}

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

.post-meta {
  flex:1;
  min-width:0
}

.post-meta strong {
  font-size:12px
}

.post-meta small {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:1px
}

.post-text {
  font-size:12px;
  line-height:1.8;
  color:var(--muted)
}

.post-card {
  display:flex;
  align-items:center;
  gap:9px;
  background:var(--soft);
  border:1px solid var(--border);
  border-radius:11px;
  padding:12px;
  margin-top:13px
}

.post-card:hover {
  border-color:#bdaee8
}

.post-card strong {
  font-size:12px;
  display:block
}

.post-card small {
  display:block;
  font-size:10px;
  color:var(--muted)
}

.post-card .value {
  margin-left:auto;
  text-align:right
}

.post-actions {
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:12px
}

.post-actions button,.post-actions a {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:10px;
  color:var(--muted);
  padding:0
}

.post-actions .icon {
  width:13px;
  height:13px
}

.post-actions button:hover,.post-actions a:hover {
  color:var(--accent)
}

.token-row {
  display:flex;
  gap:10px;
  align-items:center;
  padding:12px 16px
}

.token-row:hover {
  background:var(--soft)
}

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

.token-row strong {
  font-size:11px;
  display:block
}

.token-row small {
  font-size:9px;
  color:var(--muted);
  display:block
}

.token-row .value {
  text-align:right
}

.token-row .value strong {
  font-variant-numeric:tabular-nums
}

.token-row .tag {
  padding:2px 5px;
  font-size:9px;
  margin-top:3px
}

.cta-card {
  padding:22px;
  text-align:center;
  background:linear-gradient(150deg,var(--accent-soft),var(--panel) 75%)
}

.cta-art {
  display:flex;
  justify-content:center;
  align-items:center;
  height:96px;
  margin-bottom:12px
}

.cta-art .avatar {
  width:59px;
  height:59px;
  border:3px solid var(--panel);
  box-shadow:0 4px 0 var(--shadow);
  border-radius:17px;
  transform:rotate(-9deg)
}

.cta-art .avatar:nth-child(2) {
  width:72px;
  height:72px;
  z-index:1;
  transform:translateY(-8px);
  margin:0 -7px
}

.cta-art .avatar:nth-child(3) {
  transform:rotate(9deg)
}

.cta-card h3 {
  font-size:19px;
  letter-spacing:-.6px;
  line-height:1.3
}

.cta-card p {
  font-size:11px;
  color:var(--muted);
  margin:10px 0 19px
}

.cta-card .text-link {
  font-size:10px;
  margin-top:14px
}

.safety-card {
  padding:16px;
  display:flex;
  align-items:flex-start;
  gap:10px
}

.safety-card>.icon {
  color:var(--accent);
  width:19px
}

.safety-card strong {
  font-size:11px;
  display:block
}

.safety-card p {
  font-size:10px;
  color:var(--muted);
  margin-top:3px
}

.story-callout {
  background:var(--green-soft);
  border:1px solid var(--border);
  border-radius:10px;
  padding:13px;
  display:flex;
  gap:10px;
  align-items:center;
  font-size:10px;
  color:var(--green);
  margin:15px 16px 0
}

/* Boards & cards */
.with-rail {
  display:grid;
  grid-template-columns:minmax(0,1fr) 265px;
  gap:20px;
  align-items:start
}

.right-rail {
  display:flex;
  flex-direction:column;
  gap:18px;
  position:sticky;
  top:calc(var(--header) + 20px)
}

.board {
  padding:25px
}

.stats-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px;
  margin:22px 0
}

.stat-tile {
  border-radius:13px;
  border:1px solid var(--border);
  background:var(--soft);
  padding:17px 18px;
  box-shadow:0 3px 0 var(--shadow)
}

.stat-tile.mint {
  background:var(--green-soft)
}

.stat-tile.gold {
  background:var(--yellow)
}

.stat-label {
  font-size:9px;
  color:var(--muted);
  letter-spacing:1.1px;
  text-transform:uppercase;
  font-weight:750
}

.stat-value {
  font-size:27px;
  letter-spacing:-1px;
  font-weight:800;
  margin-top:5px;
  line-height:1.3
}

.stat-sub {
  font-size:10px;
  color:var(--muted);
  margin-top:4px
}

.table-panel {
  border:1px solid var(--border);
  border-radius:13px;
  overflow:hidden
}

.table-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--soft);
  padding:14px 16px;
  border-bottom:1px solid var(--border)
}

.table-scroll {
  overflow-x:auto
}

.data-table {
  width:100%;
  border-collapse:collapse;
  white-space:nowrap;
  text-align:left
}

.data-table th {
  font-size:9px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--faint);
  font-weight:650;
  padding:13px 15px;
  border-bottom:1px solid var(--border)
}

.data-table th button {
  padding:0;
  text-transform:inherit;
  letter-spacing:inherit;
  font-size:inherit;
  color:inherit;
  display:flex;
  gap:5px;
  align-items:center
}

.data-table th button .icon {
  width:11px;
  height:11px
}

.data-table td {
  padding:15px;
  border-bottom:1px solid var(--border);
  font-size:11px
}

.data-table tr:last-child td {
  border-bottom:0
}

.data-table tbody tr:hover {
  background:var(--soft)
}

.data-table .person {
  display:flex;
  gap:10px;
  align-items:center
}

.data-table .person strong {
  display:block;
  font-size:12px
}

.data-table .person small {
  font-size:10px;
  display:block;
  color:var(--muted)
}

.data-table .metric {
  font-weight:750;
  font-size:12px
}

.table-caption {
  color:var(--muted);
  font-size:10px;
  padding:13px 16px;
  border-top:1px solid var(--border)
}

.strategy-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:17px
}

.strategy-card {
  padding:18px;
  display:flex;
  flex-direction:column
}

.strategy-card:hover {
  border-color:#b9a6e8
}

.strategy-card-top {
  display:flex;
  align-items:center;
  gap:11px
}

.strategy-card-top .info {
  min-width:0;
  flex:1
}

.strategy-card-top h3 {
  font-size:14px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.strategy-card-top p {
  font-size:10px;
  color:var(--muted);
  margin-top:2px
}

.strategy-card .tag-row {
  margin-top:15px;
  display:flex;
  gap:6px;
  align-items:center
}

.strategy-card .return-row {
  display:flex;
  align-items:end;
  justify-content:space-between;
  margin:18px 0 8px;
  gap:10px
}

.strategy-card .return-value {
  font-size:24px;
  font-weight:800;
  letter-spacing:-.8px;
  line-height:1.3
}

.strategy-card .return-caption {
  font-size:9px;
  color:var(--muted);
  margin-top:3px
}

.strategy-card .sparkline {
  width:108px;
  height:42px
}

.mini-metrics {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px;
  background:var(--soft);
  padding:11px 8px;
  border-radius:9px;
  margin:12px 0
}

.mini-metrics .metric {
  padding:0 5px;
  min-width:0
}

.mini-metrics .metric+.metric {
  border-left:1px solid var(--border)
}

.mini-metrics label {
  display:block;
  color:var(--muted);
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.4px;
  white-space:nowrap
}

.mini-metrics strong {
  display:block;
  font-size:11px;
  margin-top:3px
}

.strategy-card .fee-row {
  font-size:10px;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:5px 0 16px;
  margin-top:auto
}

.strategy-card .fee-row strong {
  font-size:10px;
  color:var(--text)
}

.strategy-card .btn {
  font-size:11px
}

.new-history {
  color:var(--muted);
  font-size:12px;
  font-weight:650;
  letter-spacing:0
}

.empty-state {
  padding:52px 24px;
  text-align:center;
  display:flex;
  align-items:center;
  flex-direction:column
}

.empty-state .empty-icon {
  width:70px;
  height:70px;
  background:var(--accent-soft);
  border:1px solid var(--border);
  border-radius:21px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  margin-bottom:22px
}

.empty-state .empty-icon .icon {
  width:29px;
  height:29px
}

.empty-state h2 {
  font-size:23px
}

.empty-state p {
  font-size:12px;
  color:var(--muted);
  max-width:440px;
  margin:10px auto 22px
}

.empty-state .actions {
  display:flex;
  gap:10px;
  justify-content:center
}

.empty-small {
  padding:32px 20px;
  text-align:center;
  color:var(--muted);
  font-size:12px
}

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

.activity-card {
  padding:18px;
  background:var(--panel)
}

.activity-card .post-text {
  min-height:86px;
  font-size:11px
}

.activity-card .post-header {
  gap:8px
}

.activity-card .post-header .tag {
  margin-left:auto;
  font-size:8px
}

.activity-card .post-meta strong {
  font-size:11px
}

.activity-card .post-meta small {
  font-size:9px
}

.activity-card .post-card {
  padding:10px
}

.activity-card .post-card strong {
  font-size:11px
}

.activity-card .post-card small {
  font-size:9px
}

.activity-card .post-actions {
  font-size:9px
}

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

.token-card {
  padding:19px
}

.token-card .mini-metrics {
  margin:18px 0
}

.token-card .sparkline {
  height:60px;
  margin:15px 0
}

.token-card h3 {
  font-size:16px
}

/* Detail screens */
.breadcrumb {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:var(--muted);
  margin-bottom:18px
}

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

.breadcrumb .icon {
  width:13px;
  height:13px
}

.detail-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 296px;
  gap:20px;
  align-items:start
}

.profile-banner {
  padding:25px;
  background:linear-gradient(110deg,var(--accent-soft),var(--panel) 70%)
}

.profile-banner .profile-info {
  display:flex;
  gap:18px;
  align-items:center
}

.profile-banner h1 {
  font-size:27px;
  margin:4px 0
}

.profile-banner p {
  font-size:12px;
  color:var(--muted);
  max-width:650px
}

.profile-banner .handle {
  font-size:11px;
  color:var(--muted)
}

.profile-banner .tags {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:13px
}

.detail-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 18px;
  border-bottom:1px solid var(--border);
  gap:8px
}

.detail-toolbar .tabs {
  border:0;
  padding:0
}

.detail-body {
  padding:24px
}

.detail-stats {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-bottom:1px solid var(--border);
  padding:20px 0;
  margin-bottom:22px
}

.detail-stat {
  padding:0 17px;
  border-right:1px solid var(--border)
}

.detail-stat:first-child {
  padding-left:0
}

.detail-stat:last-child {
  border:0
}

.detail-stat label {
  display:block;
  font-size:10px;
  color:var(--muted)
}

.detail-stat strong {
  font-size:23px;
  letter-spacing:-.7px;
  display:block;
  margin-top:5px
}

.detail-stat small {
  font-size:9px;
  color:var(--muted)
}

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

.chart-head p {
  font-size:10px;
  color:var(--muted);
  margin-top:3px
}

.chart-wrap {
  position:relative;
  border:1px solid var(--border);
  background:var(--surface);
  padding:16px 12px 7px;
  border-radius:12px
}

.big-chart {
  width:100%;
  height:230px;
  display:block;
  overflow:visible
}

.big-chart text {
  font-family:var(--font);
  font-size:10px;
  fill:var(--muted)
}

.big-chart .grid {
  stroke:var(--border);
  stroke-dasharray:4 5;
  stroke-width:1
}

.big-chart .line {
  stroke:var(--accent);
  fill:none;
  stroke-width:2.6;
  stroke-linejoin:round;
  stroke-linecap:round
}

.chart-key {
  display:flex;
  gap:17px;
  font-size:9px;
  align-items:center;
  color:var(--muted);
  padding:10px 6px 3px
}

.chart-key span {
  display:flex;
  align-items:center;
  gap:5px
}

.chart-key i {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent)
}

.detail-description {
  margin-top:26px
}

.detail-description p {
  color:var(--muted);
  font-size:12px;
  margin-top:9px
}

.action-panel {
  padding:22px
}

.action-panel h3 {
  font-size:18px;
  letter-spacing:-.5px
}

.action-panel p {
  font-size:11px;
  color:var(--muted);
  margin-top:7px
}

.definition-list {
  margin:17px 0
}

.definition-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:11px;
  padding:11px 0;
  border-bottom:1px dashed var(--border)
}

.definition-row:last-child {
  border:0
}

.definition-row span:first-child {
  color:var(--muted)
}

.definition-row strong {
  text-align:right;
  font-weight:650
}

.action-panel .btn {
  margin-top:7px
}

.subtle-notice {
  font-size:10px;
  color:var(--muted);
  border-radius:9px;
  background:var(--soft);
  padding:11px 12px;
  border:1px solid var(--border);
  line-height:1.7
}

.notice {
  padding:13px 14px;
  border-radius:10px;
  background:var(--accent-soft);
  border:1px solid var(--border);
  display:flex;
  gap:9px;
  align-items:flex-start;
  color:var(--muted);
  font-size:11px;
  line-height:1.7
}

.notice .icon {
  color:var(--accent);
  width:17px;
  margin-top:1px
}

.notice.warning {
  background:var(--yellow)
}

.notice.warning .icon {
  color:var(--gold)
}

.stat-box-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:20px
}

.stat-box {
  border:1px solid var(--border);
  background:var(--soft);
  border-radius:10px;
  padding:13px
}

.stat-box label {
  font-size:9px;
  color:var(--muted);
  display:block
}

.stat-box strong {
  display:block;
  font-size:19px;
  margin-top:4px;
  letter-spacing:-.5px
}

.token-detail-layout {
  display:grid;
  grid-template-columns:210px minmax(0,1fr) 257px;
  gap:18px;
  align-items:start
}

.token-detail-list {
  padding:7px 0
}

.token-detail-list .token-row {
  padding:12px
}

.token-detail-list .token-row.active {
  background:var(--accent-soft);
  border-left:3px solid var(--accent);
  padding-left:9px
}

.token-price {
  font-size:34px;
  font-weight:800;
  letter-spacing:-1px
}

.token-chart-top {
  padding:23px;
  border-bottom:1px solid var(--border)
}

.token-detail-metrics {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:20px
}

.token-detail-metrics div {
  padding:12px;
  background:var(--soft);
  border-radius:9px
}

.token-detail-metrics label {
  font-size:8px;
  letter-spacing:.6px;
  color:var(--muted);
  display:block;
  text-transform:uppercase
}

.token-detail-metrics strong {
  font-size:14px;
  display:block;
  margin-top:5px
}

/* Private workspace */
.portfolio-stats {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-bottom:24px
}

.portfolio-stats .stat-tile {
  box-shadow:none;
  background:var(--panel);
  padding:19px
}

.portfolio-stats .stat-value {
  font-size:25px
}

.owned-card {
  padding:20px;
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:15px
}

.owned-card .info {
  flex:1;
  min-width:0
}

.owned-card h3 {
  font-size:16px
}

.owned-card p {
  font-size:11px;
  color:var(--muted)
}

.owned-card .owned-metrics {
  display:flex;
  gap:24px;
  align-items:center
}

.owned-card .owned-metrics label {
  font-size:9px;
  color:var(--muted);
  display:block
}

.owned-card .owned-metrics strong {
  font-size:14px;
  display:block
}

.workspace-note {
  margin-bottom:20px
}

.setup-preview {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:20px
}

.setup-preview>div {
  border:1px solid var(--border);
  background:var(--soft);
  padding:18px;
  border-radius:12px;
  text-align:left
}

.setup-preview .step-number {
  width:26px;
  height:26px;
  border-radius:9px;
  background:var(--accent-soft);
  color:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  margin-bottom:9px
}

.setup-preview h4 {
  font-size:12px
}

.setup-preview p {
  font-size:10px;
  color:var(--muted);
  margin-top:5px
}

.settings-layout {
  display:grid;
  grid-template-columns:180px minmax(0,700px);
  gap:24px
}

.settings-nav button {
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  text-align:left;
  padding:12px;
  border-radius:9px;
  color:var(--muted);
  font-size:12px
}

.settings-nav button.active {
  background:var(--accent-soft);
  color:var(--accent)
}

.settings-nav .icon {
  width:16px
}

.settings-section {
  padding:24px
}

.settings-section h3 {
  font-size:17px;
  margin-bottom:6px
}

.settings-section>p {
  font-size:11px;
  color:var(--muted);
  margin-bottom:22px
}

.setting-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:16px 0;
  border-bottom:1px solid var(--border)
}

.setting-row:last-child {
  border:0
}

.setting-row h4 {
  font-size:12px
}

.setting-row p {
  font-size:10px;
  color:var(--muted);
  margin-top:4px
}

.setting-row select {
  max-width:168px;
  font-size:11px
}

.switch {
  width:35px;
  height:20px;
  flex-shrink:0;
  border-radius:20px;
  padding:3px;
  background:var(--border);
  position:relative;
  transition:.2s
}

.switch:before {
  content:'';
  display:block;
  width:14px;
  height:14px;
  border-radius:50%;
  background:white;
  box-shadow:0 1px 2px #0002;
  transition:.2s
}

.switch.on {
  background:var(--accent)
}

.switch.on:before {
  transform:translateX(15px)
}

.balance-card {
  padding:25px;
  background:linear-gradient(120deg,var(--accent-soft),var(--panel));
  margin-bottom:22px
}

.balance-card .amount {
  font-size:40px;
  font-weight:800;
  letter-spacing:-1.5px;
  margin:10px 0 2px
}

.balance-card p {
  font-size:11px;
  color:var(--muted)
}

.bar-chart {
  height:165px;
  display:flex;
  gap:10px;
  align-items:flex-end;
  border-bottom:1px solid var(--border);
  padding:12px 12px 0;
  margin:20px 0 7px
}

.bar-chart>div {
  flex:1;
  background:var(--accent);
  border-radius:4px 4px 0 0;
  min-height:4px;
  opacity:.7
}

.bar-chart>div:nth-child(2n) {
  opacity:1
}

.bar-labels {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  color:var(--muted);
  padding:0 12px
}

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

.guide-card {
  padding:24px
}

.guide-card h3 {
  font-size:17px;
  margin:13px 0 8px
}

.guide-card p {
  font-size:12px;
  color:var(--muted)
}

.guide-card .btn {
  margin-top:18px
}

/* Dialogs and creation flow */
.modal-backdrop {
  position:fixed;
  inset:0;
  background:#18102966;
  backdrop-filter:blur(5px);
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  animation:fade-in .15s
}

.modal {
  width:490px;
  max-width:100%;
  max-height:calc(100dvh - 48px);
  overflow:auto;
  border-radius:20px;
  background:var(--panel);
  border:1px solid var(--border);
  box-shadow:0 25px 100px #10052e45;
  position:relative
}

.modal.wide {
  width:690px
}

.modal-header {
  padding:23px 25px 0;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px
}

.modal-header h2 {
  font-size:23px;
  letter-spacing:-.6px
}

.modal-header p {
  font-size:11px;
  color:var(--muted);
  margin-top:7px
}

.modal-body {
  padding:22px 25px 25px
}

.modal-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:17px 25px;
  border-top:1px solid var(--border);
  background:var(--soft);
  position:sticky;
  bottom:0;
  z-index:2
}

.modal-footer small {
  font-size:9px;
  color:var(--muted)
}

.modal-close {
  position:absolute;
  right:17px;
  top:16px;
  z-index:5
}

.modal input,.modal select,.modal textarea {
  font-size:12px
}

.wallet-provider {
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface);
  padding:13px 15px;
  width:100%;
  margin-bottom:9px;
  text-align:left;
  transition:.12s
}

.wallet-provider:hover {
  background:var(--accent-soft);
  border-color:var(--accent)
}

.wallet-provider>strong {
  font-size:12px;
  flex:1
}

.wallet-logo {
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--soft);
  color:var(--accent);
  font-weight:800
}

.wallet-logo.orange {
  background:#ffe7d0;
  color:#c67925
}

.wallet-logo.blue {
  background:#e3edff;
  color:#427de5
}

.wallet-logo.cyan {
  background:#dff5fa;
  color:#318baa
}

.wallet-logo .icon {
  width:19px
}

.field {
  display:block;
  margin-bottom:17px
}

.field>label,.field-label {
  display:block;
  font-size:11px;
  font-weight:700;
  margin-bottom:7px
}

.field .help {
  color:var(--muted);
  font-size:10px;
  margin-top:6px
}

.field-error,.form-error {
  color:var(--red);
  font-size:11px
}

.form-error {
  background:var(--red-soft);
  border-radius:8px;
  padding:9px 12px;
  margin-bottom:15px
}

.form-error:empty {
  display:none
}

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

.field-grid .field {
  margin-bottom:5px
}

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

.choice {
  position:relative;
  padding:14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  display:flex;
  gap:10px;
  cursor:pointer;
  align-items:flex-start
}

.choice:has(input:checked) {
  background:var(--accent-soft);
  border-color:var(--accent)
}

.choice input {
  margin:3px 0 0;
  flex-shrink:0
}

.choice strong {
  font-size:11px;
  display:block
}

.choice small {
  font-size:10px;
  display:block;
  color:var(--muted);
  margin-top:3px;
  line-height:1.6
}

.stepper {
  display:flex;
  align-items:center;
  padding:24px 35px 20px;
  justify-content:space-between
}

.stepper .step {
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:7px;
  position:relative;
  min-width:75px
}

.stepper .line {
  height:1px;
  background:var(--border);
  flex:1;
  margin-bottom:24px
}

.stepper .line.done {
  background:var(--accent)
}

.stepper .circle {
  width:27px;
  height:27px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid var(--border);
  color:var(--muted);
  font-size:11px;
  background:var(--soft);
  font-weight:750
}

.stepper .circle .icon {
  width:13px;
  height:13px
}

.stepper .step.current .circle,.stepper .step.done .circle {
  background:var(--accent);
  color:white;
  border-color:var(--accent)
}

.stepper .step.current .circle {
  box-shadow:0 0 0 5px var(--accent-soft)
}

.stepper .step span {
  font-size:10px;
  color:var(--muted)
}

.stepper .step.current span {
  color:var(--accent);
  font-weight:750
}

.permission-card {
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  margin:15px 0
}

.permission-title {
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px;
  background:var(--soft)
}

.permission-title strong {
  font-size:12px
}

.permission-title small {
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:3px
}

.permission-checks {
  padding:8px 16px 13px
}

.permission-check {
  display:flex;
  gap:8px;
  align-items:flex-start;
  font-size:11px;
  color:var(--muted);
  padding:5px 0
}

.permission-check .icon {
  width:15px;
  color:var(--green);
  margin-top:1px
}

.permission-details {
  font-size:11px;
  border-top:1px solid var(--border);
  padding:12px 16px;
  color:var(--muted)
}

.permission-details summary {
  color:var(--accent);
  cursor:pointer;
  font-size:10px;
  font-weight:700
}

.permission-details p {
  font-size:10px;
  margin-top:7px
}

.permission-details code {
  font-size:9px
}

.checkline {
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:11px;
  color:var(--muted);
  margin:13px 0;
  cursor:pointer
}

.checkline input {
  flex-shrink:0;
  margin-top:2px
}

.fee-choice {
  display:flex;
  gap:10px;
  align-items:flex-start;
  border:1px solid var(--border);
  padding:14px;
  border-radius:10px;
  margin-bottom:11px;
  cursor:pointer
}

.fee-choice:has(input:checked) {
  border-color:var(--accent);
  background:var(--accent-soft)
}

.fee-choice strong {
  font-size:11px;
  display:block
}

.fee-choice small {
  font-size:10px;
  color:var(--muted);
  display:block;
  margin-top:4px
}

.fee-choice input {
  flex-shrink:0
}

.review-block {
  padding:17px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--soft)
}

.review-block .definition-list {
  margin:10px 0 0
}

.review-block .definition-row {
  font-size:11px;
  padding:9px 0
}

.deploy-symbol {
  width:75px;
  height:75px;
  border-radius:23px;
  background:var(--accent-soft);
  color:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:5px auto 22px;
  border:1px solid var(--border)
}

.deploy-symbol .icon {
  width:31px;
  height:31px
}

.deploy-title {
  text-align:center
}

.deploy-title p {
  font-size:12px;
  color:var(--muted);
  margin-top:8px
}

.deploy-steps {
  padding:23px 0 10px
}

.deploy-step {
  display:flex;
  gap:12px;
  padding:12px 0;
  align-items:center
}

.deploy-step .state {
  width:29px;
  height:29px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:50%;
  color:var(--muted);
  font-size:11px
}

.deploy-step.done .state {
  background:var(--green-soft);
  color:var(--green);
  border-color:var(--green-soft)
}

.deploy-step.current .state {
  background:var(--accent);
  color:white;
  border-color:var(--accent)
}

.deploy-step .state .icon {
  width:14px
}

.deploy-step strong {
  display:block;
  font-size:12px
}

.deploy-step small {
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:4px
}

.success-mark {
  width:92px;
  height:92px;
  background:var(--green-soft);
  border:1px solid #8cd8c0;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--green);
  margin:18px auto 24px;
  box-shadow:0 0 0 12px var(--soft)
}

.success-mark .icon {
  width:41px;
  height:41px
}

.success-summary {
  text-align:center;
  margin-bottom:24px
}

.success-summary h2 {
  font-size:26px
}

.success-summary p {
  font-size:12px;
  color:var(--muted);
  margin-top:9px
}

.modal-divider {
  font-size:10px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:10px;
  margin:18px 0
}

.modal-divider:before,.modal-divider:after {
  content:'';
  height:1px;
  background:var(--border);
  flex:1
}

.telegram-steps {
  margin:14px 0
}

.telegram-steps>div {
  display:flex;
  gap:10px;
  padding:10px 0;
  font-size:11px;
  color:var(--muted)
}

.telegram-steps .rank {
  color:var(--accent);
  background:var(--accent-soft)
}

#toast-root {
  position:fixed;
  bottom:25px;
  left:calc(var(--sidebar) + 24px);
  right:24px;
  z-index:200;
  pointer-events:none;
  display:flex;
  justify-content:center
}

.toast {
  padding:13px 19px;
  background:var(--text);
  color:var(--panel);
  border-radius:12px;
  font-size:12px;
  box-shadow:0 6px 22px #0002;
  animation:toast-in .2s;
  display:flex;
  align-items:center;
  gap:9px;
  max-width:600px
}

.toast .icon {
  width:16px;
  height:16px
}

.spinner {
  width:15px;
  height:15px;
  display:inline-block;
  border:2px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .7s linear infinite
}

.loading-button .spinner {
  border-color:#ffffff50;
  border-top-color:white
}

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

@keyframes fade-in {
  from {
    opacity:0
  }
  to {
    opacity:1
  }
}

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

/* Responsive layouts */
@media(min-width:1650px) {
  .feed-grid {
    grid-template-columns:minmax(265px,.9fr) minmax(490px,1.8fr) minmax(280px,.93fr)
  }
  .leader-row {
    padding:14px 20px
  }
  .leader-row strong {
    font-size:12px
  }
  .leader-row small {
    font-size:10px
  }
  .leader-row .value {
    font-size:12px
  }
  .feed-post {
    padding:23px
  }
  .post-text {
    font-size:13px
  }
  .with-rail {
    grid-template-columns:minmax(0,1fr) 294px
  }
  .strategy-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .activity-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .token-detail-layout {
    grid-template-columns:255px minmax(0,1fr) 280px
  }
  .big-chart {
    height:280px
  }
}

@media(max-width:1350px) {
  :root {
    --sidebar:195px
  }
  .sidebar {
    padding:23px 12px 14px
  }
  .brand-name {
    font-size:21px
  }
  .brand-sub {
    font-size:7px
  }
  .main {
    padding-left:20px;
    padding-right:20px
  }
  .topbar {
    padding:0 20px
  }
  .feed-grid {
    grid-template-columns:minmax(205px,.85fr) minmax(350px,1.6fr)
  }
  .feed-grid>.feed-right {
    display:none
  }
  .with-rail {
    grid-template-columns:minmax(0,1fr) 236px;
    gap:17px
  }
  .strategy-grid,.token-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .activity-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .board {
    padding:21px
  }
  .stat-tile {
    padding:15px
  }
  .stat-value {
    font-size:25px
  }
  .data-table td,.data-table th {
    padding:13px 12px
  }
  .data-table .approach-column {
    display:none
  }
  .detail-layout {
    grid-template-columns:minmax(0,1fr) 260px;
    gap:17px
  }
  .detail-stat {
    padding:0 12px
  }
  .detail-stat strong {
    font-size:19px
  }
  .action-panel {
    padding:18px
  }
  .token-detail-layout {
    grid-template-columns:minmax(0,1fr) 248px
  }
  .token-detail-left {
    display:none
  }
  .search-results {
    left:calc(var(--sidebar) + 20px)
  }
  .sandbox-pill {
    display:none
  }
  .portfolio-stats {
    gap:12px
  }
  .portfolio-stats .stat-tile {
    padding:15px
  }
  .owned-card .owned-metrics {
    gap:16px
  }
}

@media(max-width:1080px) {
  :root {
    --sidebar:180px
  }
  .sidebar {
    padding-left:10px;
    padding-right:10px
  }
  .brand {
    margin-left:3px;
    gap:6px
  }
  .brand-name {
    font-size:19px
  }
  .brand-symbol {
    width:29px
  }
  .brand-sub {
    font-size:6px
  }
  .nav-link {
    font-size:11px;
    padding:10px
  }
  .with-rail {
    display:block
  }
  .right-rail {
    display:none
  }
  .feed-grid {
    grid-template-columns:218px minmax(0,1fr)
  }
  .page-head h1 {
    font-size:28px
  }
  .search-box {
    width:50%
  }
  .chain-select {
    width:119px
  }
  .detail-layout {
    grid-template-columns:minmax(0,1fr) 238px
  }
  .detail-body {
    padding:18px
  }
  .detail-stat strong {
    font-size:17px
  }
  .detail-stats {
    grid-template-columns:repeat(2,1fr);
    gap:17px
  }
  .detail-stat:nth-child(2) {
    border:0
  }
  .detail-stat:nth-child(3) {
    padding-left:0
  }
  .profile-banner {
    padding:22px
  }
  .profile-banner h1 {
    font-size:24px
  }
  .profile-banner .avatar.xl {
    width:63px;
    height:63px
  }
  .portfolio-stats {
    grid-template-columns:repeat(2,1fr)
  }
  .owned-card {
    flex-wrap:wrap
  }
  .owned-card .owned-metrics {
    flex:1
  }
  .settings-layout {
    grid-template-columns:150px minmax(0,1fr)
  }
  .topbar {
    gap:8px
  }
  .search-results {
    width:400px
  }
}

@media(max-width:850px) {
  :root {
    --sidebar:74px
  }
  .sidebar {
    padding:24px 10px 14px
  }
  .brand {
    margin:0 9px 25px
  }
  .brand-wordmark,.sidebar-section,.nav-link .nav-label,.sidebar-create .btn span,.sidebar-foot .nav-label,.theme-control>span,.sidebar-sandbox,.nav-count {
    display:none!important
  }
  .nav-link {
    justify-content:center;
    padding:11px 8px
  }
  .nav-link .icon {
    width:20px;
    height:20px
  }
  .sidebar-create .btn {
    padding:10px;
    width:100%
  }
  .sidebar-create .btn .icon {
    width:20px;
    height:20px
  }
  .theme-control {
    padding:10px 0;
    justify-content:center
  }
  .theme-buttons {
    flex-direction:column;
    gap:5px
  }
  .sidebar-foot .nav-link {
    padding:10px
  }
  .feed-grid {
    grid-template-columns:210px minmax(0,1fr)
  }
  .main {
    padding-left:18px;
    padding-right:18px
  }
  .topbar {
    padding:0 18px
  }
  .detail-layout {
    display:flex;
    flex-direction:column
  }
  .detail-layout>div {
    width:100%
  }
  .detail-layout .right-rail {
    display:flex;
    position:static;
    flex-direction:row;
    align-items:start
  }
  .detail-layout .right-rail>.panel {
    flex:1
  }
  .detail-stats {
    grid-template-columns:repeat(4,1fr)
  }
  .detail-stat:nth-child(2) {
    border-right:1px solid var(--border)
  }
  .detail-stat:nth-child(3) {
    padding-left:12px
  }
  .token-detail-layout {
    grid-template-columns:minmax(0,1fr) 210px
  }
  .token-detail-layout .action-panel {
    padding:16px
  }
  .search-results {
    left:calc(var(--sidebar) + 18px);
    width:360px
  }
  .chain-select {
    display:none
  }
  .settings-layout {
    grid-template-columns:135px minmax(0,1fr)
  }
  .setup-preview {
    gap:10px
  }
  .setup-preview>div {
    padding:13px
  }
}

@media(max-width:650px) {
  :root {
    --sidebar:0px;
    --header:64px
  }
  .sidebar {
    transform:translateX(-105%);
    width:218px;
    transition:transform .2s;
    padding:24px 15px;
    z-index:70
  }
  .sidebar.open {
    transform:translateX(0)
  }
  .sidebar.open .brand-wordmark,.sidebar.open .nav-label,.sidebar.open .sidebar-section,.sidebar.open .sidebar-create .btn span,.sidebar.open .theme-control>span,.sidebar.open .sidebar-sandbox {
    display:block!important
  }
  .sidebar.open .brand {
    margin:0 5px 25px
  }
  .sidebar.open .brand-name {
    font-size:23px
  }
  .sidebar.open .brand-sub {
    font-size:8px
  }
  .sidebar.open .nav-link {
    justify-content:flex-start;
    padding:10px 13px
  }
  .sidebar.open .theme-buttons {
    flex-direction:row
  }
  .sidebar.open .theme-control {
    justify-content:space-between
  }
  .mobile-scrim {
    position:fixed;
    inset:0;
    background:#1f163255;
    z-index:60
  }
  .mobile-menu {
    display:inline-flex;
    flex-shrink:0
  }
  .topbar {
    padding:0 12px;
    gap:9px
  }
  .search-box {
    flex:1;
    width:auto;
    min-width:0
  }
  .search-box input {
    padding:9px 12px 9px 32px;
    font-size:11px
  }
  .search-box .icon {
    left:10px;
    width:14px
  }
  .search-box kbd {
    display:none
  }
  .topbar-spacer {
    display:none
  }
  .topbar .btn {
    font-size:10px;
    padding:9px 11px;
    gap:5px
  }
  .topbar .btn .icon {
    width:13px
  }
  .main {
    padding:calc(var(--header) + 20px) 13px 25px
  }
  .page-head {
    margin-bottom:19px;
    gap:12px;
    align-items:flex-start
  }
  .page-head h1 {
    font-size:25px;
    letter-spacing:-.7px
  }
  .page-head p {
    font-size:11px;
    margin-top:7px
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1.4px
  }
  .head-actions {
    gap:5px
  }
  .head-actions>.btn {
    padding:8px 10px;
    min-height:33px;
    font-size:10px
  }
  .feed-grid {
    display:block
  }
  .feed-grid>.feed-left {
    display:none
  }
  .panel-header {
    padding:16px
  }
  .feed-post {
    padding:18px 16px
  }
  .feed-composer {
    padding:15px
  }
  .tabs {
    padding:12px
  }
  .panel {
    border-radius:14px
  }
  .board {
    padding:17px
  }
  .board .page-head {
    flex-wrap:wrap
  }
  .stats-grid {
    gap:8px;
    margin:18px 0
  }
  .stat-tile {
    padding:12px 10px
  }
  .stat-label {
    font-size:7px;
    letter-spacing:.65px
  }
  .stat-value {
    font-size:20px;
    letter-spacing:-.5px
  }
  .stat-sub {
    font-size:8px
  }
  .strategy-grid,.token-grid {
    grid-template-columns:1fr
  }
  .strategy-card {
    padding:19px
  }
  .strategy-card-top h3 {
    font-size:16px
  }
  .strategy-card .return-row {
    margin-top:20px
  }
  .strategy-card .sparkline {
    width:135px
  }
  .strategy-card .return-value {
    font-size:28px
  }
  .mini-metrics label {
    font-size:9px
  }
  .mini-metrics strong {
    font-size:12px
  }
  .activity-grid {
    grid-template-columns:1fr
  }
  .activity-card .post-text {
    min-height:0
  }
  .activity-card .post-header .tag {
    font-size:9px
  }
  .data-table td,.data-table th {
    padding:12px
  }
  .data-table .person strong {
    font-size:11px
  }
  .table-toolbar {
    padding:12px;
    gap:8px
  }
  .table-toolbar h3 {
    font-size:12px
  }
  .segmented button {
    padding:4px 8px;
    font-size:9px
  }
  .filter-row {
    gap:10px;
    margin-bottom:15px
  }
  .filter-select {
    min-width:102px;
    font-size:10px
  }
  .filter-row .small {
    font-size:10px
  }
  .profile-banner {
    padding:19px
  }
  .profile-banner .profile-info {
    gap:13px;
    align-items:flex-start
  }
  .profile-banner .avatar.xl {
    width:52px;
    height:52px;
    border-radius:16px
  }
  .profile-banner h1 {
    font-size:22px;
    letter-spacing:-.5px
  }
  .profile-banner .tags {
    gap:5px
  }
  .profile-banner p {
    font-size:11px
  }
  .detail-toolbar {
    padding:11px;
    align-items:flex-start
  }
  .detail-toolbar .tabs {
    gap:1px
  }
  .detail-toolbar .tabs button {
    padding:7px 9px;
    font-size:10px
  }
  .detail-toolbar .owner-badge {
    display:none
  }
  .detail-body {
    padding:17px
  }
  .detail-stats {
    grid-template-columns:repeat(2,1fr);
    gap:19px;
    padding-top:6px
  }
  .detail-stat strong {
    font-size:23px
  }
  .detail-stat:nth-child(2) {
    border:0
  }
  .detail-stat:nth-child(3) {
    padding-left:0
  }
  .detail-layout .right-rail {
    flex-direction:column
  }
  .detail-layout .right-rail>.panel {
    width:100%
  }
  .big-chart {
    height:200px
  }
  .stat-box-grid {
    gap:8px
  }
  .stat-box {
    padding:11px
  }
  .stat-box strong {
    font-size:16px
  }
  .stat-box label {
    font-size:8px
  }
  .token-detail-layout {
    display:flex;
    flex-direction:column
  }
  .token-detail-layout>.panel,.token-detail-layout>.stack {
    width:100%
  }
  .token-detail-layout .token-detail-left {
    display:none
  }
  .token-chart-top {
    padding:18px
  }
  .token-detail-metrics {
    gap:6px
  }
  .token-detail-metrics div {
    padding:10px
  }
  .token-detail-metrics strong {
    font-size:12px
  }
  .token-price {
    font-size:29px
  }
  .portfolio-stats {
    gap:10px
  }
  .portfolio-stats .stat-tile {
    padding:14px
  }
  .portfolio-stats .stat-value {
    font-size:23px
  }
  .owned-card {
    padding:16px;
    gap:12px
  }
  .owned-card h3 {
    font-size:14px
  }
  .owned-card .owned-metrics {
    order:4;
    flex-basis:100%;
    padding-top:13px;
    border-top:1px solid var(--border);
    justify-content:space-between
  }
  .owned-card>.btn {
    font-size:10px
  }
  .owned-card .avatar.lg {
    width:42px;
    height:42px;
    border-radius:13px
  }
  .setup-preview {
    grid-template-columns:1fr
  }
  .empty-state {
    padding:38px 18px
  }
  .empty-state h2 {
    font-size:22px
  }
  .empty-state p {
    font-size:11px
  }
  .empty-state .actions {
    flex-direction:column
  }
  .settings-layout {
    display:block
  }
  .settings-nav {
    display:flex;
    gap:5px;
    margin-bottom:15px
  }
  .settings-nav button {
    font-size:11px;
    justify-content:center;
    padding:10px 8px
  }
  .settings-nav .icon {
    width:14px
  }
  .settings-section {
    padding:20px
  }
  .setting-row {
    gap:12px
  }
  .setting-row select {
    max-width:133px
  }
  .guide-grid {
    grid-template-columns:1fr
  }
  .modal-backdrop {
    padding:12px
  }
  .modal {
    max-height:calc(100dvh - 24px);
    border-radius:16px
  }
  .modal-header {
    padding:23px 20px 0
  }
  .modal-header h2 {
    font-size:21px
  }
  .modal-header p {
    font-size:10px
  }
  .modal-body {
    padding:20px
  }
  .modal-footer {
    padding:15px 20px;
    gap:9px
  }
  .modal-footer .btn {
    font-size:10px;
    padding:9px 11px
  }
  .modal-footer small {
    font-size:8px;
    max-width:115px
  }
  .choice-grid {
    gap:9px
  }
  .choice {
    padding:12px 10px;
    gap:7px
  }
  .stepper {
    padding:24px 24px 17px
  }
  .stepper .step {
    min-width:65px
  }
  .stepper .step span {
    font-size:9px
  }
  .field-grid {
    gap:12px
  }
  .search-results {
    top:57px;
    left:13px;
    width:calc(100% - 26px)
  }
  #toast-root {
    left:14px;
    right:14px;
    bottom:18px
  }
  .toast {
    font-size:11px;
    padding:12px 15px
  }
  .chart-head {
    align-items:flex-start
  }
  .chart-head h3 {
    font-size:12px
  }
  .detail-description p {
    font-size:11px
  }
  .tag {
    font-size:9px
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    animation:none!important;
    transition:none!important
  }
}

/* Final shell refinements */
.topbar .mobile-menu {
  display:none
}

.sidebar-create .btn {
  width:100%
}

.token-chart-top h1 {
  font-size:23px;
  letter-spacing:-.6px
}

@media(max-width:650px) {
  .topbar .mobile-menu {
    display:inline-flex
  }
  .token-chart-top h1 {
    font-size:20px
  }
}

.profile-info>.spacer {
  min-width:0
}

.profile-banner h1,.owned-card h3 {
  overflow-wrap:anywhere
}

.definition-row strong {
  overflow-wrap:anywhere;
  min-width:0
}

@media(max-width:850px) {
  .detail-layout>* {
    width:100%;
    min-width:0
  }
}

@media(max-width:650px) {
  .sidebar {
    visibility:hidden
  }
  .sidebar.open {
    visibility:visible
  }
}



/* AlphaBros additions */
.chain-dot.sepolia { background:#6f5cff }
.chain-dot.robinhood-chain { background:#00c805; color:#062b0a }
.brand-symbol { width:34px; height:28px }
.live-banner { display:flex; align-items:center; gap:10px; padding:10px 14px; margin-bottom:18px; border-radius:12px; border:1px solid var(--border); background:var(--soft); font-size:11px; color:var(--muted) }
.live-banner strong { color:var(--text) }
.addr { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.92em }
.chain-dot.robinhood-testnet { background:#00c805; color:#062b0a }

/* Live market */
.market-grid { display:grid; grid-template-columns:minmax(230px,280px) minmax(0,1fr) minmax(240px,290px); gap:18px; align-items:start }
.market-col { position:sticky; top:calc(var(--header) + 20px) }
.market-scroll { max-height:calc(100vh - var(--header) - 230px); overflow-y:auto }
.market-strip { display:flex; flex-wrap:wrap; gap:22px; align-items:center; padding:11px 16px; margin:-6px 0 18px; border-radius:12px; background:linear-gradient(110deg,var(--accent-soft),var(--panel)); border:1px solid var(--border); font-size:11px; color:var(--muted) }
.market-strip b { color:var(--text); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; margin-right:4px }
.swap-row { display:flex; align-items:center; gap:8px; padding:9px 14px; border-bottom:1px solid var(--border); font-size:11px }
.swap-row:hover { background:var(--soft) }
.swap-row .info { flex:1; min-width:0 }
.swap-row strong { display:block; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.swap-row small { display:block; font-size:9px; color:var(--muted) }
.swap-row .tag { font-size:8px; padding:2px 5px }
.market-grid .data-table td, .market-grid .data-table th { padding:10px 8px; font-size:11px }
.market-grid .data-table td:first-child, .market-grid .data-table th:first-child { padding-left:14px }
.market-grid .data-table .person small { font-size:9px }
.market-grid .data-table tbody tr[data-href]:hover { background:var(--soft) }
@media(max-width:1350px){ .market-grid { grid-template-columns:minmax(220px,260px) minmax(0,1fr) } .market-grid > section:last-child { grid-column:1 / -1; position:static } }
@media(max-width:850px){ .market-grid { grid-template-columns:1fr } .market-col { position:static } .market-scroll { max-height:none } }

/* Live market: token + wallet detail pages */
.mk-stack { display:flex; flex-direction:column; gap:18px; min-width:0 }
.mk-stack > .panel { margin:0 }
.mk-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); border-top:1px solid var(--border) }
.mk-kpi { padding:15px 18px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); min-width:0 }
.mk-kpi label { display:block; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px }
.mk-kpi strong { display:block; font-size:17px; margin-top:5px; letter-spacing:-.4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mk-kpi small { display:block; font-size:10px; color:var(--muted); margin-top:3px }
.mk-hero-price { margin-left:auto; text-align:right; flex-shrink:0 }
.mk-hero-price .big { font-size:26px; font-weight:800; letter-spacing:-.8px }
.mk-bio { margin-top:10px }
.mk-chart-frame { display:block; width:100%; height:440px; border:0; border-top:1px solid var(--border); border-radius:0 0 16px 16px; background:var(--soft) }
.mk-side-body { padding:16px 18px }
.mk-btns { display:flex; flex-wrap:wrap; gap:8px }
.mk-btns .btn { flex:1; justify-content:center }
.mk-change-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; text-align:center }
.mk-change-grid > div { background:var(--soft); border:1px solid var(--border); border-radius:10px; padding:8px 4px; font-size:11px }
.mk-change-grid label { display:block; font-size:9px; color:var(--muted); margin-bottom:3px }
.mk-bar-legend { display:flex; justify-content:space-between; font-size:11px; margin-top:14px }
.mk-bars { display:flex; height:7px; border-radius:99px; overflow:hidden; margin-top:6px; background:var(--soft) }
.mk-bars span:first-child { background:var(--green) }
.mk-bars span:last-child { background:var(--red) }
.mk-facts { display:grid; grid-template-columns:1fr auto; gap:7px 12px; margin-top:14px; font-size:11px }
.mk-facts span { color:var(--muted) }
.mk-facts b { text-align:right; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-weight:600 }
.mk-eq { position:relative }
.mk-eq svg { display:block; width:100%; height:auto; cursor:crosshair }
.mk-axis { font-size:10px; fill:var(--muted) }
.mk-tip { position:absolute; pointer-events:none; background:var(--text); color:var(--panel); font-size:11px; padding:6px 9px; border-radius:8px; white-space:nowrap; box-shadow:0 6px 18px rgba(0,0,0,.18) }
.swap-row a { color:inherit }
.swap-row a:hover { color:var(--accent) }
.swap-row .swap-tx { color:var(--muted); display:inline-flex }
.swap-row .swap-tx .icon { width:12px; height:12px }
.token-row .value small { display:block; font-size:9px }
@media (max-width:1100px) { .mk-chart-frame { height:360px } }
@media (max-width:640px) { .mk-hero-price { margin-left:0; text-align:left } .profile-banner .profile-info { flex-wrap:wrap } }

/* Terms & Conditions gate (blocking, cannot be dismissed) */
.terms-gate { z-index:200; backdrop-filter:blur(6px) }
.terms-modal { max-width:520px; width:100%; max-height:calc(100dvh - 32px); display:flex; flex-direction:column; overflow:hidden; padding:0 }
.terms-head { flex-shrink:0; padding:30px 28px 22px; text-align:center; border-bottom:1px solid var(--border); background:linear-gradient(180deg,var(--accent-soft),var(--panel)) }
.terms-icon { width:54px; height:54px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; background:var(--accent); color:#fff; box-shadow:0 8px 22px rgba(113,71,247,.35) }
.terms-icon .icon { width:26px; height:26px }
.terms-head h2 { font-size:22px; margin:0 0 6px }
.terms-head p { font-size:12px; color:var(--muted); margin:0 }
.terms-scroll { flex:1; min-height:0; max-height:260px; overflow-y:auto; overscroll-behavior:contain; padding:20px 28px; font-size:12.5px; line-height:1.6; color:var(--muted) }
.terms-scroll p { margin:0 0 12px }
.terms-foot { flex-shrink:0; padding:8px 28px 26px; display:flex; flex-direction:column; gap:10px; text-align:center }
.terms-accept { width:100%; justify-content:center; padding:12px }
.terms-accept[disabled] { opacity:.55; cursor:not-allowed }
.terms-foot small { font-size:10.5px; color:var(--muted) }
.terms-disconnect { align-self:center; background:none; border:0; box-shadow:none; color:var(--muted) }
.terms-disconnect:hover { color:var(--text) }
.terms-error { display:flex; gap:8px; align-items:flex-start; text-align:left; padding:9px 11px; border-radius:10px; background:color-mix(in srgb,var(--red) 10%,transparent); border:1px solid color-mix(in srgb,var(--red) 30%,transparent); color:var(--red); font-size:11.5px }
.terms-error .icon { width:14px; height:14px; flex-shrink:0; margin-top:1px }

/* Wallet privacy: masked addresses can't be selected or copied */
.masked { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.2px; user-select:none; -webkit-user-select:none; cursor:default; white-space:nowrap }
/* People: ranking + profiles + account wallets */
.data-table tr.row-me td { background:color-mix(in srgb,var(--accent) 7%,transparent) }
.link-steps { margin:0; padding-left:18px; font-size:12px; color:var(--muted); display:grid; gap:8px }
.link-steps b { color:var(--text) }
.notice.mt12 { margin-top:12px }
.notice .btn { margin-left:6px; vertical-align:middle }
.data-table .person small { display:block }
.link-wallets, .link-accounts { display:grid; gap:8px; margin-top:14px }
.link-wallet, .link-account { display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--panel); color:var(--text); font:inherit; font-size:13px; cursor:pointer; text-align:left; transition:border-color .15s, background .15s }
.link-wallet:hover:not([disabled]), .link-account:hover:not([disabled]) { border-color:var(--accent); background:var(--accent-soft) }
.link-wallet[disabled], .link-account[disabled] { opacity:.5; cursor:default }
.link-wallet img { border-radius:7px }
.link-wallet .spacer, .link-account .spacer { flex:1 }
.link-account .masked { font-size:13px }
.ranking-switch { display:inline-flex; gap:4px; padding:4px; margin:0 0 18px; border:1px solid var(--border); border-radius:12px; background:var(--panel); box-shadow:0 2px 0 var(--shadow) }
.ranking-switch a { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:9px; font-size:12.5px; font-weight:600; color:var(--muted) }
.ranking-switch a .icon { width:15px; height:15px }
.ranking-switch a:hover { color:var(--text) }
.ranking-switch a.active { background:var(--accent); color:#fff }
.insider-tag { display:inline-flex; align-items:center; gap:3px; vertical-align:middle; cursor:help; white-space:nowrap }
.insider-tag .icon { width:11px; height:11px }
.insider-tag.sm { font-size:8.5px; padding:1px 6px; margin-left:4px }
/* live search */
.search-results { max-height:min(70vh,560px); overflow-y:auto }
.search-group { padding:10px 16px 4px; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.search-price { display:flex; flex-direction:column; align-items:flex-end; gap:2px; font-size:11px; margin-left:auto }
.search-foot { padding:9px 16px; border-top:1px solid var(--border); font-size:10px; color:var(--muted) }
.chain-tag { font-size:8.5px; padding:1px 6px; vertical-align:middle }
.search-result.unsupported { opacity:.85 }
.search-result.unsupported strong .icon { width:11px; height:11px; vertical-align:-1px }
.search-result > div { min-width:0; flex:1 }
.search-result strong, .search-result small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.search-results { overflow-x:hidden }
/* swap table pager */
.pager { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px 16px; border-top:1px solid var(--border); font-size:11px }
.pager-btns { display:flex; align-items:center; gap:4px; flex-wrap:wrap }
.pager-btns .btn { min-width:32px; justify-content:center }

/* ---- Manual swap drawer (KolsPilot design) + compact pools in the Market panel ---- */
.sw-backdrop {position:fixed;inset:0;z-index:1100;display:flex;justify-content:flex-end;background:rgba(28,22,51,.24);backdrop-filter:blur(2px);animation:sw-fade .16s ease;}
.sw-drawer {width:464px;max-width:100%;height:100%;height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:var(--panel);border-left:1px solid var(--border);box-shadow:-16px 0 70px rgba(33,23,62,.13);color:var(--text);animation:sw-slide .2s ease;}
.sw-header {min-height:87px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 24px;border-bottom:1px solid var(--border);background:var(--surface);}
.sw-heading {display:flex;align-items:center;gap:12px;min-width:0;}
.sw-heading h2 {font-size:24px;line-height:1.2;letter-spacing:-.7px;outline:none;margin:0;}
.sw-heading small {font-size:11px;color:var(--muted);display:block;margin-top:4px;}
.sw-heading .title-icon {width:40px;height:40px;flex-shrink:0;}
.sw-header-tools {display:flex;gap:5px;align-items:center;}
.sw-header-tools .icon-btn {width:32px;height:32px;}
.sw-body {padding:22px 24px 16px;overflow:auto;overscroll-behavior:contain;flex:1;min-height:0;scrollbar-width:thin;}
.sw-footer {padding:14px 24px 16px;border-top:1px solid var(--border);background:var(--surface);flex-shrink:0;}
.sw-intro {display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:8px;}
.sw-intro .tag {padding:5px 9px;}
.sw-muted {font-size:12px;line-height:1.6;color:var(--muted);}
.sw-context {display:grid;grid-template-columns:1.25fr 1fr;gap:10px;}
.sw-context label {font-size:11px;font-weight:650;line-height:1.4;color:var(--muted);display:flex;flex-direction:column;gap:7px;}
.sw-context select {width:100%;height:42px;background:var(--surface);border:1px solid var(--border);border-radius:10px;font-weight:650;font-size:12px;padding:8px 10px;color:var(--text);min-width:0;}
.sw-source-id {font-size:10px;color:var(--muted);display:flex;align-items:center;gap:5px;margin:10px 0 20px;}
.sw-source-id .icon {width:13px;height:13px;}
.sw-connection {margin-left:auto;color:var(--muted);font-size:10px;}
.sw-connection.on {color:var(--green);}
.sw-amount-box {border:1px solid var(--border);background:var(--soft);border-radius:18px;padding:16px;}
.sw-amount-box.receive {background:var(--surface);}
.sw-amount-top {display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);gap:8px;}
.sw-amount-top label,.sw-amount-top>span:first-child {font-weight:650;color:var(--text);font-size:12px;}
.sw-amount-top b {font-weight:500;}
.sw-amount-main {display:flex;align-items:center;gap:12px;margin:12px 0 9px;}
.sw-amount-main input,.sw-amount-main output {display:block;width:100%;min-width:0;flex:1;padding:0;background:transparent;border:0;outline:none;box-shadow:none;border-radius:0;letter-spacing:-1px;font-family:var(--font);font-size:31px;line-height:1.3;font-weight:650;color:var(--text);}
.sw-amount-main input::placeholder {color:var(--faint);}
.sw-amount-main input:focus {box-shadow:0 2px 0 var(--accent);}
.sw-amount-main output {font-size:29px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sw-token {display:flex;gap:7px;align-items:center;flex-shrink:0;background:var(--surface);border:1px solid var(--border);border-radius:30px;padding:6px 10px 6px 6px;color:var(--text);cursor:pointer;box-shadow:0 2px 0 var(--shadow);}
.sw-token .avatar {width:25px;height:25px;font-size:14px;}
.sw-token strong {font-size:14px;}
.sw-token .icon {width:14px;height:14px;color:var(--muted);}
.sw-token:hover {border-color:var(--accent);}
.sw-amount-bottom {font-size:11px;color:var(--muted);display:flex;align-items:center;justify-content:space-between;min-height:22px;gap:8px;}
.sw-presets {display:flex;gap:5px;}
.sw-presets button {color:var(--accent);background:var(--surface);border:1px solid var(--border);padding:3px 7px;border-radius:5px;font-weight:600;font-size:10px;cursor:pointer;}
.sw-direction-wrap {position:relative;height:13px;display:flex;justify-content:center;align-items:center;z-index:1;}
.sw-direction {width:33px;height:33px;display:grid;place-items:center;border:4px solid var(--panel);border-radius:10px;background:var(--accent-soft);color:var(--accent);cursor:pointer;}
.sw-direction .icon {width:17px;height:17px;}
.sw-rate {display:flex;gap:8px;justify-content:space-between;align-items:center;font-size:11px;font-weight:600;padding:14px 1px 12px;border-bottom:1px dashed var(--border);}
.sw-rate .sw-muted {font-size:10px;font-weight:400;}
.sw-details-toggle {display:flex;justify-content:space-between;gap:10px;width:100%;padding:14px 0;border:0;background:transparent;cursor:pointer;color:var(--muted);font-size:11px;}
.sw-details-toggle span {display:flex;align-items:center;gap:6px;}
.sw-details-toggle .icon {width:14px;height:14px;}
.sw-details {background:var(--soft);border-radius:12px;padding:8px 13px;margin:0 0 13px;}
.sw-line {display:flex;justify-content:space-between;gap:18px;align-items:center;padding:9px 0;font-size:11px;line-height:1.4;}
.sw-line+.sw-line {border-top:1px solid var(--border);}
.sw-line>span {color:var(--muted);}
.sw-line strong {text-align:right;font-size:11px;font-weight:650;overflow-wrap:anywhere;}
.sw-line strong .network-label {font-size:11px;}
.sw-rule {display:flex;align-items:flex-start;gap:9px;font-size:11px;line-height:1.6;color:var(--muted);padding:14px 0 0;border-top:1px solid var(--border);}
.sw-rule .icon {color:var(--accent);flex-shrink:0;width:17px;height:17px;margin-top:2px;}
.sw-rule strong {color:var(--text);font-weight:600;}
.sw-notice {display:flex;align-items:flex-start;gap:8px;padding:12px;border-radius:10px;background:var(--soft);border:1px solid var(--border);color:var(--muted);font-size:11px;line-height:1.6;margin-bottom:12px;}
.sw-notice .icon {width:16px;height:16px;flex-shrink:0;margin-top:1px;}
.sw-notice.error {color:var(--red);background:var(--red-soft);border-color:color-mix(in srgb,var(--red) 25%,transparent);}
.sw-notice.warning {color:var(--gold);background:var(--yellow);}
.sw-fee-summary {display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:12px;}
.sw-fee-summary strong {color:var(--text);font-size:12px;}
.sw-main-btn {min-height:48px;font-size:13px;justify-content:center;border-radius:11px;}
.sw-demo-caption {color:var(--muted);font-size:10px;text-align:center;line-height:1.5;margin:12px 0 0;}
.sw-search {display:flex;align-items:center;gap:9px;border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin:20px 0 12px;background:var(--surface);}
.sw-search .icon {color:var(--muted);width:17px;height:17px;}
.sw-search input {width:100%;background:transparent;outline:none;border:0;color:var(--text);font-size:13px;padding:0;}
.sw-token-row {width:100%;border:0;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;background:transparent;padding:14px 6px;color:var(--text);text-align:left;cursor:pointer;border-radius:9px;}
.sw-token-row:hover {background:var(--soft);}
.sw-token-row:disabled {opacity:.4;cursor:not-allowed;}
.sw-token-row>span:not(.avatar) {display:flex;flex-direction:column;gap:5px;}
.sw-token-row strong {font-size:13px;}
.sw-token-row small {font-size:11px;color:var(--muted);}
.sw-token-balance {margin-left:auto;text-align:right;}
.sw-empty {padding:36px 12px;color:var(--muted);text-align:center;font-size:13px;}
.sw-text {color:var(--accent);font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;cursor:pointer;padding:8px 0;}
.sw-text .icon {width:14px;height:14px;}
.sw-setting-label {margin:24px 0 10px;display:block;font-size:12px;font-weight:600;}
.sw-slip-options {display:flex;gap:8px;margin-bottom:20px;}
.sw-slip-options>button {background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 14px;cursor:pointer;font-size:12px;color:var(--text);}
.sw-slip-options>button.active {background:var(--accent-soft);color:var(--accent);border-color:var(--accent);}
.sw-slip-options>div {display:flex;align-items:center;flex:1;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:6px 10px;}
.sw-slip-options input {border:0;background:transparent;min-width:0;width:100%;color:var(--text);font-size:12px;outline:none;padding:0;}
.sw-slip-options>div>span {font-size:12px;color:var(--muted);}
.sw-small-note {font-size:11px;color:var(--muted);line-height:1.65;margin-top:17px;}
.sw-review-pair {background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px;margin:0 0 16px;position:relative;}
.sw-review-pair>div {display:grid;grid-template-columns:48px 1fr;column-gap:12px;align-items:center;}
.sw-review-pair .avatar {grid-row:span 2;width:43px;height:43px;font-size:20px;}
.sw-review-pair div>span:not(.avatar) {font-size:11px;color:var(--muted);}
.sw-review-pair strong {font-size:23px;letter-spacing:-.5px;line-height:1.6;}
.sw-review-arrow {display:block;margin:6px 0 6px 12px;color:var(--muted);}
.sw-approval {display:flex;align-items:center;gap:11px;margin:16px 0;}
.sw-step-number {width:28px;height:28px;border-radius:9px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex-shrink:0;font-size:12px;font-weight:700;}
.sw-step-number.done {background:var(--green-soft);color:var(--green);}
.sw-step-number .icon {width:16px;height:16px;}
.sw-approval strong {display:block;font-size:12px;font-weight:600;}
.sw-approval small {display:block;font-size:10px;color:var(--muted);margin-top:5px;line-height:1.5;}
.sw-expiry {display:flex;justify-content:center;gap:6px;align-items:center;font-size:11px;color:var(--muted);margin-bottom:12px;}
.sw-expiry .icon {width:14px;height:14px;}
.sw-expiry button {border:0;background:transparent;color:var(--accent);font-weight:600;cursor:pointer;}
.sw-cancel {display:block;width:100%;border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:600;padding:12px 0 0;cursor:pointer;}
.sw-cancel:disabled {opacity:.4;}
.sw-success-mark {display:grid;place-items:center;width:70px;height:70px;margin:28px auto 20px;border-radius:50%;background:var(--green-soft);color:var(--green);box-shadow:0 0 0 10px color-mix(in srgb,var(--green-soft) 45%,transparent);}
.sw-success-mark .icon {width:32px;height:32px;}
.sw-success-title {text-align:center;font-size:25px;letter-spacing:-.6px;margin:0 0 10px;}
.sw-success-text {text-align:center;font-size:15px;font-weight:600;line-height:1.8;margin:0 0 28px;}
.sw-success-text .sw-muted {margin:0 4px;}
@keyframes sw-fade {from{opacity:0}to{opacity:1}}
@keyframes sw-slide {from{transform:translateX(30px)}to{transform:translateX(0)}}
.sw-presets button:disabled {opacity:.45;cursor:not-allowed;}
.sw-amount-main output .spinner {width:22px;height:22px;}
.sw-main-btn .spinner {margin-right:8px;}
.sw-token img {width:24px;height:24px;}
.sw-token-row img, .sw-token-row .avatar {flex-shrink:0;}
.sw-review-pair img {grid-row:span 2;}
body.sw-lock {overflow:hidden;}
.sw-card {display:flex;flex-direction:column;gap:10px;}
.sw-card .tag {align-self:flex-start;}
.sw-card h3 {margin:2px 0 0;}
.sw-card p {margin:0;font-size:12px;color:var(--muted);line-height:1.6;}
.mk-pools {margin-top:14px;border-top:1px dashed var(--border);padding-top:10px;}
.mk-pools-head {display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:650;margin-bottom:4px;}
.mk-pools-head small {font-weight:400;font-size:10px;}
.mk-pool {display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;font-size:12px;color:var(--text);text-decoration:none;}
.mk-pool+.mk-pool {border-top:1px solid var(--border);}
.mk-pool:hover b {color:var(--accent);}
.mk-pool small {display:block;font-size:10px;color:var(--muted);font-weight:400;}
.mk-pool>span:last-child {text-align:right;}
@media (max-width:760px) {.sw-header{padding:17px 20px;}.sw-body{padding:20px 20px 14px;}.sw-footer{padding:14px 20px 18px;}}
@media (max-width:520px) {.sw-drawer{width:100%;border-left:0;}.sw-header{min-height:76px;}.sw-body{padding:18px 16px 12px;}.sw-footer{padding:12px 16px max(16px,env(safe-area-inset-bottom));}.sw-amount-main input{font-size:26px;}.sw-amount-main output{font-size:24px;}.sw-heading h2{font-size:21px;}.sw-context{grid-template-columns:1fr;}}
/* one-token trade window */
.header-swap {gap:8px;flex-shrink:0;}
.sw-badge {padding:4px 8px;font-size:10px;}
.sw-badge .icon {width:12px;height:12px;}
.sw-token.static {cursor:default;box-shadow:none;padding-right:12px;}
.sw-token.static:hover {border-color:var(--border);}
.sw-field-label {font-size:11px;font-weight:650;color:var(--muted);margin:0 0 7px;}
.sw-search .spinner {width:16px;height:16px;flex-shrink:0;}
.sw-suggest {margin:-4px 0 10px;}
.sw-suggest .sw-token-row {padding:9px 6px;}
.sw-token-picked {display:flex;align-items:center;gap:11px;border:1px solid var(--border);background:var(--surface);border-radius:12px;padding:10px 12px;margin-bottom:12px;}
.sw-token-picked>div {flex:1;min-width:0;}
.sw-token-picked strong {display:block;font-size:14px;}
.sw-token-picked small {display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sw-side {display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--soft);border:1px solid var(--border);border-radius:12px;padding:4px;margin:4px 0 12px;}
.sw-side button {border:0;background:transparent;border-radius:9px;padding:9px;font-weight:700;font-size:13px;color:var(--muted);cursor:pointer;}
.sw-side button.active.buy {background:var(--green-soft);color:var(--green);}
.sw-side button.active.sell {background:var(--red-soft);color:var(--red);}
.sw-amount-box.off {opacity:.55;}
.sw-receive {display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 2px 0;font-size:12px;color:var(--muted);}
.sw-receive strong {font-size:17px;color:var(--text);font-weight:650;}
.sw-receive .spinner {width:16px;height:16px;}
.sw-main-btn.sell:not(:disabled) {background:var(--red);border-color:var(--red);}
.sw-card-btns {display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.sw-card-btns .btn {justify-content:center;}
.sw-notice a {color:inherit;text-decoration:underline;}
/* Positions: Wallet | Safe wallet sections */
.pos-sections {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 18px;}
.pos-sections button {display:flex;align-items:center;gap:12px;text-align:left;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px 16px;cursor:pointer;color:var(--text);}
.pos-sections button:hover {border-color:var(--accent);}
.pos-sections button.active {border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent);}
.pos-sections strong {display:block;font-size:15px;}
.pos-sections small {display:block;font-size:11px;color:var(--muted);margin-top:3px;line-height:1.4;}
.pos-sections .title-icon {flex-shrink:0;}
@media (max-width:640px) {.pos-sections{grid-template-columns:1fr;}}
/* Community feed (live) inside the design's feed: real composer, untagged personal trade line */
.feed-composer.lv-composer {align-items:flex-start;}
.composer-input {resize:none;font:inherit;line-height:1.5;min-height:0;cursor:text;text-align:left;}
.composer-input:focus {outline:none;border-color:var(--accent);}
.lv-composer-meta {display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 20px 12px 64px;margin-top:-6px;}
.lv-composer-meta .icon {width:12px;height:12px;vertical-align:-2px;}
.feed-post .post-header .icon-btn {width:28px;height:28px;margin-left:auto;}
.post-header .tag + .tag {margin-left:6px;}
.feed-trade {display:flex;align-items:center;gap:10px;padding-top:12px;padding-bottom:12px;font-size:13px;}
.feed-trade-body {flex:1;min-width:0;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.feed-trade-body a {color:inherit;text-decoration:none;}
.feed-token {display:inline-flex;align-items:center;gap:5px;vertical-align:middle;}
.feed-token img, .feed-token .avatar {width:18px;height:18px;}
.owner-follow {display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);}
.owner-follow a {color:inherit;text-decoration:none;}
/* Terms & Conditions page */
.terms-page {padding:8px 24px 24px;max-width:760px;}
.terms-page p {display:flex;gap:12px;font-size:14px;line-height:1.75;margin:16px 0;}
.terms-num {font-weight:700;color:var(--accent);min-width:18px;}
.notice.terms-ok {color:var(--green);}
.sidebar-sandbox a {color:inherit;text-decoration:underline;}
.list-controls > span .icon {width:12px;height:12px;vertical-align:-2px;opacity:.7;}
.risk-line {display:flex;flex-wrap:wrap;gap:4px;margin:3px 0 2px;}
.risk-line .insider-tag {margin-left:0;}
/* Top users panel: your spot + add-wallet nudge */
.rank-cta {display:flex;flex-direction:column;gap:10px;margin:0 16px 12px;padding:12px 14px;border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--border));border-radius:12px;background:var(--accent-soft);}
.rank-cta strong {font-size:13px;}
.rank-cta p {margin:4px 0 0;font-size:11px;line-height:1.55;color:var(--muted);}
.rank-cta p b {color:var(--text);}
.rank-cta .btn {align-self:flex-start;}
.cashed {color:var(--gold);font-weight:700;display:block;}
.leader-row .right small, .token-row .value small.muted {display:block;font-size:10px;}

/* ---- Collapsible sidebar: the user can shrink it to an icon rail (html.rail), like the compact layout ---- */
.rail-toggle {width:100%;border:0;background:transparent;cursor:pointer;font:inherit;text-align:left;margin-top:4px;}
.rail-toggle .icon {width:17px;height:17px;}
:root.rail {--sidebar:74px;}
:root.rail .sidebar {padding:24px 10px 14px;}
:root.rail .brand {margin:0 9px 25px;}
:root.rail .brand-wordmark,:root.rail .sidebar-section,:root.rail .nav-link .nav-label,:root.rail .sidebar-create .btn span,:root.rail .sidebar-foot .nav-label,:root.rail .theme-control>span,:root.rail .sidebar-sandbox,:root.rail .nav-count {display:none!important;}
:root.rail .nav-link {justify-content:center;padding:11px 8px;}
:root.rail .nav-link .icon {width:20px;height:20px;}
:root.rail .sidebar-create .btn {padding:10px;width:100%;}
:root.rail .sidebar-create .btn .icon {width:20px;height:20px;}
:root.rail .theme-control {padding:10px 0;justify-content:center;}
:root.rail .theme-buttons {flex-direction:column;gap:5px;}
:root.rail .sidebar-foot .nav-link {padding:10px;}
:root.rail .rail-toggle {justify-content:center;}
/* small screens are already a rail / off-canvas: the toggle isn't needed there */
@media(max-width:850px) {.rail-toggle {display:none!important;}}
/* trade window: pay with / receive in selector */
.sw-token.sw-pay {padding-right:4px;}
.sw-token.sw-pay select {border:0;background:transparent;font:inherit;font-weight:700;font-size:14px;color:var(--text);cursor:pointer;padding:0 2px;}
.sw-receive .sw-token.sw-pay {display:inline-flex;margin-left:6px;vertical-align:middle;padding:3px 4px 3px 3px;}
.sw-picking {display:flex;align-items:center;gap:8px;margin:0 0 10px;}
.sw-picking .spinner {width:14px;height:14px;}

/* Live feed token card: one row, same height as the original post-card */
.post-card.tc {gap:0;flex-wrap:nowrap;min-width:0;}
.post-card.tc > * {flex-shrink:0;}
.tc-token {display:flex;align-items:center;gap:9px;min-width:0;flex:1 1 auto;color:inherit;text-decoration:none;padding-right:12px;}
.tc-logo {position:relative;display:inline-flex;flex-shrink:0;}
.tc-chain {position:absolute;right:-3px;bottom:-3px;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--soft);box-sizing:content-box;}
.tc-chain svg {width:9px;height:9px;}
.tc-name {min-width:0;display:flex;flex-direction:column;}
.tc-name strong,.tc-name small {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px;}
.tc-stat,.tc-trend,.tc-amount {padding:0 12px;border-left:1px solid var(--border);}
.tc-stat strong {font-variant-numeric:tabular-nums;}
.tc-trend {display:flex;align-items:center;gap:6px;}
.tc-trend .sparkline {width:58px;height:22px;}
.tc-trend small {font-weight:700;font-size:11px;}
.tc-amount {text-align:right;margin-left:auto;}
.tc-amount strong {white-space:nowrap;}
.tc-buy {margin-left:10px;padding:6px 14px;}
@media (max-width:1200px) {.tc-trend {display:none;}}
@media (max-width:640px) {.tc-mcap {display:none;} .tc-name strong,.tc-name small {max-width:80px;} .tc-stat,.tc-amount {padding:0 8px;}}
.tc-sell {margin-left:6px;padding:6px 12px;}
@media (max-width:640px) {.tc-buy {margin-left:6px;padding:6px 10px;} .tc-sell {padding:6px 9px;}}

/* Swap drawer: USD value next to amounts */
.sw-usd {font-size:12px;font-weight:500;color:var(--muted);margin-left:7px;letter-spacing:0;}
/* Feed: personal trade line + the same one-row token card as strategy posts */
.feed-trade.has-card {flex-direction:column;align-items:stretch;gap:0;}
.feed-trade-head {display:flex;align-items:center;gap:10px;}
.feed-trade .post-card.tc {margin:10px 0 0;}
.tc-trend .muted {font-size:10px;}
.post-card.tc > .tc-token {flex-shrink:1;}
.tc-name {overflow:hidden;}
@media (max-width:1500px) {.tc-trend .muted {display:none;}}
.tc-name {min-width:58px;}
.post-card.tc > .tc-amount {flex-shrink:1;min-width:0;}
.tc-amount strong {display:block;overflow:hidden;text-overflow:ellipsis;}
/* Token card actions: compact "B" / "S"; the pair widens to "Buy" / "Sell" as the cursor reaches it */
.post-card.tc {position:relative;}
/* Fixed slot in the row; the buttons live in a layer that widens over the 24h / amount columns on hover,
   so nothing in the card moves or wraps. */
.tc-acts {flex:0 0 73px;height:30px;margin-left:10px;}
.tc-acts-in {position:absolute;right:12px;top:50%;transform:translateY(-50%);z-index:1;display:flex;gap:6px;width:73px;background:var(--soft);transition:width .18s ease,box-shadow .18s ease;}
.tc-acts-in .btn {flex:1 1 0;min-width:0;margin:0;padding:6px 0;justify-content:center;gap:0;transition:padding .18s ease;}
.tc-more {display:inline-block;max-width:0;overflow:hidden;opacity:0;white-space:nowrap;vertical-align:bottom;transition:max-width .18s ease,opacity .18s ease;}
@media (hover:hover) {
  .tc-acts-in:hover,.tc-acts-in:focus-within {width:var(--tc-wide,215px);box-shadow:-14px 0 12px -2px var(--soft);}
  .tc-acts-in:hover .btn,.tc-acts-in:focus-within .btn {padding:9px 0;font-size:13px;}
  .tc-acts-in:hover .tc-more,.tc-acts-in:focus-within .tc-more {max-width:3em;opacity:1;}
}
@media (max-width:1200px) {.tc-acts-in {--tc-wide:170px;}}
.tc-stat,.tc-trend,.tc-amount {padding:0 10px;}
.tc-trend .sparkline {width:48px;}
@media (hover:hover) {.tc-acts-in:hover,.tc-acts-in:focus-within {box-shadow:-22px 0 10px -4px var(--soft);}}
.tc-acts-in {--tc-wide:232px;}
@media (max-width:1200px) {.tc-acts-in {--tc-wide:170px;}}
/* Stats follow the token name directly; the spare width goes to the Buy / Sell area on the right */
.post-card.tc > .tc-token {flex:0 1 auto;}
.post-card.tc > .tc-amount {margin-left:0;}
.post-card.tc > .tc-acts {margin-left:auto;padding-left:10px;}
/* Enough room in the card: full "Buy" / "Sell" all the time; narrower cards keep B / S (widen on hover). */
.post-card.tc {container-type:inline-size;}
@container (min-width:620px) {
  .tc-acts {flex-basis:150px;}
  .tc-acts-in {width:150px;}
  .tc-acts-in .tc-more {max-width:3em;opacity:1;}
}

/* Coming soon: sidebar tag, buttons, ranking tab, placeholder page */
.nav-soon,.soon-tag {margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:2px 6px;border-radius:999px;background:#fdf3d6;color:#a86a12;}
.btn .soon-tag {margin-left:8px;background:rgba(255,255,255,.22);color:inherit;}
.rail .nav-soon {display:none;}
.soon-tab {display:inline-flex;align-items:center;gap:6px;opacity:.6;cursor:not-allowed;padding:8px 14px;}
.soon-tab .soon-tag {margin-left:4px;}
.soon-panel {padding:36px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;}
.soon-panel h3 {margin:6px 0 0;font-size:20px;}
.soon-panel p {max-width:520px;line-height:1.6;margin:0;}
.soon-actions {display:flex;gap:10px;margin-top:10px;flex-wrap:wrap;justify-content:center;}
/* Swap: any token as the other side of a wallet trade */
.sw-base-ask {display:flex;flex-direction:column;gap:6px;margin:0 0 12px;padding:12px;border:1px dashed var(--border);border-radius:12px;background:var(--surface);}
.sw-base-ask label {font-size:12px;color:var(--muted);font-weight:600;}
.sw-base-row {display:flex;gap:8px;}
.sw-base-row input {flex:1;min-width:0;border:1px solid var(--border);border-radius:8px;padding:8px 10px;background:var(--soft);color:var(--text);font-size:13px;}
.sw-base-ask small {font-size:11.5px;display:flex;align-items:center;gap:6px;}
.sw-base-ask .spinner {width:12px;height:12px;}
.nav-link .nav-label {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.nav-soon {flex-shrink:0;font-size:8.5px;padding:2px 5px;}
.sidebar-create .btn {white-space:nowrap;}
.sidebar-create .btn .soon-tag {font-size:8.5px;padding:2px 5px;margin-left:6px;}
.nav-link {position:relative;}
.nav-link .nav-label {overflow:visible;text-overflow:clip;}
.nav-soon {position:absolute;right:6px;top:3px;margin:0;font-size:7.5px;padding:1px 5px;line-height:1.4;}

/* ---------- Login gate (live app) ---------- */
.gate-splash {min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:var(--bg);}
.login-page {min-height:100vh;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);background:var(--bg);}
.login-hero {display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:40px 56px;border-right:1px solid var(--border);}
.login-copy {max-width:620px;}
.login-copy h1 {font-size:clamp(34px,4.2vw,54px);line-height:1.08;letter-spacing:-1.5px;margin:12px 0 18px;}
.login-copy > p {font-size:16px;line-height:1.65;color:var(--muted);max-width:540px;margin:0;}
.login-cards {display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:34px;}
.login-card {background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow);}
.login-card h3 {margin:8px 0 4px;font-size:19px;}
.login-side {display:flex;align-items:center;justify-content:center;padding:32px;}
.login-auth {width:100%;max-width:420px;padding:32px;}
.login-auth h2 {font-size:28px;margin:8px 0 6px;letter-spacing:-.5px;}
.login-auth > p {margin:0 0 22px;line-height:1.6;}
.login-steps {list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:12px;}
.login-steps li {display:flex;gap:12px;align-items:flex-start;opacity:.55;}
.login-steps li.current,.login-steps li.done {opacity:1;}
.login-steps strong {display:block;font-size:14px;}
.login-steps small {color:var(--muted);font-size:12px;}
.login-step-n {flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;border:1px solid var(--border);background:var(--soft);}
.login-steps li.current .login-step-n {background:var(--accent);border-color:var(--accent);color:#fff;}
.login-steps li.done .login-step-n {background:var(--green-soft);border-color:transparent;color:var(--green);}
.login-step-n svg {width:13px;height:13px;}
.login-cta {width:100%;justify-content:center;padding:13px 16px;font-size:14px;}
.login-alt {width:100%;justify-content:center;margin-top:8px;}
.login-foot {font-size:11.5px;color:var(--muted);line-height:1.6;margin:18px 0 0;}
.login-foot a {color:var(--accent);}
@media (max-width:900px) {
  .login-page {grid-template-columns:1fr;}
  .login-hero {border-right:0;border-bottom:1px solid var(--border);padding:28px 20px;gap:26px;}
  .login-side {padding:20px 16px 36px;}
  .login-auth {padding:24px 20px;}
}

/* ---------- First sign-in setup ---------- */
.onboard-modal {max-width:480px;padding:28px;}
.onboard-head h2 {font-size:24px;margin:6px 0 6px;letter-spacing:-.4px;}
.onboard-head p {margin:0 0 18px;line-height:1.6;}
.onboard-steps {display:flex;gap:6px;margin-bottom:14px;}
.onboard-steps span {height:4px;flex:1;border-radius:4px;background:var(--border);}
.onboard-steps span.on {background:var(--accent);}
.ob-handle {display:flex;align-items:center;border:1px solid var(--border);border-radius:10px;background:var(--surface);overflow:hidden;}
.ob-handle span {padding:0 4px 0 12px;color:var(--muted);font-weight:700;}
.ob-handle input {border:0 !important;box-shadow:none !important;flex:1;min-width:0;background:transparent;}
.ob-note {margin-top:6px;min-height:18px;}
.ob-note small {display:inline-flex;align-items:center;gap:6px;font-size:12px;}
.ob-note .spinner {width:12px;height:12px;}
.ob-people {display:flex;flex-direction:column;gap:8px;max-height:340px;overflow:auto;}
.ob-person {display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);}
.ob-person .info {flex:1;min-width:0;display:flex;flex-direction:column;}
.ob-person .info small {color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.btn.full {width:100%;justify-content:center;}

/* ---------- Settings: category menu + content ---------- */
.settings-wrap {display:grid;grid-template-columns:240px minmax(0,1fr);gap:18px;align-items:start;}
.settings-menu {display:flex;flex-direction:column;gap:4px;padding:10px;position:sticky;top:90px;}
.settings-menu button {display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:10px;background:transparent;color:var(--text);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;text-align:left;}
.settings-menu button svg {width:17px;height:17px;color:var(--muted);}
.settings-menu button:hover {background:var(--soft);}
.settings-menu button.active {background:var(--accent-soft);color:var(--accent);}
.settings-menu button.active svg {color:var(--accent);}
.settings-menu .settings-signout {margin-top:8px;border-top:1px solid var(--border);border-radius:0 0 10px 10px;padding-top:14px;color:var(--red);}
.settings-menu .settings-signout svg {color:var(--red);}
.settings-content {padding:0;overflow:hidden;}
.settings-top {padding:22px 26px;border-bottom:1px solid var(--border);}
.settings-top h2 {margin:0 0 4px;font-size:20px;}
.settings-top p {margin:0;color:var(--muted);font-size:13px;}
.settings-body {padding:6px 26px 24px;}
.settings-body .setting-row:last-child {border-bottom:0;}
.settings-note {color:var(--muted);font-size:13px;line-height:1.6;margin:14px 0 4px;}
.settings-value {display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
.settings-value small {color:var(--muted);font-size:12px;}
.settings-actions {display:flex;justify-content:flex-end;align-items:center;gap:12px;padding-top:18px;}
.switch-row {cursor:pointer;}
.switch {position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0;}
.switch input {opacity:0;width:0;height:0;position:absolute;}
.switch span {position:absolute;inset:0;border-radius:999px;background:var(--border);transition:background .18s;}
.switch span::after {content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .18s;}
.switch input:checked + span {background:var(--accent);}
.switch input:checked + span::after {transform:translateX(18px);}
.switch input:focus-visible + span {outline:2px solid var(--accent);outline-offset:2px;}
@media (max-width:900px) {
  .settings-wrap {grid-template-columns:1fr;}
  .settings-menu {position:static;flex-direction:row;overflow-x:auto;padding:6px;}
  .settings-menu button {white-space:nowrap;width:auto;flex-shrink:0;}
  .settings-menu .settings-signout {display:none;}
  .settings-top,.settings-body {padding-left:16px;padding-right:16px;}
}

/* Add a phone wallet by QR */
.link-scan small {margin-left:8px;}
.scan-qr {display:flex;justify-content:center;margin:14px 0 8px;}
.scan-qr img {border-radius:12px;border:1px solid var(--border);background:#fff;padding:8px;}
.scan-actions {display:flex;justify-content:center;}
.mk-hero-price .hero-pct {font-size:.5em;margin-left:8px;vertical-align:middle;}
.pos-sections button.pos-soon {opacity:.6;cursor:not-allowed;}
.pos-sections button.pos-soon .soon-tag {margin-left:6px;vertical-align:middle;}
/* Sign-in progress: a popup after the wallet connects (the welcome card itself only has the button) */
.login-progress-backdrop {position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(20,16,40,.35);backdrop-filter:blur(3px);}
.login-progress {width:100%;max-width:400px;padding:28px;}
.login-progress h3 {font-size:22px;margin:6px 0 4px;}
.login-progress > p {margin:0 0 20px;}
.leader-row .value {display:flex;flex-direction:column;align-items:flex-end;}
.leader-row .value .value-pct {font-size:11px;line-height:1.3;}

/* Profile photos */
img.avatar.avatar-photo {object-fit:cover;padding:0;background:var(--soft);}
.avatar-edit {display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.avatar-edit label.btn {cursor:pointer;}

/* Your activity: compact rows + View more */
.panel-bottom .btn.full {width:100%;justify-content:center;}
/* Community card illustration */
.cta-art.cta-photo {height:auto;margin:-6px -8px 10px;}
.cta-art.cta-photo img {display:block;width:100%;height:auto;max-width:360px;margin:0 auto;}
/* Tighter top of every page */
.main {padding-top:calc(var(--header) + 14px);}
.page-head {margin-bottom:16px;}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* Settings → Wallets: a clear "add another wallet" box above the list */
.wallet-add {display:flex;align-items:center;gap:16px;margin:14px 0 20px;padding:18px;border:1px dashed var(--accent);border-radius:14px;background:var(--accent-soft);}
.wallet-add-icon {flex:0 0 44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--accent);color:#fff;}
.wallet-add-icon svg {width:22px;height:22px;}
.wallet-add-text {flex:1;min-width:0;}
.wallet-add-text h4 {margin:0 0 4px;font-size:15px;}
.wallet-add-text p {margin:0 0 6px;font-size:12.5px;line-height:1.55;color:var(--muted);}
.wallet-add-text small {font-size:11.5px;font-weight:700;color:var(--accent);}
.wallet-add .btn {flex-shrink:0;padding:10px 18px;}
.wallet-list-title {margin:4px 0 2px;font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);}
@media (max-width:640px) {.wallet-add {flex-wrap:wrap;} .wallet-add .btn {width:100%;justify-content:center;}}
.settings-note svg {width:13px;height:13px;vertical-align:-2px;margin-right:4px;}


/* AlphaBros logo */
.brand-logo .brand-wordmark img {display:block;height:34px;width:auto;max-width:176px;}
.brand-logo .brand-symbol {width:34px;height:34px;object-fit:contain;display:none;}
.brand-logo .logo-dark {display:none !important;}
:root[data-theme="dark"] .brand-logo .brand-wordmark .logo-light {display:none !important;}
:root[data-theme="dark"] .brand-logo .brand-wordmark .logo-dark {display:block !important;}
/* icons-only sidebar (collapsed, or tablet width): the mark instead of the full logo */
:root.rail .brand-logo .brand-symbol.logo-light {display:block;}
:root.rail[data-theme="dark"] .brand-logo .brand-symbol.logo-light {display:none;}
:root.rail[data-theme="dark"] .brand-logo .brand-symbol.logo-dark {display:block !important;}
@media (max-width:850px) {
  .brand-logo .brand-symbol.logo-light {display:block;}
  :root[data-theme="dark"] .brand-logo .brand-symbol.logo-light {display:none;}
  :root[data-theme="dark"] .brand-logo .brand-symbol.logo-dark {display:block !important;}
  .sidebar.open .brand-logo .brand-symbol {display:none !important;}
}
.gate-splash .brand-logo .brand-wordmark img {height:44px;max-width:240px;}
.login-hero .brand-logo .brand-wordmark img {height:40px;max-width:220px;}
/* Empty feed: how to get it going */
.feed-empty {display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:34px 24px 38px;}
.feed-empty h3 {margin:6px 0 0;font-size:18px;}
.feed-empty p {margin:0;max-width:440px;color:var(--muted);font-size:13px;line-height:1.6;}
.feed-empty-actions {display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px;}
.feed-empty small {font-size:11.5px;margin-top:4px;}
/* Beta tag: next to the logo everywhere, and a note on the welcome card */
.beta-tag {display:inline-flex;align-items:center;flex-shrink:0;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--accent-soft);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);line-height:1.5;}
.brand-logo {position:relative;}
.brand-logo .beta-tag {margin-left:2px;}
:root.rail .brand-logo {flex-direction:column;gap:4px;}
:root.rail .brand-logo .beta-tag {font-size:7.5px;padding:1px 5px;margin:0;}
@media (max-width:850px) {.brand-logo {flex-direction:column;gap:4px;} .brand-logo .beta-tag {font-size:7.5px;padding:1px 5px;margin:0;} .sidebar.open .brand-logo {flex-direction:row;} .sidebar.open .brand-logo .beta-tag {font-size:9.5px;padding:2px 7px;}}
.beta-note {display:flex;gap:10px;align-items:flex-start;margin:0 0 18px;padding:10px 12px;border-radius:10px;background:var(--accent-soft);font-size:12px;line-height:1.5;color:var(--muted);}
.beta-note .beta-tag {margin-top:1px;}
/* logo + Beta pill must fit the sidebar width */
.sidebar .brand-logo .brand-wordmark img {height:28px;max-width:150px;}
.sidebar .brand-logo .beta-tag {font-size:8.5px;padding:1px 6px;}
.sidebar .brand-logo {gap:8px;}
/* Terms on first sign-in: links + agree checkbox */
.terms-scroll a,.terms-check a {color:var(--accent);font-weight:700;}
.terms-check {display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);font-size:13px;font-weight:600;line-height:1.5;cursor:pointer;}
.terms-check input {width:18px;height:18px;margin:1px 0 0;flex-shrink:0;accent-color:var(--accent);cursor:pointer;}
.terms-check {margin:12px 28px 4px;text-align:left;}
@media (max-width:520px) {.terms-check {margin:10px 18px 4px;}}

/* Positions: pick "All wallets" or one wallet of the account */
.wallet-picker {display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;}