@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');
:root {
/* Surfaces */
--bg: #0e0e10;
--panel: #16161a;
--panel-hi: #1e1e24;
--panel-border: #25252b;
/* Text */
--text: #f5f5f7;
--text-dim: #d2d2da;
--text-mute: #b6b6c0;
/* Brand */
--accent: #a855f7;
/* Direction */
--up: #00d176;
--down: #ff4d4d;
--warn: #f97316;
/* Legacy aliases retained for older rules */
--ok: var(--up);
--bad: var(--down);
/* Type */
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
/* Theme-dependent helpers */
--skeleton-low: rgba(255,255,255,0.04);
--skeleton-high: rgba(255,255,255,0.10);
--shadow-card: 0 6px 18px rgba(0,0,0,0.35);
--hero-bg-end: rgba(22,22,26,0.7);
--row-hover: rgba(168,85,247,0.14);
/* Spacing tokens — single source of truth so the spacing audit
in PR for #5 actually means something. Replace inline
style="margin-top:24px" with a class that reads --space-section. */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-section: var(--space-lg);
}
/* Spaced section heading — use in place of inline margin-top:24px on
.section-head when the heading needs to breathe from preceding
content. Mirrors the visual rhythm of the macro page's repeated
"section" pattern (data block → header → next data block). */
.section-head--spaced { margin-top: var(--space-section); }
[data-theme="light"] {
--bg: #f8fafc;
--panel: #ffffff;
--panel-hi: #f1f5f9;
--panel-border: #e2e8f0;
--text: #0f172a;
--text-dim: #475569;
--text-mute: #94a3b8;
--accent: #7c3aed;
--up: #16a34a;
--down: #dc2626;
--warn: #ea580c;
--skeleton-low: rgba(15,23,42,0.06);
--skeleton-high: rgba(15,23,42,0.12);
--shadow-card: 0 4px 12px rgba(15,23,42,0.06);
--hero-bg-end: rgba(241,245,249,0.7);
--row-hover: rgba(124,58,237,0.10);
}
/* ---- Accent presets ------------------------------------------------- *
* Default accent is purple (set in :root above + overridden in light).
* data-accent on the root overrides --accent for both themes;
* --row-hover is recomputed via color-mix so hover surfaces tint with
* the chosen accent without per-attribute duplication.
* Order: purple (default), blue, green, orange.
*/
[data-accent="blue"] { --accent: #3b82f6; }
[data-accent="green"] { --accent: #22c55e; }
[data-accent="orange"] { --accent: #f97316; }
[data-theme="light"][data-accent="blue"] { --accent: #2563eb; }
[data-theme="light"][data-accent="green"] { --accent: #16a34a; }
[data-theme="light"][data-accent="orange"] { --accent: #ea580c; }
/* Tint the row-hover surface with the active accent so dropdowns,
menu items, etc. read as part of the chosen palette rather than
stuck on purple. color-mix is widely supported (Chrome 111+,
Firefox 113+, Safari 16.2+) — older browsers fall back to the
defaults in :root above. */
[data-accent] { --row-hover: color-mix(in srgb, var(--accent) 14%, transparent); }
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-feature-settings: "cv11", "ss01";
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* All numerical values get tabular numerals so columns align cleanly */
.num, .gauge-value, .value-card, .value-row .value,
.accum-metrics, .health-quota-line, .onchain-big-num,
.onchain-metrics, .onchain-flow, .onchain-sub,
.score-num, .pct, .sent-chip, .age, time {
font-feature-settings: "tnum" 1;
font-variant-numeric: tabular-nums;
}
/* Direction utilities — used everywhere a number has a sign */
.up { color: var(--up); }
.down { color: var(--down); }
.dim { color: var(--text-dim); }
/* Page-wide entrance for loaded data */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
.fade-in { animation: fadeIn 200ms ease-out both; }
/* Skeleton shimmer for async-loading sections */
@keyframes shimmer {
0% { background-position: -240px 0; }
100% { background-position: 240px 0; }
}
.skeleton {
background: linear-gradient(90deg,
var(--skeleton-low) 0%,
var(--skeleton-high) 50%,
var(--skeleton-low) 100%);
background-size: 240px 100%;
animation: shimmer 1.4s linear infinite;
border-radius: 8px;
color: transparent !important;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.container {
max-width: 1200px;
margin: 0 auto;
padding: 24px 24px 64px;
}
/* Top nav (sticky, full-width) */
.topnav {
position: sticky;
top: 0;
z-index: 100;
background: var(--panel);
border-bottom: 1px solid var(--panel-border);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.topnav-inner {
max-width: 1200px;
margin: 0 auto;
padding: 12px 24px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 24px;
}
.topnav .brand {
text-decoration: none;
color: var(--text);
}
.topnav .brand:hover { text-decoration: none; }
.topnav .brand .logo-mark {
width: 22px;
height: 22px;
}
.topnav .brand .brand-text {
font-size: 15px;
font-weight: 700;
letter-spacing: -0.01em;
}
.topnav-search { position: relative; }
.topnav-search input {
width: 100%;
padding: 8px 14px;
background: var(--bg);
border: 1px solid var(--panel-border);
border-radius: 8px;
color: var(--text);
font-size: 14px;
font-family: var(--font-sans);
outline: none;
transition: border-color 0.15s ease;
}
.topnav-search input:focus { border-color: var(--accent); }
.topnav-search input::placeholder { color: var(--text-dim); }
.topnav-spacer { flex: 1; }
.topnav-actions {
display: flex;
align-items: center;
gap: 12px;
}
.topnav-link {
color: var(--text-dim);
font-size: 13px;
font-weight: 500;
text-decoration: none;
padding: 6px 10px;
border-radius: 6px;
transition: color 120ms ease, background 120ms ease;
}
.topnav-link:hover {
color: var(--accent);
background: var(--row-hover);
text-decoration: none;
}
.topnav-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1px solid var(--panel-border);
background: transparent;
border-radius: 8px;
color: var(--text-dim);
cursor: pointer;
transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.topnav-icon-btn svg { width: 16px; height: 16px; }
.topnav-icon-btn:hover {
color: var(--accent);
border-color: var(--accent);
background: var(--row-hover);
}
/* Sun visible in dark mode (click to go light), moon visible in light mode */
.icon-sun { display: block; }
.icon-moon { display: none; }
[data-theme="light"] .icon-sun { display: none; }
[data-theme="light"] .icon-moon { display: block; }
/* ==== Option D nav: segmented pill + ⌘K command palette ============== *
* Primary destinations as a centered pill (active = filled accent);
* search + page-jump in the command palette; account / admin / appearance
* in the avatar menu; a thumb-reachable bottom tab bar on mobile. The
* brand / pill / actions sit in the existing 3-column .topnav-inner grid. */
.pillnav {
justify-self: center;
display: inline-flex;
gap: 3px;
padding: 4px;
background: var(--bg);
border: 1px solid var(--panel-border);
border-radius: 11px;
max-width: 100%;
}
.pillnav-link {
font-size: 13px;
font-weight: 600;
color: var(--text-dim);
padding: 8px 15px;
border-radius: 8px;
white-space: nowrap;
transition: color 120ms ease, background 120ms ease;
}
.pillnav-link:hover { color: var(--text); text-decoration: none; background: var(--row-hover); }
.pillnav-link.active {
color: #fff;
background: var(--accent);
box-shadow: 0 1px 6px color-mix(in srgb, var(--accent) 45%, transparent);
}
.pillnav-link.active:hover { color: #fff; background: var(--accent); }
/* command-palette trigger (the "Search or jump to… ⌘K" box) */
.cmdk-trigger {
display: inline-flex;
align-items: center;
gap: 9px;
min-width: 210px;
padding: 8px 10px 8px 12px;
background: var(--bg);
border: 1px solid var(--panel-border);
border-radius: 9px;
color: var(--text-mute);
cursor: pointer;
font: 500 13px var(--font-sans);
transition: border-color 120ms ease, color 120ms ease;
}
.cmdk-trigger:hover { border-color: var(--accent); color: var(--text-dim); }
.cmdk-trigger .ico { width: 15px; height: 15px; flex: none; }
.cmdk-label { flex: 1; text-align: left; }
.cmdk-kbd {
font: 600 11px var(--font-mono);
color: var(--text-mute);
border: 1px solid var(--panel-border);
border-radius: 5px;
padding: 2px 6px;
background: var(--panel);
white-space: nowrap;
}
/* account (avatar) menu */
.acct { position: relative; }
.avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
font: 700 12px var(--font-sans);
cursor: pointer;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 22%, var(--panel-hi));
border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.avatar:hover { border-color: var(--accent); }
.avatar-sm { width: 30px; height: 30px; cursor: default; }
.acct-menu {
position: absolute;
top: calc(100% + 9px);
right: 0;
min-width: 234px;
padding: 7px;
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 12px;
box-shadow: var(--shadow-card);
z-index: 120;
animation: acctIn 120ms ease;
}
@keyframes acctIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.acct-head { display: flex; align-items: center; gap: 10px; padding: 8px 9px 10px; }
.acct-id { min-width: 0; }
.acct-email { font-size: 12.5px; color: var(--text); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-role { font-size: 11px; color: var(--text-mute); }
.acct-sep { height: 1px; background: var(--panel-border); margin: 6px 4px; }
.acct-label { padding: 8px 9px 4px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }
.acct-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 9px 10px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--text-dim);
font: 500 13px var(--font-sans);
text-align: left;
cursor: pointer;
}
.acct-item:hover { background: var(--row-hover); color: var(--text); text-decoration: none; }
.acct-item .ico { width: 16px; height: 16px; color: var(--text-mute); }
.acct-signout, .acct-signout:hover { color: var(--down); }
.acct-appearance { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 2px 9px 8px; }
.acct-appearance .accent-picker, .acct-appearance .lang-picker { display: flex; }
/* command palette overlay */
body.palette-lock { overflow: hidden; }
.palette-back {
position: fixed;
inset: 0;
z-index: 300;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 12vh 16px 16px;
background: rgba(0, 0, 0, 0.55);
}
.palette-back[hidden] { display: none; }
.palette {
width: min(580px, 100%);
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 16px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
overflow: hidden;
animation: paletteIn 140ms ease;
}
@keyframes paletteIn { from { opacity: 0; transform: translateY(-8px) scale(0.99); } to { opacity: 1; transform: none; } }
.palette-in { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--panel-border); }
.palette-in .ico { width: 19px; height: 19px; flex: none; color: var(--text-mute); }
.palette-in input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--text); font: 16px var(--font-sans); }
.palette-esc { font: 600 11px var(--font-mono); color: var(--text-mute); border: 1px solid var(--panel-border); border-radius: 5px; padding: 2px 7px; }
.palette-list { max-height: min(52vh, 420px); overflow-y: auto; padding: 8px; }
.p-sec { padding: 10px 12px 5px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }
.p-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.p-row:hover, .p-row.sel { background: var(--row-hover); }
.p-row .ico { width: 17px; height: 17px; flex: none; color: var(--text-mute); }
.p-row.sel .ico { color: var(--accent); }
.p-row .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--text); }
.p-row .p-cat { font-size: 11px; color: var(--text-mute); }
.p-row .meta { font: 600 11px var(--font-mono); color: var(--text-mute); }
.palette-empty { padding: 22px 14px; text-align: center; font-size: 13px; color: var(--text-mute); }
.palette-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--panel-border); background: var(--bg); }
.palette-foot .phint { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-mute); }
.palette-foot .phint-grow { flex: 1; }
.palette-foot .popen { font-size: 11.5px; color: var(--text-dim); }
.palette-foot .popen b { font-weight: 600; color: var(--text); }
.palette-foot .kbd { font: 600 11px var(--font-mono); color: var(--text-dim); border: 1px solid var(--panel-border); border-radius: 5px; padding: 1px 6px; background: var(--panel); }
/* mobile bottom tab bar — shown only on narrow screens (media query below) */
.mobile-tabbar { display: none; }
.page-header { margin-bottom: 28px; }
.page-header h1 {
margin: 0 0 8px;
font-size: 24px;
font-weight: 700;
letter-spacing: -0.02em;
}
/* Toasts (replaces the inline #status bar) */
.toast-container {
position: fixed;
top: 64px;
right: 24px;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
.toast {
pointer-events: auto;
min-width: 220px;
max-width: 360px;
padding: 10px 14px;
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 10px;
font-size: 13px;
line-height: 1.4;
color: var(--text);
box-shadow: var(--shadow-card);
opacity: 0;
transform: translateX(8px);
transition: opacity 200ms ease, transform 200ms ease;
}
.toast-show { opacity: 1; transform: translateX(0); }
.toast-error { border-left: 3px solid var(--down); color: var(--text); }
.toast-info { border-left: 3px solid var(--accent); }
/* Site footer (post Phase 5 disclaimer) */
.site-footer {
margin-top: 48px;
padding-top: 24px;
border-top: 1px solid var(--panel-border);
display: flex;
flex-direction: column;
gap: 8px;
}
.footer-disclaimer {
margin: 0;
font-size: 12px;
color: var(--text);
font-weight: 500;
}
.footer-attribution {
margin: 0;
font-size: 11px;
color: var(--text-dim);
line-height: 1.5;
}
.footer-attribution a { color: var(--text-dim); text-decoration: underline dotted; text-underline-offset: 2px; }
.footer-attribution a:hover { color: var(--accent); text-decoration: underline; }
/* Wordmark */
.brand {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 8px;
}
.brand .logo-mark {
width: 28px;
height: 28px;
color: var(--accent);
flex: 0 0 auto;
}
.brand h1 {
margin: 0;
font-size: 24px;
font-weight: 700;
letter-spacing: -0.02em;
}
.brand h1 .brand-accent { color: var(--accent); }
.subtitle {
margin: 0 0 32px;
color: var(--text-dim);
font-size: 13px;
max-width: 720px;
line-height: 1.5;
}
h2 {
margin: 0;
font-size: 16px;
font-weight: 600;
letter-spacing: -0.005em;
}
/* Section heading row: h2 + collapsible info icon */
.section-head {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 12px;
}
.info-toggle {
position: relative;
display: inline-flex;
}
.info-toggle summary {
list-style: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-mute);
width: 20px;
height: 20px;
border-radius: 50%;
transition: color 0.12s ease, background 0.12s ease;
}
.info-toggle summary::-webkit-details-marker { display: none; }
.info-toggle summary:hover { color: var(--accent); background: rgba(168,85,247,0.10); }
.info-toggle .info-icon { width: 14px; height: 14px; }
.info-toggle[open] summary { color: var(--accent); background: rgba(168,85,247,0.10); }
.info-content {
margin: 8px 0 12px;
padding: 12px 14px;
background: var(--panel);
border: 1px solid var(--panel-border);
border-left: 2px solid var(--accent);
border-radius: 8px;
font-size: 12px;
line-height: 1.55;
color: var(--text-dim);
}
.info-content strong { color: var(--text); font-weight: 500; }
.info-content em { color: var(--text); font-style: normal; font-weight: 500; }
/* Search */
.search-section { position: relative; margin-bottom: 20px; }
.search-wrapper { position: relative; }
#search {
width: 100%;
padding: 14px 18px;
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 10px;
color: var(--text);
font-size: 15px;
outline: none;
transition: border-color 0.15s ease;
}
#search:focus { border-color: var(--accent); }
#search::placeholder { color: var(--text-dim); }
.search-results {
position: absolute;
top: calc(100% + 6px);
left: 0; right: 0;
max-height: 360px;
overflow-y: auto;
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 10px;
z-index: 10;
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.search-results .category {
padding: 8px 16px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-dim);
background: rgba(255,255,255,0.02);
border-top: 1px solid var(--panel-border);
}
.search-results .category:first-child { border-top: none; }
.search-results .item {
padding: 10px 16px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.search-results .item:hover,
.search-results .item.active { background: var(--row-hover); }
.search-results .item .symbol { font-weight: 600; font-size: 14px; }
.search-results .item .name { color: var(--text-dim); font-size: 13px; }
.search-results .empty { padding: 16px; color: var(--text-dim); font-size: 14px; text-align: center; }
/* Empty-state pill grid (shown when the search box is focused with no
query). One chip per curated category — clicking pre-fills the input
so the existing filter path takes over. */
.search-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 10px 12px;
border-bottom: 1px solid var(--panel-border);
}
.search-pill {
font: inherit;
font-size: 12px;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid var(--panel-border);
background: rgba(255,255,255,0.03);
color: var(--text);
cursor: pointer;
}
.search-pill:hover { border-color: var(--accent); color: var(--accent); }
.search-results .remote-sep { background: rgba(168,85,247,0.06); }
.selected {
margin-top: 16px;
padding: 14px 18px;
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 10px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.selected .label { color: var(--text-dim); font-size: 13px; margin-right: 8px; }
.selected .symbol { font-weight: 600; margin-right: 8px; }
.selected .name { color: var(--text-dim); font-size: 14px; flex: 1; }
.status {
min-height: 20px;
margin: 12px 0 24px;
font-size: 14px;
color: var(--text-dim);
}
.status.error { color: var(--down); }
/* Sections. Full-width bands (chart) own their own bottom spacing; the
two-column dashboard sections rely solely on the column flex `gap`
(.dashboard-left/right) so both columns share one uniform 28px rhythm
and the first section of each column top-aligns. */
.chart-section {
margin-bottom: 24px;
}
.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
gap: 12px;
flex-wrap: wrap;
}
.chart-stack {
display: flex;
flex-direction: column;
gap: 18px;
}
.chart-panel {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 12px;
padding: 12px 16px 16px;
transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.chart-panel:hover {
border-color: var(--panel-hi);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.chart-panel h3 {
margin: 0 0 10px;
font-size: 12px;
font-weight: 600;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.chart-panel .chart-area {
background: transparent;
border: none;
padding: 0;
min-height: 220px;
}
.chart-stack > .chart-placeholder {
background: var(--panel);
border: 1px dashed var(--panel-border);
border-radius: 12px;
padding: 32px;
text-align: center;
}
.legend {
margin: 8px 0 0;
font-size: 12px;
line-height: 1.5;
color: var(--text-dim);
}
.patterns-section .legend { margin: 0 0 12px; }
.btn {
padding: 8px 14px;
background: var(--panel);
color: var(--text);
border: 1px solid var(--panel-border);
border-radius: 8px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.btn:hover:not(:disabled) {
border-color: var(--accent);
background: rgba(168,85,247,0.10);
color: var(--accent);
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.chart-area {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 12px;
padding: 16px;
min-height: 260px;
display: flex;
align-items: center;
justify-content: center;
}
.chart-area img { max-width: 100%; height: auto; border-radius: 6px; }
.chart-placeholder, .chart-loading {
color: var(--text-dim);
font-size: 14px;
}
/* Chart "asset not supported" state — when Chart-IMG can't render and there's
no OHLCV to self-draw. */
.chart-unsupported { padding: 40px 16px; text-align: center; }
.chart-unsupported-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.chart-unsupported-sub { font-size: 13px; color: var(--text-dim); max-width: 460px; margin: 0 auto 6px; line-height: 1.5; }
.chart-unsupported-why { font-size: 11px; color: var(--text-mute); font-style: italic; }
/* Accumulation */
.accum-card {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 12px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 14px;
}
.phase-block {
display: flex;
flex-direction: column;
gap: 6px;
padding-bottom: 12px;
border-bottom: 1px solid var(--panel-border);
}
.phase-block:last-child { padding-bottom: 0; border-bottom: none; }
.phase-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.phase-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-dim);
}
.tf-badge {
font-size: 10px;
font-family: var(--font-mono);
padding: 2px 7px;
border-radius: 999px;
background: var(--row-hover);
color: var(--accent);
letter-spacing: 0.04em;
}
.phase-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.phase-row .score-num { color: var(--text-dim); font-size: 13px; }
.phase-row .score-num strong { color: var(--text); font-weight: 600; font-family: var(--font-mono); }
.phase-window {
font-size: 11px;
color: var(--text-mute);
font-family: var(--font-mono);
}
.accum-empty { color: var(--text-dim); font-size: 14px; }
.badge {
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
}
.badge.ok { background: rgba(0,209,118,0.16); color: var(--up); }
.badge.warn { background: rgba(249,115,22,0.18); color: #fdba74; }
.badge.bad { background: rgba(255,77,77,0.16); color: var(--down); }
.badge.dim { background: rgba(255,255,255,0.06); color: var(--text-dim); }
.div-note { width: 100%; font-size: 12px; color: var(--text-dim); font-style: italic; }
.accum-metrics { color: var(--text-dim); font-size: 13px; display: flex; gap: 14px; flex-wrap: wrap; }
.accum-metrics span strong { color: var(--text); }
/* API health page */
.health-controls {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 20px;
}
.health-status { font-size: 13px; color: var(--text-dim); }
.health-status.running { color: #fdba74; }
.health-status.ok { color: var(--up); }
.health-status.err { color: var(--down); }
/* /health bordered sections — "API status" wraps the cards grid;
"Recent API errors" wraps the log table. Same visual shape so the
two read as peers down the page. */
.health-frame {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 12px;
padding: 18px;
margin-top: 24px;
}
.health-frame > h2 {
margin: 0 0 14px;
font-size: 16px;
}
.health-log-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.health-log-header > h2 { margin: 0; font-size: 16px; }
.health-log-controls { display: flex; gap: 8px; align-items: center; }
.health-activity-note { margin: -4px 0 14px; color: var(--text-dim); font-size: 13px; }
.health-log-select {
background: var(--panel-elevated, var(--panel));
color: var(--text);
border: 1px solid var(--panel-border);
border-radius: 6px;
padding: 6px 8px;
font-family: var(--font-sans);
font-size: 13px;
}
.health-log-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.health-log-table th,
.health-log-table td {
text-align: left;
padding: 8px 10px;
border-bottom: 1px solid var(--panel-border);
vertical-align: top;
}
.health-log-table thead th {
font-weight: 600;
color: var(--text-dim);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.health-log-when { white-space: nowrap; color: var(--text-dim); font-family: var(--font-mono); font-size: 12px; }
.health-log-provider { white-space: nowrap; }
.health-log-msg { color: var(--text); word-break: break-word; }
.health-log-status { color: var(--text-dim); font-family: var(--font-mono); font-size: 12px; margin-left: 6px; }
.health-log-count {
display: inline-block;
padding: 1px 6px;
margin-left: 6px;
border-radius: 9px;
background: rgba(168, 85, 247, 0.18);
color: var(--accent);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
vertical-align: middle;
}
.health-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
gap: 16px;
}
.health-empty {
grid-column: 1 / -1;
padding: 24px;
border: 1px dashed var(--panel-border);
border-radius: 12px;
text-align: center;
color: var(--text-dim);
}
.health-card {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 12px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.health-head {
display: flex;
justify-content: space-between;
align-items: center;
}
.health-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.health-env { font-size: 11px; color: var(--text-dim); font-family: monospace; }
.health-sub { font-size: 12px; color: var(--text-dim); }
.health-sub strong { color: var(--text); font-weight: 500; }
.health-quota { display: flex; flex-direction: column; gap: 6px; }
.health-quota-line {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--text-dim);
}
.health-quota-line strong { color: var(--text); font-weight: 600; }
.quota-bar {
width: 100%;
height: 4px;
background: rgba(255,255,255,0.08);
border-radius: 999px;
overflow: hidden;
}
.quota-bar span {
display: block;
height: 100%;
background: var(--up);
transition: width 0.3s;
}
.quota-bar.warn span { background: #f97316; }
.quota-bar.bad span { background: var(--down); }
.health-endpoints {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.health-endpoints li {
display: grid;
grid-template-columns: 12px 1fr auto;
grid-template-rows: auto auto;
column-gap: 6px;
font-size: 12px;
}
.health-endpoints .dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-top: 5px;
}
.health-endpoints .dot.ok { background: var(--up); }
.health-endpoints .dot.bad { background: var(--down); }
.health-endpoints .dot.dim { background: var(--text-dim); }
.health-endpoints .endpoint-name { color: var(--text); font-weight: 500; }
.health-endpoints .endpoint-code { color: var(--text-dim); }
.health-endpoints .endpoint-details {
grid-column: 2 / 4;
color: var(--text-dim);
font-style: italic;
word-break: break-word;
}
.health-errors {
font-size: 12px;
color: var(--down);
background: rgba(220,38,38,0.08);
border-radius: 6px;
padding: 6px 10px;
}
.health-checked {
font-size: 11px;
color: var(--text-dim);
margin-top: auto;
}
/* Asset hero */
.hero-section { margin-bottom: 24px; }
.hero-card {
background: linear-gradient(180deg, var(--panel) 0%, var(--hero-bg-end) 100%);
border: 1px solid var(--panel-border);
border-radius: 14px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 20px;
}
.hero-empty { color: var(--text-dim); font-size: 14px; }
/* "Asset not supported" — the hero's designated state when no data provider
serves the selected symbol. */
.hero-unsupported { padding: 8px 0; }
.hero-unsupported-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.hero-unsupported-sym { font-family: var(--font-mono); font-weight: 700; font-size: 20px; color: var(--text); }
.hero-unsupported-name { font-size: 15px; color: var(--text-dim); }
.hero-unsupported-cat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-mute);
border: 1px solid var(--panel-border); border-radius: 999px; padding: 2px 9px; }
.hero-unsupported-title { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.hero-unsupported-sub { font-size: 13px; color: var(--text-dim); line-height: 1.5; max-width: 520px; }
.hero-main {
display: grid;
grid-template-columns: minmax(180px, 1fr) auto auto;
gap: 32px;
align-items: center;
}
.hero-meta { display: flex; flex-direction: column; gap: 4px; }
.hero-symbol {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
color: var(--text-dim);
letter-spacing: 0.06em;
}
.hero-name {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.1;
}
.hero-cat {
font-size: 11px;
color: var(--text-mute);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 2px;
}
.hero-desc {
font-size: 13px;
color: var(--text-dim);
line-height: 1.4;
margin-top: 8px;
max-width: 640px;
}
/* Full-width "About this asset" band. Structured like every other
panoramic band (Trends, Histogram, Wikipedia, Earnings):
the h2 sits transparent on the page background and the content
lives in a panel card below, so the visual rhythm down the page
is uniform. */
.about-section { margin-top: 24px; }
.about-card {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 12px;
padding: 18px 20px;
color: var(--text-dim);
}
.about-paragraph {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--text);
}
.hero-price { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.hero-price-num {
font-family: var(--font-mono);
font-size: 36px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1;
}
.hero-price-change {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 14px;
font-weight: 600;
}
.hero-price-change svg { flex: 0 0 auto; }
.hero-price-change.up { color: var(--up); }
.hero-price-change.down { color: var(--down); }
.hero-price-change.dim { color: var(--text-dim); }
.hero-price-window {
color: var(--text-mute);
font-weight: 500;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-left: 4px;
}
.hero-price-stale {
display: inline-block;
vertical-align: middle;
margin-left: 8px;
padding: 2px 6px;
font-family: var(--font-ui);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--text-mute);
background: var(--surface-sunken, rgba(255, 255, 255, 0.04));
border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
border-radius: 4px;
cursor: help;
}
.hero-spark svg { display: block; }
.hero-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 16px;
padding-top: 18px;
border-top: 1px solid var(--panel-border);
}
.hero-stat { display: flex; flex-direction: column; gap: 4px; }
.hero-stat-label {
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 500;
}
.hero-stat-value {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 600;
color: var(--text);
}
.hero-errors { font-size: 11px; color: var(--text-dim); font-style: italic; }
@media (max-width: 720px) {
.hero-main {
grid-template-columns: 1fr;
gap: 16px;
}
.hero-price { align-items: flex-start; }
.hero-spark { width: 100%; }
/* Phone layout for the top nav (Option D): brand left + a compact action
cluster right (icon-only search trigger, theme, avatar). The pill nav is
replaced by a thumb-reachable fixed bottom tab bar. */
.topnav-inner {
grid-template-columns: auto auto;
align-items: center;
column-gap: 12px;
padding: 10px 16px;
}
.topnav-actions { justify-self: end; gap: 8px; }
.pillnav { display: none; }
.cmdk-trigger { min-width: 0; padding: 8px; }
.cmdk-label, .cmdk-kbd { display: none; }
.acct-menu { min-width: 220px; }
.mobile-tabbar {
display: flex;
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 200;
background: var(--panel);
border-top: 1px solid var(--panel-border);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mtab {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 8px 0 7px;
font-size: 10px;
font-weight: 600;
color: var(--text-mute);
}
.mtab .ico { width: 20px; height: 20px; }
.mtab.active { color: var(--accent); }
.mtab:hover { text-decoration: none; }
/* clear the fixed bottom tab bar on every page */
body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}
/* Single-column dashboard stack. The earlier 3fr/2fr split (#30) put
technicals on the left and narrative signals on the right, but the
panoramic sections above (chart, Trends, Earnings, Wikipedia attention)
set a chart-width baseline that the 2-column grid visually fought
with. Stacking gives every card the same width as the panoramas
for a consistent rhythm. .dashboard-left / .dashboard-right are
kept as semantic wrappers so the DOM grouping (left = patterns;
right = distrib / HL / sentiment / news) survives — they just
render as two vertical stacks one after the other now. */
.dashboard-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
align-items: start;
}
.dashboard-left, .dashboard-right {
display: flex;
flex-direction: column;
gap: 24px;
min-width: 0;
}
/* Asset-page Trading panel: one consistent vertical rhythm and a shared
full-width left edge for every block (chart, market profile, patterns,
trends, Wikipedia, on-chain, histogram, dashboard stack) so they all
align instead of each carrying its own ad-hoc top/bottom margin.
`:not([hidden])` keeps the tab system's hide toggle working — a bare
`display:flex` would override the `hidden` attribute. */
.tab-panel-trading:not([hidden]) {
display: flex;
flex-direction: column;
gap: 24px;
margin-top: 24px;
}
.tab-panel-trading > section,
.tab-panel-trading > .dashboard-grid {
margin-top: 0;
margin-bottom: 0;
}
/* Tabs (chart presets, sentiment Score/News) */
.tabs { display: flex; flex-direction: column; gap: 12px; }
.tabs-strip {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--panel-border);
padding-bottom: 0;
margin-bottom: 4px;
}
.tab {
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
padding: 8px 14px;
margin-bottom: -1px;
color: var(--text-dim);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
cursor: pointer;
border-radius: 0;
transition: color 120ms ease, border-color 120ms ease;
}
.tab:hover:not(.active):not(:disabled) { color: var(--text); }
.tab.active {
color: var(--accent);
border-bottom-color: var(--accent);
}
.tab:disabled { opacity: 0.4; cursor: not-allowed; }
.tab-panel-wrap { min-height: 60px; }
/* Primary asset tabs (Trading / Fundamentals) — a prominent underlined
bar under the hero. Shown only for stocks (the only assets with a
Fundamentals view). Sections inside each panel keep their own spacing. */
.asset-tabs {
display: flex;
gap: 4px;
margin: 4px 0 20px;
border-bottom: 1px solid var(--panel-border);
}
.asset-tab {
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
padding: 10px 18px;
margin-bottom: -1px;
color: var(--text-dim);
font-family: var(--font-sans);
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: color 120ms ease, border-color 120ms ease;
}
.asset-tab:hover:not(.active) { color: var(--text); }
.asset-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
/* Chart tab panel */
.chart-tab-area {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 12px;
padding: 12px;
min-height: 280px;
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
justify-content: center;
}
/* When the chart section spans the full grid (not nested inside a
2-col column), pump the min-height so the wider container doesn't
end up looking short. Matches Chart-IMG's 1200x720 request size. */
.chart-section-wide .chart-tab-area {
min-height: 520px;
}
.chart-tab-area img { max-width: 100%; height: auto; border-radius: 6px; display: block; }
.chart-tab-area .chart-placeholder,
.chart-tab-area .chart-loading { color: var(--text-dim); font-size: 13px; padding: 32px; text-align: center; }
/* Momentum takeaway sentence shown under the Momentum (preset B) chart. */
.chart-commentary {
width: 100%;
font-size: 13px;
line-height: 1.5;
color: var(--text);
background: var(--panel-hi);
border: 1px solid var(--panel-border);
border-left: 3px solid var(--accent);
border-radius: 8px;
padding: 10px 14px;
box-sizing: border-box;
}
.chart-commentary-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--accent);
margin-right: 8px;
}
/* Local-fallback OHLCV chart wrapper. Without this, the SVG + caption
sat as separate flex children of .chart-tab-area and the SVG kept
its natural aspect-ratio width while the caption ate the remainder
— looked like the chart only used 60% of the panel. The wrapper
gives the flex container exactly one child to stretch full-width. */
.chart-tab-area .chart-local-wrap {
width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
}
/* Sentiment tabs hide non-active panes */
.sentiment-pane[hidden] { display: none; }
/* On-chain insights */
.onchain-card {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 12px;
padding: 16px;
}
.onchain-empty { color: var(--text-dim); font-size: 14px; }
.onchain-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
}
.onchain-subcard {
background: rgba(255,255,255,0.015);
border: 1px solid var(--panel-border);
border-radius: 10px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.onchain-subcard h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.onchain-big-num { font-size: 22px; font-weight: 600; }
.onchain-big-num.up { color: var(--up); }
.onchain-big-num.down { color: var(--down); }
.onchain-sub { font-size: 12px; color: var(--text-dim); }
.onchain-sub.up { color: var(--up); }
.onchain-sub.down { color: var(--down); }
.onchain-na { color: var(--text-dim); font-size: 13px; font-style: italic; }
.onchain-metrics, .onchain-flow {
display: flex;
flex-wrap: wrap;
gap: 10px;
font-size: 12px;
color: var(--text-dim);
}
.onchain-metrics strong, .onchain-flow strong { color: var(--text); font-weight: 600; }
.up { color: var(--up); }
.down { color: var(--down); }
.top-holders {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
font-size: 12px;
}
.top-holders li {
display: grid;
grid-template-columns: 28px 1fr auto auto;
align-items: center;
gap: 6px;
}
.top-holders .rank { color: var(--text-dim); font-variant-numeric: tabular-nums; font-weight: 500; }
.top-holders .entity {
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.top-holders .entity.unlabeled { color: var(--text-dim); font-family: var(--font-mono, monospace); }
.top-holders .pct { color: var(--text-dim); font-weight: 500; font-variant-numeric: tabular-nums; }
.top-holders .holder-link {
color: var(--accent);
text-decoration: none;
font-size: 11px;
padding: 0 4px;
}
.top-holders .holder-link:hover { color: var(--accent-strong, var(--accent)); }
.attr-tag {
font-size: 9px;
padding: 1px 5px;
border-radius: 999px;
background: rgba(168, 85, 247, 0.10);
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
}
.attr-tag.dim { background: rgba(255,255,255,0.04); color: var(--text-dim); }
.contract-tag {
font-size: 10px;
padding: 1px 5px;
border-radius: 999px;
background: rgba(255,255,255,0.06);
color: var(--text-dim);
}
.wallet-type-tag {
font-size: 9px;
padding: 1px 6px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
font-weight: 600;
}
.wallet-type-tag.wallet-type-etf { background: rgba(255, 209, 102, 0.15); color: #ffd166; }
.wallet-type-tag.wallet-type-exchange { background: rgba(0, 195, 255, 0.12); color: #00c3ff; }
.wallet-type-tag.wallet-type-foundation { background: rgba(168, 85, 247, 0.15); color: var(--accent); }
.wallet-type-tag.wallet-type-bridge { background: rgba(255, 138, 0, 0.12); color: #ff8a00; }
.wallet-type-tag.wallet-type-contract { background: rgba(255,255,255,0.05); color: var(--text-dim); }
.wallet-type-tag.wallet-type-labeled { background: rgba(0, 209, 118, 0.12); color: var(--up); }
.wallet-type-tag.wallet-type-unlabeled { background: rgba(255,255,255,0.03); color: var(--text-dim); }
.hist-class-grid {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--panel-border);
font-size: 12px;
color: var(--text-dim);
}
.hist-class-row {
display: grid;
grid-template-columns: 70px 1fr 1fr 1fr;
gap: 6px;
align-items: center;
}
.hist-class-label {
font-weight: 600;
color: var(--text);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.hist-class-stat strong { color: var(--text); font-variant-numeric: tabular-nums; }
/* Top-holder PnL list — explicit address column + label + type tag + PnL.
Distinct from .top-holders (top-10 list with rank + explorer link). */
.pnl-rows {
list-style: none;
margin: 8px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
font-size: 12px;
}
.pnl-rows li {
display: grid;
grid-template-columns: 90px 1fr auto auto;
align-items: center;
gap: 10px;
}
.pnl-rows .address-mono {
font-family: var(--font-mono, monospace);
color: var(--text-dim);
font-size: 11px;
cursor: help;
}
.pnl-rows .entity {
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pnl-rows .pct {
font-variant-numeric: tabular-nums;
font-weight: 600;
min-width: 60px;
text-align: right;
}
/* Self-rendered OHLCV fallback chart, used when Chart-IMG can't resolve a
TradingView symbol (typically long-tail Moralis altcoins with no Binance
pair). Standard candlestick: green up, red down, hover shows OHLC. */
.ohlcv-chart {
width: 100%;
height: auto;
display: block;
background: rgba(255,255,255,0.015);
border: 1px solid var(--panel-border);
border-radius: 8px;
}
.ohlcv-chart .grid-line { stroke: rgba(255,255,255,0.05); stroke-width: 1; }
.ohlcv-chart .axis-label { fill: var(--text-dim); font-size: 10px; font-family: var(--font-mono, monospace); }
.ohlcv-chart .candle-body.up { fill: var(--up); stroke: var(--up); stroke-width: 0.5; }
.ohlcv-chart .candle-body.down { fill: var(--down); stroke: var(--down); stroke-width: 0.5; }
.ohlcv-chart .candle-wick.up { stroke: var(--up); stroke-width: 1; }
.ohlcv-chart .candle-wick.down { stroke: var(--down); stroke-width: 1; }
.ohlcv-chart .grid-line.dashed { stroke-dasharray: 3 3; }
.ohlcv-chart .vol-bar.up { fill: var(--up); opacity: 0.55; }
.ohlcv-chart .vol-bar.down { fill: var(--down); opacity: 0.55; }
.ohlcv-chart .ind-line { fill: none; stroke-width: 1.4; }
.ohlcv-chart .ind-sma50 { stroke: #f59e0b; }
.ohlcv-chart .ind-sma100 { stroke: #a855f7; }
.ohlcv-chart .ind-rsi { stroke: #38bdf8; stroke-width: 1.4; }
.ohlcv-chart .ind-macd { stroke: #38bdf8; stroke-width: 1.4; }
.ohlcv-chart .ind-signal { stroke: #f97316; stroke-width: 1.4; }
.ohlcv-chart .rsi-band { fill: rgba(255,255,255,0.025); }
.ohlcv-chart .macd-hist.up { fill: var(--up); opacity: 0.6; }
.ohlcv-chart .macd-hist.down { fill: var(--down); opacity: 0.6; }
.ohlcv-chart .panel-label { fill: var(--text-dim); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.ohlcv-chart .legend-sma50 { fill: #f59e0b; }
.ohlcv-chart .legend-sma100 { fill: #a855f7; }
.ohlcv-chart .legend-macd { fill: #38bdf8; }
.ohlcv-chart .legend-signal { fill: #f97316; }
.chart-source-note {
font-size: 11px;
color: var(--text-dim);
margin-top: 6px;
text-align: center;
font-style: italic;
}
/* RSI-style half-circle gauge — used on the Distribution/Accumulation
short-term + long-term cards and the Total Sentiment headline. Needle
swings between the two labels; arc tinted red→grey→green. */
.rsi-gauge {
width: 100%;
max-width: 240px;
height: auto;
display: block;
margin: 4px auto 8px;
}
.rsi-gauge .gauge-arc {
fill: none;
stroke-width: 12;
stroke-linecap: butt;
}
.rsi-gauge .gauge-arc-down { stroke: var(--down); opacity: 0.85; }
.rsi-gauge .gauge-arc-neutral { stroke: var(--text-dim); opacity: 0.40; }
.rsi-gauge .gauge-arc-up { stroke: var(--up); opacity: 0.85; }
.rsi-gauge .gauge-needle {
stroke: var(--text);
stroke-width: 2.5;
stroke-linecap: round;
}
.rsi-gauge .gauge-pivot { fill: var(--text); }
.rsi-gauge .gauge-label {
fill: var(--text-dim);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
}
.rsi-gauge .gauge-value {
fill: var(--text);
font-size: 14px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.onchain-subcard-wide { grid-column: 1 / -1; }
.holders-histogram {
width: 100%;
height: 80px;
display: block;
}
.holders-histogram .hist-bar.up { fill: var(--up); opacity: 0.85; }
.holders-histogram .hist-bar.down { fill: var(--down); opacity: 0.85; }
.holders-histogram .hist-bar.neutral { fill: var(--text-dim); opacity: 0.4; }
.holders-histogram .hist-bar:hover { opacity: 1; }
.btn-secondary {
background: transparent;
color: var(--accent);
border: 1px solid var(--panel-border);
border-radius: 8px;
padding: 6px 12px;
font-size: 12px;
cursor: pointer;
align-self: flex-start;
}
.btn-secondary:hover:not(:disabled) {
background: var(--row-hover);
border-color: var(--accent);
}
.btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }
.onchain-errors {
margin-top: 10px;
font-size: 11px;
color: var(--text-dim);
font-style: italic;
}
/* Sentiment (Phase 1 redesign: total + tracker rail) */
.sentiment-card {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 12px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 16px;
}
.sentiment-empty { color: var(--text-dim); font-size: 14px; }
.total-sentiment {
display: flex;
flex-direction: column;
gap: 10px;
padding-bottom: 14px;
border-bottom: 1px solid var(--panel-border);
}
.total-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.total-weights {
font-size: 11px;
color: var(--text-mute);
}
.total-weights strong { color: var(--text-dim); font-weight: 500; }
.delta-chip {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
padding: 3px 9px;
border-radius: 999px;
background: var(--panel-hi);
}
.delta-chip.up { color: var(--up); background: rgba(0,209,118,0.12); }
.delta-chip.down { color: var(--down); background: rgba(255,77,77,0.12); }
.delta-chip.dim { color: var(--text-dim); }
.tracker-rail-head {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-dim);
display: flex;
justify-content: space-between;
align-items: baseline;
}
.tracker-rail-sub {
font-size: 10px;
font-weight: 400;
letter-spacing: 0.04em;
text-transform: none;
color: var(--text-mute);
}
.tracker-rail {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
}
.tracker-card {
background: rgba(255,255,255,0.015);
border: 1px solid var(--panel-border);
border-radius: 10px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 6px;
}
.tracker-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.tracker-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-dim);
}
.tracker-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.tracker-row .score-num {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.tracker-delta {
display: flex;
}
.tracker-delta .delta-chip { font-size: 11px; padding: 2px 7px; }
.tracker-secondary {
font-size: 11px;
color: var(--text-dim);
}
.tracker-link {
font-size: 11px;
color: var(--accent);
text-decoration: none;
margin-top: 2px;
display: inline-block;
}
.tracker-link:hover { text-decoration: underline; }
/* Top News section (now a sibling of Sentiment, not a tab inside it) */
.news-section { /* spacing handled by dashboard-right gap */ }
.news-list-box {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 12px;
padding: 14px;
}
.news-list-box .news-empty {
color: var(--text-dim);
font-size: 14px;
}
.sentiment-summary {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.sentiment-summary .score-num {
font-size: 14px;
color: var(--text-dim);
}
.sentiment-summary .score-num strong { color: var(--text); font-weight: 600; }
.sentiment-summary .confidence {
font-size: 12px;
color: var(--text-dim);
text-transform: lowercase;
}
.sentiment-categories {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.cat-chip {
font-size: 11px;
padding: 3px 8px;
border-radius: 999px;
background: rgba(168,85,247,0.14);
color: #d8b4fe;
letter-spacing: 0.02em;
}
.cat-chip.cat-earnings,
.cat-chip.cat-ma_partnership,
.cat-chip.cat-leadership,
.cat-chip.cat-regulatory { background: rgba(249,115,22,0.14); color: #fdba74; }
.cat-chip.cat-macro { background: rgba(168,85,247,0.16); color: #d8b4fe; }
.cat-chip.cat-crypto_native { background: rgba(234,179,8,0.16); color: #fde68a; }
.cat-chip.cat-product,
.cat-chip.cat-other { background: rgba(255,255,255,0.06); color: var(--text-dim); }
.news-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.news-card {
border: 1px solid var(--panel-border);
border-radius: 10px;
padding: 10px 12px;
display: flex;
flex-direction: row;
align-items: stretch;
gap: 12px;
background: rgba(255,255,255,0.015);
}
.news-thumb {
flex: 0 0 80px;
width: 80px;
height: 64px;
border-radius: 6px;
background: var(--panel-hi);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.news-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.news-thumb-empty::before {
content: "";
width: 24px;
height: 24px;
background: linear-gradient(135deg, var(--text-mute) 0%, transparent 100%);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.news-body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.news-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.news-card .news-title {
color: var(--text);
font-size: 14px;
font-weight: 500;
line-height: 1.35;
}
.news-card .news-title:hover { color: var(--accent); text-decoration: underline; }
.news-card .news-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
color: var(--text-dim);
font-size: 12px;
}
.news-card .news-meta .source { color: var(--text); font-weight: 500; }
.news-card .news-meta .tier-badge {
font-size: 10px;
padding: 1px 6px;
border-radius: 999px;
background: rgba(255,255,255,0.06);
color: var(--text-dim);
letter-spacing: 0.04em;
}
.news-card .news-meta .tier-1 { background: rgba(0,209,118,0.16); color: var(--up); }
.news-card .news-meta .tier-2 { background: rgba(168,85,247,0.16); color: #d8b4fe; }
.sent-chip {
font-size: 11px;
padding: 2px 7px;
border-radius: 999px;
font-weight: 600;
}
.sent-chip.pos { background: rgba(0,209,118,0.16); color: var(--up); }
.sent-chip.neg { background: rgba(255,77,77,0.16); color: var(--down); }
.sent-chip.neu { background: rgba(255,255,255,0.06); color: var(--text-dim); }
.news-empty {
color: var(--text-dim);
font-size: 13px;
font-style: italic;
}
/* Patterns */
.pattern-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 14px;
}
.pattern-empty {
grid-column: 1 / -1;
padding: 20px;
border: 1px dashed var(--panel-border);
border-radius: 12px;
text-align: center;
color: var(--text-dim);
font-size: 13px;
}
.pattern-card {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 12px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.pattern-card:hover {
border-color: var(--panel-hi);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.pattern-card.detected { border-color: rgba(0,209,118,0.45); }
.pattern-card .pattern-title {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.pattern-card .pattern-title h3 { margin: 0; font-size: 15px; font-weight: 600; }
.pattern-card .pattern-detail {
font-size: 12px;
color: var(--text-dim);
display: grid;
grid-template-columns: max-content 1fr;
gap: 4px 12px;
}
.pattern-card .pattern-detail strong { color: var(--text); font-weight: 500; }
.pattern-card .not-detected { color: var(--text-dim); font-size: 13px; }
/* Pattern ledger — collapsible "How was this scored?" per card */
.pattern-ledger { margin-top: 4px; }
.pattern-ledger summary {
cursor: pointer;
font-size: 11px;
font-weight: 500;
color: var(--text-dim);
padding: 4px 0;
list-style: none;
text-transform: uppercase;
letter-spacing: 0.06em;
transition: color 120ms ease;
}
.pattern-ledger summary::-webkit-details-marker { display: none; }
.pattern-ledger summary::before {
content: "›";
display: inline-block;
margin-right: 6px;
transition: transform 150ms ease;
}
.pattern-ledger[open] summary::before { transform: rotate(90deg); }
.pattern-ledger summary:hover { color: var(--accent); }
.pattern-ledger-body {
margin-top: 8px;
padding: 10px 12px;
background: rgba(255,255,255,0.02);
border-left: 2px solid var(--accent);
border-radius: 6px;
display: flex;
flex-direction: column;
gap: 8px;
}
.pattern-criterion { display: flex; flex-direction: column; gap: 2px; }
.pattern-criterion-head {
display: flex;
justify-content: space-between;
font-size: 12px;
}
.pattern-criterion-name { color: var(--text); font-weight: 500; }
.pattern-criterion-value {
color: var(--text-dim);
font-family: var(--font-mono);
font-feature-settings: "tnum";
}
.pattern-criterion-value strong { color: var(--text); font-weight: 600; }
.pattern-criterion-explain {
font-size: 11px;
color: var(--text-dim);
line-height: 1.5;
}
.pattern-ledger-bands,
.pattern-ledger-window {
margin: 0;
font-size: 11px;
color: var(--text-dim);
line-height: 1.5;
}
.pattern-ledger-bands strong,
.pattern-ledger-window strong { color: var(--text); font-weight: 500; }
/* Indicators grid */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 18px;
}
.card {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 14px;
padding: 20px;
transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.card:hover {
border-color: var(--panel-hi);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.card h3 { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.gauge { width: 100%; display: flex; justify-content: center; }
.gauge svg { width: 100%; max-width: 360px; height: auto; }
.gauge .gauge-value { font-size: 32px; font-weight: 700; fill: var(--text); }
.gauge .gauge-zone { font-size: 16px; font-weight: 600; }
.gauge .gauge-tick-label { font-size: 11px; fill: var(--text-dim); }
.gauge .gauge-needle { fill: #ffffff; stroke: #ffffff; stroke-width: 1; }
.gauge .gauge-hub { fill: #ffffff; }
.gauge-empty {
width: 100%;
max-width: 360px;
aspect-ratio: 9 / 7;
border-radius: 8px;
border: 1px dashed var(--panel-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-dim);
font-size: 13px;
}
.value-card {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 14px;
}
.value-empty { color: var(--text-dim); font-size: 13px; }
.value-row {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 4px 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.value-row:last-child { border-bottom: none; }
.value-row .label { color: var(--text-dim); }
.value-row .value { font-weight: 600; }
.value-row .value.up { color: var(--up); }
.value-row .value.down { color: var(--down); }
.meta {
margin-top: 10px;
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--text-dim);
}
footer {
margin-top: 40px;
font-size: 12px;
color: var(--text-dim);
text-align: center;
}
@media (max-width: 600px) {
.container { padding: 24px 14px 48px; }
header h1 { font-size: 22px; }
.card-grid { grid-template-columns: 1fr; }
}
/* ---- Macro page ----------------------------------------------------- */
.macro-pane[hidden] { display: none; }
.macro-pane { display: flex; flex-direction: column; gap: 20px; }
.macro-grid {
/* Macro Charts: each indicator stacked full-width, one below the other,
so the line chart can run long for better visibility. */
display: flex;
flex-direction: column;
gap: 18px;
}
.macro-card { display: flex; flex-direction: column; gap: 10px; }
.macro-card-wide { grid-column: 1 / -1; }
@media (min-width: 900px) {
.macro-card-wide { grid-column: span 2; }
}
.macro-big {
font-family: var(--font-mono);
font-size: 30px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.01em;
}
.macro-sub {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--text-dim);
gap: 8px;
}
.macro-delta {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
}
.macro-delta.up { color: var(--up); }
.macro-delta.down { color: var(--down); }
.macro-delta-label { color: var(--text-dim); font-size: 11px; margin-left: 2px; }
.macro-foot {
font-size: 11px;
color: var(--text-mute);
font-family: monospace;
}
.macro-foot code { font-family: var(--font-mono); color: var(--text-dim); }
.macro-chart {
display: flex;
flex-direction: column;
gap: 4px;
}
.macro-chart svg {
width: 100%;
height: 200px;
background: rgba(255,255,255,0.015);
border-radius: 6px;
border: 1px solid var(--panel-border);
}
.macro-chart-axis {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--text-mute);
font-family: var(--font-mono);
}
/* Pulse annual histograms (Crypto F&G / VIX / Bond VIX / Risk-on-off):
headline value + zone, then a year-long bar chart, then the explainer. */
.pulse-headline {
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
}
.pulse-value {
font-family: var(--font-mono);
font-size: 30px;
font-weight: 600;
letter-spacing: -0.01em;
}
.pulse-zone { font-size: 15px; font-weight: 600; }
/* Histograms are a touch shorter than the 200px Macro-Charts line charts so
the (taller) Pulse cards — headline + bars + components + note — stay tidy. */
.macro-hist svg { height: 150px; }
/* "How to read it" note shared by the Pulse histograms and the Macro-Charts
cards. Theme-safe surface (var tokens) + an accent rule down the left. */
.chart-explainer {
margin: 2px 0 0;
padding: 9px 12px;
font-size: 12.5px;
line-height: 1.55;
color: var(--text-dim);
background: var(--panel-hi);
border-left: 3px solid var(--accent);
border-radius: 0 6px 6px 0;
}
.chart-explainer strong { color: var(--text); font-weight: 600; }
.chart-explainer em { color: var(--text); font-style: normal; font-weight: 600; }
/* Crypto ETF flows: per-coin net-flow histogram + AUM line. */
.etf-chart-label { margin-top: 8px; font-size: 11px; color: var(--text-mute); }
.etf-sym {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
color: var(--text-dim);
margin-left: 4px;
}
/* ---- Money Flow screener -------------------------------------------- */
.mf-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 8px 0 16px;
}
.mf-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.mf-filter-group { display: inline-flex; gap: 6px; }
.mf-chip {
background: var(--panel);
border: 1px solid var(--panel-border);
color: var(--text-dim);
border-radius: 999px;
padding: 5px 12px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
}
.mf-chip:hover { color: var(--text); }
.mf-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.mf-status { font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.mf-status.running { color: var(--accent); }
.mf-status.err { color: var(--down); }
.mf-table-wrap { overflow-x: auto; border: 1px solid var(--panel-border); border-radius: 12px; }
.mf-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.mf-table th, .mf-table td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--panel-border); white-space: nowrap; }
.mf-table tbody tr:last-child td { border-bottom: none; }
.mf-table th {
position: sticky; top: 0; z-index: 1;
background: var(--panel-hi); color: var(--text-dim);
font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em;
user-select: none;
}
.mf-table th.mf-sortable { cursor: pointer; }
.mf-table th.mf-sortable:hover { color: var(--text); }
.mf-table th.mf-sortable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mf-table th.num, .mf-table td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mf-table tbody tr:hover { background: rgba(168, 85, 247, 0.06); }
.mf-asset a { color: var(--text); text-decoration: none; }
.mf-asset a:hover { color: var(--accent); text-decoration: underline; }
.mf-muted { color: var(--text-dim); font-size: 0.86rem; }
.mf-badge, .mf-phase {
display: inline-flex; align-items: baseline; gap: 5px;
border-radius: 6px; padding: 2px 8px; margin: 2px 2px 2px 0;
font-size: 0.8rem; font-weight: 600; white-space: nowrap;
}
.mf-badge.ok { background: rgba(0, 209, 118, 0.12); color: var(--up); }
.mf-badge.warn { background: rgba(168, 85, 247, 0.12); color: var(--accent); }
.mf-phase.up { background: rgba(0, 209, 118, 0.12); color: var(--up); }
.mf-phase.down { background: rgba(255, 77, 77, 0.12); color: var(--down); }
.mf-badge-sub { font-family: var(--font-mono); font-weight: 500; font-size: 0.72rem; opacity: 0.85; }
.mf-empty {
border: 1px dashed var(--panel-border); border-radius: 12px;
padding: 28px; text-align: center; color: var(--text-dim); font-size: 14px;
}
/* "Where money is moving" — per-sector accumulation/distribution + trend.
Its own framed panel below the setups table. */
.mf-rotation {
margin: 28px 0 8px;
padding: 16px 20px 18px;
border: 1px solid var(--panel-border);
border-radius: 12px;
background: var(--panel);
}
.mf-rotation:empty { display: none; }
.mf-rotation h2 { margin-top: 0; }
.mf-rot-summary { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; font-weight: 500; margin-bottom: 12px; }
.mf-rot-list { display: flex; flex-direction: column; gap: 2px; }
.mf-rot-row {
display: grid;
grid-template-columns: minmax(150px, 1.3fr) minmax(120px, 2fr) 52px auto 80px;
align-items: center; gap: 12px; padding: 6px 10px; border-radius: 8px;
}
.mf-rot-row:hover { background: rgba(168, 85, 247, 0.05); }
.mf-rot-name { font-size: 13px; font-weight: 500; }
.mf-div-bar { position: relative; height: 14px; background: var(--panel-hi); border-radius: 4px; }
.mf-div-bar::before { content: ""; position: absolute; left: 50%; top: -1px; bottom: -1px; width: 1px; background: var(--panel-border); }
.mf-div-fill { position: absolute; top: 2px; bottom: 2px; }
.mf-div-fill.in { left: 50%; background: var(--up); border-radius: 0 3px 3px 0; }
.mf-div-fill.out { right: 50%; background: var(--down); border-radius: 3px 0 0 3px; }
.mf-rot-net { font-family: var(--font-mono); font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.mf-rot-counts { font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
.mf-rot-spark { display: flex; justify-content: flex-end; }
@media (max-width: 700px) {
.mf-rot-row { grid-template-columns: minmax(110px, 1.4fr) 1fr 46px; }
.mf-rot-counts, .mf-rot-spark { display: none; }
}
/* ---- Sector Trends ---------------------------------------------------- */
.st-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 16px; }
.st-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.st-filter-group { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.st-chip {
background: var(--panel); border: 1px solid var(--panel-border); color: var(--text-dim);
border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 500; cursor: pointer;
}
.st-chip:hover { color: var(--text); }
.st-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.st-status { font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.st-status.running { color: var(--accent); }
.st-status.err { color: var(--down); }
.st-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.st-table th, .st-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--panel-border); white-space: nowrap; }
.st-table th {
position: sticky; top: 0; z-index: 1; background: var(--panel-hi); color: var(--text-dim);
font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; user-select: none;
}
.st-table th.st-sortable { cursor: pointer; }
.st-table th.st-sortable:hover { color: var(--text); }
.st-table th.st-sortable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.st-table th.num, .st-table td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.st-table td.up { color: var(--up); }
.st-table td.down { color: var(--down); }
.st-theme { cursor: pointer; }
.st-theme:hover { background: rgba(168, 85, 247, 0.06); }
.st-theme.open { background: rgba(168, 85, 247, 0.05); }
.st-name { font-weight: 500; }
.st-caret { color: var(--text-mute); font-size: 0.8rem; }
.st-candidate { color: var(--accent); margin-right: 2px; }
.st-quad { display: inline-block; border-radius: 6px; padding: 2px 9px; font-size: 0.78rem; font-weight: 600; }
.st-quad.lead { background: rgba(0, 209, 118, 0.14); color: var(--up); }
.st-quad.improve { background: rgba(168, 85, 247, 0.16); color: var(--accent); }
.st-quad.weaken { background: rgba(249, 115, 22, 0.16); color: #f97316; }
.st-quad.lag { background: rgba(255, 77, 77, 0.13); color: var(--down); }
.st-quad.neutral { background: var(--panel-hi); color: var(--text-dim); }
.st-heat { display: inline-flex; align-items: center; gap: 7px; justify-content: flex-end; }
.st-heat-bar, .st-breadth-bar {
display: inline-block; width: 54px; height: 6px; border-radius: 999px;
background: var(--panel-border); overflow: hidden;
}
.st-heat-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.st-breadth-bar > span { display: block; height: 100%; background: var(--up); border-radius: 999px; }
.st-detail > td { padding: 0; background: rgba(0, 0, 0, 0.12); }
.st-detail-wrap { padding: 10px 14px 14px; }
.st-detail-meta { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.st-member-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.st-member-table th, .st-member-table td { padding: 5px 10px; text-align: left; border-bottom: 1px solid var(--panel-border); }
.st-member-table th { color: var(--text-mute); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; }
.st-member-table th.num, .st-member-table td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.st-member-table td.up { color: var(--up); }
.st-member-table td.down { color: var(--down); }
.st-member-table a { color: var(--text); text-decoration: none; }
.st-member-table a:hover { color: var(--accent); text-decoration: underline; }
.st-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--text-mute); margin-right: 5px; vertical-align: middle; }
.st-dot.up { background: var(--up); }
.st-member-name { color: var(--text-mute); font-size: 0.82rem; }
.macro-components {
list-style: none;
margin: 0;
padding: 8px 0 0;
display: flex;
flex-direction: column;
gap: 4px;
font-size: 12px;
color: var(--text-dim);
border-top: 1px solid var(--panel-border);
}
.macro-components li {
display: flex;
justify-content: space-between;
gap: 8px;
}
.macro-components strong {
color: var(--text);
font-family: var(--font-mono);
font-weight: 600;
}
/* Risk-on/off component breakdown */
.risk-components {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
font-size: 11px;
font-family: var(--font-mono);
color: var(--text-dim);
margin-top: 4px;
}
.risk-components strong { color: var(--text); font-weight: 600; }
/* ---- Asset Regimes tab: five framed chart pairs --------------------------- */
.regime-frame { margin-top: 16px; }
.regime-frame > h3 { margin: 0 0 12px; }
/* Stacked layout: each chart spans the full frame width, the second drops
below the first. The banner charts (line/bar/river/spread/ladder) have
wide viewBoxes so full width gives a sensible height; the square quadrant
charts + calendar are capped and centred so they don't blow up. */
.regime-frame-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.regime-frame-grid--fed { grid-template-columns: 1fr; }
.regime-panel { min-width: 0; }
.regime-panel-cap {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--text-mute); margin-bottom: 8px;
}
/* overflow:visible so edge labels (the bold "now" tags, spike/un-invert
callouts, axis ticks) aren't clipped at the viewBox boundary — an SVG's
UA default is overflow:hidden. The line charts fill full width, so their
right-edge labels are end-anchored (grow inward) and only ever spill a
little vertically, which is harmless. */
.regime-panel svg { display: block; width: 100%; height: auto; overflow: visible; }
.regime-comet-svg { max-width: 460px; margin: 0 auto; overflow: visible; }
.rg-cal-svg { max-width: 760px; margin: 0 auto; }
.regime-ladder-svg { max-width: 100%; }
.regime-quad-axis { stroke: var(--panel-border); stroke-width: 1; stroke-dasharray: 4 4; }
.regime-quad-svg-label { font-size: 12px; fill: var(--text-mute); font-weight: 500; }
.regime-quad-svg-label.on { fill: var(--text); font-weight: 700; }
.regime-tail-now { fill: var(--accent); font-size: 11px; font-weight: 700; }
/* FED ladder drift line */
.regime-drift { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-dim); margin: 8px 0 2px; }
.regime-drift strong { color: var(--text); }
.regime-drift-arrow { font-size: 13px; }
.regime-drift-arrow.up { color: var(--up); }
.regime-drift-arrow.down { color: var(--down); }
.regime-drift-arrow.dim { color: var(--text-mute); }
/* Regime gantt (history frame) */
.regime-gantt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 6px; }
.regime-gantt-title { font-size: 13px; font-weight: 600; color: var(--text); }
.regime-tl-since { font-size: 11px; font-family: var(--font-mono); }
.regime-gantt { display: flex; height: 58px; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--panel-border); }
.regime-gantt-seg { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1px; min-width: 0; overflow: hidden; }
.regime-gantt-gap { background: transparent; flex: none; }
.regime-gantt-name { font-size: 10.5px; font-weight: 800; line-height: 1.15; text-align: center; color: #0b0c10; white-space: nowrap; }
.regime-gantt-dur { font-size: 9px; color: #0b0c10; opacity: .72; white-space: nowrap; font-family: var(--font-mono); }
.regime-gantt-dates { position: relative; height: 16px; margin-top: 3px; font-family: var(--font-mono); font-size: 10px; color: var(--text-mute); }
.regime-gantt-dates span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.regime-gantt-dates span.first { left: 0; transform: none; }
.regime-gantt-dates span.now { left: auto; right: 0; transform: none; }
/* Year-over-year rows (history frame) */
.regime-yoy { margin-top: 18px; }
.regime-yoy-row { display: grid; grid-template-columns: 76px 1fr; gap: 10px; align-items: center; margin: 6px 0; }
.regime-yoy-lab { font-size: 11.5px; font-weight: 700; color: var(--text-dim); font-family: var(--font-mono); display: flex; flex-direction: column; }
.regime-yoy-now { font-size: 9px; color: var(--up); font-weight: 600; }
.regime-yoy-ribbon { display: flex; height: 26px; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--panel-border); }
.regime-yoy-ticks { display: grid; grid-template-columns: 76px 1fr; gap: 10px; }
.regime-yoy-ticks-inner { position: relative; height: 14px; font-size: 9.5px; color: var(--text-mute); font-family: var(--font-mono); }
.regime-yoy-ticks-inner span { position: absolute; transform: translateX(-50%); }
.regime-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.regime-leg { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-dim); }
.regime-swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
/* Aggregate-sentiment-by-category — ranked rows.
One row per category, sorted by |score| desc so the most-extreme
categories surface to the top. Each row carries: name + asset count,
current-score chip, prior→now sparkline, Δ7d arrow + value.
Replaces the card grid that used to dominate this section. */
.macro-cat-grid {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 12px;
padding: 4px;
}
.cat-rows {
display: flex;
flex-direction: column;
}
.cat-row {
display: grid;
grid-template-columns: minmax(140px, 1.4fr) minmax(64px, auto) minmax(64px, auto) minmax(96px, auto);
align-items: center;
gap: 16px;
padding: 10px 14px;
border-top: 1px solid var(--panel-border);
}
.cat-row:first-child { border-top: 0; }
.cat-row-name {
display: flex;
align-items: baseline;
gap: 8px;
min-width: 0;
}
.cat-row-cat {
font-size: 14px;
font-weight: 600;
color: var(--text);
}
.cat-row-count {
font-size: 11px;
font-family: var(--font-mono);
color: var(--text-mute);
}
.cat-row-score {
font-family: var(--font-mono);
font-size: 18px;
font-weight: 600;
text-align: right;
letter-spacing: -0.01em;
}
.cat-row-spark {
display: flex;
align-items: center;
}
.cat-spark-svg { display: block; }
.cat-row-delta {
display: flex;
align-items: baseline;
gap: 6px;
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
justify-content: flex-end;
}
.cat-row-delta.up { color: var(--up); }
.cat-row-delta.down { color: var(--down); }
.cat-row-delta.dim { color: var(--text-dim); }
.cat-row-delta-arrow { font-size: 14px; line-height: 1; }
.cat-row-delta-window {
color: var(--text-mute);
font-weight: 500;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
@media (max-width: 640px) {
/* On phone, drop the dedicated sparkline column — the delta arrow +
value already conveys direction & magnitude, and the row gets too
cramped at 4 columns. */
.cat-row {
grid-template-columns: minmax(110px, 1fr) auto auto;
gap: 10px;
padding: 10px 12px;
}
.cat-row-spark { display: none; }
.cat-row-score { font-size: 16px; }
}
/* Top movers — two ranked tables side-by-side on desktop, stacked on
mobile. Same visual language as .cat-rows (single rounded container
hosting separator-bordered rows) so the two adjacent sections read
as a family rather than two unrelated widgets. */
.top-movers-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 16px;
}
.top-movers-col h3 {
font-size: 12px;
font-weight: 600;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0 0 8px;
}
.top-movers-table {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 12px;
padding: 4px;
}
.mover-row {
display: grid;
grid-template-columns: 24px minmax(120px, 1.5fr) minmax(60px, auto) minmax(70px, auto);
align-items: center;
gap: 12px;
padding: 8px 12px;
border-top: 1px solid var(--panel-border);
}
.mover-row:first-child { border-top: 0; }
.mover-rank {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-mute);
text-align: right;
}
.mover-name {
display: flex;
flex-direction: column;
min-width: 0;
}
.mover-sym {
font-size: 13px;
font-weight: 600;
color: var(--text);
font-family: var(--font-mono);
}
.mover-asset-name {
font-size: 11px;
color: var(--text-mute);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mover-price {
font-family: var(--font-mono);
font-size: 13px;
color: var(--text-dim);
text-align: right;
}
.mover-pct {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
text-align: right;
}
.mover-pct.up { color: var(--up); }
.mover-pct.down { color: var(--down); }
.mover-pct.dim { color: var(--text-dim); }
@media (max-width: 900px) {
.top-movers-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.mover-row { grid-template-columns: 20px minmax(100px, 1fr) auto auto; gap: 8px; padding: 8px; }
.mover-price { display: none; }
}
/* ---- Hyperliquid Pulse ---------------------------------------------- */
.hl-card {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 12px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.hl-empty { color: var(--text-dim); font-size: 14px; }
.hl-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
}
.hl-subcard {
background: rgba(255,255,255,0.015);
border: 1px solid var(--panel-border);
border-radius: 10px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
}
.hl-subcard h3 {
margin: 0;
font-size: 11px;
font-weight: 600;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.hl-big-num {
font-family: var(--font-mono);
font-size: 20px;
font-weight: 600;
letter-spacing: -0.01em;
}
.hl-big-num.up { color: var(--up); }
.hl-big-num.down { color: var(--down); }
.hl-big-num.dim { color: var(--text); }
.hl-sub {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
align-items: center;
font-size: 12px;
color: var(--text-dim);
}
.hl-sub strong {
color: var(--text);
font-family: var(--font-mono);
font-weight: 600;
}
.hl-sub .badge { font-size: 10px; padding: 2px 8px; }
.hl-equity-note {
font-size: 12px;
color: var(--text-dim);
background: rgba(168,85,247,0.06);
border-left: 2px solid var(--accent);
padding: 8px 12px;
border-radius: 6px;
line-height: 1.4;
}
.hl-equity-note code {
font-family: var(--font-mono);
color: var(--accent);
}
.hl-foot {
font-size: 11px;
color: var(--text-mute);
}
.hl-foot code {
font-family: var(--font-mono);
color: var(--text-dim);
}
/* Macro page Hyperliquid aggregate */
.hl-aggregate {
display: flex;
flex-direction: column;
gap: 14px;
}
.hl-agg-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px;
}
.hl-agg-card {
display: flex;
flex-direction: column;
gap: 8px;
}
.hl-agg-card h3 {
margin: 0;
font-size: 12px;
font-weight: 600;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.hl-fund-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
font-size: 12px;
}
.hl-fund-list li {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(60px, auto) minmax(60px, auto);
gap: 8px;
align-items: baseline;
padding: 4px 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.hl-fund-list li:last-child { border-bottom: none; }
.hl-fund-list li.dim { color: var(--text-dim); }
.hl-fund-sym { font-family: var(--font-mono); font-weight: 600; color: var(--text); }
.hl-fund-apr { font-family: var(--font-mono); font-weight: 600; text-align: right; }
.hl-fund-apr.up { color: var(--up); }
.hl-fund-apr.down { color: var(--down); }
.hl-fund-oi { font-family: var(--font-mono); color: var(--text-dim); text-align: right; }
/* ---- Auth pages (login / profile / admin) -------------------------- */
.auth-shell {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.auth-card {
width: 100%;
max-width: 380px;
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 14px;
padding: 32px;
box-shadow: var(--shadow-card);
}
.auth-brand {
display: flex;
align-items: center;
gap: 10px;
color: var(--text);
margin-bottom: 18px;
}
.auth-brand .logo-mark { width: 22px; height: 22px; color: var(--accent); }
.auth-brand .brand-text { font-weight: 700; letter-spacing: -0.01em; }
.auth-card h1 {
margin: 0 0 18px;
font-size: 20px;
font-weight: 700;
letter-spacing: -0.01em;
}
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim); }
.auth-form label span { font-weight: 500; }
.auth-form input,
.auth-form select {
background: var(--bg);
border: 1px solid var(--panel-border);
border-radius: 8px;
color: var(--text);
padding: 9px 12px;
font-size: 14px;
font-family: var(--font-sans);
outline: none;
transition: border-color 0.15s ease;
}
.auth-form input:focus,
.auth-form select:focus { border-color: var(--accent); }
.auth-btn-primary {
margin-top: 6px;
background: var(--accent);
color: white;
border: none;
border-radius: 8px;
padding: 11px 16px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: filter 0.15s ease;
}
.auth-btn-primary:hover { filter: brightness(1.1); }
.auth-foot {
margin-top: 18px;
font-size: 12px;
color: var(--text-dim);
line-height: 1.5;
}
.auth-hint {
margin: 0;
font-size: 11px;
color: var(--text-mute);
}
.auth-flash {
padding: 10px 12px;
border-radius: 8px;
font-size: 13px;
margin-bottom: 12px;
border-left: 3px solid var(--text-dim);
}
.auth-flash-error { border-left-color: var(--down); background: rgba(255, 77, 77, 0.08); }
.auth-flash-info { border-left-color: var(--accent); background: rgba(168, 85, 247, 0.08); }
/* Sign-out as a button styled like a link */
.topnav-link-btn {
background: none;
border: none;
cursor: pointer;
font: inherit;
font-size: 13px;
font-weight: 500;
}
.inline-form { display: inline; margin: 0; }
/* Profile page */
.page-sub { margin: 0; color: var(--text-dim); font-size: 13px; }
.profile-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 16px;
}
.profile-card { padding: 20px; }
.profile-card h2 { margin: 0 0 14px; font-size: 14px; font-weight: 600; text-transform: uppercase; color: var(--text-dim); letter-spacing: 0.04em; }
.profile-card-wide { grid-column: 1 / -1; }
.profile-meta {
display: grid;
grid-template-columns: max-content 1fr;
gap: 6px 14px;
margin: 0 0 18px;
font-size: 13px;
}
.profile-meta dt { color: var(--text-dim); }
.profile-meta dd { margin: 0; font-family: var(--font-mono); }
.login-history { width: 100%; border-collapse: collapse; font-size: 12px; }
.login-history th { text-align: left; padding: 6px 8px; color: var(--text-dim); border-bottom: 1px solid var(--panel-border); font-weight: 500; }
.login-history td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.04); font-family: var(--font-mono); }
.login-history tr.fail td { color: var(--down); }
.login-history tr.ok td { color: var(--text); }
/* Admin user-management page */
.admin-add { padding: 20px; margin-bottom: 18px; }
.admin-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
}
.admin-list { padding: 20px; }
.user-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.user-table th, .user-table td {
padding: 10px 8px;
border-bottom: 1px solid rgba(255,255,255,0.04);
text-align: left;
vertical-align: top;
}
.user-table th { color: var(--text-dim); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.role-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.role-admin { background: rgba(168, 85, 247, 0.18); color: var(--accent); }
.role-user { background: rgba(255, 255, 255, 0.06); color: var(--text-dim); }
.status-ok { color: var(--up); font-weight: 500; }
.status-warn { color: var(--warn); font-weight: 500; }
.status-locked { color: var(--down); font-weight: 600; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-secondary,
.btn-danger {
background: var(--bg);
border: 1px solid var(--panel-border);
border-radius: 6px;
color: var(--text);
padding: 6px 12px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-danger { color: var(--down); }
.btn-danger:hover { border-color: var(--down); background: rgba(255,77,77,0.08); }
/* ---- Auth: 2FA setup, recovery codes, audit table ----------------- */
.auth-checkbox {
flex-direction: row !important;
align-items: center;
gap: 8px !important;
font-size: 13px !important;
}
.auth-checkbox input { width: auto; margin: 0; }
.totp-setup { padding: 22px; }
.totp-grid {
display: grid;
grid-template-columns: minmax(240px, 320px) 1fr;
gap: 28px;
align-items: start;
}
@media (max-width: 720px) {
.totp-grid { grid-template-columns: 1fr; }
}
.totp-qr {
background: #ffffff;
border: 1px solid var(--panel-border);
border-radius: 10px;
padding: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.totp-qr svg {
width: 100%;
height: auto;
max-width: 280px;
display: block;
/* `image-rendering: pixelated` keeps QR module edges crisp under fractional
scaling — Chrome / Firefox blur SVGs with anti-aliasing by default and
phone scanners struggle on the soft edges. */
image-rendering: pixelated;
image-rendering: crisp-edges;
}
.totp-info h2 {
margin: 0 0 8px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-dim);
font-weight: 600;
}
.totp-secret {
display: block;
font-family: var(--font-mono);
background: var(--bg);
border: 1px solid var(--panel-border);
padding: 8px 12px;
border-radius: 6px;
font-size: 13px;
word-break: break-all;
margin: 6px 0 14px;
}
.totp-uri {
display: block;
font-family: var(--font-mono);
background: var(--bg);
border: 1px solid var(--panel-border);
padding: 8px 12px;
border-radius: 6px;
font-size: 11px;
word-break: break-all;
color: var(--text-dim);
margin-top: 6px;
}
.recovery-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 8px 14px;
counter-reset: rec;
}
.recovery-grid li {
position: relative;
padding-left: 30px;
font-family: var(--font-mono);
font-size: 14px;
letter-spacing: 0.05em;
background: var(--panel-hi);
border: 1px solid var(--panel-border);
border-radius: 6px;
padding: 10px 12px 10px 36px;
}
.recovery-grid li::before {
counter-increment: rec;
content: counter(rec);
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-family: var(--font-sans);
font-size: 11px;
color: var(--text-mute);
font-weight: 500;
}
.recovery-grid li code { font-family: inherit; background: none; padding: 0; }
.audit-table { font-size: 12px; }
.audit-table tr.fail td { color: var(--down); }
.audit-table tr.ok td { color: var(--text); }
.audit-table code {
font-family: var(--font-mono);
background: var(--bg);
border: 1px solid var(--panel-border);
padding: 1px 6px;
border-radius: 4px;
font-size: 11px;
color: var(--accent);
}
/* ---- Watchlist (profile page) ---------------------------------------- */
.watchlist-add-form {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
margin: 8px 0 6px;
}
.watchlist-add-form input[type="text"] {
padding: 8px 12px;
background: var(--bg);
color: var(--text);
border: 1px solid var(--panel-border);
border-radius: 8px;
font-family: var(--font-mono);
font-size: 13px;
}
.watchlist-add-form input[type="text"]:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}
.watchlist-list {
margin-top: 8px;
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 12px;
padding: 4px;
}
.watchlist-row {
display: grid;
grid-template-columns: minmax(140px, 2fr) minmax(70px, auto) minmax(70px, auto) 28px;
align-items: center;
gap: 12px;
padding: 8px 12px;
border-top: 1px solid var(--panel-border);
}
.watchlist-row:first-child { border-top: 0; }
.watchlist-link {
display: flex;
flex-direction: column;
text-decoration: none;
color: var(--text);
min-width: 0;
}
.watchlist-link:hover .watchlist-sym { color: var(--accent); }
.watchlist-sym {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
}
.watchlist-name {
font-size: 11px;
color: var(--text-mute);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.watchlist-price {
font-family: var(--font-mono);
font-size: 13px;
color: var(--text-dim);
text-align: right;
}
.watchlist-pct {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
text-align: right;
}
.watchlist-pct.up { color: var(--up); }
.watchlist-pct.down { color: var(--down); }
.watchlist-pct.dim { color: var(--text-dim); }
.watchlist-remove {
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
width: 24px;
height: 24px;
color: var(--text-mute);
cursor: pointer;
font-size: 16px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.watchlist-remove:hover {
background: color-mix(in srgb, var(--down) 12%, transparent);
border-color: color-mix(in srgb, var(--down) 35%, transparent);
color: var(--down);
}
.watchlist-remove:disabled { opacity: 0.4; cursor: progress; }
.form-message-ok { color: var(--up); }
.form-message-error { color: var(--down); }
@media (max-width: 480px) {
.watchlist-row {
grid-template-columns: minmax(100px, 1fr) minmax(60px, auto) 24px;
gap: 8px;
padding: 8px;
}
.watchlist-price { display: none; }
}
/* ---- Portfolio (profile page) --------------------------------------- */
.portfolio-add-form {
display: grid;
grid-template-columns: minmax(120px, 1.5fr) minmax(80px, 1fr) auto auto;
gap: 8px;
margin: 8px 0 6px;
}
.portfolio-add-form input[type="text"],
.portfolio-add-form input[type="number"],
.portfolio-add-form select {
padding: 8px 12px;
background: var(--bg);
color: var(--text);
border: 1px solid var(--panel-border);
border-radius: 8px;
font-family: var(--font-mono);
font-size: 13px;
}
.portfolio-add-form input:focus,
.portfolio-add-form select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}
.portfolio-list {
margin-top: 8px;
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 12px;
padding: 4px;
}
.portfolio-row {
display: grid;
grid-template-columns: minmax(140px, 2fr) minmax(60px, 0.8fr) 44px minmax(70px, 1fr) minmax(80px, 1fr) 28px;
align-items: center;
gap: 12px;
padding: 8px 12px;
border-top: 1px solid var(--panel-border);
}
.portfolio-row:first-child { border-top: 0; }
.portfolio-link {
display: flex;
flex-direction: column;
text-decoration: none;
color: var(--text);
min-width: 0;
}
.portfolio-link:hover .portfolio-sym { color: var(--accent); }
.portfolio-sym {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
}
.portfolio-name {
font-size: 11px;
color: var(--text-mute);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.portfolio-qty,
.portfolio-price,
.portfolio-value {
font-family: var(--font-mono);
font-size: 13px;
text-align: right;
color: var(--text-dim);
}
.portfolio-value { color: var(--text); font-weight: 600; }
.portfolio-ccy {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
color: var(--text-mute);
text-align: center;
padding: 1px 6px;
border: 1px solid var(--panel-border);
border-radius: 4px;
}
.portfolio-remove {
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
width: 24px;
height: 24px;
color: var(--text-mute);
cursor: pointer;
font-size: 16px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.portfolio-remove:hover {
background: color-mix(in srgb, var(--down) 12%, transparent);
border-color: color-mix(in srgb, var(--down) 35%, transparent);
color: var(--down);
}
.portfolio-remove:disabled { opacity: 0.4; cursor: progress; }
@media (max-width: 640px) {
.portfolio-add-form { grid-template-columns: 1fr; }
.portfolio-row {
grid-template-columns: minmax(100px, 1fr) auto auto auto 24px;
gap: 8px;
padding: 8px;
}
.portfolio-price { display: none; }
}
/* ---- Profile sub-tabs (Watchlist | Portfolio under "My assets") ----- */
.profile-subtabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--panel-border);
margin: 4px 0 16px;
}
.profile-subtab {
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
color: var(--text-dim);
cursor: pointer;
padding: 8px 14px;
font-family: inherit;
font-size: 13px;
font-weight: 500;
transition: color 0.12s, border-color 0.12s;
margin-bottom: -1px;
}
.profile-subtab:hover { color: var(--text); }
.profile-subtab.active {
color: var(--accent);
border-bottom-color: var(--accent);
}
.profile-subpane[hidden] { display: none; }
/* ---- Help page (/help) ---------------------------------------------- */
.help-toc {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
padding: 12px 16px;
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 12px;
margin-bottom: 24px;
font-size: 13px;
}
.help-toc a {
color: var(--accent);
text-decoration: none;
font-weight: 500;
}
.help-toc a:hover { text-decoration: underline; }
.help-section {
margin-bottom: 28px;
padding: 20px 22px;
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 12px;
scroll-margin-top: 80px;
}
.help-section h2 {
margin: 0 0 12px;
font-size: 18px;
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.help-anchor {
font-size: 12px;
font-weight: 400;
color: var(--text-mute);
}
.help-section p { line-height: 1.55; margin: 8px 0; color: var(--text); }
.help-section code {
font-family: var(--font-mono);
background: var(--bg);
padding: 1px 6px;
border-radius: 4px;
font-size: 90%;
color: var(--accent);
}
.help-list {
margin: 6px 0;
padding-left: 22px;
line-height: 1.6;
}
.help-list li { margin: 4px 0; }
.help-list li ul {
margin: 4px 0;
padding-left: 22px;
}
/* ---- Portfolio allocation pies (B3) --------------------------------- */
.portfolio-allocation {
margin-top: 24px;
padding-top: 16px;
border-top: 1px solid var(--panel-border);
}
.allocation-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 6px;
}
.allocation-head h3 { margin: 0; font-size: 14px; }
.allocation-ccy-wrap {
display: flex;
align-items: center;
gap: 6px;
}
.allocation-ccy-wrap label {
font-size: 12px;
color: var(--text-mute);
}
.allocation-ccy {
padding: 4px 8px;
background: var(--bg);
color: var(--text);
border: 1px solid var(--panel-border);
border-radius: 6px;
font-family: var(--font-mono);
font-size: 12px;
}
.allocation-total {
font-family: var(--font-mono);
font-size: 18px;
font-weight: 600;
color: var(--text);
margin-bottom: 16px;
}
.allocation-pies {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 24px;
}
.allocation-pie-block h4 {
margin: 0 0 8px;
font-size: 12px;
font-weight: 600;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.pie-wrap {
width: 180px;
height: 180px;
border-radius: 50%;
margin: 0 auto 12px;
position: relative;
background: var(--panel-border);
/* Inner cut-out for donut style */
}
.pie-wrap::after {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 70px; height: 70px;
margin: -35px 0 0 -35px;
background: var(--bg);
border-radius: 50%;
}
.pie-empty {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: var(--text-mute);
text-align: center;
padding: 12px;
background: transparent;
}
.pie-legend {
display: flex;
flex-direction: column;
gap: 4px;
}
.pie-legend-row {
display: grid;
grid-template-columns: 12px minmax(0, 1fr) 50px 70px;
align-items: center;
gap: 8px;
font-size: 12px;
}
.pie-swatch {
width: 10px;
height: 10px;
border-radius: 2px;
flex-shrink: 0;
}
.pie-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text);
}
.pie-pct {
font-family: var(--font-mono);
text-align: right;
color: var(--text-dim);
}
.pie-value {
font-family: var(--font-mono);
text-align: right;
color: var(--text-mute);
font-size: 11px;
}
@media (max-width: 720px) {
.allocation-pies { grid-template-columns: 1fr; }
}
/* ---- Accent picker (topnav) ----------------------------------------- */
.accent-picker {
display: inline-flex;
align-items: center;
gap: 6px;
margin-right: 6px;
}
.accent-swatch {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid transparent;
padding: 0;
cursor: pointer;
transition: transform 0.12s, border-color 0.12s;
background-clip: padding-box;
}
.accent-swatch:hover { transform: scale(1.15); }
.accent-swatch.active {
border-color: var(--text);
transform: scale(1.1);
}
/* Swatch colors mirror the data-accent presets so the picker is
readable regardless of which one is currently active. */
.accent-swatch.accent-purple { background: #a855f7; }
.accent-swatch.accent-blue { background: #3b82f6; }
.accent-swatch.accent-green { background: #22c55e; }
.accent-swatch.accent-orange { background: #f97316; }
@media (max-width: 720px) {
/* On phone the picker steals too much horizontal nav real estate.
Hide it; theme toggle stays. Users can still set accent via
localStorage from desktop and it persists across devices via
same-origin cookie isolation. */
.accent-picker { display: none; }
}
/* ---- Language picker (topnav) --------------------------------------- */
.lang-picker {
display: inline-flex;
align-items: center;
gap: 0;
margin-right: 6px;
border: 1px solid var(--panel-border);
border-radius: 6px;
overflow: hidden;
}
.lang-option {
background: transparent;
border: 0;
color: var(--text-dim);
padding: 4px 8px;
font-size: 11px;
font-weight: 600;
font-family: var(--font-mono);
letter-spacing: 0.04em;
cursor: pointer;
transition: background 0.12s, color 0.12s;
}
.lang-option:hover { color: var(--text); }
.lang-option.active {
background: var(--accent);
color: white;
}
[data-theme="light"] .lang-option.active { color: #fff; }
@media (max-width: 720px) {
.lang-picker { display: none; }
}
/* ---- Google Trends embed (asset dashboard) -------------------------- */
.trends-section {
margin-top: 24px;
}
/* Surrounding frame grouping the Google Trends embed with the asset price
chart, so the two read as one panel (mirrors the Wikipedia frame). */
.trends-group {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 12px;
padding: 8px;
}
.trends-frame-wrap {
border-radius: 8px;
min-height: 380px;
position: relative;
}
.trends-iframe {
width: 100%;
height: 380px;
border: 0;
display: block;
/* Trends embed only ships a light-theme stylesheet, so on dark mode
it'd look like a glaring white rectangle. Light-invert + hue-rotate
gets us a serviceable dark-themed approximation without injecting
into Google's iframe (which CORS forbids). The cost is that the
line chart's accent color shifts slightly. */
border-radius: 8px;
}
[data-theme="dark"] .trends-iframe,
:root:not([data-theme="light"]) .trends-iframe {
filter: invert(0.92) hue-rotate(180deg);
}
.trends-empty {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-mute);
font-size: 13px;
}
/* Standing note under the (opaque) Trends embed — explains a blank chart and
points to the direct Trends link + the Wikipedia attention band. */
.trends-note { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--text-dim); }
.trends-note a { color: var(--accent); }
/* ---- Price chart beneath the Google Trends embed (inside .trends-group) ---- */
.trends-ath-strip {
margin-top: 8px;
padding: 10px 4px 0;
border-top: 1px solid var(--panel-border);
}
.trends-ath-caption {
margin-top: 8px;
font-size: 12px;
color: var(--text);
}
/* ---- Shared price line + last-3-ATH markers (Wikipedia + Trends) ---- */
.price-line-wrap {
position: relative;
width: 100%;
}
.price-line-svg {
width: 100%;
height: 100%;
display: block;
}
/* ATH markers are tiny ▲ glyphs on the line (no text → can't overlap even
when highs cluster). Positioned by left% (x/W) + top px (1:1 since SVG
height == wrap height). The readable price/date labels live in the
stacked corner legend below. */
.price-ath {
position: absolute;
transform: translate(-50%, -50%);
pointer-events: none;
}
.price-ath::after {
content: "▲";
font-size: 9px;
line-height: 1;
color: var(--text);
text-shadow: 0 0 2px var(--panel), 0 0 2px var(--panel);
}
.price-ath.is-latest::after { color: var(--accent); }
/* Stacked corner legend: the last 3 ATHs (latest on top, highlighted). */
.price-ath-list {
position: absolute;
top: 6px;
left: 8px;
display: flex;
flex-direction: column;
gap: 2px;
pointer-events: none;
}
.price-ath-item {
font: 600 10px var(--font-mono, monospace);
color: var(--text);
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 5px;
padding: 1px 6px;
white-space: nowrap;
}
.price-ath-item i { font-style: normal; font-weight: 400; color: var(--text-dim); margin-left: 2px; }
.price-ath-item.is-latest { color: var(--accent); border-color: var(--accent); }
.price-ath-item.is-latest i { color: var(--accent); }
/* Right-side price axis (high / mid / low) — sits in the reserved gutter. */
.price-axis-y {
position: absolute;
right: 4px;
transform: translateY(-50%);
font: 500 9px var(--font-mono, monospace);
color: var(--text);
white-space: nowrap;
pointer-events: none;
}
/* Bottom year axis (Trends price chart). */
.price-axis-x-row {
position: absolute;
left: 0;
right: 0;
bottom: 2px;
height: 12px;
}
.price-axis-x {
position: absolute;
transform: translateX(-50%);
font: 500 10px var(--font-mono, monospace);
color: var(--text);
white-space: nowrap;
}
/* Leftmost / rightmost year labels left/right-align so they don't clip. */
.price-axis-x.at-start { transform: translateX(0); }
.price-axis-x.at-end { transform: translateX(-100%); }
.buzz-legend-pv { color: var(--accent); }
.buzz-legend-price { color: var(--text-dim); }
/* ---- Wikipedia attention histogram (asset dashboard, full width) -- */
.wikipedia-buzz-section { margin-top: 24px; }
.wikipedia-buzz-wrap {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 12px;
padding: 14px;
min-height: 220px;
position: relative;
}
.buzz-hist {
width: 100%;
height: 130px;
display: block;
}
.wikipedia-buzz-wrap .price-line-wrap { margin-top: 6px; }
.buzz-axis {
width: 100%;
height: 16px;
display: block;
}
.buzz-hist .buzz-hist-bar {
fill: var(--accent);
opacity: 0.8;
transition: opacity 0.12s;
}
.buzz-hist .buzz-hist-bar:hover { opacity: 1; }
.buzz-axis .buzz-hist-axis {
fill: var(--text);
font-family: var(--font-mono);
font-size: 10px;
}
.buzz-hist-sub {
margin-top: 10px;
font-size: 12px;
color: var(--text);
}
.buzz-hist-sub strong {
color: var(--text);
font-variant-numeric: tabular-nums;
}
/* Price overlay on the Wikipedia attention chart + the Google Trends
ATH strip. Amber distinguishes the price line from the accent bars. */
.buzz-price-line,
.trends-price-line {
fill: none;
stroke: #f59e0b;
stroke-width: 2;
vector-effect: non-scaling-stroke;
}
.buzz-price-key {
display: inline-block;
width: 14px;
height: 0;
vertical-align: middle;
border-top: 2px solid #f59e0b;
}
.trends-ath-strip { margin-top: 8px; }
.trends-ath-svg { width: 100%; height: 56px; display: block; }
.trends-ath-line {
stroke: var(--accent);
stroke-width: 1.5;
stroke-dasharray: 4 3;
vector-effect: non-scaling-stroke;
}
.trends-ath-dot { fill: var(--accent); }
.trends-ath-cap {
margin-top: 4px;
font-size: 11px;
color: var(--text-mute);
font-variant-numeric: tabular-nums;
}
.trends-ath-cap strong { color: var(--text); }
.wikipedia-buzz-empty {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-mute);
font-size: 13px;
}
/* ---- Price alerts (profile page) ------------------------------------ */
.alerts-add-form {
display: grid;
grid-template-columns: minmax(120px, 1.5fr) auto minmax(80px, 1fr) auto;
gap: 8px;
margin: 8px 0 6px;
}
.alerts-add-form input[type="text"],
.alerts-add-form input[type="number"],
.alerts-add-form select {
padding: 8px 12px;
background: var(--bg);
color: var(--text);
border: 1px solid var(--panel-border);
border-radius: 8px;
font-family: var(--font-mono);
font-size: 13px;
}
.alerts-add-form input:focus,
.alerts-add-form select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}
.alerts-list {
margin-top: 8px;
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 12px;
padding: 4px;
}
.alert-row {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-top: 1px solid var(--panel-border);
}
.alert-row:first-child { border-top: 0; }
.alert-cond { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.alert-sym {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.alert-cmp {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-dim);
}
.alert-status {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 2px 8px;
border-radius: 4px;
}
.alert-status-active {
background: color-mix(in srgb, var(--up) 18%, transparent);
color: var(--up);
}
.alert-status-triggered {
background: color-mix(in srgb, var(--warn) 18%, transparent);
color: var(--warn);
}
.alert-actions {
display: flex;
align-items: center;
gap: 6px;
}
.alert-reactivate {
background: transparent;
border: 1px solid var(--panel-border);
border-radius: 6px;
padding: 4px 10px;
font-size: 11px;
cursor: pointer;
color: var(--text-dim);
}
.alert-reactivate:hover {
border-color: var(--accent);
color: var(--accent);
}
.alert-remove {
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
width: 24px;
height: 24px;
color: var(--text-mute);
cursor: pointer;
font-size: 16px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.alert-remove:hover {
background: color-mix(in srgb, var(--down) 12%, transparent);
border-color: color-mix(in srgb, var(--down) 35%, transparent);
color: var(--down);
}
@media (max-width: 640px) {
.alerts-add-form { grid-template-columns: 1fr 1fr; }
.alert-row { grid-template-columns: 1fr auto; gap: 8px; padding: 8px; }
.alert-status { grid-column: 1 / -1; justify-self: start; }
}
/* ---- Order-book depth (crypto, aggregated live) --------------------- */
.orderbook-section { margin-top: 24px; }
.orderbook-card {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 12px;
padding: 16px;
}
.orderbook-empty { color: var(--text-dim); font-size: 14px; }
.ob-head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 14px;
}
.ob-band { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-dim); }
.ob-band-lbl { text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; }
.ob-band-btns { display: flex; flex-wrap: wrap; gap: 4px; }
.ob-band-btn {
font-size: 12px;
font-family: var(--mono, monospace);
padding: 3px 10px;
border-radius: 999px;
border: 1px solid var(--panel-border);
background: transparent;
color: var(--text-dim);
cursor: pointer;
}
.ob-band-btn:hover { color: var(--text); }
.ob-band-btn.active {
color: #fff;
background: var(--accent);
border-color: var(--accent);
}
.ob-stat-k { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
/* Two stacked time-series panels (futures + spot) */
.ob-panel {
margin-bottom: 16px;
background: rgba(255,255,255,0.012);
border: 1px solid var(--panel-border);
border-radius: 10px;
padding: 10px 12px;
}
.ob-panel:last-child { margin-bottom: 0; }
.ob-panel-head {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 6px;
}
.ob-panel-title { font-size: 13px; font-weight: 600; }
.ob-panel-stats { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.ob-panel-delta { font-family: var(--mono, monospace); font-size: 14px; }
.ob-panel-delta.up { color: var(--up); }
.ob-panel-delta.down { color: var(--down); }
.ob-panel-imb { font-family: var(--mono, monospace); }
.ob-recording { color: var(--text-dim); font-size: 13px; padding: 28px 8px; text-align: center; }
.ob-panel-sat {
margin: -2px 0 8px;
font-size: 11px;
font-style: italic;
color: var(--text-dim);
}
.ob-ts-svg { width: 100%; height: 170px; display: block; }
.ob-ts-up { fill: var(--up); }
.ob-ts-down { fill: var(--down); }
.ob-ts-zero { stroke: var(--panel-border); stroke-width: 1; }
.ob-ts-lbl { fill: var(--text-dim); font-size: 10px; font-family: var(--mono, monospace); }
.ob-foot { margin-top: 10px; font-size: 11px; color: var(--text-dim); }
/* ---- Buyer activity / 12-month histogram (crypto, full width) ------- */
.histogram-section { margin-top: 24px; }
.histogram-card {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 12px;
padding: 14px;
min-height: 240px;
position: relative;
}
.histogram-empty {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-mute);
font-size: 13px;
}
/* The .holder-histogram block already styled by the on-chain subcard
rules carries its own SVG sizing. Override the parent so it expands
to fill the new full-width container instead of the old narrow
on-chain-subcard column. */
.histogram-card .holder-histogram { width: 100%; }
.histogram-card .holder-histogram svg { width: 100%; height: auto; }
/* Market Profile — full-width section directly under the price chart.
Butterfly layout: Volume Profile grows right, TPO grows left, price
axis in the centre gutter. Works on every asset class (pure OHLCV). */
.mprofile-section { margin-top: 24px; }
.mprofile-tabs {
display: inline-flex;
gap: 4px;
padding: 3px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--panel-border);
border-radius: 8px;
}
.mprofile-tab {
font: inherit;
font-size: 12px;
padding: 4px 12px;
border-radius: 6px;
border: 0;
background: transparent;
color: var(--text-mute);
cursor: pointer;
}
.mprofile-tab.active { background: var(--accent); color: #fff; }
.mprofile-card {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 12px;
padding: 16px;
min-height: 260px;
position: relative;
}
.mprofile-empty,
.mprofile-error {
color: var(--text-mute);
font-size: 13px;
padding: 28px 8px;
text-align: center;
}
.mprofile-svg { width: 100%; height: auto; display: block; }
.mprofile-vol { fill: var(--accent); opacity: 0.55; }
.mprofile-vol:hover { opacity: 0.85; }
.mprofile-tpo { fill: var(--text-dim); opacity: 0.34; }
.mprofile-tpo:hover { opacity: 0.6; }
.mprofile-va-vol { fill: var(--accent); opacity: 0.07; }
.mprofile-va-tpo { fill: var(--text-dim); opacity: 0.07; }
.mprofile-poc-vol { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 3; }
.mprofile-poc-tpo { stroke: var(--text-dim); stroke-width: 1.5; stroke-dasharray: 5 3; }
.mprofile-price { fill: var(--text-mute); font-family: var(--font-mono); font-size: 10px; }
.mprofile-axis {
fill: var(--text-dim);
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.mprofile-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
margin-top: 14px;
}
.mprofile-verdict {
font-size: 12px;
font-weight: 600;
padding: 4px 12px;
border-radius: 999px;
border: 1px solid currentColor;
}
.mprofile-verdict.aligned { color: var(--up); background: rgba(0, 209, 118, 0.10); }
.mprofile-verdict.diverging { color: var(--down); background: rgba(255, 77, 77, 0.10); }
.mprofile-verdict.mixed,
.mprofile-verdict.no_volume { color: var(--text-mute); border-color: var(--panel-border); background: rgba(255, 255, 255, 0.04); }
.mprofile-stats { font-size: 12px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.mprofile-stats strong { color: var(--text); }
.mprofile-legend { display: flex; gap: 14px; font-size: 11px; color: var(--text-mute); margin-left: auto; }
.mprofile-legend span { display: inline-flex; align-items: center; gap: 5px; }
.mprofile-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.mprofile-swatch.vol { background: var(--accent); opacity: 0.7; }
.mprofile-swatch.tpo { background: var(--text-dim); opacity: 0.55; }
/* Fundamentals — stock-only section between About and Earnings. Responsive
grid of grouped metric tiles; the range & risk group spans full width
for the 52-week position bar. */
/* One frame grouping the ratio tiles + Earnings Trends. The frame is just
an outline — the inner cards keep their own fill, so they float inside
it rather than fighting a same-colour panel background. */
.fundamentals-frame {
margin-top: 24px;
border: 1px solid var(--panel-border);
border-radius: 14px;
padding: 18px 20px;
}
/* Earnings Trends sub-block: divider + uppercase subheading inside the frame. */
/* Lone info-toggle (heading removed) sits at the top-right of the frame. */
.section-head--toggle-only { justify-content: flex-end; }
.fund-earnings {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--panel-border);
}
/* News & Catalysts sits below Earnings Trends in the Fundamentals frame,
separated the same way Earnings is from the tiles above it. */
.fund-catalysts {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--panel-border);
}
.fund-earnings-head {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.fund-earnings-head h3 {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-dim);
margin: 0;
}
.earnings-period-tag { font-size: 12px; font-weight: 500; color: var(--text-mute); }
/* Earnings Trends promoted to the top of the Trading dashboard. It reuses the
.fundamentals-frame card chrome; this lays the title + the "reports in N
days" banner inline within the section head. */
/* Earnings Trends sits at the top of the Fundamentals frame; no top border
(it leads the frame), and the ratios head below it carries the divider. */
.fund-earnings-top { margin-bottom: 4px; }
.fund-ratios-head { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--panel-border); }
.earnings-subhead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.earnings-subhead h3 { margin: 0; }
.fundamentals-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 12px;
}
.fund-group {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 12px;
padding: 14px 16px;
}
.fund-group-wide { grid-column: 1 / -1; }
.fund-group-title {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-dim);
margin-bottom: 10px;
}
.fund-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 14px 18px;
}
.fund-tile-label { font-size: 11px; color: var(--text-mute); margin-bottom: 2px; }
/* Plain-language explanation shown inline under each metric value. */
.fund-tile-tip { margin-top: 5px; font-size: 11px; line-height: 1.45; color: var(--text-dim); }
/* Dotted-underline + help cursor signals the label has a hover explanation. */
.fund-has-tip { border-bottom: 1px dotted var(--text-mute); cursor: help; }
.fund-tile-value {
font-size: 18px;
font-weight: 600;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
color: var(--text);
}
/* Fees/Revenue tiles carry a 7d/30d Δ% sub-line under the dollar value.
Stays muted so the headline value still reads first. */
.fund-tile-sub {
display: flex;
gap: 4px;
margin-top: 4px;
font-size: 11px;
color: var(--text-mute);
font-family: var(--font-mono);
}
.fund-tile-sub-sep { color: var(--panel-border); }
/* Fundamental trends: four mini quarterly line charts (net · gross ·
operating margin · revenue growth YoY) in their own section below Fair
value & Wall Street. Line + area tint are colored by the 2-year direction
(green up / red down), reusing the global direction tokens. */
.fund-trends-section { margin: 4px 0 18px; }
.fund-trends-sub { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-mute); }
.fund-trend-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.fund-trend { border: 1px solid var(--panel-border); border-radius: 10px; padding: 10px 12px; }
.fund-trend-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.fund-trend-label { font-size: 12px; color: var(--text-mute); }
.fund-trend-val { font-size: 16px; font-weight: 600; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); }
.fund-trend-svg { width: 100%; height: 96px; display: block; font-family: var(--font-mono); }
.fund-trend-line { fill: none; stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.fund-trend-area { stroke: none; opacity: 0.14; }
.fund-trend-dot { fill: var(--text-mute); opacity: 0.65; }
.fund-trend-x { fill: var(--text-dim); font-size: 9px; }
.fund-trend.up .fund-trend-line, .fund-trend.up .fund-trend-last { stroke: var(--up); }
.fund-trend.up .fund-trend-last, .fund-trend.up .fund-trend-area { fill: var(--up); }
.fund-trend.up .fund-trend-val { color: var(--up); }
.fund-trend.down .fund-trend-line, .fund-trend.down .fund-trend-last { stroke: var(--down); }
.fund-trend.down .fund-trend-last, .fund-trend.down .fund-trend-area { fill: var(--down); }
.fund-trend.down .fund-trend-val { color: var(--down); }
/* ETF fund profile: composition (top holdings + sector weightings). Two
stacked blocks of labelled, proportional bars below the issuer/cost tiles. */
.etf-composition {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
margin-top: 16px;
}
.etf-comp-block {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 12px;
padding: 14px 16px;
}
.etf-comp-block h3 {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-dim);
margin: 0 0 10px;
}
.etf-hold-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 80px 52px;
align-items: center;
gap: 10px;
padding: 3px 0;
}
.etf-hold-name {
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.etf-hold-bar {
height: 6px;
background: var(--panel-border);
border-radius: 3px;
overflow: hidden;
}
.etf-hold-bar span {
display: block;
height: 100%;
background: var(--accent);
border-radius: 3px;
}
.etf-hold-w {
font-size: 12px;
text-align: right;
color: var(--text-dim);
font-variant-numeric: tabular-nums;
}
.fund-tile-note { font-size: 12px; color: var(--text-mute); line-height: 1.5; }
.fund-tile-trend-na { color: var(--text-mute); }
/* Per-chain TVL split: one stacked bar across the full group width plus
a legend below with share % and per-chain Δ30d. */
.cfund-chain-bar {
display: flex;
height: 10px;
border-radius: 4px;
overflow: hidden;
background: var(--panel-border);
margin-bottom: 10px;
}
.cfund-chain-seg { height: 100%; min-width: 2px; }
.cfund-chain-legend {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 6px 14px;
margin-bottom: 6px;
}
.cfund-chain-row {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
.cfund-chain-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex: 0 0 auto;
}
.cfund-chain-name { color: var(--text); }
.cfund-chain-share { color: var(--text-dim); margin-left: auto; }
.cfund-chain-delta { min-width: 56px; text-align: right; }
.cfund-chain-foot {
font-size: 11px;
color: var(--text-mute);
margin-top: 4px;
}
/* Yield context: a tight four-column list (Project · Chain · TVL · APY)
for the top audited-venue pools matching this asset's symbol. Only
renders for stables + LSTs (gated server-side). */
.cfund-yield-list {
list-style: none;
margin: 0;
padding: 0;
}
.cfund-yield-row {
display: grid;
grid-template-columns: 1fr 1fr auto auto;
gap: 12px;
align-items: center;
padding: 6px 0;
font-size: 13px;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
border-bottom: 1px solid var(--panel-border);
}
.cfund-yield-row:last-child { border-bottom: 0; }
.cfund-yield-head {
font-size: 11px;
color: var(--text-mute);
font-family: var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.04em;
padding-bottom: 4px;
}
.cfund-yield-project { color: var(--text); font-family: var(--font-sans); }
.cfund-yield-chain { color: var(--text-dim); font-family: var(--font-sans); }
.cfund-yield-tvl { color: var(--text-dim); }
.cfund-yield-apy { color: var(--up); font-weight: 600; min-width: 70px; text-align: right; }
.cfund-yield-foot {
font-size: 11px;
color: var(--text-mute);
margin-top: 6px;
}
.fundamentals-empty { color: var(--text-mute); font-size: 13px; padding: 18px 4px; }
/* Crypto-fundamentals profile group: narrative/L1-L2 chips + chains + use case. */
.cfund-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cfund-chip {
font-size: 11px;
padding: 2px 8px;
border-radius: 999px;
background: var(--surface-2, rgba(127, 127, 127, 0.12));
color: var(--text-dim);
border: 1px solid var(--border);
}
.cfund-chip.cfund-layer {
background: color-mix(in srgb, var(--accent) 18%, transparent);
color: var(--accent);
border-color: color-mix(in srgb, var(--accent) 35%, transparent);
font-weight: 600;
}
.cfund-chains { font-size: 12px; color: var(--text-mute); margin-bottom: 6px; }
.cfund-usecase { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.fund-range { margin-top: 16px; }
.fund-range-track {
position: relative;
height: 8px;
border-radius: 999px;
background: var(--panel-border);
}
.fund-range-fill {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: var(--accent);
opacity: 0.35;
border-radius: 999px;
}
.fund-range-marker {
position: absolute;
top: 50%;
width: 3px;
height: 16px;
background: var(--accent);
border-radius: 2px;
transform: translate(-50%, -50%);
box-shadow: 0 0 0 2px var(--panel);
}
.fund-range-labels {
display: flex;
justify-content: space-between;
margin-top: 8px;
font-size: 11px;
color: var(--text-mute);
font-family: var(--font-mono);
}
.fund-range-cap { color: var(--text-dim); font-family: var(--font-sans); }
/* Earnings band — full-width section between About and the two-column
dashboard-grid. Two cards side-by-side on desktop, stacked below
1024px. SVG charts inside (.earn-svg) follow the same pure-SVG
pattern the Wikipedia + buyer-activity histograms use. */
.earnings-next {
font-size: 12px;
color: var(--text-mute);
padding: 4px 10px;
border: 1px solid var(--panel-border);
border-radius: 999px;
background: rgba(168,85,247,0.06);
}
.earnings-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 12px;
}
@media (max-width: 1024px) { .earnings-grid { grid-template-columns: 1fr; } }
.earnings-card {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 12px;
padding: 14px 16px;
}
.earnings-card-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 6px;
}
.earnings-card-head h3 { font-size: 14px; font-weight: 600; margin: 0; }
.earnings-legend {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 11px;
color: var(--text-mute);
}
.earnings-legend .legend-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 4px;
vertical-align: middle;
}
.earnings-legend .legend-estimate { background: #fff; border: 1.5px solid var(--text-mute); }
.earnings-legend .legend-actual { background: var(--up); }
.earnings-legend .legend-rev { background: #38bdf8; }
.earnings-legend .legend-ni { background: #f59e0b; }
.earnings-card-body { min-height: 240px; }
.earn-svg { width: 100%; height: 240px; display: block; font-family: var(--font-mono); }
.earn-baseline { stroke: var(--panel-border); stroke-dasharray: 2 3; stroke-width: 1; }
.earn-gridline { stroke: var(--panel-border); stroke-width: 0.5; opacity: 0.5; }
.earn-axis { fill: var(--text-mute); font-size: 10px; }
.earn-period { fill: var(--text-mute); font-size: 11px; }
.earn-period-sub { font-size: 10px; }
.earn-period-sub.beat { fill: var(--up); }
.earn-period-sub.miss { fill: var(--down); }
.earn-period-sub.future { fill: var(--text-mute); }
.earn-surprise { font-size: 10px; }
.earn-surprise.beat { fill: var(--up); }
.earn-surprise.miss { fill: var(--down); }
.earn-est { fill: #fff; stroke: var(--text-mute); stroke-width: 1.5; }
.earn-est.future { stroke-dasharray: 2 2; opacity: 0.6; }
.earn-actual.beat { fill: var(--up); }
.earn-actual.miss { fill: var(--down); }
.earn-bar { transition: opacity 0.12s; }
.earn-bar:hover { opacity: 0.8; }
.earn-bar.rev { fill: #38bdf8; }
.earn-bar.ni { fill: #f59e0b; }
.earnings-empty,
.earnings-empty-inline {
padding: 24px;
color: var(--text-mute);
font-size: 13px;
text-align: center;
}
.earnings-skel {
height: 240px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
background-size: 400% 100%;
animation: skel-shimmer 1.4s infinite;
border-radius: 8px;
}
@keyframes skel-shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* ===========================================================================
Trade Planner & Journal (/trades) + Portfolio Analytics (/portfolio)
Scoped tp-* and pf-* classes. Reuse the global tokens + .up/.down colors.
=========================================================================== */
.tp-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin-bottom: 18px; }
.tp-h, .pf-h { font-size: 1.02rem; margin: 0 0 12px; font-weight: 650; }
.tp-h small, .pf-h small { color: var(--text-mute); font-weight: 500; }
.tp-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; }
.tp-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--text-mute); }
.tp-field-sym, .tp-field-wide { grid-column: 1 / -1; }
.tp-field span small { color: var(--text-mute); font-weight: 400; }
.tp-field input, .tp-field select, .tp-field textarea {
background: var(--bg); border: 1px solid var(--panel-border); border-radius: 8px;
color: var(--text); padding: 8px 10px; font-size: 0.92rem; font-family: inherit; width: 100%;
}
.tp-field input:focus, .tp-field select:focus, .tp-field textarea:focus {
outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}
.tp-preview {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px;
margin: 14px 0; padding: 12px; background: var(--bg); border: 1px solid var(--panel-border); border-radius: 10px;
}
.tp-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tp-stat-k { color: var(--text-mute); font-size: 0.8rem; }
.tp-stat-v { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 600; font-variant-numeric: tabular-nums; }
.tp-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.tp-btn {
border: 1px solid var(--panel-border); background: var(--panel-hi); color: var(--text);
padding: 9px 16px; border-radius: 9px; font-weight: 600; cursor: pointer; font-size: 0.9rem;
}
.tp-btn:hover { border-color: var(--accent); }
.tp-btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.tp-btn-accent:hover { filter: brightness(1.07); }
.tp-msg { font-size: 0.84rem; min-height: 1.1em; margin: 6px 0; color: var(--text-mute); }
.tp-msg-err { color: var(--down); }
.tp-msg-ok { color: var(--up); }
.tp-hint, .pf-hint { font-size: 0.78rem; color: var(--text-mute); line-height: 1.45; margin: 10px 0 0; }
.tp-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tp-bigstat, .pf-tile {
display: flex; flex-direction: column; gap: 3px; padding: 12px 14px;
background: var(--bg); border: 1px solid var(--panel-border); border-radius: 10px;
}
.tp-bigstat-v { font-size: 1.35rem; font-weight: 700; font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.tp-bigstat-k { font-size: 0.74rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.03em; }
.tp-journal { margin-top: 4px; }
.tp-journal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.tp-tabs, .tp-tab { font-size: 0.85rem; }
.tp-tabs { display: inline-flex; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 9px; padding: 3px; gap: 2px; }
.tp-tab { border: none; background: transparent; color: var(--text-mute); padding: 5px 12px; border-radius: 7px; cursor: pointer; font-weight: 600; }
.tp-tab.active { background: var(--panel-hi); color: var(--text); }
.tp-table-wrap, .pf-table-wrap { overflow-x: auto; }
.tp-table, .pf-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.tp-table th, .pf-table th { text-align: left; color: var(--text-mute); font-weight: 600; font-size: 0.74rem;
text-transform: uppercase; letter-spacing: 0.03em; padding: 8px 10px; border-bottom: 1px solid var(--panel-border); white-space: nowrap; }
.tp-table td, .pf-table td { padding: 9px 10px; border-bottom: 1px solid var(--panel-border);
font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tp-table td:first-child, .pf-table td:first-child { font-family: inherit; }
.tp-empty, .pf-muted { color: var(--text-mute); font-family: inherit !important; }
.tp-pill { font-family: inherit; font-size: 0.72rem; padding: 2px 8px; border-radius: 999px; text-transform: capitalize; border: 1px solid var(--panel-border); }
.tp-pill-planned { color: var(--text-mute); }
.tp-pill-open { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.tp-pill-closed { color: var(--text-dim); background: var(--panel-hi); }
.tp-row-actions { display: flex; gap: 6px; }
.tp-rbtn { font-family: inherit; border: 1px solid var(--panel-border); background: var(--panel-hi); color: var(--text-dim);
border-radius: 7px; padding: 3px 9px; cursor: pointer; font-size: 0.78rem; font-weight: 600; }
.tp-rbtn:hover { border-color: var(--accent); color: var(--text); }
.tp-rbtn-del:hover { border-color: var(--down); color: var(--down); }
/* ---- Portfolio ---- */
.pf-status, .pf-empty { color: var(--text-mute); padding: 18px 4px; }
.pf-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.pf-tile-k { font-size: 0.74rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.03em; }
.pf-tile-k small { text-transform: none; letter-spacing: 0; }
.pf-tile-v { font-size: 1.4rem; font-weight: 700; font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.pf-tile-sm .pf-tile-v { font-size: 1.15rem; }
.pf-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; margin-bottom: 16px; }
.pf-muted { color: var(--text-mute); }
.pf-bars { display: flex; flex-direction: column; gap: 12px; }
.pf-bar-top { display: flex; justify-content: space-between; font-size: 0.82rem; margin-bottom: 4px; }
.pf-bar-top span:last-child { font-family: "JetBrains Mono", ui-monospace, monospace; color: var(--text-mute); }
.pf-bar-track { height: 9px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.pf-bar-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.pf-risk-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 6px; }
@media (max-width: 880px) {
.tp-grid, .pf-grid { grid-template-columns: 1fr; }
.pf-tiles, .pf-risk-tiles, .tp-stat-grid { grid-template-columns: repeat(2, 1fr); }
.tp-fields { grid-template-columns: 1fr; }
.tp-preview { grid-template-columns: 1fr; }
}
/* ===========================================================================
Fair value (DCF) + Wall Street (analyst consensus) — Fundamentals tab block
=========================================================================== */
.fund-valuation-analyst { margin: 4px 0 18px; }
.va-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.va-card { background: var(--bg); border: 1px solid var(--panel-border); border-radius: 12px; padding: 14px 16px; }
.va-card-title { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-mute); margin-bottom: 10px; font-weight: 650; }
.va-fv { display: flex; gap: 18px; flex-wrap: wrap; }
.va-stat { display: flex; flex-direction: column; gap: 2px; }
.va-k { font-size: 0.72rem; color: var(--text-mute); }
.va-v { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; font-size: 1.12rem; font-variant-numeric: tabular-nums; }
.va-note { margin-top: 10px; font-size: 0.8rem; color: var(--text-mute); }
.va-target { margin-bottom: 14px; }
.va-target-row, .va-grades-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.82rem; color: var(--text-mute); margin-bottom: 6px; }
.va-target-cons, .va-grades-cons { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 650; color: var(--text); }
.va-target-track { position: relative; height: 8px; background: linear-gradient(90deg, var(--down) 0%, var(--panel-hi) 50%, var(--up) 100%); border-radius: 999px; opacity: 0.5; }
.va-target-mark { position: absolute; top: -3px; width: 3px; height: 14px; background: var(--text); border-radius: 2px; transform: translateX(-50%); }
.va-target-now { position: absolute; top: -5px; width: 11px; height: 18px; border: 2px solid var(--accent); border-radius: 4px; transform: translateX(-50%); background: var(--bg); }
.va-target-labels { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-mute); margin-top: 4px; font-family: "JetBrains Mono", ui-monospace, monospace; }
.va-grades-bar { display: flex; height: 9px; border-radius: 999px; overflow: hidden; background: var(--panel-hi); }
.va-seg.va-buy { background: var(--up); }
.va-seg.va-hold { background: var(--text-mute); }
.va-seg.va-sell { background: var(--down); }
.va-grades-legend { display: flex; justify-content: space-between; font-size: 0.74rem; margin-top: 5px; color: var(--text-mute); }
.va-changes { margin-top: 12px; }
.va-changes-title { font-size: 0.72rem; color: var(--text-mute); margin-bottom: 5px; }
.va-change { font-size: 0.78rem; display: flex; gap: 7px; align-items: baseline; padding: 2px 0; flex-wrap: wrap; }
.va-change-co { color: var(--text); }
.va-change-grade { color: var(--text-dim); font-family: "JetBrains Mono", ui-monospace, monospace; }
.va-change-date { color: var(--text-mute); margin-left: auto; font-size: 0.72rem; }
@media (max-width: 760px) { .va-grid { grid-template-columns: 1fr; } }
/* ===========================================================================
Branded loading + empty/unsupported states (window.AppState, states.js)
The Altcoin Wonderland rabbit mascot + a spinner ("Loading…") or a muted
mascot + message ("No data" / "Asset not supported"). One look, app-wide.
=========================================================================== */
.app-state { display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 12px; padding: 34px 18px; text-align: center; color: var(--text-mute); min-height: 120px; }
.app-state-img { width: 58px; height: 58px; border-radius: 14px; object-fit: cover; box-shadow: var(--shadow-card); }
.app-state-text { font-weight: 650; color: var(--text-dim); font-size: 0.95rem; }
.app-state-sub { font-size: 0.82rem; color: var(--text-mute); max-width: 34ch; line-height: 1.45; }
.app-loading .app-state-img { width: 72px; height: 72px; animation: app-bob 1.7s ease-in-out infinite;
box-shadow: 0 0 0 1px rgba(255, 150, 40, 0.28), 0 6px 22px rgba(255, 120, 20, 0.30); }
@keyframes app-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.app-state-spin { width: 24px; height: 24px; border-radius: 50%;
border: 3px solid var(--panel-border); border-top-color: var(--accent); animation: app-spin 0.8s linear infinite; }
@keyframes app-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.app-loading .app-state-img { animation: none; }
.app-state-spin { animation-duration: 1.6s; }
}
.app-empty .app-state-img { filter: grayscale(0.55) opacity(0.85); }
.app-empty-unsupported .app-state-img { filter: grayscale(0.85) opacity(0.7); }