:root {
  color-scheme: dark;
  --bg: #10151b;
  --panel: #19212a;
  --panel-raised: #202a35;
  --line: #34414f;
  --line-strong: #4a5c6d;
  --text: #f2f1e9;
  --muted: #afbbc6;
  --accent: #73d6e8;
  --accent-soft: rgba(115, 214, 232, 0.12);
  --buy: #63cfa2;
  --buy-soft: rgba(99, 207, 162, 0.2);
  --sell: #ed8b93;
  --sell-soft: rgba(237, 139, 147, 0.2);
  --pending: #eab46b;
  --pending-soft: rgba(234, 180, 107, 0.1);
  --radius: 10px;
  --buy-flash-duration: 1250ms;
  --sell-flash-duration: 1250ms;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--bg); }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    var(--bg);
  background-size: 48px 48px;
  overflow-x: hidden;
}

button, input, select { font: inherit; }

/* Login: a quiet radar backdrop, with all motion confined to decoration. */
.login-page { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 100svh; padding: 0 clamp(20px, 5vw, 80px); background: radial-gradient(ellipse at 20% 45%, #25221455, transparent 60%), var(--bg); }
.login-ambient { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background-image: linear-gradient(#ffffff03 1px, transparent 1px), linear-gradient(90deg, #ffffff03 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(transparent, #000 20%, #000 75%, transparent); }
.login-orbit { position: absolute; top: 50%; left: 20%; width: 820px; height: 820px; transform: translate(-50%, -50%); border: 1px solid #73d6e80d; border-radius: 50%; background: repeating-radial-gradient(circle at center, transparent 0 100px, #73d6e80e 101px 102px); }
.login-orbit::before, .login-orbit::after { content: ""; position: absolute; background: #73d6e80c; }
.login-orbit::before { top: 50%; width: 100%; height: 1px; }
.login-orbit::after { left: 50%; width: 1px; height: 100%; }
.login-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg 280deg, #73d6e80a 330deg, #73d6e816 359deg, transparent 360deg); animation: login-scan 32s linear infinite; }
.login-orbit i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #73d6e880; box-shadow: 0 0 15px #73d6e835; }
.login-orbit i:nth-of-type(1) { top: 24%; left: 67%; }
.login-orbit i:nth-of-type(2) { top: 63%; left: 28%; }
.login-orbit i:nth-of-type(3) { top: 77%; left: 72%; }
@keyframes login-scan { to { transform: rotate(360deg); } }
.login-page[data-motion-paused] .login-sweep { animation-play-state: paused; }
.login-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: 1120px; margin: 0 auto; padding: 36px 0; }
.login-brand { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 650; letter-spacing: .12em; }
.login-brand small { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; font-weight: 400; letter-spacing: .08em; }
.login-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #73d6e833; border-radius: 12px; color: var(--accent); background: var(--accent-soft); }
.login-mark svg { width: 30px; height: 30px; }
.login-motion { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: #10151b80; color: var(--muted); font-size: 12px; cursor: pointer; }
.login-motion:hover { color: var(--text); border-color: var(--line-strong); }
.login-layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; align-items: center; gap: clamp(40px, 7vw, 112px); flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 64px 0 88px; }
.login-eyebrow { margin: 0 0 24px; font: 12px/1.5 ui-monospace, monospace; letter-spacing: .18em; color: var(--accent); }
.login-intro h2 { margin: 0; font-size: clamp(32px, 3.6vw, 48px); font-weight: 600; line-height: 1.4; letter-spacing: -.04em; }
.login-intro h2 span { color: var(--accent); }
.login-intro-copy { margin: 24px 0 30px; color: #afbbc6; font-size: 14px; line-height: 1.9; }
.login-platforms { display: flex; flex-wrap: wrap; gap: 8px; }
.login-platforms span { padding: 7px 11px; border: 1px solid var(--line); border-radius: 6px; background: #10151b66; font-size: 12px; color: #bbc1ca; }
.login-intro-note { display: flex; align-items: center; gap: 10px; margin: 52px 0 0; color: var(--muted); font-size: 12px; letter-spacing: .15em; }
.login-intro-note > span { color: var(--accent); font-size: 19px; }
.login-card { --login-control-height: 48px; position: relative; min-width: 0; width: 100%; padding: 26px 28px 22px; border: 1px solid #ffffff20; border-radius: 10px; background: linear-gradient(145deg, #1a1e25f5, #101319fa); box-shadow: 0 24px 80px #0005; }
.login-card::before { content: ""; position: absolute; top: -1px; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg, transparent, #73d6e866, transparent); }
.login-card-eyebrow { display: flex; align-items: center; gap: 7px; margin: 0 0 14px; color: var(--accent); font-size: 12px; line-height: 1.5; letter-spacing: .1em; }
.login-card-eyebrow svg { width: 16px; height: 16px; }
.login-card h1 { margin: 0; font-size: 28px; line-height: 1.3; font-weight: 600; letter-spacing: -.04em; }
.login-card h1 > span { color: var(--accent); }
.login-description { margin: 8px 0 20px; color: #afbbc6; font-size: 13px; line-height: 1.7; }
.login-card label { display: block; font-size: 13px; line-height: 1.5; }
.login-password-field { position: relative; margin-top: 7px; }
.login-password-field input { width: 100%; min-height: var(--login-control-height); padding: 12px 50px 12px 12px; border: 1px solid var(--line-strong); border-radius: 9px; background: #10151baa; color: var(--text); font-size: 16px; line-height: 22px; transition: border-color .2s, box-shadow .2s; }
.login-password-field input::placeholder { color: #afbbc6; font-size: 13px; }
.login-password-field input:hover:not(:focus):not([aria-invalid="true"]) { border-color: #ffffff40; }
.login-password-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.login-password-field input[aria-invalid="true"] { border-color: var(--sell); }
.login-password-toggle { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.login-password-toggle:hover { color: var(--text); background: #ffffff08; }
.login-password-toggle svg { width: 20px; height: 20px; }
.login-eye-slash { display: none; }
.login-password-toggle[aria-pressed="true"] .login-eye-slash { display: block; }
.login-caps-lock { margin: 10px 0 0; color: var(--accent); font-size: 12px; }
.login-card .login-remember { display: flex; align-items: center; flex-wrap: wrap; column-gap: 8px; row-gap: 0; min-height: 44px; margin: 6px 0 10px; color: #afbbc6; cursor: pointer; font-size: 12px; }
.login-remember input { flex-shrink: 0; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.login-remember-note { margin-left: auto; color: var(--muted); font-size: 12px; }
#login-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: var(--login-control-height); padding: 12px 16px; border: 1px solid #ffe4a04d; border-radius: 9px; background: var(--accent); color: #211b0b; cursor: pointer; font-size: 14px; font-weight: 650; transition: background .2s, box-shadow .2s; }
#login-submit:hover:not(:disabled) { background: #94e0ed; box-shadow: 0 4px 20px #73d6e820; }
#login-submit:disabled { opacity: .7; cursor: wait; }
.login-submit-icon { font-size: 20px; line-height: 1; }
.login-card form[aria-busy="true"] .login-submit-icon { width: 16px; height: 16px; border: 2px solid #211b0b40; border-top-color: #211b0b; border-radius: 50%; font-size: 0; animation: login-scan 1s linear infinite; }
.login-page :focus-visible, .radar-logout:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.login-page [hidden] { display: none !important; }
.login-error { margin: 12px 0 0; color: #ff9298; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.login-error:empty { margin: 0; }
.login-error:not(:empty) { padding: 9px 12px; border: 1px solid #ed8b9326; border-radius: 8px; background: #ed8b9308; }
.login-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.login-footnote { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); text-align: center; line-height: 1.8; text-wrap: balance; }
.login-page .login-footer { width: 100%; max-width: 1120px; padding: 24px 0 28px; }
.login-page .login-footer .author-icon-link { width: 44px; height: 44px; }
@media (max-width: 820px) {
  .login-header { padding: 24px 0; }
  .login-layout { grid-template-columns: minmax(0, 420px); justify-content: center; gap: 32px; padding: 30px 0 48px; }
  .login-intro { text-align: center; }
  .login-eyebrow { margin-bottom: 12px; font-size: 12px; }
  .login-intro h2 { font-size: 30px; }
  .login-intro h2 br { display: none; }
  .login-intro-copy, .login-intro-note { display: none; }
  .login-platforms { justify-content: center; margin-top: 18px; }
  .login-page .login-footer { align-items: center; text-align: center; }
}
@media (max-width: 480px) {
  .login-page { padding: 0 20px; }
  .login-brand { font-size: 12px; gap: 9px; }
  .login-brand small { font-size: 12px; letter-spacing: 0; }
  .login-motion { font-size: 12px; padding: 8px; }
  .login-layout { padding-top: 20px; }
  .login-intro h2 { font-size: clamp(22px, 5.6vw, 27px); }
  .login-card { padding: 22px 20px 18px; border-radius: 16px; }
  .login-card h1 { font-size: 26px; }
  .login-description { font-size: 12px; }
  .login-page .login-footer .author-credits { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .login-page *, .login-page *::before, .login-page *::after { animation: none !important; transition: none !important; }
  .login-motion { display: none; }
}
.radar-logout { border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 12px; color: var(--muted); background: var(--panel); cursor: pointer; font-size: 12px; }
.radar-logout:hover { color: var(--text); }

.system-overview { margin: 0 0 22px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--panel); }
.system-overview > summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 17px 20px; cursor: pointer; list-style: none; }
.system-overview > summary::-webkit-details-marker { display: none; }
.system-overview > summary:focus-visible { outline: 2px solid var(--accent); border-radius: 14px; }
.system-heading { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; }
.system-heading strong { font-size: 14px; }
.system-heading > span, .system-expand, .system-meta, .system-footnote { color: var(--muted); font-size: 12px; }
.system-heading > i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--pending); }
.system-heading > i[data-state="running"] { background: var(--buy); }
.system-heading > i[data-state="degraded"], .system-heading > i[data-state="offline"] { background: var(--sell); }
.system-expand { white-space: nowrap; }
.system-expand::after { content: " ＋"; color: var(--accent); }
.system-overview[open] .system-expand::after { content: " −"; }
.system-body { padding: 0 20px 18px; border-top: 1px solid var(--line); }
.system-meta { display: flex; justify-content: space-between; gap: 10px; padding: 16px 0; flex-wrap: wrap; }
.system-issues:empty { display: none; }
.system-issues { margin-bottom: 16px; padding: 12px 14px; border: 1px solid rgba(115, 214, 232, .25); border-radius: 9px; color: var(--accent); background: var(--accent-soft); font-size: 12px; line-height: 1.8; }
.system-issues p { margin: 0; }
.system-modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 10px; }
.system-module { border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: rgba(9, 11, 15, .55); min-width: 0; }
.system-module[data-state="degraded"] { border-color: rgba(237, 139, 147, .4); }
.system-module[data-state="disabled"] { opacity: .5; }
.system-module header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.system-module h3 { margin: 0; font-size: 13px; font-weight: 600; }
.system-badge { font-size: 12px; padding: 3px 6px; border-radius: 4px; color: var(--muted); background: rgba(255,255,255,.06); white-space: nowrap; }
.system-badge[data-state="running"] { color: var(--buy); background: var(--buy-soft); }
.system-badge[data-state="starting"] { color: var(--pending); background: var(--pending-soft); }
.system-badge[data-state="degraded"] { color: var(--sell); background: var(--sell-soft); }
.system-stage { font-size: 12px; line-height: 1.6; margin: 12px 0 6px; overflow-wrap: anywhere; }
.system-timing { color: var(--muted); font-size: 12px; margin: 0 0 10px; line-height: 1.7; }
.system-metrics { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; }
.system-metrics div { display: flex; gap: 6px; font-size: 12px; line-height: 1.7; }
.system-metrics dt { color: var(--muted); }
.system-metrics dd { margin: 0; font-variant-numeric: tabular-nums; }
.system-error { margin-top: 10px; color: var(--sell); font-size: 12px; overflow-wrap: anywhere; line-height: 1.6; }
.system-error[data-resolved="true"] { color: var(--muted); }
.system-events { margin-top: 18px; font-size: 12px; }
.system-events > summary { cursor: pointer; padding: 5px 0; }
.system-events summary span { color: var(--muted); font-size: 12px; margin-left: 10px; }
.system-events ol { list-style: none; padding: 0; margin: 12px 0 0; max-height: 260px; overflow-y: auto; }
.system-events li { display: grid; grid-template-columns: 65px 145px 1fr; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); line-height: 1.5; overflow-wrap: anywhere; }
.system-events time, .system-events li > span:first-of-type { color: var(--muted); }
.system-events li[data-level="error"] > span:last-child { color: var(--sell); }
.system-footnote { line-height: 1.8; margin: 16px 0 0; }
@media (max-width: 640px) {
  .system-overview > summary { padding: 14px; }
  .system-expand { font-size: 0; }
  .system-expand::after { font-size: 16px; }
  .system-heading { gap: 8px; }
  .system-heading > span { flex-basis: 100%; padding-left: 16px; }
  .system-body { padding: 0 12px 14px; }
  .system-modules { grid-template-columns: 1fr; }
  .system-events li { grid-template-columns: 62px 1fr; }
  .system-events li > span:last-child { grid-column: 1 / -1; }
}

.graduation-bar {
  position: sticky;
  z-index: 100;
  top: 0;
  width: 100%;
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid rgba(115, 214, 232, .2);
  background: rgba(9, 11, 15, .9);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
  backdrop-filter: blur(18px) saturate(135%);
}

.graduation-bar[hidden] { display: none; }

.graduation-bar-inner {
  display: flex;
  width: calc(100% - 48px);
  height: 66px;
  margin: 0 auto;
  align-items: center;
  gap: 12px;
}

.graduation-heading {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  color: #dbe1e9;
  font-size: 12px;
  font-weight: 720;
  white-space: nowrap;
}

.graduation-heading i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(115, 214, 232, .75);
}

.graduation-heading strong {
  display: grid;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  place-items: center;
  border-radius: 6px;
  color: var(--accent);
  background: var(--accent-soft);
  font: 700 9px ui-monospace, SFMono-Regular, monospace;
}

.graduation-list {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.graduation-list::-webkit-scrollbar { display: none; }

.graduation-view-all {
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
  height: 38px;
  padding: 0 11px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--accent);
  background: rgba(16, 20, 26, .8);
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
  transition: border-color .2s, background .2s;
}

.graduation-view-all:hover { border-color: rgba(115, 214, 232, .34); background: var(--accent-soft); }
.graduation-view-all:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.graduation-list:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 10px; }
.graduation-view-all svg { flex-shrink: 0; }

.graduation-token {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  width: 300px;
  min-width: 300px;
  height: 50px;
  padding: 6px 10px 6px 7px;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  column-gap: 9px;
  border: 1px solid rgba(255, 255, 255, .085);
  border-radius: 10px;
  color: inherit;
  background: rgba(255, 255, 255, .03);
  text-decoration: none;
  transition: border-color .15s, background .15s, transform .15s;
}

.graduation-token::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 80%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--graduation-platform-image) center / 48px 48px no-repeat;
  opacity: .18;
  pointer-events: none;
}

.graduation-token:hover {
  border-color: rgba(115, 214, 232, .34);
  background: rgba(115, 214, 232, .075);
  transform: translateY(-1px);
}

.graduation-token:focus-visible {
  outline: 2px solid rgba(115, 214, 232, .62);
  outline-offset: -1px;
}

.graduation-preview {
  position: fixed;
  z-index: 1100;
  width: min(320px, calc(100vw - 24px));
  padding-top: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.graduation-preview[hidden] { display: none; }

.graduation-preview > .token-card {
  opacity: 1;
  background: linear-gradient(145deg, #181d26, #0f1218);
  border-color: rgba(115, 214, 232, .34);
}

.graduation-preview > .token-card:hover { transform: none; }

.graduation-token-image {
  display: grid;
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  color: var(--accent);
  background: radial-gradient(circle at 35% 30%, #303846, #202a35 70%);
  font-size: 12px;
  font-weight: 800;
}

.graduation-token-image img { width: 100%; height: 100%; object-fit: cover; }
.graduation-token-image [data-role="fallback"][hidden] { display: none; }

.graduation-symbol,
.graduation-market-cap,
.graduation-time {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.graduation-symbol {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  color: #f2f1e9;
  font: 750 12px ui-monospace, SFMono-Regular, monospace;
}

.graduation-metrics {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 7px;
  grid-column: 2;
  grid-row: 2;
  align-self: start;
}

.graduation-tax {
  flex-shrink: 0;
  color: #aab2be;
  font: 12px ui-monospace, SFMono-Regular, monospace;
}
.graduation-tax[data-tone="high"] { color: #ff9ba1; }
.graduation-tax[data-tone="elevated"] { color: var(--accent); }
.graduation-tax[data-tone="loading"] { color: var(--muted); }

.graduation-market-cap {
  color: var(--accent);
  font: 700 11px ui-monospace, SFMono-Regular, monospace;
}

.graduation-time {
  display: grid;
  gap: 4px;
  grid-column: 3;
  grid-row: 1 / span 2;
  justify-self: end;
  color: var(--muted);
  font: 12px ui-monospace, SFMono-Regular, monospace;
}

.graduation-time > span { display: flex; justify-content: space-between; gap: 8px; }
.graduation-time b { color: #dbe1e9; font-weight: 500; font-variant-numeric: tabular-nums; }
.graduation-time > span:last-child b { color: var(--accent); }

.graduation-token-new {
  border-color: var(--accent);
  background: var(--accent-soft);
  animation: graduation-arrive .6s ease-out;
}

@keyframes graduation-arrive {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.graduation-toasts {
  position: fixed;
  z-index: 150;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(52px, env(safe-area-inset-bottom));
  display: grid;
  width: min(300px, calc(100vw - 28px));
  pointer-events: none;
}

.graduation-toast-slot {
  display: grid;
  grid-template-rows: 1fr;
  min-height: 0;
  margin-top: 8px;
  animation: graduation-toast-expand .38s cubic-bezier(.22, 1, .36, 1) both;
}

.graduation-toast {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(115, 214, 232, .23);
  border-radius: 10px;
  background: linear-gradient(110deg, rgba(115, 214, 232, .065), transparent 65%), #202a35;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .3);
  pointer-events: auto;
  animation: graduation-toast-in .38s cubic-bezier(.22, 1, .36, 1) both;
}

.graduation-toast-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; padding: 11px 32px 11px 12px; color: var(--text); text-decoration: none; }
.graduation-toast-heading { color: var(--accent); font-size: 12px; font-weight: 600; white-space: nowrap; }
.graduation-toast-content strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 18px; }
.graduation-toast-detail { grid-column: 1 / -1; color: var(--muted); font-size: 12px; line-height: 16px; overflow-wrap: anywhere; }
.graduation-toast-close { position: absolute; top: 6px; right: 4px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: 18px; cursor: pointer; transition: color .15s, background .15s; }
.graduation-toast-close:hover { color: var(--text); background: rgba(255, 255, 255, .08); }
.graduation-toast-content:focus-visible, .graduation-toast-close:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

.graduation-toast-slot.is-leaving { animation: graduation-toast-collapse .28s ease-in-out both; }
.graduation-toast-slot.is-leaving .graduation-toast { pointer-events: none; animation: graduation-toast-out .2s ease-in both; }

@keyframes graduation-toast-expand {
  from { grid-template-rows: 0fr; margin-top: 0; }
  to { grid-template-rows: 1fr; margin-top: 8px; }
}

@keyframes graduation-toast-collapse {
  from { grid-template-rows: 1fr; margin-top: 8px; }
  to { grid-template-rows: 0fr; margin-top: 0; }
}

@keyframes graduation-toast-in {
  from { opacity: 0; transform: translateX(18px) scale(.97); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes graduation-toast-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(12px); }
}

.ambient {
  position: fixed;
  z-index: 0;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(130px);
  opacity: .1;
}

.ambient-one { top: -320px; right: 5%; background: var(--accent); }
.ambient-two { bottom: -360px; left: -180px; background: #2685ff; opacity: .06; }

.shell {
  position: relative;
  /* Keep overflowing panels above the footer's stacking context. */
  z-index: 2;
  width: calc(100% - 48px);
  margin: 0 auto;
  padding: 48px 0 64px;
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  padding-bottom: 28px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 13px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: .15em;
}

.mark {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 1px solid rgba(115, 214, 232, .45);
  border-radius: 7px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 12px;
  font-weight: 800;
}

h1 { margin: 0; font-size: clamp(32px, 4vw, 54px); line-height: 1; letter-spacing: -.055em; }
h1 span { color: var(--accent); }
.brand-block p { margin: 14px 0 0; color: var(--muted); font-size: 14px; }

.status-panel {
  flex: 0 1 400px;
  min-width: 340px;
  max-width: 100%;
  margin-left: auto;
  border: 1px solid var(--line);
  border-top-color: #73d6e840;
  border-radius: 9px;
  background: rgba(15, 18, 24, .86);
  backdrop-filter: blur(12px);
}
.status-panel [hidden] { display: none !important; }
.status-metrics { display: grid; grid-template-columns: 1.25fr 1fr 1fr; }
.status-actions { display: flex; align-items: center; gap: 4px; padding: 5px 8px; border-top: 1px solid var(--line); }
.status-actions:not(:has(> :not([hidden]))) { display: none; }
.status-actions a, .status-actions .radar-logout { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 10px; border: 0; border-radius: 5px; background: transparent; color: #a9b0bb; text-decoration: none; font-size: 12px; white-space: nowrap; }
.status-actions a:hover { background: #73d6e80a; color: var(--accent); }
.status-actions .radar-logout { margin-left: auto; color: var(--muted); }
.status-actions .radar-logout:hover { color: #ed8b93; background: #ed8b930a; }
.status-actions a:focus-visible, .status-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.status-actions svg { width: 15px; height: 15px; flex-shrink: 0; }

.connection, .stat {
  display: flex;
  min-height: 76px;
  padding: 16px;
  align-items: center;
  border-right: 1px solid var(--line);
}

.connection { gap: 9px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.connection i { width: 7px; height: 7px; border-radius: 50%; background: #788290; box-shadow: 0 0 0 5px rgba(120,130,144,.08); }
.connection[data-state="open"] { color: var(--buy); }
.connection[data-state="open"] i { background: var(--buy); box-shadow: 0 0 0 4px rgba(53,215,139,.08); }
.connection[data-state="error"] { color: var(--sell); }
.connection[data-state="error"] i { background: var(--sell); }
.connection[data-state="delayed"] { color: var(--pending); }
.connection[data-state="delayed"] i { background: var(--pending); }

.stat { min-width: 92px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; }
.stat:last-child { border-right: 0; }
.stat-label { color: var(--muted); font-size: 12px; letter-spacing: .08em; }
.stat strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin: 26px 0;
}

.search {
  display: flex;
  width: min(480px, 100%);
  height: 44px;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(16, 20, 26, .8);
  transition: border-color .2s, box-shadow .2s;
}

.search:focus-within { border-color: rgba(115, 214, 232, .42); box-shadow: 0 0 0 3px var(--accent-soft); }
.search svg { width: 17px; fill: none; stroke: var(--muted); stroke-linecap: round; stroke-width: 1.8; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 13px; }
.search input::placeholder { color: #68717e; }
kbd { padding: 2px 7px; border: 1px solid var(--line-strong); border-radius: 5px; color: #68717e; background: #10141a; font: 12px ui-monospace, monospace; }

.toolbar-actions { display: flex; align-items: center; gap: 16px; }
.sort-control {
  display: flex;
  height: 38px;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: rgba(16, 20, 26, .8);
  font-size: 12px;
  white-space: nowrap;
  transition: border-color .2s, box-shadow .2s;
}
.sort-control:focus-within { border-color: rgba(115, 214, 232, .42); box-shadow: 0 0 0 3px var(--accent-soft); }
.sort-control select {
  max-width: 178px;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
}

.legend { display: flex; gap: 18px; color: var(--muted); font-size: 12px; }
.legend span { display: flex; align-items: center; gap: 7px; }
.legend i { width: 7px; height: 7px; border-radius: 50%; }
.buy-dot { background: var(--buy); box-shadow: 0 0 8px var(--buy); }
.sell-dot { background: var(--sell); box-shadow: 0 0 8px var(--sell); }

.preferences-open {
  display: flex;
  height: 38px;
  padding: 0 11px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: rgba(16, 20, 26, .8);
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
  transition: color .2s, border-color .2s, background .2s;
}
.preferences-open:hover { color: var(--text); border-color: var(--line-strong); background: rgba(24, 29, 38, .92); }
.preferences-open:focus-visible, .preferences-close:focus-visible, .preferences-reset:focus-visible { outline: 2px solid rgba(115, 214, 232, .62); outline-offset: 2px; }
.preferences-open svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }

.preferences-dialog {
  width: min(440px, calc(100% - 28px));
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--text);
  background: rgba(17, 21, 28, .98);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
}
.preferences-dialog::backdrop { background: rgba(3, 5, 8, .72); backdrop-filter: blur(5px); }
.preferences-dialog form { padding: 20px; }
.preferences-header, .preferences-footer, .preference-field > span { display: flex; align-items: center; justify-content: space-between; }
.preferences-header span { color: var(--accent); font: 800 9px ui-monospace, SFMono-Regular, monospace; letter-spacing: .12em; }
.preferences-header h2 { margin: 4px 0 0; font-size: 19px; }
.preferences-close {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0 0 2px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  background: rgba(255, 255, 255, .025);
  cursor: pointer;
  font-size: 22px;
}
.preferences-close:hover { color: var(--text); border-color: var(--line-strong); }
.preferences-fields { display: grid; margin-top: 18px; gap: 11px; }
.preference-field { display: grid; padding: 14px; gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .025); }
.preference-field b { font-size: 12px; }
.preference-field output { color: var(--accent); font: 700 11px ui-monospace, SFMono-Regular, monospace; }
.preference-field small { color: #687381; font-size: 12px; line-height: 1.5; }
.preference-field input[type="range"] { width: 100%; accent-color: var(--accent); cursor: pointer; }
.preferences-footer { margin-top: 16px; gap: 16px; }
.preferences-footer > span { color: #687381; font-size: 12px; }
.preferences-reset { padding: 7px 10px; border: 1px solid rgba(115, 214, 232, .25); border-radius: 8px; color: var(--accent); background: var(--accent-soft); cursor: pointer; font-size: 12px; }
.preferences-reset:hover { border-color: rgba(115, 214, 232, .48); background: rgba(115, 214, 232, .18); }

.filter-presets-content { padding: 20px; }
.filter-presets-help { margin: 16px 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.filter-presets-field { display: grid; min-width: 0; gap: 8px; color: var(--text); font-size: 12px; }
.filter-presets-field input, .filter-presets-field select { box-sizing: border-box; width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text); background: #11151c; font: inherit; }
.filter-presets-field input:focus-visible, .filter-presets-field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.filter-presets-actions { display: flex; margin-top: 12px; gap: 8px; flex-wrap: wrap; }
.filter-presets-actions button { min-height: 34px; font-size: 12px; }
.filter-presets-actions button:disabled { opacity: .4; cursor: not-allowed; }
.filter-preset-delete { color: var(--sell); border-color: rgba(237, 139, 147, .25); background: rgba(237, 139, 147, .06); }
.filter-presets-dialog .filter-preset-form { margin-top: 20px; padding: 20px 0 0; border-top: 1px solid var(--line); }
.filter-preset-status { min-height: 18px; margin: 14px 0 0; color: var(--buy); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.filter-preset-status.error { color: var(--sell); }

.filter-bar {
  position: relative;
  display: flex;
  min-height: 48px;
  margin: -12px 0 26px;
  padding: 8px 10px 8px 14px;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(16, 20, 26, .62);
}

.filter-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.filter-heading small { margin-left: 4px; color: #596270; font-size: 12px; font-weight: 400; }
.filter-preset, .clear-filters {
  padding: 5px 8px;
  border: 1px solid rgba(115, 214, 232, .2);
  border-radius: 7px;
  color: var(--accent);
  background: var(--accent-soft);
  cursor: pointer;
  font-size: 12px;
  transition: border-color .15s, background .15s;
}
.filter-preset:hover, .filter-preset.active { border-color: rgba(115, 214, 232, .52); background: rgba(115, 214, 232, .18); }
.filter-options { display: flex; flex: 1; min-width: 0; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter-group { display: flex; align-items: center; gap: 6px; }
.filter-group + .filter-group { padding-left: 10px; border-left: 1px solid var(--line); }
.filter-actions { display: flex; margin-left: auto; align-items: center; gap: 6px; }
.advanced-filters-toggle {
  display: flex;
  min-height: 30px;
  padding: 0 9px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, .035);
  cursor: pointer;
  font-size: 12px;
}
.advanced-filters-toggle > span { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.advanced-filters-toggle svg { flex: 0 0 14px; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.advanced-filters-toggle b { display: grid; min-width: 17px; height: 17px; padding: 0 4px; place-items: center; border-radius: 5px; background: var(--accent-soft); font-size: 12px; }
.advanced-filters-toggle b[hidden] { display: none; }
.advanced-filters-toggle:hover, .advanced-filters-toggle[aria-expanded="true"] { color: var(--text); border-color: rgba(115, 214, 232, .42); }
.advanced-filters-toggle.active { color: var(--accent); border-color: rgba(115, 214, 232, .3); background: rgba(115, 214, 232, .06); }
.advanced-filters-toggle[aria-expanded="true"] .filter-chevron { transform: rotate(180deg); }
.advanced-filters-toggle:focus-visible, .advanced-filters-heading button:focus-visible, .filter-preset:focus-visible, .clear-filters:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.advanced-filters-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  width: min(560px, 100%);
  max-height: min(560px, 70dvh);
  overflow-y: auto;
  padding: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: #12171f;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .5);
}
.advanced-filters-panel[hidden] { display: none; }
.advanced-filters-heading { display: flex; margin-bottom: 18px; align-items: flex-start; justify-content: space-between; gap: 12px; }
.advanced-filters-heading h2 { margin: 0; font-size: 13px; font-weight: 600; }
.advanced-filters-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.advanced-filters-heading button { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: transparent; cursor: pointer; font-size: 20px; line-height: 1; }
.advanced-filters-heading button:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.filter-ranges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.link-filter-options { margin-bottom: 14px; }
.link-filter-options p { margin: 8px 0 0; }
.time-range-relation { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: #b3bdcc; font-size: 12px; }
.time-range-relation select { width: 100%; height: 36px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text); background: #12171f; font-size: 12px; cursor: pointer; }
.time-range-relation select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.time-range-relation small { color: var(--muted); font-size: 12px; }
.filter-annotation-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.filter-annotation-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 10px; gap: 6px; }
.filter-annotation-options .filter-chip span { justify-content: center; }
.filter-group-label { color: #727d8c; font-size: 12px; letter-spacing: .06em; white-space: nowrap; }
.filter-group-label small { color: #535d6a; font-size: 12px; }
.numeric-range {
  position: relative;
  display: flex;
  min-height: 28px;
  padding: 3px 7px;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .025);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.numeric-range:focus-within { border-color: rgba(115, 214, 232, .42); box-shadow: 0 0 0 2px var(--accent-soft); }
.numeric-range.invalid { border-color: rgba(237, 139, 147, .55); background: rgba(237, 139, 147, .07); }
.market-cap-range-label { margin: 0 3px; color: #afbbc6; font-size: 12px; white-space: nowrap; }
.numeric-range label {
  display: flex;
  height: 20px;
  padding: 0 5px;
  align-items: center;
  gap: 2px;
  border-radius: 5px;
  color: #647080;
  background: rgba(6, 8, 12, .46);
  font-size: 12px;
}
.numeric-range input {
  width: 62px;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font: 12px ui-monospace, SFMono-Regular, monospace;
}
.numeric-range input::placeholder { color: #596270; }
.numeric-range input::-webkit-inner-spin-button { appearance: none; }
.market-cap-range-separator { color: #535d6a; font-size: 12px; }
.market-cap-range-error {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  z-index: 3;
  padding: 4px 6px;
  border-radius: 5px;
  color: #ff9ba1;
  background: #211318;
  font-size: 12px;
  white-space: nowrap;
}
.market-cap-range-error[hidden] { display: none; }
.filter-ranges .numeric-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); min-width: 0; padding: 0; gap: 8px; border: 0; background: none; }
.filter-ranges .numeric-range:focus-within { box-shadow: none; }
.filter-ranges .market-cap-range-label { grid-column: 1 / -1; margin: 0 0 2px; color: #b3bdcc; font-size: 12px; }
.filter-ranges .numeric-range label { min-width: 0; height: 36px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 8px; }
.filter-ranges .numeric-range label:focus-within { border-color: rgba(115, 214, 232, .5); box-shadow: 0 0 0 2px var(--accent-soft); }
.filter-ranges .numeric-range input { width: 100%; min-width: 0; font-size: 12px; }
.filter-ranges .last-trade-minimum { grid-template-columns: minmax(0, 1fr); }
.filter-minimum-help { color: var(--muted); font-size: 12px; line-height: 1.5; }
.filter-ranges .numeric-range.invalid label { border-color: rgba(237, 139, 147, .55); }
.filter-ranges .market-cap-range-error { position: static; grid-column: 1 / -1; padding: 0; background: none; white-space: normal; line-height: 1.5; }
.filter-chip { position: relative; cursor: pointer; }
.filter-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.filter-chip span {
  display: flex;
  min-height: 28px;
  padding: 0 10px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #afbbc6;
  background: rgba(255, 255, 255, .025);
  font-size: 12px;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}
.filter-chip i {
  width: 6px;
  height: 6px;
  border: 1px solid #647080;
  border-radius: 50%;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.filter-chip:hover span { color: var(--text); border-color: var(--line-strong); }
.filter-chip input:focus-visible + span { outline: 2px solid rgba(115, 214, 232, .55); outline-offset: 2px; }
.filter-chip input:checked + span { color: #dce4df; border-color: rgba(99, 207, 162, .34); background: rgba(99, 207, 162, .09); }
.filter-chip input:checked + span i { border-color: var(--buy); background: var(--buy); box-shadow: 0 0 8px rgba(99, 207, 162, .6); }
.platform-filter img { width: 14px; height: 14px; object-fit: contain; }
.platform-filter.pons-v2 input:checked + span { border-color: rgba(115, 214, 232, .38); background: rgba(115, 214, 232, .1); }
.platform-filter.long input:checked + span { border-color: rgba(120, 139, 255, .4); background: rgba(120, 139, 255, .11); }
.annotation-filter span { gap: 5px; }
.annotation-filter b { font-size: 12px; font-weight: 400; line-height: 1; }
.annotation-filter.scam { --filter-annotation: 237, 139, 147; }
.annotation-filter.star { --filter-annotation: 115, 214, 232; }
.annotation-filter.watch { --filter-annotation: 234, 180, 107; }
.annotation-filter.bad { --filter-annotation: 255, 145, 77; }
.annotation-filter input:checked + span {
  color: rgb(var(--filter-annotation));
  border-color: rgba(var(--filter-annotation), .38);
  background: rgba(var(--filter-annotation), .1);
}
.clear-filters { margin-left: 2px; border-color: var(--line); color: var(--muted); background: transparent; }
.clear-filters:hover { color: var(--text); border-color: var(--line-strong); }
.clear-filters[hidden] { display: none; }

.notice { margin-bottom: 20px; padding: 12px 15px; border: 1px solid rgba(255,95,104,.2); border-radius: 10px; color: #ff9ba1; background: rgba(255,95,104,.06); font-size: 12px; }

.originality-focus {
  display: flex;
  margin-bottom: 18px;
  padding: 13px 14px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  scroll-margin-top: 16px;
  border: 1px solid rgba(237, 139, 147, .3);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(237, 139, 147, .1), rgba(99, 207, 162, .07));
  box-shadow: inset 3px 0 0 rgba(237, 139, 147, .68);
}
.originality-focus[hidden] { display: none; }
.originality-focus > div { display: flex; min-width: 0; align-items: baseline; gap: 10px; }
.originality-focus-label { flex: 0 0 auto; color: #ff9aa0; font: 800 9px ui-monospace, SFMono-Regular, monospace; letter-spacing: .08em; }
.originality-focus strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.originality-focus small { flex: 0 0 auto; color: var(--muted); font-size: 12px; }
.originality-focus button {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(115, 214, 232, .3);
  border-radius: 8px;
  color: var(--accent);
  background: var(--accent-soft);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.originality-focus button:hover { border-color: rgba(115, 214, 232, .58); background: rgba(115, 214, 232, .18); }
.originality-focus button:focus-visible { outline: 2px solid rgba(115, 214, 232, .62); outline-offset: 2px; }
.originality-focus-active .toolbar,
.originality-focus-active .filter-bar { opacity: .46; }

.token-load-status {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 72px;
  padding: 16px 0;
  color: var(--muted);
  font-size: 12px;
}
.token-load-status[hidden],
.token-load-status button[hidden] { display: none; }
.token-load-status button {
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.token-load-status button:hover { border-color: var(--accent); color: var(--accent); }
.token-load-status button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
  scroll-margin-top: 16px;
}
.token-slot { display: grid; min-width: 0; }
.token-slot:empty { min-height: var(--token-slot-height, 380px); }

.token-card {
  position: relative;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(24,29,38,.96), rgba(15,18,24,.96));
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  overflow: hidden;
  opacity: var(--card-opacity, 1);
  transition: transform .2s, border-color .2s, box-shadow .2s, opacity .2s;
}

.token-card.card-enter { animation: card-in .38s both; }

.token-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.token-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 22px;
  left: 22px;
  height: 2px;
  border-radius: 0 0 4px 4px;
  background: var(--annotation-color, transparent);
  box-shadow: 0 0 14px var(--annotation-color, transparent);
  pointer-events: none;
}

/* Animate an independent layer so trade flashes and graduation borders remain visible. */
.token-card.new-entry { opacity: 1; }
.token-card.new-entry::before {
  inset: 3px;
  border: 1px solid rgba(108, 223, 245, .65);
  border-radius: calc(var(--radius) - 4px);
  background: linear-gradient(130deg, rgba(108, 223, 245, .09), transparent 55%);
  box-shadow: inset 0 0 22px rgba(108, 223, 245, .08);
  opacity: .8;
  animation: new-entry-glow 2.8s ease-in-out infinite;
}
@keyframes new-entry-glow {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}

.token-age-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, .055);
  pointer-events: none;
}

.token-age-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, #d8a936, var(--accent));
  box-shadow: 0 0 10px rgba(115, 214, 232, .4);
  transform: scaleX(var(--token-window-progress, 0));
  transform-origin: left center;
  transition: transform 1s linear;
}

.token-card[data-annotation="scam"] { --annotation-color: var(--sell); }
.token-card[data-annotation="star"] { --annotation-color: var(--accent); }
.token-card[data-annotation="watch"] { --annotation-color: #eab46b; }
.token-card[data-annotation="bad"] { --annotation-color: #ff914d; }

.token-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: 0 22px 50px rgba(0,0,0,.3); }

body.page-paused::after {
  content: "LAYOUT PAUSED · 数据实时更新";
  position: fixed;
  z-index: 1000;
  right: 18px;
  bottom: 18px;
  padding: 8px 11px;
  border: 1px solid rgba(115, 214, 232, .38);
  border-radius: 999px;
  color: var(--accent);
  background: rgba(15, 18, 24, .94);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  pointer-events: none;
  font: 700 10px ui-monospace, SFMono-Regular, monospace;
  letter-spacing: .04em;
}

.token-card.pending {
  border-color: rgba(234, 180, 107, .48);
  background: linear-gradient(145deg, rgba(23, 34, 49, .97), rgba(14, 20, 29, .97));
  box-shadow: inset 0 0 30px rgba(234, 180, 107, .035), 0 18px 40px rgba(0,0,0,.18);
}

.token-card.pending:hover {
  border-color: rgba(234, 180, 107, .72);
  box-shadow: inset 0 0 36px rgba(234, 180, 107, .055), 0 22px 50px rgba(0,0,0,.3);
}

.token-card.graduated {
  border-color: rgba(115, 214, 232, .9);
  box-shadow:
    0 0 0 1px rgba(115, 214, 232, .28),
    inset 0 0 32px rgba(115, 214, 232, .055),
    0 18px 40px rgba(0,0,0,.22);
}

.token-card.graduated:hover {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px rgba(115, 214, 232, .4),
    inset 0 0 38px rgba(115, 214, 232, .08),
    0 22px 50px rgba(0,0,0,.3);
}

.token-card.flash-buy { animation: buy-pulse var(--buy-flash-duration) ease-out; }
.token-card.flash-buy-revival { animation: revival-buy-pulse var(--buy-flash-duration) ease-out; }
.token-card.flash-sell { animation: sell-pulse var(--sell-flash-duration) ease-out; }

@keyframes buy-pulse {
  0% { border-color: var(--buy); box-shadow: 0 0 0 1px var(--buy), inset 0 0 55px var(--buy-soft), 0 0 32px rgba(53,215,139,.27); }
  45% { background-color: rgba(53,215,139,.11); }
  100% { border-color: var(--line); box-shadow: 0 18px 40px rgba(0,0,0,.18); }
}

@keyframes revival-buy-pulse {
  0% {
    border-color: #ff4fd8;
    box-shadow: 0 0 0 1px #ff4fd8, inset 0 0 58px rgba(255,79,216,.2), 0 0 34px rgba(0,229,255,.42);
  }
  28% {
    border-color: #00e5ff;
    background-color: rgba(0,229,255,.1);
    box-shadow: 0 0 0 1px #00e5ff, inset 0 0 62px rgba(98,168,255,.18), 0 0 38px rgba(168,85,247,.42);
  }
  58% {
    border-color: #73d6e8;
    background-color: rgba(168,85,247,.1);
    box-shadow: 0 0 0 1px #73d6e8, inset 0 0 58px rgba(115,214,232,.16), 0 0 36px rgba(255,79,216,.38);
  }
  100% {
    border-color: var(--line);
    background-color: transparent;
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
  }
}

@keyframes sell-pulse {
  0% { border-color: var(--sell); box-shadow: 0 0 0 1px var(--sell), inset 0 0 55px var(--sell-soft), 0 0 32px rgba(255,95,104,.24); }
  45% { background-color: rgba(255,95,104,.11); }
  100% { border-color: var(--line); box-shadow: 0 18px 40px rgba(0,0,0,.18); }
}

@keyframes card-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }

.card-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  grid-template-rows: repeat(4, auto);
  align-items: start;
  column-gap: 10px;
  min-width: 0;
}
.token-image {
  position: relative;
  display: flex;
  grid-column: 1;
  grid-row: 1 / span 4;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  color: var(--accent);
  background: radial-gradient(circle at 35% 30%, #303846, #202a35 70%);
  font-size: 20px;
  font-weight: 800;
}
.token-image > [data-role="token-logo"] { width: 100%; height: 100%; object-fit: cover; }
.token-image.has-image { cursor: zoom-in; }
.token-image.previewing {
  border-color: rgba(115, 214, 232, .58);
  box-shadow: 0 0 0 2px rgba(115, 214, 232, .12);
}
.token-image-preview {
  position: fixed;
  z-index: 1200;
  width: min(224px, calc(100vw - 24px), calc(100vh - 24px));
  overflow: hidden;
  border: 1px solid rgba(115, 214, 232, .48);
  border-radius: 20px;
  background: #202a35;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .52), 0 0 0 1px rgba(255, 255, 255, .06);
  pointer-events: none;
  transform-origin: left center;
  animation: token-image-preview-in .14s ease-out both;
}
.token-image-preview.is-left { transform-origin: right center; }
.token-image-preview img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.token-image-preview-identity {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--line);
  white-space: normal;
  overflow-wrap: anywhere;
}
.token-image-preview-name {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}
.token-image-preview-symbol {
  margin-top: 4px;
  color: var(--accent);
  font-size: 13px;
  line-height: 1.4;
}
.token-image-preview-description,
.token-image-preview-translation {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.token-image-preview-translation { color: var(--text); }
.token-image-preview-description[hidden],
.token-image-preview-translation[hidden] { display: none; }

@keyframes token-image-preview-in {
  from { opacity: 0; transform: scale(.96); }
}
.market-cap-progress {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.market-cap-progress-track,
.market-cap-progress-fill {
  fill: none;
  stroke-width: 3;
}
.market-cap-progress-track {
  stroke: rgba(60, 91, 119, .52);
}
.market-cap-progress-fill {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: var(--market-cap-progress, 0) 100;
  filter: drop-shadow(0 0 2px var(--accent));
  transition: stroke-dasharray .3s ease;
}
.identity { display: contents; }
.name-line, .symbol-line { min-width: 0; }
.name-line { display: flex; grid-column: 2 / -1; grid-row: 1; align-items: center; gap: 7px; }
.token-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 720; letter-spacing: -.02em; }
.qualification-chip {
  flex: 0 0 auto;
  padding: 3px 5px;
  border: 1px solid rgba(107, 230, 234, 0.38);
  border-radius: 5px;
  color: #9bc8ff;
  background: var(--accent-soft);
  font: 700 8px ui-monospace, SFMono-Regular, monospace;
  letter-spacing: .04em;
  white-space: nowrap;
}
.qualification-chip[hidden] { display: none; }
.platform-icon {
  position: absolute;
  z-index: 3;
  right: -2px;
  bottom: -2px;
  width: 18px;
  height: 18px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 50%;
  background: rgba(12, 16, 22, .88);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .48);
  object-fit: contain;
  pointer-events: none;
}
.image-kind-chip {
  flex: 0 0 auto;
  padding: 3px 5px;
  border: 1px solid;
  border-radius: 5px;
  font: 800 8px ui-monospace, SFMono-Regular, monospace;
  letter-spacing: .04em;
  white-space: nowrap;
  cursor: default;
}
.image-kind-chip.og {
  border-color: rgba(99, 207, 162, .48);
  color: #70e9aa;
  background: rgba(99, 207, 162, .1);
}
.image-kind-chip.mock {
  border-color: rgba(237, 139, 147, .48);
  color: #ff8e95;
  background: rgba(237, 139, 147, .1);
}
.image-kind-chip:enabled { cursor: pointer; }
.image-kind-chip.og:enabled:hover { border-color: rgba(99, 207, 162, .8); color: #b2f5d1; background: rgba(99, 207, 162, .18); }
.image-kind-chip.og:focus-visible { outline: 2px solid rgba(99, 207, 162, .62); outline-offset: 2px; }
.image-kind-chip.mock:enabled:hover { border-color: rgba(237, 139, 147, .8); color: #ffc0c4; background: rgba(237, 139, 147, .18); }
.image-kind-chip.mock:focus-visible { outline: 2px solid rgba(237, 139, 147, .62); outline-offset: 2px; }
.image-kind-chip:disabled { opacity: 1; }
.image-kind-chip[hidden] { display: none; }
.symbol { display: block; overflow: hidden; color: var(--accent); font: 12px ui-monospace, SFMono-Regular, monospace; text-overflow: ellipsis; white-space: nowrap; }
.symbol-line { grid-column: 2; grid-row: 2; margin-top: 2px; }
.contract-line { display: flex; grid-column: 2; grid-row: 3; align-items: center; gap: 5px; margin-top: 4px; color: #697382; font: 12px ui-monospace, SFMono-Regular, monospace; }
.pair-line { display: flex; grid-column: 2; grid-row: 4; min-width: 0; align-items: center; gap: 5px; margin-top: 3px; color: #596473; font: 12px ui-monospace, SFMono-Regular, monospace; }
.pair-label { color: #727d8c; font-size: 12px; letter-spacing: .08em; }
.pair-symbol { flex: 0 0 auto; color: #a2acb9; }
.pair-address { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy { padding: 0; border: 0; color: #697382; background: none; cursor: pointer; }
.copy[hidden] { display: none; }
.copy:hover { color: var(--accent); }
.card-actions { display: flex; grid-column: 3; grid-row: 2 / span 3; align-items: flex-end; align-self: start; flex-direction: column; gap: 5px; }
.annotation-control { position: relative; z-index: 4; }
.annotation-trigger {
  display: inline-flex;
  min-width: 34px;
  height: 22px;
  padding: 0 4px;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 7px;
  color: #788392;
  background: rgba(255,255,255,.025);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}
.annotation-trigger:hover, .annotation-trigger[aria-expanded="true"] {
  color: var(--text);
  border-color: var(--line-strong);
  background: rgba(255,255,255,.055);
}
.annotation-trigger.active { border-style: solid; }
.token-card[data-annotation="scam"] .annotation-trigger { color: #ff8d94; border-color: rgba(255,95,104,.35); background: rgba(255,95,104,.09); }
.token-card[data-annotation="star"] .annotation-trigger { color: var(--accent); border-color: rgba(115,214,232,.35); background: var(--accent-soft); }
.token-card[data-annotation="watch"] .annotation-trigger { color: #91c3ff; border-color: rgba(98,168,255,.35); background: rgba(98,168,255,.09); }
.token-card[data-annotation="bad"] .annotation-trigger { color: #ffad7a; border-color: rgba(255,145,77,.38); background: rgba(255,145,77,.09); }
.annotation-trigger:focus-visible, .annotation-option:focus-visible, .annotation-clear:focus-visible {
  outline: 2px solid rgba(115, 214, 232, .62);
  outline-offset: 2px;
}
.annotation-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 10;
  width: 132px;
  padding: 5px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgba(14, 18, 24, .98);
  box-shadow: 0 14px 34px rgba(0,0,0,.48);
  backdrop-filter: blur(14px);
}
.annotation-menu[hidden] { display: none; }
.annotation-option, .annotation-clear {
  display: flex;
  width: 100%;
  height: 30px;
  padding: 0 8px;
  align-items: center;
  border: 0;
  border-radius: 6px;
  color: #aab2be;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  text-align: left;
}
.annotation-option:hover, .annotation-option.selected { color: var(--text); background: rgba(255,255,255,.06); }
.annotation-option.selected::after { content: "✓"; margin-left: auto; color: var(--accent); }
.annotation-option.scam.selected::after { color: var(--sell); }
.annotation-option.watch.selected::after { color: #eab46b; }
.annotation-option.bad.selected::after { color: #ff914d; }
.annotation-clear { height: 27px; margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; color: #6f7987; font-size: 12px; }
.annotation-clear:hover { color: #ff8d94; background: rgba(255,95,104,.06); }
.annotation-clear[hidden] { display: none; }
.trade-chip { display: none; padding: 4px 7px; border-radius: 6px; font: 700 9px ui-monospace, monospace; letter-spacing: .08em; }
.trade-chip.buy { display: block; color: var(--buy); background: var(--buy-soft); }
.trade-chip.sell { display: block; color: var(--sell); background: var(--sell-soft); }

.metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 12px 0 9px; }
.metric { min-width: 0; padding: 9px; border: 1px solid rgba(255,255,255,.055); border-radius: 9px; background: rgba(7,10,14,.34); }
.metric-primary, .metric-volume { grid-column: span 3; }
.metric-compact { grid-column: span 2; padding: 8px 9px; }
.metric label { display: block; margin-bottom: 4px; color: #717b8b; font-size: 11px; letter-spacing: .09em; }
.metric strong { display: block; overflow: hidden; color: #f2f1e9; font: 700 14px ui-monospace, SFMono-Regular, monospace; text-overflow: ellipsis; white-space: nowrap; }
.metric strong.loading { color: #606977; }
.metric small { display: block; margin-top: 3px; overflow: hidden; color: #626c7a; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.metric [hidden] { display: none; }
.metric-ath-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-top: 4px; color: #929cab; font: 500 8px ui-monospace, SFMono-Regular, monospace; }
.metric-ath-peak { display: flex; min-width: 0; gap: 4px; }
.metric-ath-peak > :first-child { color: #717b8b; }
.metric-ath-peak [data-role="mcap-ath"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metric-ath-summary [data-role="mcap-ath-note"] { white-space: nowrap; }
.metric-ath-summary .loading { color: #606977; }
.metric-compact label { margin-bottom: 3px; }
.metric-compact strong { font-size: 12px; }
.metric-compact small { font-size: 12px; }
.metric-duration[data-duration-tone="blue"] { --duration-color: 125, 184, 244; }
.metric-duration[data-duration-tone="purple"] { --duration-color: 190, 160, 244; }
.metric-duration[data-duration-tone="light-gold"] { --duration-color: 236, 207, 150; }
.metric-duration[data-duration-tone="gold"] { --duration-color: 255, 194, 61; }
.metric-duration[data-duration-tone] {
  position: relative;
  border-color: rgba(var(--duration-color), var(--duration-border));
  background-image: linear-gradient(135deg, rgba(var(--duration-color), var(--duration-tint)), rgba(var(--duration-color), .025));
  box-shadow: inset 0 1px 0 rgba(var(--duration-color), .12), 0 0 12px rgba(var(--duration-color), var(--duration-tint));
}
.metric-duration[data-duration-tone] strong {
  color: rgb(var(--duration-color));
  text-shadow: 0 0 10px rgba(var(--duration-color), .25);
}
.metric-duration[data-duration-tone]::after {
  content: "";
  position: absolute;
  right: 9px;
  bottom: 0;
  left: 9px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--duration-color), .7), transparent);
  box-shadow: 0 0 7px rgba(var(--duration-color), .2);
  pointer-events: none;
}
.metric .fee-rate-value { display: flex; align-items: center; gap: 4px; }
.fee-destination-icon { display: inline-flex; flex: 0 0 16px; }
.fee-destination-icon svg { width: 16px; height: 16px; }
.fee-rate-value[data-tone="loading"] { color: #606977; }
.fee-rate-value[data-tone="elevated"] { color: var(--accent); }
.fee-rate-value[data-tone="high"] { color: #ff9ba1; text-shadow: 0 0 10px rgba(237, 139, 147, .18); }
.metric-fee[data-tone="elevated"] {
  border-color: rgba(115, 214, 232, .2);
  background: rgba(115, 214, 232, .045);
}
.metric-fee[data-tone="high"] {
  border-color: rgba(237, 139, 147, .26);
  background: rgba(237, 139, 147, .065);
}
.metric[data-ath-tone="green"] .metric-ath-summary { color: var(--buy); }
.metric[data-ath-tone="light-green"] .metric-ath-summary { color: #8bdcb5; }
.metric[data-ath-tone="light-orange"] .metric-ath-summary { color: #e5a869; }
.metric[data-ath-tone="light-red"] .metric-ath-summary { color: #e7989d; }
.metric[data-ath-tone="red"] .metric-ath-summary { color: var(--sell); }

.last-trade {
  --trade-width: 0%;
  --trade-opacity: 0;
  --trade-color: 99, 207, 162;
  display: flex;
  min-height: 16px;
  margin: -1px 1px 8px;
  padding: 4px 6px;
  border-radius: 4px;
  background-image: linear-gradient(rgba(var(--trade-color), var(--trade-opacity)), rgba(var(--trade-color), var(--trade-opacity)));
  background-size: var(--trade-width) 100%;
  background-repeat: no-repeat;
  transition: background-size .25s ease;
  align-items: center;
  gap: 4px;
  color: #626c7a;
  font: 11px ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
.last-trade-wallet { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.last-trade-activity { flex: 0 0 auto; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; }
.last-trade::before {
  content: none;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 12px;
  aspect-ratio: 1;
  padding: 1px;
  box-sizing: border-box;
  border-radius: 50%;
  color: #10151c;
  line-height: 1;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.last-trade.active::before { content: attr(data-count); }
.last-trade.active { color: #afbbc6; }
.last-trade { cursor: help; }
.last-trade:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.trade-details {
  position: fixed;
  z-index: 1200;
  width: max-content;
  max-width: calc(100vw - 24px);
  max-height: min(360px, calc(100vh - 24px));
  padding: 12px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  border: 1px solid rgba(115, 214, 232, .25);
  border-radius: 10px;
  color: #dbe1e9;
  background: #141922;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .45);
  font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
.trade-details[hidden] { display: none; }
.trade-details-heading { display: block; margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.trade-details-row {
  display: grid;
  grid-template-columns: 7ch 11ch 4ch 9ch minmax(12ch, 1fr) 24px;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  white-space: nowrap;
  border-top: 1px solid rgba(255, 255, 255, .055);
}
.trade-detail-age, .trade-detail-wallet { color: #939ead; }
.trade-detail-wallet {
  display: block;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.trade-detail-wallet.has-note { color: var(--accent); }
.trade-detail-wallet:hover { color: var(--text); }
.trade-detail-wallet:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.trade-detail-wallet:disabled { cursor: default; text-decoration: none; }
.trade-detail-tokenAmount, .trade-detail-amount { text-align: right; }
.trade-detail-tx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  color: #939ead;
  text-decoration: none;
}
.trade-detail-tx svg { display: block; width: 16px; height: 16px; }
.trade-detail-tx:hover { color: var(--accent); background: var(--accent-soft); }
.trade-detail-tx:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.trade-details-row.buy .trade-detail-side { color: var(--buy); }
.trade-details-row.sell .trade-detail-side { color: var(--sell); }
.last-trade.sell { --trade-color: 237, 139, 147; }
.last-trade.buy::before { background: var(--buy); box-shadow: 0 0 7px rgba(53,215,139,.55); }
.last-trade.sell::before { background: var(--sell); box-shadow: 0 0 7px rgba(255,95,104,.5); }

.links { display: flex; align-items: center; gap: 6px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.055); }
.link {
  display: inline-flex;
  height: 27px;
  padding: 0 9px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #aab2be;
  background: rgba(255,255,255,.025);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.link:hover { color: var(--text); border-color: rgba(115,214,232,.35); background: var(--accent-soft); }
.link.primary { color: var(--accent); border-color: rgba(115,214,232,.22); }
.trading-link { flex: 0 0 27px; width: 27px; padding: 0; font: 700 12px ui-monospace, monospace; }
.social-links { display: flex; align-items: center; gap: 8px; min-width: 0; margin-left: auto; }
.social-link { flex: 0 0 27px; width: 27px; padding: 0; font: 700 11px ui-monospace, monospace; }
.social-link-labeled { flex: 0 1 auto; width: auto; min-width: 0; padding: 0 8px; justify-content: flex-start; gap: 6px; }
.link-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-icon { display: inline-grid; flex: 0 0 14px; width: 14px; height: 14px; place-items: center; line-height: 1; }
.link-icon svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

.empty-state { display: grid; min-height: 380px; place-items: center; align-content: center; text-align: center; }
.empty-state[hidden] { display: none; }
.empty-state h2 { margin: 22px 0 7px; font-size: 17px; }
.empty-state p { margin: 0; color: var(--muted); font-size: 12px; }
#connection-retry { margin-top: 18px; padding: 9px 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--accent); cursor: pointer; }
#connection-retry:hover { border-color: var(--accent); }
#connection-retry[hidden] { display: none; }
.radar-icon { position: relative; width: 72px; height: 72px; border: 1px solid rgba(115,214,232,.16); border-radius: 50%; }
.radar-icon::before, .radar-icon::after, .radar-icon i { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(115,214,232,.12); border-radius: 50%; }
.radar-icon::after { inset: 27px; }
.radar-icon i:nth-child(1) { top: 35px; right: -8px; bottom: auto; left: 35px; height: 1px; border: 0; border-top: 1px solid rgba(115,214,232,.6); border-radius: 0; transform-origin: left; animation: radar 2.2s linear infinite; }
.radar-icon b { position: absolute; top: 22px; left: 48px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px var(--accent); }
@keyframes radar { to { transform: rotate(360deg); } }

.site-footer { --credit-text: var(--text); --credit-surface: var(--panel); position: relative; z-index: 1; width: calc(100% - 48px); margin: 0 auto; }

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px 32px;
  padding: 24px 0 28px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
  letter-spacing: 0;
}
.site-footer .footer-meta { display: grid; gap: 8px; min-width: 0; }
.site-footer .footer-brand { font: 12px/1.5 ui-monospace, monospace; letter-spacing: .14em; }
.site-footer .footer-note { font-size: 12px; line-height: 1.8; letter-spacing: 0; }
.site-footer .author-credits { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
.site-footer .author-profile, .site-footer .author-identity, .site-footer .author-links, .site-footer .author-collaborator { display: flex; align-items: center; }
.site-footer .author-profile { gap: 14px; }
.site-footer .author-identity { gap: 11px; color: var(--credit-text); text-decoration: none; border-radius: 8px; }
.site-footer .author-avatar { display: block; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; object-fit: cover; background: var(--credit-surface); border: 1px solid var(--line); box-shadow: 0 0 0 3px var(--credit-surface); }
.site-footer .author-wordmark { display: grid; gap: 5px; }
.site-footer .author-label { color: var(--muted); font: 12px/1 ui-monospace, monospace; letter-spacing: .12em; white-space: nowrap; }
.site-footer .author-wordmark strong { color: var(--credit-text); font-size: 13px; line-height: 1.2; font-weight: 550; letter-spacing: .02em; }
.site-footer .author-links { gap: 3px; }
.site-footer .author-icon-link { display: grid; place-items: center; width: 32px; height: 32px; color: var(--muted); border: 1px solid transparent; border-radius: 50%; text-decoration: none; transition: color .18s, background-color .18s, border-color .18s; }
.site-footer .author-icon-link svg { width: 16px; height: 16px; }
.site-footer .author-icon-link:hover { color: var(--accent); border-color: var(--line); background: var(--credit-surface); }
.site-footer .author-identity:hover strong { color: var(--accent); }
.site-footer a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.site-footer .author-collaborator { gap: 10px; padding-left: 22px; border-left: 1px solid var(--line); }
.site-footer .author-codex-mark { display: grid; place-items: center; width: 32px; height: 32px; color: var(--credit-text); background: var(--credit-surface); border: 1px solid var(--line); border-radius: 10px; }
.site-footer .author-codex-mark svg { width: 21px; height: 21px; }
@media (max-width: 820px) {
  .site-footer { align-items: flex-start; flex-direction: column; gap: 20px; }
}
@media (max-width: 480px) {
  .site-footer .author-credits { flex-wrap: wrap; gap: 16px; max-width: 100%; }
  .site-footer .author-profile { gap: 8px; }
  .site-footer .author-identity { gap: 8px; }
  .site-footer .author-label { font-size: 12px; letter-spacing: .1em; }
  .site-footer .author-collaborator { gap: 8px; padding-left: 14px; }
  .site-footer .author-icon-link { width: 36px; height: 36px; }
}
@media (max-width: 359px) {
  .site-footer .author-credits { flex-direction: column; align-items: flex-start; }
  .site-footer .author-collaborator { padding-left: 0; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .site-footer .author-icon-link { transition: none; }
}

@media (max-width: 1200px) {
  .filter-options { order: 3; flex-basis: 100%; padding-top: 9px; border-top: 1px solid var(--line); }
  .filter-group + .filter-group { padding-left: 0; border-left: 0; }
}

@media (max-width: 820px) {
  .graduation-bar-inner { width: calc(100% - 28px); }
  .shell { width: calc(100% - 28px); padding-top: 28px; }
  .topbar { align-items: flex-start; flex-direction: column; gap: 25px; }
  .status-panel { width: 100%; min-width: 0; flex-basis: auto; }
  .connection { flex: 1; }
  .toolbar { align-items: flex-start; flex-direction: column; }
  .toolbar-actions { width: 100%; justify-content: space-between; }
  .filter-bar { gap: 9px; }
  .filter-options { gap: 8px; }
  .filter-quality { flex-wrap: wrap; }
  .originality-focus { align-items: flex-start; }
  .originality-focus > div { align-items: flex-start; flex-direction: column; gap: 4px; }
  .site-footer { width: calc(100% - 28px); }
}

@media (max-width: 480px) {
  .graduation-toasts { right: max(14px, env(safe-area-inset-right)); }
  .token-grid { grid-template-columns: 1fr; }
  .connection, .stat { padding: 10px 12px; }
  .status-actions a, .status-actions .radar-logout { min-height: 44px; padding-inline: 8px; }
  .stat { min-width: 74px; }
  .brand-block p { max-width: 330px; line-height: 1.6; }
  .toolbar-actions { align-items: flex-start; flex-direction: column; gap: 12px; }
  .preferences-open { width: 100%; justify-content: center; }
  .sort-control { width: 100%; }
  .sort-control select { max-width: none; flex: 1; }
  .legend { align-self: flex-end; }
  .filter-bar { padding: 10px; }
  .filter-heading { gap: 6px; }
  .filter-heading > span { display: none; }
  .advanced-filters-toggle > span { max-width: 125px; }
  .filter-options { display: grid; grid-template-columns: 1fr; }
  .filter-platforms, .filter-activity { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-quality { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filter-chip span { min-height: 34px; padding: 0 6px; gap: 5px; }
  .advanced-filters-toggle, .filter-preset, .clear-filters { min-height: 34px; }
  .advanced-filters-panel { padding: 16px; }
  .filter-ranges { grid-template-columns: 1fr; gap: 16px; }
  .filter-annotation-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-chip span { justify-content: center; }
  .originality-focus { flex-direction: column; }
  .originality-focus button { width: 100%; }
  kbd { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .token-card.new-entry::before { animation: none; opacity: .8; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

.preferences-sounds { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.config-backup-file { margin-top: 14px; }
.config-backup-file input { width: 100%; min-width: 0; box-sizing: border-box; }
.config-backup input::file-selector-button { margin-right: 8px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 6px 8px; color: var(--text); background: var(--accent-soft); cursor: pointer; }
.config-backup .preferences-reset:disabled { opacity: .45; cursor: not-allowed; }
#config-backup-preview { overflow-wrap: anywhere; }
.preference-sound-heading, .preference-sound-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.preference-sound-heading h3 { margin: 0; font-size: 14px; }
.preference-sound-toggle { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 12px; }
.preference-sound-toggle input { width: 16px; height: 16px; margin: 0; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.preference-sound-toggle span { display: grid; gap: 4px; }
.preference-sound-toggle small, .preference-sound-help { color: var(--muted); font-size: 12px; line-height: 1.6; }
.preference-sound-help { margin: 10px 0; }
.preference-sound-list { display: grid; margin-top: 10px; }
.preference-sound-row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.sound-preview { flex-shrink: 0; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 7px; color: var(--accent); background: var(--accent-soft); font-size: 12px; cursor: pointer; }
.sound-preview:hover { border-color: var(--accent); }
.sound-preview:focus-visible, .preference-sound-toggle input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.preference-sound-status { color: var(--accent); font-size: 12px; line-height: 1.6; }
.preference-sound-status:empty { display: none; }

.graduation-dialog { width: min(1440px, calc(100% - 28px)); height: min(900px, calc(100dvh - 28px)); overflow: hidden; }
.graduation-dialog[open] { display: flex; flex-direction: column; }
.graduation-dialog-header { padding: 20px 24px 12px; flex: 0 0 auto; }
#graduation-help { margin: 0; padding: 0 24px 16px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.graduation-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 24px 24px; }
.graduation-dialog .token-card { opacity: 1; }
.graduation-dialog .token-card.graduated { border-color: var(--line); box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.graduation-dialog .token-card.graduated:hover { border-color: var(--line-strong); box-shadow: 0 22px 50px rgba(0,0,0,.3); }
.graduation-filters { flex: 0 0 auto; padding: 0 24px 12px; border-bottom: 1px solid var(--line); }
.graduation-filter-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.graduation-filters input[type="search"], .graduation-filters input[type="number"] { min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: rgba(0,0,0,.2); font: inherit; font-size: 12px; }
.graduation-filter-toolbar input[type="search"] { flex: 1 1 220px; }
.graduation-filters input:focus-visible, .graduation-filters button:focus-visible, .graduation-filters summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#graduation-filters-reset { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: transparent; font: inherit; font-size: 12px; cursor: pointer; }
#graduation-low-volume-help, #graduation-empty { color: var(--muted); font-size: 12px; line-height: 1.6; }
#graduation-low-volume-help { margin: 8px 0; }
.graduation-advanced-filters summary { width: fit-content; color: var(--muted); font-size: 12px; cursor: pointer; }
.graduation-filter-ranges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.graduation-filter-ranges fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.graduation-filter-ranges legend, .graduation-drawdown-filter { color: var(--muted); font-size: 12px; }
.graduation-filter-ranges fieldset > div { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.graduation-filter-ranges input[type="number"] { width: 100%; }
.graduation-drawdown-filter { display: grid; align-content: start; gap: 6px; }
#graduation-time-help { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
#graduation-filter-error { margin: 10px 0 0; color: var(--sell); font-size: 12px; }
.graduation-filters input[aria-invalid="true"] { border-color: var(--sell); }
body:has(.graduation-dialog[open]) { overflow: hidden; }
@media (max-width: 640px) {
  .graduation-bar-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "heading action" "list list";
    height: auto;
    padding: 4px 0 10px;
    gap: 4px 12px;
  }
  .graduation-heading { grid-area: heading; }
  .graduation-view-all { grid-area: action; min-height: 44px; }
  .graduation-list { grid-area: list; scroll-snap-type: x proximity; }
  .graduation-token {
    flex: 0 0 auto;
    width: min(284px, calc(100% - 16px));
    min-width: 0;
    scroll-snap-align: start;
  }
  .graduation-dialog-header { padding: 16px 14px 10px; }
  #graduation-help { padding: 0 14px 12px; }
  .graduation-filters { padding: 0 14px 12px; }
  .graduation-filter-ranges { grid-template-columns: 1fr; }
  .graduation-scroll { padding: 6px 14px 14px; }
}


/* Independent realtime message feed. */
.radar-alerts { display: flex; flex-direction: column; position: fixed; z-index: 180; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); width: min(420px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); border: 1px solid var(--line-strong); border-radius: 14px; background: #0f131a; box-shadow: 0 16px 55px #0008; color: var(--text); }
.radar-alert-header { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; padding: 8px; }
.radar-alert-drag-handle { display: flex; flex: 1; min-width: 0; align-items: center; gap: 8px; align-self: stretch; padding: 0 4px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: grab; touch-action: none; user-select: none; }
.radar-alert-grip { flex-shrink: 0; color: var(--muted); opacity: .5; }
.radar-alert-drag-handle:hover .radar-alert-grip, .radar-alert-drag-handle:focus-visible .radar-alert-grip { opacity: 1; }
.radar-alerts.is-dragging { box-shadow: 0 20px 65px #000a; }
.radar-alerts.is-dragging .radar-alert-drag-handle { cursor: grabbing; }
.radar-alert-close, .radar-alert-settings-toggle { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.radar-alert-close:hover, .radar-alert-settings-toggle:hover, .radar-alert-settings-toggle[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); }
.radar-alert-header button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.radar-alert-drag-handle i { flex: 0 0 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px #73d6e844; }
.radar-alert-count { display: inline-grid; place-items: center; flex-shrink: 0; min-width: 26px; height: 22px; margin: 0 6px; padding: 0 6px; border-radius: 6px; background: #ffffff08; color: var(--muted); font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums; }
.radar-alerts.has-unread .radar-alert-count { color: var(--accent); background: var(--accent-soft); }
.radar-alerts[hidden], .radar-alert-body[hidden], .radar-alert-empty[hidden], .radar-alert-settings[hidden] { display: none; }
.radar-alert-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-radius: 0 0 14px 14px; }
.radar-alert-position-reset { margin-top: 10px; padding: 0; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.radar-alert-position-reset:hover { color: var(--accent); }
.radar-alert-settings { padding: 12px 16px; border-top: 1px solid var(--line); }
.radar-alert-settings label { font-size: 12px; color: var(--muted); }
.radar-alert-threshold-control { display: flex; gap: 8px; margin-top: 7px; }
.radar-burn-threshold, .radar-burn-strong-threshold { width: 100%; min-width: 0; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--panel); color: var(--text); font: inherit; font-size: 12px; }
.radar-alert-strong-label { display: block; margin-top: 10px; }
.radar-alert-threshold-control button { flex-shrink: 0; padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 12px; cursor: pointer; }
.radar-alert-threshold-control :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.radar-alert-settings p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.radar-alert-settings .radar-alert-settings-status { color: var(--accent); }
.radar-alert-settings-status:empty { display: none; }
.radar-desktop-label { display: flex; align-items: center; gap: 8px; margin-top: 12px; cursor: pointer; }
.radar-desktop-notifications { margin: 0; accent-color: var(--accent); }
.radar-desktop-notifications:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.radar-desktop-notifications:disabled { cursor: not-allowed; }
.radar-alert-list { max-height: min(300px, 38vh); margin: 0; padding: 0; overflow-y: auto; list-style: none; overscroll-behavior: contain; scrollbar-width: thin; }
.radar-alert-item { padding: 12px 16px; border-top: 1px solid var(--line); }
.radar-alert-item.radar-alert-strong { border-left: 3px solid #ff995c; padding-left: 13px; background: #ff995c14; }
.radar-alert-strong .radar-alert-kind { color: #ffb184; font-weight: 700; }
.radar-alert-strong .radar-alert-amount { color: #ffc09a; }
.radar-alert-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-bottom: 7px; color: var(--muted); font-size: 12px; }
.radar-alert-time { white-space: nowrap; }
.radar-alert-kind { color: #efb87b; }
.radar-alert-content { font-size: 12px; line-height: 2; overflow-wrap: anywhere; }
.radar-alert-wallet { color: #9facc1; text-decoration: none; font-family: ui-monospace, monospace; }
.radar-alert-wallet:hover { color: var(--text); }
.radar-alert-amount { color: #eab46b; font-variant-numeric: tabular-nums; }
.radar-alert-token { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 1px 5px; border: 1px solid transparent; border-radius: 6px; background: #73d6e80b; color: var(--text); vertical-align: middle; cursor: pointer; font-size: 12px; line-height: 22px; }
.radar-alert-token > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radar-alert-token:hover, .radar-alert-token[aria-expanded="true"] { border-color: #73d6e855; background: #73d6e818; }
.radar-alert-thumbnail { position: relative; display: inline-grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 5px; overflow: hidden; background: #272e3a; color: var(--muted); font-size: 12px; }
.radar-alert-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.radar-alert-transaction { color: var(--muted); text-decoration: none; font-size: 12px; }
.radar-alert-transaction:hover { color: var(--accent); }
.radar-alert-delivery { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.radar-alert-empty { margin: 0; padding: 18px 16px 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.radar-alert-empty span { display: block; margin-top: 8px; font-size: 12px; line-height: 1.6; }
.radar-alert-footnote { margin: 0; padding: 9px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.radar-alert-announcer { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.radar-alert-preview { padding-top: 0; padding-right: 4px; width: min(340px, calc(100vw - 24px)); }
.radar-alert-new { animation: radar-alert-arrive .6s ease-out; }
@keyframes radar-alert-arrive { from { background: #73d6e820; } to { background: transparent; } }
/* Keep the existing graduation toasts clear of the message feed. */
.graduation-toasts { right: auto; left: max(20px, env(safe-area-inset-left)); }
@media (max-width: 600px) { .radar-alerts { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); } .graduation-toasts { bottom: auto; top: 80px; left: 14px; } }
@media (prefers-reduced-motion: reduce) { .radar-alert-new { animation: none; } }

/* Keep observation surfaces quiet; motion is reserved for event updates. */
body { background: var(--bg); font-family: var(--tidevar-font); }
.login-page { background: var(--bg); }
.login-ambient { display: none; }
.login-card { background: var(--panel); box-shadow: none; }
.login-card::before { background: var(--line); }

/* A persistent trading toolbar, with the alert panel anchored above it. */
.radar-page { padding-bottom: calc(36px + env(safe-area-inset-bottom)); }
.radar-footer { position: fixed; z-index: 180; inset: auto 0 0; padding: 0 max(12px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(12px, env(safe-area-inset-left)); border-top: 1px solid var(--line); background: #0c1016; }
.radar-footer-bar { display: flex; align-items: center; gap: 12px; height: 36px; }
.radar-alert-open { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; height: 28px; padding: 0 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
.radar-alert-open:hover, .radar-alert-open[aria-expanded="true"] { color: var(--accent); background: var(--accent-soft); border-color: #73d6e824; }
.radar-alert-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.radar-alert-open.has-unread { color: var(--text); }
.radar-alert-unread { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--sell); color: #10151b; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.radar-alert-unread[hidden] { display: none; }
.radar-market-prices { display: flex; align-items: center; gap: 14px; min-width: 0; height: 20px; padding-left: 12px; border-left: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.radar-market-prices::-webkit-scrollbar { display: none; }
.radar-market-price { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; white-space: nowrap; font-size: 12px; }
.radar-coin { flex-shrink: 0; width: 16px; height: 16px; }
.radar-coin-btc { display: grid; place-items: center; border-radius: 50%; background: #f7931a; color: #fff; font-size: 13px; line-height: 1; }
.radar-coin-sol { color: #91e9c5; }
.radar-coin-eth { color: #6eabfa; }
.radar-coin-bnb { color: #f0b90b; }
.radar-price-symbol { color: var(--muted); font-size: 11px; }
.radar-market-price strong { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.radar-market-price[data-direction="up"] strong { color: var(--buy); }
.radar-market-price[data-direction="down"] strong { color: var(--sell); }
.radar-market-price[data-state="stale"] strong, .radar-market-price[data-state="waiting"] strong { color: var(--muted); }
.radar-footer-support { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 28px; margin-left: auto; padding-left: 12px; border-left: 1px solid var(--line); border-radius: 3px; color: var(--muted); font-size: 11px; text-decoration: none; white-space: nowrap; }
.radar-footer-support:hover { color: var(--accent); }
.radar-footer-support:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 900px) {
  .radar-support-email { display: none; }
}
@media (max-width: 600px) {
  .radar-footer { padding-right: max(8px, env(safe-area-inset-right)); padding-left: max(8px, env(safe-area-inset-left)); }
  .radar-footer-bar { gap: 8px; }
  .radar-alert-open { gap: 4px; padding: 0 4px; }
  .radar-market-prices { gap: 12px; padding-left: 8px; }
  .radar-footer-support { padding-left: 8px; }
  .radar-price-symbol { display: none; }
}