/* Header and chart fixes, loaded last. Uses only the theme's colour tokens, so it sits on whichever theme is active. */
/* ── the bar: brand · tabs · search · actions, one aligned 60px row ── */
.top { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(1.2) blur(8px); }
.top-in { display: flex !important; align-items: center !important; gap: 14px !important; height: 60px; max-width: 1440px; margin: 0 auto; padding: 0 24px !important; border: 0 !important; }
.top-in .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); flex: none; padding-right: 18px; margin-right: 4px; border-right: 1px solid var(--line); height: 28px; }
.top-in .brand .brand-mark, .top-in .brand svg { width: 22px !important; height: 22px !important; }
.top-in .brand span { font-size: 15px !important; line-height: 1; }
.top-in .toptabs { display: flex; align-items: stretch; gap: 4px; margin: 0 !important; height: 60px; }
.top-in .toptabs a { display: inline-flex; align-items: center; padding: 0 12px !important; border: 0 !important; border-bottom: 2px solid transparent !important; font-size: 12px !important; color: var(--muted) !important; letter-spacing: .02em; }
.top-in .toptabs a:hover { color: var(--text) !important; }
.top-in .toptabs a.on { color: var(--text) !important; border-bottom-color: var(--text) !important; }
.top-in .search { position: relative; margin-left: auto !important; flex: 0 1 340px; min-width: 160px; }
.top-in .search input { width: 100%; height: 36px; padding: 0 44px 0 34px !important; font-size: 13px; border: 1px solid var(--line2) !important; background-color: var(--bg2) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 11px center !important; background-size: 15px !important; }
.top-in .search::after { content: "/"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 11px; color: var(--dim); border: 1px solid var(--line2); padding: 1px 6px; pointer-events: none; }
.top-in .search .qres { top: 42px; }
.top-in > .btn, .top-in > button { height: 36px; display: inline-flex !important; align-items: center; justify-content: center; flex: none; font-size: 12px !important; }
.top-in .launch-btn { padding: 0 14px !important; border: 1px solid var(--line2) !important; }
.top-in #theme { width: 36px; padding: 0 !important; border: 1px solid var(--line2) !important; }
.top-in #wallet { padding: 0 16px !important; background: var(--text) !important; color: var(--bg) !important; border: 1px solid var(--text) !important; font-weight: 600; }
.top-in #wallet:hover { opacity: .88; }
.top-in .menu-btn { display: none; }
/* ── the ticker: one slim line, rank · logo · ticker · cap · change, fading at both edges ── */
.strip { display: flex !important; align-items: center; gap: 0 !important; height: 36px; padding: 0 24px !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border-top: 1px solid var(--line) !important; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 48px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 48px), transparent 100%); }
.strip::-webkit-scrollbar { display: none; }
.strip a { display: inline-flex !important; align-items: center; gap: 7px; padding: 0 16px !important; height: 20px; border: 0 !important; border-right: 1px solid var(--line) !important; white-space: nowrap; text-decoration: none; font-size: 12px; color: var(--text); background: transparent !important; }
.strip a:first-child { padding-left: 0 !important; }
.strip a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.strip a .dim { font-family: var(--mono); font-size: 10px; }
.strip a img.logo { width: 16px !important; height: 16px !important; border-radius: 0; object-fit: cover; }
.strip a b { font-weight: 600; } .strip a .mono { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.strip a .up, .strip a .down { font-family: var(--mono); font-size: 11px; }
@media (max-width: 980px) { .top-in .toptabs { display: none; } .top-in .brand { border-right: 0; padding-right: 0; } }
@media (max-width: 640px) { .top-in { padding: 0 12px !important; gap: 8px !important; height: 56px; } .top-in .search, .top-in .launch-btn { display: none !important; } .top-in .menu-btn { display: inline-flex; } .strip { padding: 0 12px !important; } }
/* ── the chart: the box grows with the chart so the time axis is never cut off ── */
.chart-wrap { height: auto !important; overflow: visible !important; }
.chart-wrap .chart, .chart { position: relative !important; inset: auto !important; height: 460px !important; }
@media (max-width: 640px) { .chart-wrap .chart, .chart { height: 340px !important; } }
.top-in .toptabs a { height: 60px !important; box-sizing: border-box; }
.top-in .toptabs a.on, .top-in .toptabs a:hover { background: transparent !important; }

/* no rules under the header; the trending tokens live inside the bar, centred between the tabs and search */
.top, .top-in { border: 0 !important; border-bottom: 0 !important; box-shadow: none !important; }
.top-in .strip { flex: 1 1 auto; min-width: 0; height: 60px !important; padding: 0 12px !important; margin: 0 !important; border: 0 !important; border-top: 0 !important; justify-content: safe center; background: transparent !important; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); }
.top-in .strip a:first-child { padding-left: 16px !important; }
.top-in .strip a:last-child { border-right: 0 !important; }
.top-in .search { margin-left: 0 !important; flex: 0 0 260px; }
@media (max-width: 1180px) { .top-in .strip { display: none !important; } .top-in .search { margin-left: auto !important; } }

/* create page: the prompt and the collection preview run behind the scenes; the fields stay in the page (the prompt is still sent, the preview still pre-draws) but are not shown */
.field:has(#aprompt), .field:has(#mex) { display: none !important; }

/* tabs: the active underline sits just under the word, not at the bottom edge of the bar */
.top-in .toptabs { height: auto !important; align-items: center !important; }
.top-in .toptabs a { height: auto !important; padding: 6px 12px 4px !important; line-height: 1.2; }
/* dev buy: one box, no second outline around the number inside it */
.numbox input, .numbox input:focus { border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; }
/* X link: square icon button in the bar, and a slim footer */
.top-in .xlink { width: 36px; padding: 0 !important; border: 1px solid var(--line2) !important; color: var(--text) !important; }
.sfoot { max-width: 1440px; margin: 48px auto 0; padding: 22px 24px 30px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.sfoot nav { display: flex; gap: 18px; } .sfoot a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .sfoot a:hover { color: var(--text); }
@media (max-width: 640px) { .sfoot { padding: 18px 16px 24px; } }
.sslink { display: inline-flex; align-items: center; }