/* VANTA Chroma — plum ink, citron, ember coral and lavender. */
:root {
  --bg: #120d18;
  --surface: #1d1522;
  --card: #241a2a;
  --raised: #302337;
  --hover: #392b40;
  --line: #49354f;
  --softline: #37273e;
  --text: #f7f0e8;
  --muted: #c4b6c8;
  --dim: #a08ba7;
  --cyan: #e4f77b;
  --violet: #c2a7ff;
  --pink: #ff987e;
  --acid: #bcf5b7;
  --amber: #ffb879;
  --lime: var(--cyan);
  --limebg: #e4f77b0c;
  --green: #9be7b3;
  --red: #ff899c;
  --gold: var(--amber);
  --shadow: 0 25px 100px #0a040abb;
}
html { color-scheme: dark; }
body {
  background:
    radial-gradient(ellipse at 60% -10%, #7f4bc124, transparent 46%),
    radial-gradient(ellipse at 100% 35%, #662f6f13, transparent 46%), var(--bg);
  background-attachment: fixed;
}
::selection { background: #b789cd60; color: #fff; }
button, input, select { accent-color: var(--cyan); }
.sidebar {
  background: linear-gradient(175deg, #2a1c2c99, transparent 35%), var(--surface);
  border-right-color: var(--line);
}
.brand { padding-top: 27px; padding-bottom: 24px; }
.brand img { width: 39px; height: 39px; filter: drop-shadow(0 0 17px #c492db27); }
.wordmark { font-weight: 700; letter-spacing: 2.1px; }
.wordmark small { color: var(--dim); letter-spacing: 4.4px; }
.workspace-switch { border-color: #73607c40; background: linear-gradient(115deg, #a377db13, #cae16f04); }
.workspace-monogram {
  background: linear-gradient(140deg, #d0e48025, #bc87ff29);
  color: var(--cyan); border-color: #d2ace345;
}
.nav-link.active {
  background: linear-gradient(100deg, #cbe17418, #bb85ff08);
  border-color: #cfe47d26; box-shadow: inset 0 1px #e3efb40a;
}
.nav-link.active:before { background: var(--cyan); box-shadow: 0 0 14px #e4f77b70; }
.nav-link:not(.active):hover { background: var(--raised); border-color: var(--line); }
.nav-link[href="#/hooks"]>.icon { color: var(--violet); }
.nav-link[href="#/launchpad"]>.icon { color: var(--pink); }
.nav-link[href="#/liquidity"]>.icon { color: var(--cyan); }
.nav-link[href="#/burn"]>.icon { color: var(--amber); }
.nav-link[href="#/watchlist"]>.icon { color: var(--acid); }
.nav-link.active .count { color: var(--cyan); }
.chain-row.active { background: linear-gradient(100deg, #e4f77b0d, #bc87ff0b); }
.chain-section { border-color: var(--softline); }
.side-footer { background: linear-gradient(180deg, transparent, #9a5de70a); }
.topbar {
  background: color-mix(in srgb, var(--bg) 87%, transparent);
  border-bottom-color: var(--line); box-shadow: 0 8px 30px #08040912;
}
.topbar:after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, #e4f77b00, #e4f77b66 27%, #bd8aff66 62%, #ff987e00);
  pointer-events: none;
}
.global-search { border-color: #7763813e; background: #37243a4a; }
.global-search:hover { border-color: #b599c370; }
.global-search kbd { color: var(--dim); background: var(--raised); }
.btn-primary {
  color: #200f23; border-color: #dfeca880;
  background: linear-gradient(110deg, #d5e78c, #d6b3e6 65%, #cba3ff);
  box-shadow: inset 0 1px #fff6, 0 4px 20px #c99cde18;
}
.btn-primary:hover { background: linear-gradient(110deg, #e2efb1, #d5b4ff); box-shadow: 0 5px 25px #cb9fdf35; }
.btn-ghost:hover, .icon-btn:hover { border-color: #e4f77b55; background: var(--limebg); }
.content { padding-top: 25px; }

/* A compact identity surface, leaving the market rankings in the first view. */
.overview-heading {
  position: relative; isolation: isolate; overflow: hidden; min-height: 165px;
  padding: 24px 27px; border: 1px solid #85699351; border-radius: 15px;
  background:
    radial-gradient(ellipse at 78% 120%, #aa74ef2b, transparent 57%),
    radial-gradient(ellipse at 23% -50%, #c2dc5924, transparent 75%),
    linear-gradient(115deg, #27182a, #241726 65%, #281c2a);
  box-shadow: inset 0 1px #e0c7ec0a, 0 12px 40px #0000000c;
  margin-bottom: 16px; gap: 20px;
}
.overview-heading:before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(#c8a9d708 1px, transparent 1px), linear-gradient(90deg, #c8a9d708 1px, transparent 1px);
  background-size: 32px 32px; mask-image: linear-gradient(90deg, transparent 30%, #000);
}
.overview-heading:after {
  content: ''; position: absolute; top: 0; left: 25px; right: 25px; height: 1px;
  background: linear-gradient(90deg, #d8e99500, #d8e9959c, #c79bffba, #ecb09a00);
}
.overview-copy { position: relative; z-index: 1; }
.eyebrow { color: var(--cyan); letter-spacing: 1.8px; }
.eyebrow-line { width: 20px; background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.edition { color: var(--violet); background: #b67cff12; border-color: #bc95ed30; font-size: 8px; padding: 3px 6px; }
.overview-heading h1 { font-size: clamp(34px, 3.45vw, 54px); letter-spacing: -2px; margin: 12px 0 10px; font-weight: 500; }
.overview-heading h1 em {
  color: var(--cyan); background: linear-gradient(100deg, #dceba0 4%, #d9bae8 48%, #c8a7f3 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.overview-heading p { color: #cbb9d3; font-size: 12px; letter-spacing: .1px; }
.overview-actions { position: relative; z-index: 1; align-self: stretch; justify-content: center; flex-shrink: 0; }
.workspace-date { color: #b7a3c0; font-variant-numeric: tabular-nums; font-size: 10px; }
.overview-actions .btn { background: #2416269e; border-color: #b999c846; font-size: 11px; }
.overview-actions .btn:hover { background: #442e48; }
.spectrum-orbit { position: absolute; width: 240px; height: 210px; right: 170px; top: -23px; z-index: 0; pointer-events: none; opacity: .72; }
.spectrum-orbit svg { width: 100%; height: 100%; overflow: visible; }
.orbit-core { filter: drop-shadow(0 0 9px #d4b1e555); }
.orbit-star { transform-box: fill-box; transform-origin: center; animation: spectrum-breathe 6s ease-in-out infinite; }
@keyframes spectrum-breathe { 50% { opacity: .35; } }
.feed-strip { border-top: 0; margin-top: 0; margin-bottom: 19px; padding: 4px 2px 13px; }
.feed-chip { border-color: #5c485f4f; background: #25172777; color: var(--muted); }
.feed-chip:nth-child(2) { border-color: #a8bd6d26; }
.feed-chip:nth-child(3) { border-color: #bf89d838; }
.feed-chip:nth-child(4) { border-color: #b48fe32e; }
.feed-chip:hover, .feed-info:hover { color: var(--cyan); border-color: #e4f77b50; }
.feed-chip.is-live>i { box-shadow: 0 0 7px #9be7b350; }

/* Coral ticker, citron leaders, mint momentum, lavender hook activity. */
.hot-ticker {
  border-color: #6f608265; background: linear-gradient(90deg, #221b2c, #241a2a 45%, #2c1d2e);
  box-shadow: 0 5px 20px #10081116; border-radius: 11px; height: 65px; margin-bottom: 19px;
}
.hot-ticker .ticker-label { color: var(--amber); background: linear-gradient(110deg, #ffb47c12, #f7b8a106), var(--surface); border-color: #ffb8792b; }
.hot-ticker .ticker-label>.icon { color: var(--amber); filter: drop-shadow(0 0 7px #ffb87940); }
.hot-ticker .ticker-label small { color: #b39aa7; }
.hot-ticker .hot-coin { border-color: #78658130; }
.hot-ticker .ticker-rank { color: #b7a2d2; }
.hot-name strong { color: var(--text); }
.hot-control { color: var(--violet); background: #291d2b; }
.hot-control:hover { background: #362a38; color: var(--cyan); }
.insights.market-radar { gap: 16px; margin-bottom: 21px; }
.market-radar .radar-card {
  --panel-accent: var(--cyan);
  background: radial-gradient(ellipse at 5% -10%, color-mix(in srgb, var(--panel-accent) 9%, transparent), transparent 54%), var(--surface);
  border-color: color-mix(in srgb, var(--panel-accent) 22%, var(--softline));
  border-radius: 13px; position: relative; box-shadow: 0 8px 30px #0e060f1a, inset 0 1px #ffffff03;
}
.market-radar .radar-card:nth-child(2) { --panel-accent: var(--acid); }
.market-radar .radar-card:nth-child(3) { --panel-accent: var(--violet); }
.market-radar .radar-card[data-mode=losers] { --panel-accent: var(--red); }
.market-radar .radar-card[data-mode=yield] { --panel-accent: var(--violet); }
.market-radar .radar-card[data-mode=coins] { --panel-accent: var(--amber); }
.radar-card:before {
  content: ''; height: 2px; position: absolute; top: 0; left: 16px; right: 45%;
  background: linear-gradient(90deg, var(--panel-accent), transparent); opacity: .85;
}
.market-radar .radar-card:hover { border-color: color-mix(in srgb, var(--panel-accent) 40%, var(--softline)); box-shadow: 0 10px 35px #0e060f35; }
.radar-head { padding: 18px 16px 11px; }
.radar-head h2 { font-size: 15px; letter-spacing: -.25px; gap: 9px; }
.radar-head h2>.icon {
  color: var(--panel-accent); padding: 6px; width: 30px; height: 30px;
  background: color-mix(in srgb, var(--panel-accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--panel-accent) 22%, transparent); border-radius: 8px;
}
.radar-open { border-color: color-mix(in srgb, var(--panel-accent) 20%, transparent); color: var(--panel-accent); background: color-mix(in srgb, var(--panel-accent) 4%, transparent); }
.radar-open:hover { border-color: var(--panel-accent); color: var(--panel-accent); }
.radar-toolbar>span { color: var(--dim); }
.radar-tabs { background: #150c1770; border-color: #6c5a7552; }
.radar-tabs button.active { background: color-mix(in srgb, var(--panel-accent) 13%, var(--surface)); color: var(--panel-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--panel-accent) 14%, transparent); }
.radar-row { border-top-color: #a186ad1c; }
.radar-row:hover { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--panel-accent) 5%, transparent), transparent); }
.radar-row:hover .radar-identity>strong { color: var(--panel-accent); }
.radar-row:first-child .radar-rank { color: var(--panel-accent); }
.radar-row:first-child>.token-icon { box-shadow: 0 0 0 3px color-mix(in srgb, var(--panel-accent) 6%, transparent); }
.radar-values>strong { letter-spacing: -.1px; }
.radar-hook-icon { color: var(--violet); background: #c2a7ff13; border-color: #c2a7ff38; }
.radar-footer { border-color: #957ba225; background: #190d1b1c; }
.radar-footer button, .radar-footer a { color: var(--panel-accent); }
.radar-footer button:hover, .radar-footer a:hover { color: var(--text); }
.radar-chevron { color: var(--panel-accent); }
.stat { --stat-accent: var(--cyan); border-color: color-mix(in srgb, var(--stat-accent) 18%, var(--softline)); background: linear-gradient(120deg, color-mix(in srgb, var(--stat-accent) 7%, transparent), transparent 80%), var(--surface); border-radius: 11px; position: relative; overflow: hidden; }
.stat-1 { --stat-accent: var(--violet); }
.stat-2 { --stat-accent: var(--pink); }
.stat-3 { --stat-accent: var(--amber); }
.stat:after { content: ''; position: absolute; width: 57px; height: 57px; right: -10px; bottom: -25px; border: 1px solid color-mix(in srgb, var(--stat-accent) 13%, transparent); border-radius: 50%; box-shadow: 0 0 0 9px color-mix(in srgb, var(--stat-accent) 3%, transparent), 0 0 0 18px color-mix(in srgb, var(--stat-accent) 2%, transparent); pointer-events: none; }
.stat:hover { border-color: color-mix(in srgb, var(--stat-accent) 40%, var(--line)); }
.stat .stat-value { color: var(--stat-accent); font-size: 31px; font-weight: 500; }
.stat .stat-icon { color: var(--stat-accent); border-color: color-mix(in srgb, var(--stat-accent) 25%, transparent); background: color-mix(in srgb, var(--stat-accent) 8%, transparent); }
.stat .stat-icon .icon { color: var(--stat-accent); }
.stat-note { position: relative; z-index: 1; }
.focus-panel { background: radial-gradient(ellipse at 20% 100%, #bfda520d, transparent 65%), var(--surface); border-color: #a5b75c4f; }
.pulse-panel { background: radial-gradient(ellipse at 90% 0, #c2a7ff12, transparent 65%), var(--surface); border-color: #c2a7ff3b; }
.section-kicker .icon { color: var(--cyan); }
.pulse-top .section-kicker { color: var(--violet); }
.pulse-period { color: var(--violet); border-color: #c2a7ff40; background: #c2a7ff0a; }
.focus-periods .active { color: var(--cyan); background: #e4f77b12; }
.focus-gridline { stroke: #8c6f9a2b; }
#focus-fill stop { stop-color: var(--cyan); }
.breadth-ring { background: conic-gradient(var(--green) 0 var(--up), var(--red) var(--up) var(--down), var(--raised) var(--down) 100%); box-shadow: 0 0 28px #c2a7ff09; }
.breadth-ring>div { background: var(--surface); box-shadow: inset 0 0 22px #bf8dff08; }
.breadth-legend .green-dot { background: var(--green); }
.breadth-legend .red-dot { background: var(--red); }
.network-pulse-row>i:after { opacity: .9; }
.table-panel { background: var(--surface); border-color: #8b70974a; box-shadow: 0 8px 35px #0e060f1c; }
.view-tabs { background: linear-gradient(90deg, #34203770, #30233250); }
.view-tab.active:after { background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 -2px 12px #e4f77b25; }
.view-tab .icon { opacity: .85; }
.view-tab[data-id=gainers]>.icon { color: var(--green); }
.view-tab[data-id=losers]>.icon { color: var(--red); }
.view-tab[data-id=yield]>.icon { color: var(--violet); }
.view-tab[data-id=new]>.icon { color: var(--pink); }
.view-tab[data-id=top]>.icon { color: var(--amber); }
.table-controls { background: color-mix(in srgb, var(--card) 70%, var(--surface)); }
.timeframes button.active { background: #e4f77b13; }
th { color: #b09cba; background: color-mix(in srgb, var(--surface) 80%, var(--bg)); }
tbody tr:hover { background: #be88d808; }
.table-footer { background: #2f1f3235; }
.trade-short { color: var(--cyan); border-color: #e4f77b30; background: #e4f77b09; }
.trade-short:hover { border-color: #e4f77b60; background: #e4f77b18; }
.hook-tag { color: var(--violet); background: #c2a7ff0d; border-color: #c2a7ff33; }
.star-btn.active { color: var(--acid); }
.result-count { color: var(--violet); border-color: #c2a7ff35; background: #c2a7ff0c; }
.statusbar { background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(16px); border-color: #715b7b50; }
.status-dot { background: var(--green); box-shadow: 0 0 8px #9be7b335; }
.status-dot.warning { background: var(--amber); box-shadow: 0 0 8px #ffb87920; }

/* The same palette follows the user through tools and detail views. */
.page-heading h1 { color: var(--text); }
.page-heading .eyebrow { color: var(--violet); }
.protocol-pill { border-color: #c2a7ff30; background: #c2a7ff09; }
.intro-banner { background: radial-gradient(ellipse at 100% 10%, #c2a7ff21, transparent 65%), linear-gradient(110deg, #e4f77b08, transparent), var(--surface); border-color: #bb9cca4a; }
.intro-banner .big-icon { color: var(--violet); opacity: .7; }
.platform-card, .hook-card { --tile-accent: var(--cyan); background: radial-gradient(ellipse at 0 0, color-mix(in srgb, var(--tile-accent) 7%, transparent), transparent 70%), var(--surface); border-color: color-mix(in srgb, var(--tile-accent) 18%, var(--softline)); }
.platform-card:nth-child(3n+2), .hook-card:nth-child(3n+2) { --tile-accent: var(--violet); }
.platform-card:nth-child(3n), .hook-card:nth-child(3n) { --tile-accent: var(--pink); }
.platform-card:hover, .hook-card:hover { border-color: color-mix(in srgb, var(--tile-accent) 50%, var(--line)); box-shadow: 0 10px 35px #150a1655; }
.chip.active { border-color: #c2a7ff50; color: var(--violet); background: #c2a7ff0f; }
.hook-tools { background: var(--surface); }
.trade-card { background: radial-gradient(ellipse at 100% 0, #c2a7ff17, transparent 60%), var(--surface); border-color: #b494dd43; }
.trade-title h2 { color: var(--violet); }
.contract-box { background: var(--surface); }
.modal { border-color: #b291c166; background: linear-gradient(155deg, #c2a7ff05, #e4f77b03), var(--surface); box-shadow: 0 40px 120px #0b050ccc; }
.modal-header { background: linear-gradient(90deg, #e4f77b07, #c2a7ff0a); }
.modal-backdrop { background: #110812b8; }
.modal-footer { background: #38243b47; }
.permission.on { background: #e4f77b0c; border-color: #e4f77b40; }
.permission.on .icon { color: var(--cyan); }
.notice { border-color: #ffb87935; }
.toast { background: var(--raised); border-color: #cfa7e250; }
.mobile-nav { background: color-mix(in srgb, var(--surface) 95%, transparent); backdrop-filter: blur(20px); border-color: #9f80ae50; }
.mobile-nav a.active { color: var(--cyan); background: linear-gradient(0deg, #e4f77b12, transparent); }
.boot { background: radial-gradient(ellipse at center, #7444b020, transparent 70%); }

html[data-theme=light] {
  color-scheme: light;
  --bg: #f7f2e9; --surface: #fff; --card: #fffcf5; --raised: #eee5ef; --hover: #e8ddea;
  --line: #dbcddc; --softline: #e9dfeb; --text: #302038; --muted: #6c586f; --dim: #7a657f;
  --cyan: #657514; --violet: #7850af; --pink: #af4c36; --acid: #327c44; --amber: #9b581c;
  --limebg: #65751408; --green: #237746; --red: #c03954;
}
html[data-theme=light] body { background: radial-gradient(ellipse at 80% 0, #c6a3f32b, transparent 55%), var(--bg); }
html[data-theme=light] .sidebar { background: linear-gradient(175deg, #e5d9f533, transparent 40%), var(--surface); }
html[data-theme=light] .overview-heading { background: radial-gradient(ellipse at 85% 100%, #be9bea2b, transparent 60%), radial-gradient(ellipse at 15% 0, #cfe47e30, transparent 70%), #fbf8fc; border-color: #d6c2e0; }
html[data-theme=light] .overview-heading:before { background-image: linear-gradient(#8d729a0a 1px, transparent 1px), linear-gradient(90deg, #8d729a0a 1px, transparent 1px); }
html[data-theme=light] .overview-heading h1 em { background-image: linear-gradient(100deg, #6f3479, #9668ab, #a4644c); }
html[data-theme=light] .overview-heading p, html[data-theme=light] .workspace-date { color: var(--muted); }
html[data-theme=light] .overview-actions .btn { background: #ffffffb5; border-color: #d3bddd; }
html[data-theme=light] .spectrum-orbit { opacity: .5; }
html[data-theme=light] .global-search { background: var(--card); }
html[data-theme=light] .feed-chip { background: #ffffffa0; border-color: var(--line); }
html[data-theme=light] .hot-ticker { background: linear-gradient(90deg, #faf1ed, #fbf8fc); border-color: #d9cfe6; }
html[data-theme=light] .hot-control { background: var(--surface); }
html[data-theme=light] .hot-ticker .ticker-label small { color: var(--dim); }
html[data-theme=light] .radar-tabs { background: #efe9f260; border-color: var(--line); }
html[data-theme=light] .radar-row { border-color: var(--softline); }
html[data-theme=light] .radar-footer, html[data-theme=light] .table-footer { background: #efe8f22b; }
html[data-theme=light] .focus-gridline { stroke: #8c6f9a2b; }
html[data-theme=light] .view-tabs { background: linear-gradient(90deg, #f6f9e8, #f1eafb); }
html[data-theme=light] th { color: var(--dim); }
html[data-theme=light] .statusbar { background: #f9f6fbe8; }
html[data-theme=light] .modal-footer { background: var(--card); }

@media (min-width: 1600px) {
  .overview-heading { min-height: 181px; padding: 27px 31px; }
  .spectrum-orbit { right: 230px; width: 295px; height: 240px; top: -27px; }
  .radar-head h2 { font-size: 16px; }
}
@media (max-width: 1250px) {
  .overview-heading { padding: 23px; min-height: 156px; }
  .overview-heading h1 { font-size: 39px; }
  .spectrum-orbit { right: 140px; opacity: .33; width: 200px; }
  .overview-heading p { font-size: 11px; }
  .insights.market-radar { gap: 11px; }
  .radar-head { padding: 15px 12px 10px; }
  .radar-head h2 { font-size: 13px; gap: 6px; }
  .radar-head h2>.icon { width: 26px; height: 26px; padding: 5px; border-radius: 7px; }
  .stat .stat-value { font-size: 28px; }
}
@media (max-width: 1000px) and (min-width: 761px) {
  .overview-heading h1 { font-size: 33px; letter-spacing: -1.4px; }
  .overview-heading { gap: 10px; padding: 21px; }
  .overview-actions .btn { padding: 9px; font-size: 10px; }
  .workspace-date { font-size: 9px; }
  .spectrum-orbit { display: none; }
  .edition { display: none; }
}
@media (max-width: 760px) {
  .content { padding-top: 18px; }
  .topbar { gap: 7px; }
  .header-actions .connect { background: linear-gradient(105deg, #d7e893, #cba3ff); }
  .overview-heading { min-height: 178px; padding: 21px 18px; display: block; margin-bottom: 15px; border-radius: 13px; }
  .overview-heading h1 { font-size: 39px; letter-spacing: -1.8px; max-width: 280px; margin: 13px 0 12px; line-height: 1.08; }
  .overview-heading p { max-width: 245px; font-size: 11px; line-height: 1.7; }
  .eyebrow { font-size: 8px; letter-spacing: 1.4px; gap: 6px; }
  .eyebrow-line { width: 14px; }
  .edition { font-size: 7px; padding: 2px 4px; margin-left: 1px; }
  .overview-actions { position: absolute; right: 15px; bottom: 18px; padding: 0; }
  .overview-actions .workspace-date { display: none; }
  .overview-actions .btn { padding: 10px; font-size: 0; width: 36px; height: 36px; }
  .spectrum-orbit { display: block; right: -83px; top: 14px; width: 260px; height: 220px; opacity: .16; }
  .feed-strip { padding: 0 0 13px; margin-bottom: 16px; }
  .feed-chip { background: #25192766; }
  .hot-ticker { height: 61px; margin-bottom: 16px; }
  .hot-ticker .ticker-label { font-size: 9px; }
  .insights.market-radar { gap: 16px; }
  .radar-head { padding: 17px 16px 11px; }
  .radar-head h2 { font-size: 16px; gap: 9px; }
  .radar-head h2>.icon { height: 30px; width: 30px; padding: 6px; }
  .stat .stat-value { font-size: 28px; }
  .radar-card:before { right: 40%; }
  .page-heading h1 { letter-spacing: -1px; }
  .modal { border-radius: 15px; }
}
@media (max-width: 380px) {
  .overview-heading h1 { font-size: 35px; max-width: 242px; }
  .overview-heading p { font-size: 10px; max-width: 230px; }
  .overview-heading { padding-left: 16px; }
  .edition { font-size: 6px; }
  .stat .stat-value { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-star { animation: none; }
  button, a, .panel, .stat, .platform-card, .hook-card { transition: none; }
}

/* Chroma identity and market search. */
:root { --citron: #e4f77b; --coral: #ff987e; --lavender: #c2a7ff; }
body { background: radial-gradient(ellipse at 85% -15%, #69313f30, transparent 48%), radial-gradient(ellipse at 0 70%, #592c4b13, transparent 45%), var(--bg); }
.brand img { filter: drop-shadow(0 0 15px #e4f77b1a); }
.btn-primary { color: #242b0f; background: linear-gradient(110deg, #e4f77b, #f0e787); border-color: #eaf597a8; box-shadow: inset 0 1px #ffffef70, 0 5px 20px #d4ef6510; }
.btn-primary:hover { background: linear-gradient(110deg, #eefaa1, #f6d596); box-shadow: 0 5px 24px #e4f77b25; }
.overview-heading { background: radial-gradient(ellipse at 100% 120%, #a24a3236, transparent 57%), radial-gradient(ellipse at 15% -60%, #c2a7ff1e, transparent 75%), linear-gradient(115deg, #261a2d, #291b2d 58%, #35202b); border-color: #75527370; }
.overview-heading:after { background: linear-gradient(90deg, #e4f77b00, #e4f77b8c, #ff987eaa, #c2a7ff00); }
.overview-heading h1 em { background-image: linear-gradient(110deg, #e4f77b 5%, #f2dfa2 55%, #ff987e 95%); }
.overview-heading p, .workspace-date { color: var(--muted); }
.overview-actions .btn { background: #211626ad; border-color: #ad8c9f50; }
.edition { color: var(--coral); background: #ff987e0d; border-color: #ff987e35; letter-spacing: 1px; }
.hot-ticker { background: linear-gradient(90deg, #34212a, #231925 48%, #2b1e30); border-color: #82596465; }
.hot-ticker .ticker-label { color: var(--coral); border-color: #ff987e2b; background: linear-gradient(110deg, #ff987e16, transparent), var(--surface); }
.hot-ticker .ticker-label>.icon { color: var(--coral); filter: drop-shadow(0 0 7px #ff987e35); }
.stat-0 { --stat-accent: var(--cyan); } .stat-1 { --stat-accent: var(--violet); } .stat-2 { --stat-accent: var(--pink); } .stat-3 { --stat-accent: var(--acid); }
.focus-panel { border-color: #b4bc5d40; background: radial-gradient(ellipse at 20% 100%, #e4f77b08, transparent 65%), var(--surface); }
.focus-gridline { stroke: color-mix(in srgb, var(--muted) 15%, transparent); }
.view-tabs { background: linear-gradient(90deg, #30233790, #38222c60); }
.nav-link.active, .chain-row.active { background: linear-gradient(100deg, #e4f77b12, #ff987e05); }
.nav-link.active { border-color: #e4f77b25; }
.command-input input:focus { outline: none; }
.search-modal { width: min(720px, 100%); }
.search-scope { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding: 12px 22px; border-bottom: 1px solid var(--line); }
.search-scope label { color: var(--dim); font-size: 11px; }
.search-scope select { max-width: 190px; min-height: 31px; color: var(--text); background: var(--card); }
.search-scope>span { margin-left: auto; font-size: 10px; color: var(--muted); }
.search-status { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; font-size: 11px; color: var(--cyan); }
.search-status small { color: var(--dim); }
.command-row { min-width: 0; border: 1px solid transparent; }
.command-row:hover { border-color: color-mix(in srgb, var(--cyan) 18%, transparent); }
.command-row:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.command-identity { display: grid; gap: 4px; min-width: 0; flex: 1; }
.command-identity strong, .command-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.command-identity small { color: var(--muted); font-size: 10px; }
.command-identity small.mono { color: var(--dim); font-size: 9px; }
.command-value { display: grid; gap: 6px; text-align: right; flex-shrink: 0; }
.command-value strong { font-variant-numeric: tabular-nums; font-size: 12px; }
.command-value small { font-size: 10px; color: var(--dim); }
.command-results .notice { margin: 6px 14px 10px; line-height: 1.6; }
.command-hint { padding: 15px 22px; color: var(--dim); font-size: 10px; line-height: 1.5; border-top: 1px solid var(--softline); }
.search-load-more { margin: 10px 14px; width: calc(100% - 28px); justify-content: center; }
.market-search-status { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; padding: 13px 17px; font-size: 11px; line-height: 1.5; background: var(--limebg); border-bottom: 1px solid var(--softline); }
.market-search-status>span { flex: 1 1 220px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.market-search-status button { color: var(--cyan); display: inline-flex; align-items: center; gap: 6px; font-size: 11px; }
.loading-orbit { width: 12px; height: 12px; flex-shrink: 0; border: 1px solid var(--line); border-top-color: var(--cyan); border-radius: 50%; animation: search-spin 1s linear infinite; }
@keyframes search-spin { to { transform: rotate(360deg); } }
.pair-sub>span { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.chart-token-select { border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--text); font: inherit; font-size: 12px; padding: 7px 24px 7px 10px; max-width: 200px; }
.chart-token-select:focus-visible { outline: 2px solid var(--cyan); }
.chart-history-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 0 17px 14px; }
.chart-history-actions>span { font-size: 10px; color: var(--dim); }
html[data-theme=light] { --citron: #657514; --coral: #af4c36; --lavender: #7850af; }
html[data-theme=light] body { background: radial-gradient(ellipse at 80% 0, #f4cab53b, transparent 50%), var(--bg); }
html[data-theme=light] .overview-heading { background: radial-gradient(ellipse at 90% 120%, #ffae8640, transparent 62%), linear-gradient(110deg, #f2eedb, #f5e8f1); border-color: #d5bacc; }
html[data-theme=light] .overview-heading h1 em { background-image: linear-gradient(110deg, #657514, #9a5d2a, #af4c36); }
html[data-theme=light] .overview-actions .btn { background: #fff8; border-color: var(--line); }
html[data-theme=light] .edition { color: var(--coral); }
html[data-theme=light] .hot-ticker { background: linear-gradient(90deg, #f9e6d8, #f7f0e5, #f1e7f6); border-color: #d8bfc9; }
html[data-theme=light] .hot-ticker .ticker-label { color: var(--coral); background: #ffeddc; }
html[data-theme=light] .view-tabs { background: linear-gradient(90deg, #eeefd9, #f5e3dd); }
html[data-theme=light] .nav-link.active, html[data-theme=light] .chain-row.active { background: linear-gradient(100deg, #65751414, #af4c3605); }
html[data-theme=light] .btn-primary { color: #242b0f; }
@media(max-width:760px) {
 .header-actions .connect { background: linear-gradient(110deg, #e4f77b, #f0e787); }
 .search-modal { margin-top: 0; max-height: 92dvh; }
 .search-scope { padding: 10px 16px; gap: 7px; }
 .search-scope>span { width: 100%; margin-left: 0; font-size: 9px; }
 .command-input { gap: 9px; }
 .command-input>.icon { width: 17px; flex-shrink: 0; }
 .command-input input { font-size: 12px; }
 .command-input button { padding: 7px 9px; font-size: 10px; }
 .command-results { max-height: 54dvh; padding: 5px; }
 .command-row { padding: 12px 9px; gap: 8px; }
 .command-row>.icon { display: none; }
 .command-row .pair-icons { flex-shrink: 0; }
 .command-row strong { font-size: 11px; }
 .command-identity small { font-size: 9px; }
 .command-value small { font-size: 8px; }
 .search-status { padding: 10px 8px; font-size: 10px; }
 .search-status small { font-size: 9px; }
 .command-hint { padding: 12px 16px; font-size: 9px; }
 .chart-head .panel-title { width: 100%; }
 .chart-token-select { width: auto; max-width: 100%; }
 .chart-caption { gap: 8px; flex-wrap: wrap; }
 .chart-history-actions { padding: 0 12px 12px; }
}
@media(prefers-reduced-motion:reduce) { .loading-orbit { animation: none; } }