/* ============================================================ Vector Leaderboard — TOKENS & COMPONENTS Source: design-system/vector-v3.html (CMC reverse-engineered) All tokens prefixed --c-* ; components prefixed .cmc-* Default theme: .NIGHT on ============================================================ */ :root, .DAY { /* SURFACES (light) */ --c-color-background-1: #FCFDFE; --c-color-background-2: #FFFFFF; --c-color-surface-1: #FFFFFF; --c-color-surface-2: #F8FAFD; /* TEXT (light) */ --c-color-text-primary: #0D1421; --c-color-text-secondary: #616E85; --c-color-text-caption: #646B80; --c-color-text-hyperlink: #3861FB; /* GRAY (light) */ --c-color-gray-100: #F8FAFD; --c-color-gray-200: #EFF2F5; --c-color-gray-300: #CFD6E4; --c-color-gray-400: #A6B0C3; --c-color-gray-500: #858CA2; --c-color-gray-600: #A1A7BB; /* INTENT */ --c-color-positive: #16C784; --c-color-positive-bg: var(--c-color-green-100); --c-color-negative: #EA3943; --c-color-negative-bg: var(--c-color-red-100); --c-color-official: #3861FB; --c-color-official-bg: var(--c-color-blue-100); --c-color-reminder: #F5B97F; --c-color-reminder-bg: var(--c-color-beige-100); --c-color-no-access: #858CA2; --c-color-no-access-bg: var(--c-color-gray-200); --c-color-overlay-bg: rgba(88, 102, 126, 0.6); /* BLUE */ --c-color-blue-100: #F0F6FF; --c-color-blue-200: #DDE4FD; --c-color-blue-300: #ACBDFB; --c-color-blue-400: #6188FF; --c-color-blue-500: #3861FB; --c-color-blue-600: #2444D4; --c-color-blue-700: #0728A1; --c-color-blue-800: #1E274F; --c-color-blue: var(--c-color-blue-500); /* GREEN */ --c-color-green-100: #DEFBF0; --c-color-green-200: #C3F8E4; --c-color-green-300: #8CF2CC; --c-color-green-400: #67E4B5; --c-color-green-500: #16C784; --c-color-green-600: #119C68; --c-color-green-700: #0D734C; --c-color-green-800: #173C37; --c-color-green: var(--c-color-green-500); /* RED */ --c-color-red-100: #FCE6E8; --c-color-red-200: #F8BABD; --c-color-red-300: #F8BABD; --c-color-red-400: #EE626A; --c-color-red-500: #EA3943; --c-color-red-600: #CB1620; --c-color-red-700: #981018; --c-color-red-800: #411F2A; /* ORANGE */ --c-color-orange-100: #FFE9E5; --c-color-orange-500: #FF775F; --c-color-orange-600: #FF3C1A; --c-color-orange-800: #8A1500; /* PURPLE */ --c-color-purple-100: #F6F0FF; --c-color-purple-300: #C8A5FE; --c-color-purple-500: #8A3FFC; --c-color-purple-600: #6312DE; --c-color-purple-800: #25015A; /* TEAL */ --c-color-teal-100: #E8FAFD; --c-color-teal-300: #7CE1F3; --c-color-teal-500: #13B2CF; --c-color-teal-600: #0F91A8; --c-color-teal-800: #084854; /* BEIGE */ --c-color-beige-100: #FDF4EA; --c-color-beige-500: #F5B97F; --c-color-beige-600: #EE8B2A; --c-color-beige-800: #433936; /* SHADOWS */ --c-shadow-tiny: 0px 1px 2px 0px rgba(88,102,126,0.12), 0px 4px 24px 0px rgba(88,102,126,0.08); --c-shadow-overlay: 0px 8px 32px 0px rgba(128,138,157,0.24), 0px 1px 2px 0px rgba(128,138,157,0.12); /* BORDER WIDTH */ --c-border-width-100: 1px; --c-border-width-200: 2px; /* BORDER RADIUS */ --c-border-radius-10: 2px; --c-border-radius-50: 4px; --c-border-radius-100: 8px; --c-border-radius-200: 12px; --c-border-radius-300: 16px; --c-border-radius-400: 20px; --c-border-radius-500: 50%; /* SPACE */ --c-space-50: 4px; --c-space-100: 8px; --c-space-150: 12px; --c-space-200: 16px; --c-space-250: 20px; --c-space-300: 24px; --c-space-400: 32px; --c-space-500: 40px; --c-space-600: 48px; --c-space-800: 64px; /* FONT SIZE */ --c-font-size-50: 11px; --c-font-size-75: 12px; --c-font-size-100: 14px; --c-font-size-200: 16px; --c-font-size-300: 18px; --c-font-size-400: 18px; --c-font-size-600: 20px; --c-font-size-800: 25px; --c-font-size-1000: 32px; /* FONT WEIGHT */ --c-font-weight-300: 300; --c-font-weight-400: 400; --c-font-weight-500: 500; --c-font-weight-600: 600; --c-font-weight-700: 700; --c-font-weight-900: 900; /* LINE HEIGHT */ --c-line-height-body: 150%; --c-line-height-heading: 130%; /* FONT FAMILY */ --c-font-family-sans: 'CMC V2', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --c-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; } /* ============================================================ DARK THEME (.NIGHT — CMC default) ============================================================ */ .NIGHT { /* gray ramp inverts */ --c-color-gray-100: #222531; --c-color-gray-200: #323546; --c-color-gray-300: #53596A; --c-color-gray-400: #646B80; --c-color-gray-500: #808A9D; --c-color-gray-600: #616E85; /* backgrounds & surfaces */ --c-color-background-1: #171924; --c-color-background-2: #0D1421; --c-color-surface-1: #222531; --c-color-surface-2: #2B2E3D; /* text */ --c-color-text-primary: #FFFFFF; --c-color-text-secondary: #A1A7BB; --c-color-text-caption: #A6B0C3; --c-color-text-hyperlink: #6188FF; /* semantic bg deep tints */ --c-color-positive-bg: var(--c-color-green-800); --c-color-negative-bg: var(--c-color-red-800); --c-color-official-bg: var(--c-color-blue-800); --c-color-reminder-bg: #433936; --c-color-overlay-bg: rgba(23,25,36,0.6); /* shadows for dark */ --c-shadow-tiny: 0px 1px 2px 0px rgba(13,20,33,0.24), 0px 4px 24px 0px rgba(13,20,33,0.12); --c-shadow-overlay: 0px 8px 32px 0px #0D1421, 0px 1px 2px 0px #0D1421; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; background: var(--c-color-background-2); color: var(--c-color-text-primary); font-family: var(--c-font-family-sans); font-size: var(--c-font-size-100); line-height: var(--c-line-height-body); -webkit-font-smoothing: antialiased; } /* ---- Typography ---- */ .cmc-t-heading-1 { font-size: var(--c-font-size-1000); font-weight: var(--c-font-weight-700); line-height: var(--c-line-height-heading); letter-spacing: -0.02em; } .cmc-t-heading-2 { font-size: var(--c-font-size-800); font-weight: var(--c-font-weight-700); line-height: var(--c-line-height-heading); letter-spacing: -0.015em; } .cmc-t-heading-3 { font-size: var(--c-font-size-600); font-weight: var(--c-font-weight-700); line-height: var(--c-line-height-heading); } .cmc-t-heading-4 { font-size: var(--c-font-size-400); font-weight: var(--c-font-weight-600); line-height: var(--c-line-height-heading); } .cmc-t-body-l { font-size: var(--c-font-size-200); font-weight: var(--c-font-weight-400); line-height: var(--c-line-height-body); } .cmc-t-body { font-size: var(--c-font-size-100); font-weight: var(--c-font-weight-400); line-height: var(--c-line-height-body); } .cmc-t-body-s { font-size: var(--c-font-size-75); font-weight: var(--c-font-weight-400); line-height: var(--c-line-height-body); color: var(--c-color-text-secondary); } .cmc-t-caption { font-size: var(--c-font-size-50); font-weight: var(--c-font-weight-500); line-height: var(--c-line-height-body); color: var(--c-color-text-caption); } .cmc-t-num { font-size: var(--c-font-size-100); font-weight: var(--c-font-weight-500); font-variant-numeric: tabular-nums; } .cmc-t-num-l { font-size: var(--c-font-size-600); font-weight: var(--c-font-weight-700); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .cmc-t-pct-pos { color: var(--c-color-positive); font-weight: var(--c-font-weight-600); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 2px; } .cmc-t-pct-neg { color: var(--c-color-negative); font-weight: var(--c-font-weight-600); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 2px; } .cmc-t-link { color: var(--c-color-text-hyperlink); text-decoration: none; cursor: pointer; } .cmc-t-link:hover { text-decoration: underline; } /* ---- BUTTON ---- */ .cmc-btn { font-family: var(--c-font-family-sans); font-size: var(--c-font-size-100); font-weight: var(--c-font-weight-600); height: 40px; padding: 0 var(--c-space-200); border-radius: var(--c-border-radius-100); border: var(--c-border-width-100) solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: var(--c-space-100); cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease; user-select: none; line-height: 1; white-space: nowrap; } .cmc-btn-primary { background: var(--c-color-blue-500); color: #fff; } .cmc-btn-primary:hover { background: var(--c-color-blue-400); } .cmc-btn-primary:active { background: var(--c-color-blue-600); } .cmc-btn-secondary { background: transparent; color: var(--c-color-text-primary); border-color: var(--c-color-gray-300); } .cmc-btn-secondary:hover { background: var(--c-color-gray-100); border-color: var(--c-color-gray-400); } .cmc-btn-ghost { background: transparent; color: var(--c-color-text-secondary); border-color: transparent; } .cmc-btn-ghost:hover { background: var(--c-color-gray-100); color: var(--c-color-text-primary); } .cmc-btn-positive { background: var(--c-color-positive); color: #fff; } .cmc-btn-positive:hover { background: var(--c-color-green-400); color: var(--c-color-text-primary); } .cmc-btn-negative { background: var(--c-color-negative); color: #fff; } .cmc-btn-negative:hover { background: var(--c-color-red-400); } .cmc-btn[disabled], .cmc-btn.is-disabled { background: var(--c-color-gray-200); color: var(--c-color-gray-400); cursor: not-allowed; border-color: transparent; } .cmc-btn-sm { height: 32px; font-size: var(--c-font-size-75); padding: 0 var(--c-space-150); border-radius: var(--c-border-radius-50); } .cmc-btn-xs { height: 24px; font-size: var(--c-font-size-50); padding: 0 var(--c-space-100); border-radius: var(--c-border-radius-50); } .cmc-btn-lg { height: 48px; font-size: var(--c-font-size-200); padding: 0 var(--c-space-300); } /* ---- INPUT / SEARCH ---- */ .cmc-input { font-family: var(--c-font-family-sans); font-size: var(--c-font-size-100); height: 40px; width: 100%; padding: 0 var(--c-space-200); background: var(--c-color-surface-2); color: var(--c-color-text-primary); border: var(--c-border-width-100) solid transparent; border-radius: var(--c-border-radius-100); outline: none; } .cmc-input::placeholder { color: var(--c-color-gray-500); } .cmc-input:hover { background: var(--c-color-gray-200); } .cmc-input:focus { border-color: var(--c-color-blue-500); background: var(--c-color-background-2); } .cmc-search { display: inline-flex; align-items: center; gap: var(--c-space-100); background: var(--c-color-surface-2); border-radius: var(--c-border-radius-100); padding: 0 var(--c-space-200); height: 40px; border: var(--c-border-width-100) solid transparent; min-width: 280px; } .cmc-search .ic { color: var(--c-color-gray-500); } .cmc-search input { background: transparent; border: none; outline: none; flex: 1; color: var(--c-color-text-primary); font-family: var(--c-font-family-sans); font-size: var(--c-font-size-100); } .cmc-search input::placeholder { color: var(--c-color-gray-500); } .cmc-search .kbd { border: var(--c-border-width-100) solid var(--c-color-gray-300); border-radius: var(--c-border-radius-50); padding: 1px 6px; font-family: var(--c-font-family-mono); font-size: 11px; color: var(--c-color-text-secondary); } /* ---- BADGE / CHIP ---- */ .cmc-badge { display: inline-flex; align-items: center; gap: var(--c-space-50); padding: 3px var(--c-space-100); font-family: var(--c-font-family-sans); font-size: var(--c-font-size-50); font-weight: var(--c-font-weight-600); border-radius: var(--c-border-radius-50); line-height: 1.3; white-space: nowrap; } .cmc-badge-positive { background: var(--c-color-positive-bg); color: var(--c-color-positive); } .cmc-badge-negative { background: var(--c-color-negative-bg); color: var(--c-color-negative); } .cmc-badge-official { background: var(--c-color-official-bg); color: var(--c-color-official); } .cmc-badge-reminder { background: var(--c-color-reminder-bg); color: var(--c-color-reminder); } .cmc-badge-no-access { background: var(--c-color-no-access-bg); color: var(--c-color-no-access); } .cmc-badge-purple { background: var(--c-color-purple-100); color: var(--c-color-purple-600); } .NIGHT .cmc-badge-purple { background: var(--c-color-purple-800); color: var(--c-color-purple-300); } .cmc-badge-teal { background: var(--c-color-teal-100); color: var(--c-color-teal-600); } .NIGHT .cmc-badge-teal { background: var(--c-color-teal-800); color: var(--c-color-teal-300); } .cmc-badge-orange { background: var(--c-color-orange-100); color: var(--c-color-orange-600); } .NIGHT .cmc-badge-orange { background: var(--c-color-orange-800); color: var(--c-color-orange-100); } .cmc-badge-outline { background: transparent; color: var(--c-color-text-primary); border: var(--c-border-width-100) solid var(--c-color-gray-300); } /* Topic pill */ .cmc-topic-pill { display: inline-flex; align-items: center; gap: var(--c-space-100); padding: var(--c-space-100) var(--c-space-150); border-radius: 999px; background: var(--c-color-surface-1); border: var(--c-border-width-100) solid var(--c-color-gray-200); font-size: var(--c-font-size-75); font-weight: var(--c-font-weight-600); color: var(--c-color-text-primary); white-space: nowrap; cursor: pointer; } .cmc-topic-pill:hover { border-color: var(--c-color-blue-500); } .cmc-topic-pill .lbl-prefix { background: var(--c-color-purple-100); color: var(--c-color-purple-600); padding: 1px 6px; border-radius: var(--c-border-radius-50); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; } .NIGHT .cmc-topic-pill .lbl-prefix { background: var(--c-color-purple-800); color: var(--c-color-purple-300); } /* ---- CARD / TILE (bento) ---- */ .cmc-card { background: var(--c-color-background-1); border: var(--c-border-width-100) solid var(--c-color-gray-200); border-radius: var(--c-border-radius-200); padding: var(--c-space-200); display: flex; flex-direction: column; gap: var(--c-space-100); min-width: 200px; } .cmc-card .head { display: flex; align-items: center; gap: var(--c-space-100); font-size: var(--c-font-size-75); font-weight: var(--c-font-weight-600); color: var(--c-color-text-secondary); } .cmc-card .head .arrow { color: var(--c-color-gray-400); margin-left: auto; } .cmc-card .v { font-size: var(--c-font-size-400); font-weight: var(--c-font-weight-700); color: var(--c-color-text-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: var(--c-space-100); } .cmc-card .v .delta { font-size: var(--c-font-size-75); font-weight: var(--c-font-weight-600); } .cmc-card .v.pos { color: var(--c-color-positive); } .cmc-card .v.neg { color: var(--c-color-negative); } .cmc-card .sub { font-size: var(--c-font-size-75); color: var(--c-color-text-secondary); } .cmc-card .spark { height: 36px; } /* ---- TABS ---- */ .cmc-tabs { display: inline-flex; gap: var(--c-space-300); border-bottom: var(--c-border-width-100) solid var(--c-color-gray-200); padding: 0; } .cmc-tab { padding: var(--c-space-150) 0; font-family: var(--c-font-family-sans); font-size: var(--c-font-size-200); font-weight: var(--c-font-weight-600); color: var(--c-color-text-secondary); cursor: pointer; border-bottom: var(--c-border-width-200) solid transparent; margin-bottom: -1px; white-space: nowrap; } .cmc-tab:hover { color: var(--c-color-text-primary); } .cmc-tab.is-active { color: var(--c-color-text-primary); border-bottom-color: var(--c-color-blue-500); } .cmc-tab .count { display: inline-block; margin-left: var(--c-space-100); font-size: var(--c-font-size-75); font-weight: var(--c-font-weight-500); color: var(--c-color-text-caption); background: var(--c-color-surface-2); padding: 1px 8px; border-radius: var(--c-border-radius-50); } .cmc-tab.is-active .count { color: var(--c-color-blue-500); background: var(--c-color-blue-800); } /* Section sub tabs (bigger, no count chips) */ .cmc-sec-tabs { display: flex; gap: var(--c-space-400); border-bottom: var(--c-border-width-100) solid var(--c-color-gray-200); } .cmc-sec-tab { padding: var(--c-space-150) 0; font-size: var(--c-font-size-200); font-weight: var(--c-font-weight-700); color: var(--c-color-text-secondary); cursor: pointer; border-bottom: var(--c-border-width-200) solid transparent; margin-bottom: -1px; } .cmc-sec-tab:hover { color: var(--c-color-text-primary); } .cmc-sec-tab.is-active { color: var(--c-color-text-primary); border-bottom-color: var(--c-color-text-primary); } /* ---- MENU / DROPDOWN ---- */ .cmc-menu { background: var(--c-color-surface-1); border: var(--c-border-width-100) solid var(--c-color-gray-200); border-radius: var(--c-border-radius-100); padding: var(--c-space-100); min-width: 220px; box-shadow: var(--c-shadow-overlay); } .cmc-menu-i { display: flex; align-items: center; justify-content: space-between; padding: var(--c-space-100) var(--c-space-150); font-size: var(--c-font-size-100); color: var(--c-color-text-primary); border-radius: var(--c-border-radius-50); cursor: pointer; } .cmc-menu-i:hover { background: var(--c-color-surface-2); } .cmc-menu-i.is-active { color: var(--c-color-blue-500); } .cmc-menu-sep { height: 1px; background: var(--c-color-gray-200); margin: var(--c-space-100) 0; } /* ---- TABLE ---- */ .cmc-table { width: 100%; border-collapse: collapse; font-family: var(--c-font-family-sans); background: var(--c-color-background-1); color: var(--c-color-text-primary); } .cmc-table thead th { text-align: left; font-size: var(--c-font-size-75); font-weight: var(--c-font-weight-600); color: var(--c-color-text-secondary); padding: var(--c-space-150) var(--c-space-200); border-bottom: var(--c-border-width-100) solid var(--c-color-gray-200); white-space: nowrap; position: sticky; top: 0; z-index: 2; background: var(--c-color-background-1); cursor: pointer; user-select: none; } .cmc-table thead th:hover { color: var(--c-color-text-primary); } .cmc-table thead th.is-sort { color: var(--c-color-text-primary); } .cmc-table thead th .sort-ic { color: var(--c-color-gray-500); margin-left: 2px; font-size: 10px; } .cmc-table thead th.is-sort .sort-ic { color: var(--c-color-blue-500); } .cmc-table tbody td { padding: var(--c-space-200); font-size: var(--c-font-size-100); font-weight: var(--c-font-weight-500); color: var(--c-color-text-primary); border-bottom: var(--c-border-width-100) solid var(--c-color-gray-200); font-variant-numeric: tabular-nums; white-space: nowrap; } .cmc-table tbody tr { cursor: pointer; } .cmc-table tbody tr:hover { background: var(--c-color-surface-2); } .cmc-table tbody tr:last-child td { border-bottom: none; } .cmc-table .num { text-align: right; } .cmc-table .pos { color: var(--c-color-positive); } .cmc-table .neg { color: var(--c-color-negative); } .cmc-table .rank { color: var(--c-color-text-secondary); width: 40px; } .cmc-table .star { color: var(--c-color-gray-400); width: 30px; cursor: pointer; } .cmc-table .star.on { color: var(--c-color-reminder); } .cmc-table .coin { display: flex; align-items: center; gap: var(--c-space-150); } .cmc-table .coin .ico { width: 32px; height: 32px; border-radius: 50%; background: var(--c-color-gray-200); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; color: var(--c-color-text-primary); } .cmc-table .coin .nm { font-weight: var(--c-font-weight-600); color: var(--c-color-text-primary); } .cmc-table .coin .sym { color: var(--c-color-text-secondary); font-weight: var(--c-font-weight-500); margin-left: var(--c-space-100); font-size: var(--c-font-size-75); } .cmc-table .coin .addr { color: var(--c-color-text-caption); font-family: var(--c-font-family-mono); font-size: var(--c-font-size-50); display: block; } .cmc-table .buy { display: inline-flex; align-items: center; padding: 4px 12px; border: var(--c-border-width-100) solid var(--c-color-blue-500); color: var(--c-color-blue-500); border-radius: var(--c-border-radius-50); font-size: var(--c-font-size-75); font-weight: var(--c-font-weight-600); cursor: pointer; text-decoration: none; background: transparent; white-space: nowrap; } .cmc-table .buy:hover { background: var(--c-color-blue-500); color: #fff; } /* sticky first cols on wide tables */ .cmc-table th.sticky-l, .cmc-table td.sticky-l { position: sticky; left: 0; z-index: 1; background: var(--c-color-background-1); } .cmc-table tbody tr:hover td.sticky-l { background: var(--c-color-surface-2); } /* Sparkline cell */ .cmc-spark { width: 140px; height: 36px; display: flex; align-items: flex-end; gap: 1px; } .cmc-spark .bar { flex: 1; background: var(--c-color-positive); opacity: 0.85; border-radius: 1px; } .cmc-spark.neg .bar { background: var(--c-color-negative); } /* ---- HEADER NAV (CMC global) ---- */ .cmc-header { height: 56px; background: var(--c-color-background-2); border-bottom: var(--c-border-width-100) solid var(--c-color-gray-200); display: flex; align-items: center; padding: 0 var(--c-space-300); gap: var(--c-space-400); color: var(--c-color-text-primary); } .cmc-header .logo { display: inline-flex; align-items: center; gap: var(--c-space-100); font-weight: var(--c-font-weight-700); font-size: var(--c-font-size-200); } .cmc-header .logo-mark { width: 28px; height: 28px; border-radius: 50%; background: var(--c-color-text-primary); color: var(--c-color-background-2); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; } .cmc-header nav { display: flex; align-items: center; gap: var(--c-space-300); flex: 1; } .cmc-header nav a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--c-color-text-primary); font-size: var(--c-font-size-100); font-weight: var(--c-font-weight-600); cursor: pointer; padding: 6px 4px; } .cmc-header nav a svg { flex: none; opacity: .7; transform: translateY(-0.5px); transition: opacity .15s ease; } .cmc-header nav a:hover svg, .cmc-header nav a.is-active svg { opacity: 1; } .cmc-header nav a:hover { color: var(--c-color-blue-500); } .cmc-header nav a.is-active { color: var(--c-color-blue-500); } .cmc-header .actions { display: flex; align-items: center; gap: var(--c-space-200); } .cmc-header .ic-btn { width: 32px; height: 32px; border-radius: var(--c-border-radius-50); background: transparent; border: none; color: var(--c-color-text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; } .cmc-header .ic-btn:hover { background: var(--c-color-surface-2); color: var(--c-color-text-primary); } /* ---- FILTER BAR ---- */ .cmc-filter-bar { display: flex; align-items: center; gap: var(--c-space-100); flex-wrap: wrap; padding: var(--c-space-200) 0; } .cmc-network-chip { display: inline-flex; align-items: center; gap: var(--c-space-100); padding: var(--c-space-100) var(--c-space-150); background: var(--c-color-surface-1); border: var(--c-border-width-100) solid var(--c-color-gray-200); border-radius: var(--c-border-radius-100); font-size: var(--c-font-size-75); font-weight: var(--c-font-weight-600); color: var(--c-color-text-primary); cursor: pointer; } .cmc-network-chip:hover { border-color: var(--c-color-blue-500); } .cmc-network-chip.is-active { background: var(--c-color-blue-100); border-color: var(--c-color-blue-500); color: var(--c-color-blue-600); } .NIGHT .cmc-network-chip.is-active { background: var(--c-color-blue-800); color: var(--c-color-blue-300); } .cmc-network-chip .dot { width: 14px; height: 14px; border-radius: 50%; } /* ---- AI prompt (CMC AI bar) ---- */ .cmc-ai-prompt { display: flex; align-items: center; justify-content: space-between; padding: var(--c-space-150) var(--c-space-200); background: var(--c-color-surface-1); border: var(--c-border-width-100) solid var(--c-color-gray-200); border-radius: var(--c-border-radius-200); box-shadow: var(--c-shadow-overlay); font-size: var(--c-font-size-100); color: var(--c-color-text-secondary); min-width: 360px; } .cmc-ai-prompt .lhs { display: inline-flex; align-items: center; gap: var(--c-space-100); } .cmc-ai-prompt .lhs .ic { color: var(--c-color-purple-500); font-size: 16px; } .cmc-ai-prompt .kbd { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px; background: var(--c-color-surface-2); border-radius: var(--c-border-radius-50); font-family: var(--c-font-family-mono); font-size: 11px; color: var(--c-color-text-caption); } /* ============================================================ LEADERBOARD-SPECIFIC EXTENSIONS ============================================================ */ /* Rank with medal colors */ .cmc-rank-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; border-radius: var(--c-border-radius-50); font-family: var(--c-font-family-sans); font-size: var(--c-font-size-75); font-weight: var(--c-font-weight-700); background: var(--c-color-surface-2); color: var(--c-color-text-secondary); padding: 0 8px; } .cmc-rank-pill.gold { background: var(--c-color-reminder-bg); color: var(--c-color-reminder); } .cmc-rank-pill.silver { background: var(--c-color-gray-200); color: var(--c-color-text-secondary); } .cmc-rank-pill.bronze { background: var(--c-color-orange-800); color: var(--c-color-orange-300, #FFAD9E); } /* Page chrome */ .page-shell { background: var(--c-color-background-2); min-height: 100vh; display: flex; flex-direction: column; } .page-head { padding: var(--c-space-300) var(--c-space-300) 0; } .page-title { font-size: var(--c-font-size-800); font-weight: var(--c-font-weight-700); letter-spacing: -0.02em; color: var(--c-color-text-primary); display: inline-flex; align-items: center; gap: var(--c-space-200); } .page-sub { margin-top: var(--c-space-100); font-size: var(--c-font-size-100); color: var(--c-color-text-secondary); max-width: 760px; } /* Bias banner — uses reminder intent */ .cmc-banner { background: var(--c-color-reminder-bg); border-bottom: var(--c-border-width-100) solid var(--c-color-reminder); padding: var(--c-space-150) var(--c-space-300); font-size: var(--c-font-size-75); color: var(--c-color-text-primary); display: flex; justify-content: space-between; align-items: center; gap: var(--c-space-150); } .cmc-banner b { color: var(--c-color-reminder); } .cmc-banner .close { color: var(--c-color-text-secondary); cursor: pointer; } /* Bento grid (top KPI tiles) */ .cmc-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--c-space-150); padding: var(--c-space-200) var(--c-space-300) 0; } /* Trader/Coin cell content */ .trader-cell { display: flex; align-items: center; gap: var(--c-space-150); min-width: 240px; } .trader-cell .avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--c-font-size-100); flex-shrink: 0; } .trader-cell .name { font-weight: var(--c-font-weight-600); font-size: var(--c-font-size-100); color: var(--c-color-text-primary); display: flex; align-items: center; gap: var(--c-space-100); } .trader-cell .name .star { color: var(--c-color-gray-400); cursor: pointer; } .trader-cell .name .star.on { color: var(--c-color-reminder); } .trader-cell .addr { font-family: var(--c-font-family-mono); font-size: var(--c-font-size-50); color: var(--c-color-text-caption); margin-top: 2px; display: flex; align-items: center; gap: var(--c-space-50); } .trader-cell .addr .copy { cursor: pointer; color: var(--c-color-gray-500); } .trader-cell .addr .copy:hover { color: var(--c-color-text-primary); } /* Avatar accents (data classification only) */ .av-blue { background: var(--c-color-blue-800); color: var(--c-color-blue-300); } .av-purple { background: var(--c-color-purple-800); color: var(--c-color-purple-300); } .av-teal { background: var(--c-color-teal-800); color: var(--c-color-teal-300); } .av-orange { background: var(--c-color-orange-800); color: #FFAD9E; } .av-green { background: var(--c-color-green-800); color: var(--c-color-green-300); } .av-pink { background: #5A1F3C; color: #FFA8C4; } .av-beige { background: var(--c-color-beige-800); color: var(--c-color-beige-500); } /* Confidence interval text */ .cmc-ci { color: var(--c-color-text-caption); font-size: var(--c-font-size-50); font-family: var(--c-font-family-mono); } .cmc-sample-warn { color: var(--c-color-reminder); font-size: var(--c-font-size-50); font-weight: var(--c-font-weight-600); } .cmc-sample-fail { color: var(--c-color-negative); font-size: var(--c-font-size-50); font-weight: var(--c-font-weight-600); } /* Pagination */ .cmc-pagination { display: flex; align-items: center; justify-content: space-between; padding: var(--c-space-200) var(--c-space-300); border-top: var(--c-border-width-100) solid var(--c-color-gray-200); font-size: var(--c-font-size-75); color: var(--c-color-text-secondary); } .cmc-pagination .pages { display: flex; gap: var(--c-space-50); } .cmc-pagination .pages .p { min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--c-border-radius-50); cursor: pointer; color: var(--c-color-text-primary); font-variant-numeric: tabular-nums; font-weight: var(--c-font-weight-600); } .cmc-pagination .pages .p:hover { background: var(--c-color-surface-2); } .cmc-pagination .pages .p.is-active { background: var(--c-color-blue-500); color: #fff; } /* Status footer */ .cmc-status { display: flex; align-items: center; padding: var(--c-space-100) var(--c-space-300); background: var(--c-color-background-1); border-top: var(--c-border-width-100) solid var(--c-color-gray-200); font-family: var(--c-font-family-mono); font-size: var(--c-font-size-50); color: var(--c-color-text-caption); gap: var(--c-space-200); } .cmc-status .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-color-positive); box-shadow: 0 0 6px var(--c-color-positive); margin-right: var(--c-space-100); } .cmc-status b { color: var(--c-color-text-primary); font-weight: var(--c-font-weight-500); } .cmc-status .sep { color: var(--c-color-gray-400); } /* ============================================================ DETAIL PAGE EXTENSIONS ============================================================ */ /* Breadcrumb */ .cmc-breadcrumb { padding: var(--c-space-200) var(--c-space-300) 0; font-size: var(--c-font-size-75); color: var(--c-color-text-secondary); display: flex; align-items: center; gap: var(--c-space-100); } .cmc-breadcrumb a { color: var(--c-color-text-secondary); text-decoration: none; cursor: pointer; } .cmc-breadcrumb a:hover { color: var(--c-color-text-primary); } .cmc-breadcrumb .sep { color: var(--c-color-gray-400); } /* Detail header */ .detail-head { padding: var(--c-space-200) var(--c-space-300) var(--c-space-300); } .detail-head .top-row { display: flex; align-items: center; gap: var(--c-space-200); } .detail-head .trader-cell .avatar { width: 56px; height: 56px; font-size: 20px; } .detail-head .name { font-size: var(--c-font-size-600); font-weight: var(--c-font-weight-700); letter-spacing: -0.01em; color: var(--c-color-text-primary); } .detail-head .grow { flex: 1; } .detail-head .actions { display: flex; gap: var(--c-space-100); } .detail-meta { display: flex; gap: var(--c-space-200); align-items: center; margin-top: var(--c-space-200); font-size: var(--c-font-size-75); color: var(--c-color-text-secondary); flex-wrap: wrap; } .detail-meta .item { display: inline-flex; align-items: center; gap: var(--c-space-50); } .detail-meta .item b { color: var(--c-color-text-primary); font-weight: var(--c-font-weight-600); } .detail-meta .dot { color: var(--c-color-gray-400); } /* KPI strip 5-col */ .kpi-strip { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--c-color-background-1); border-top: var(--c-border-width-100) solid var(--c-color-gray-200); border-bottom: var(--c-border-width-100) solid var(--c-color-gray-200); } .kpi-strip .cell { padding: var(--c-space-250) var(--c-space-300); border-right: var(--c-border-width-100) solid var(--c-color-gray-200); } .kpi-strip .cell:last-child { border-right: none; } .kpi-strip .lbl { font-size: var(--c-font-size-75); color: var(--c-color-text-secondary); font-weight: var(--c-font-weight-500); margin-bottom: var(--c-space-100); } .kpi-strip .v { font-size: var(--c-font-size-800); font-weight: var(--c-font-weight-700); color: var(--c-color-text-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.015em; line-height: 1.1; } .kpi-strip .v.pos { color: var(--c-color-positive); } .kpi-strip .v.neg { color: var(--c-color-negative); } .kpi-strip .v.blue { color: var(--c-color-blue-500); } .kpi-strip .sub { font-size: var(--c-font-size-75); color: var(--c-color-text-secondary); margin-top: var(--c-space-50); } .kpi-strip .sub.pos { color: var(--c-color-positive); } /* Detail tabs row */ .detail-tabs { display: flex; padding: 0 var(--c-space-300); background: var(--c-color-background-2); gap: var(--c-space-400); border-bottom: var(--c-border-width-100) solid var(--c-color-gray-200); } /* Detail body */ .detail-body { padding: var(--c-space-300); } /* Recency callout */ .recency { display: flex; align-items: center; padding: var(--c-space-200) var(--c-space-250); background: var(--c-color-positive-bg); border: var(--c-border-width-100) solid var(--c-color-positive); border-radius: var(--c-border-radius-200); margin-bottom: var(--c-space-250); gap: var(--c-space-250); } .recency.warn { background: var(--c-color-reminder-bg); border-color: var(--c-color-reminder); } .recency.dead { background: var(--c-color-negative-bg); border-color: var(--c-color-negative); } .recency .status-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c-color-positive); box-shadow: 0 0 10px var(--c-color-positive); } .recency.warn .status-dot { background: var(--c-color-reminder); box-shadow: 0 0 10px var(--c-color-reminder); } .recency.dead .status-dot { background: var(--c-color-negative); box-shadow: 0 0 10px var(--c-color-negative); } .recency .label { font-size: var(--c-font-size-75); font-weight: var(--c-font-weight-700); color: var(--c-color-positive); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; } .recency.warn .label { color: var(--c-color-reminder); } .recency.dead .label { color: var(--c-color-negative); } .recency .desc { font-size: var(--c-font-size-100); color: var(--c-color-text-primary); } .recency .desc b { font-weight: var(--c-font-weight-700); } .recency .stats { margin-left: auto; display: flex; gap: var(--c-space-400); } .recency .stats .stat .v { font-size: var(--c-font-size-300); font-weight: var(--c-font-weight-700); color: var(--c-color-text-primary); font-variant-numeric: tabular-nums; } .recency .stats .stat .k { font-size: var(--c-font-size-50); color: var(--c-color-text-secondary); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; } /* Card with title row */ .dcard { background: var(--c-color-background-1); border: var(--c-border-width-100) solid var(--c-color-gray-200); border-radius: var(--c-border-radius-200); padding: var(--c-space-250); } .dcard-head { display: flex; align-items: center; gap: var(--c-space-100); margin-bottom: var(--c-space-200); } .dcard-head h3 { font-size: var(--c-font-size-100); font-weight: var(--c-font-weight-700); color: var(--c-color-text-primary); } .dcard-head .helper { color: var(--c-color-text-caption); font-size: var(--c-font-size-75); } .dcard-head .grow { flex: 1; } /* Grids */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--c-space-200); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--c-space-200); } .grid-mainside { display: grid; grid-template-columns: 1fr 360px; gap: var(--c-space-200); } /* Metric card */ .mcard { background: var(--c-color-background-1); border: var(--c-border-width-100) solid var(--c-color-gray-200); border-radius: var(--c-border-radius-200); padding: var(--c-space-200); display: flex; flex-direction: column; gap: var(--c-space-50); } .mcard .lbl { font-size: var(--c-font-size-75); color: var(--c-color-text-secondary); font-weight: var(--c-font-weight-500); } .mcard .v { font-size: var(--c-font-size-600); font-weight: var(--c-font-weight-700); color: var(--c-color-text-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1.1; } .mcard .v.pos { color: var(--c-color-positive); } .mcard .v.neg { color: var(--c-color-negative); } .mcard .v.warn { color: var(--c-color-reminder); } .mcard .sub { font-size: var(--c-font-size-75); color: var(--c-color-text-secondary); margin-top: var(--c-space-50); } /* Chart box */ .chart-box { background: var(--c-color-background-1); border: var(--c-border-width-100) solid var(--c-color-gray-200); border-radius: var(--c-border-radius-200); padding: var(--c-space-250); position: relative; } .chart-box .head { display: flex; align-items: center; gap: var(--c-space-150); margin-bottom: var(--c-space-150); } .chart-box .title { font-size: var(--c-font-size-100); font-weight: var(--c-font-weight-700); color: var(--c-color-text-primary); } .chart-box .meta { margin-left: auto; font-size: var(--c-font-size-75); color: var(--c-color-text-secondary); } .chart-box .area { width: 100%; height: 300px; position: relative; } .bias-pill { position: absolute; top: var(--c-space-200); right: var(--c-space-250); background: var(--c-color-reminder-bg); color: var(--c-color-reminder); border-radius: 999px; padding: 4px 10px; font-size: var(--c-font-size-50); font-weight: var(--c-font-weight-600); } /* Time-period pill group (7d/30d/All) */ .cmc-pill-group { display: inline-flex; background: var(--c-color-surface-2); border-radius: var(--c-border-radius-100); padding: 3px; } .cmc-pill-group .p { padding: 4px 12px; font-size: var(--c-font-size-75); font-weight: var(--c-font-weight-600); color: var(--c-color-text-secondary); cursor: pointer; border-radius: var(--c-border-radius-50); } .cmc-pill-group .p.is-active { background: var(--c-color-background-1); color: var(--c-color-text-primary); } /* Bar list */ .bar-list { display: flex; flex-direction: column; gap: var(--c-space-150); } .bar-list .row { display: grid; grid-template-columns: 90px 1fr 50px; align-items: center; gap: var(--c-space-150); font-size: var(--c-font-size-100); } .bar-list .row .lbl { color: var(--c-color-text-primary); font-weight: var(--c-font-weight-500); } .bar-list .row .track { height: 8px; background: var(--c-color-surface-2); border-radius: var(--c-border-radius-50); position: relative; overflow: hidden; } .bar-list .row .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--c-color-blue-500); } .bar-list .row .v { color: var(--c-color-text-secondary); text-align: right; font-variant-numeric: tabular-nums; } /* Sparkline strip (last N trades) */ .spark-strip { display: flex; align-items: flex-end; gap: 2px; height: 40px; } .spark-strip .b { flex: 1; background: var(--c-color-positive); border-radius: 1px; min-height: 4px; opacity: 0.85; } .spark-strip .b.neg { background: var(--c-color-negative); } /* Key/value rows (sample quality, latency, etc.) */ .kv-list { display: flex; flex-direction: column; gap: var(--c-space-100); } .kv { display: flex; align-items: center; justify-content: space-between; font-size: var(--c-font-size-100); } .kv .k { color: var(--c-color-text-secondary); } .kv .v { color: var(--c-color-text-primary); font-weight: var(--c-font-weight-600); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: var(--c-space-100); } /* ============================================================ TRACK RECORD / BEHAVIOR / REPLICABILITY EXTENSIONS ============================================================ */ /* Drawdown strip — daily blocks */ .dd-strip { display: flex; height: 28px; gap: 1px; background: var(--c-color-surface-2); border-radius: var(--c-border-radius-50); overflow: hidden; } .dd-strip .day { flex: 1; min-width: 4px; } .dd-strip .day.up { background: var(--c-color-positive); opacity: 0.45; } .dd-strip .day.up2 { background: var(--c-color-positive); opacity: 0.80; } .dd-strip .day.flat { background: var(--c-color-surface-2); } .dd-strip .day.dd { background: var(--c-color-negative); opacity: 0.40; } .dd-strip .day.dd2 { background: var(--c-color-negative); opacity: 0.70; } .dd-strip .day.no { background: transparent; } /* By-coin tile (Track record) */ .coin-tile { display: grid; grid-template-columns: 32px 1fr; gap: var(--c-space-150); padding: var(--c-space-150) var(--c-space-200); background: var(--c-color-surface-1); border: var(--c-border-width-100) solid var(--c-color-gray-200); border-radius: var(--c-border-radius-100); } .coin-tile .ico { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; background: var(--c-color-blue-800); color: var(--c-color-blue-300); } .coin-tile .body { display: flex; flex-direction: column; gap: 4px; } .coin-tile .nm { font-weight: var(--c-font-weight-600); font-size: var(--c-font-size-100); } .coin-tile .row { display: flex; gap: var(--c-space-200); font-size: var(--c-font-size-75); color: var(--c-color-text-secondary); } .coin-tile .row b { font-variant-numeric: tabular-nums; color: var(--c-color-text-primary); } .coin-tile .row .pos { color: var(--c-color-positive); } /* Bars (vertical bars for behavior charts) */ .v-bars { display: flex; align-items: flex-end; gap: var(--c-space-100); height: 180px; padding-bottom: 28px; position: relative; } .v-bars .col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; } .v-bars .col .b { width: 100%; max-width: 56px; background: var(--c-color-blue-500); opacity: 0.85; border-radius: var(--c-border-radius-50) var(--c-border-radius-50) 0 0; position: relative; } .v-bars .col .b.peak { background: var(--c-color-positive); opacity: 1; } .v-bars .col .v { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-family: var(--c-font-family-mono); font-size: var(--c-font-size-50); color: var(--c-color-text-primary); font-variant-numeric: tabular-nums; } .v-bars .col .l { position: absolute; bottom: -22px; font-size: var(--c-font-size-50); color: var(--c-color-text-caption); text-align: center; white-space: nowrap; } /* Scatter (DCA: size vs DCA count) */ .scatter { position: relative; width: 100%; height: 200px; background: var(--c-color-surface-2); border-radius: var(--c-border-radius-100); border: var(--c-border-width-100) solid var(--c-color-gray-200); } .scatter .pt { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--c-color-blue-500); transform: translate(-50%, 50%); } .scatter .pt.large { width: 14px; height: 14px; background: var(--c-color-positive); } .scatter .gridline-x, .scatter .gridline-y { position: absolute; background: rgba(255,255,255,0.05); } .scatter .gridline-x { left: 0; right: 0; height: 1px; } .scatter .gridline-y { top: 0; bottom: 0; width: 1px; } .scatter .axis-x, .scatter .axis-y { position: absolute; font-family: var(--c-font-family-mono); font-size: 10px; color: var(--c-color-text-caption); } .scatter .axis-x { bottom: -18px; } .scatter .axis-y { left: -28px; } /* Side mix pie ring */ .donut { position: relative; width: 120px; height: 120px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .donut .inner { position: absolute; inset: 14px; background: var(--c-color-background-1); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .donut .inner .v { font-size: var(--c-font-size-300); font-weight: var(--c-font-weight-700); color: var(--c-color-positive); font-variant-numeric: tabular-nums; } .donut .inner .l { font-size: var(--c-font-size-50); color: var(--c-color-text-secondary); } /* Checklist (Replicability) */ .checklist { display: flex; flex-direction: column; gap: var(--c-space-150); } .check-item { display: flex; align-items: center; gap: var(--c-space-150); padding: var(--c-space-150) var(--c-space-200); background: var(--c-color-surface-1); border: var(--c-border-width-100) solid var(--c-color-gray-200); border-radius: var(--c-border-radius-100); } .check-item .ic { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; } .check-item.ok .ic { background: var(--c-color-positive-bg); color: var(--c-color-positive); } .check-item.warn .ic { background: var(--c-color-reminder-bg); color: var(--c-color-reminder); } .check-item.fail .ic { background: var(--c-color-negative-bg); color: var(--c-color-negative); } .check-item .txt { color: var(--c-color-text-primary); font-size: var(--c-font-size-100); flex: 1; } .check-item .txt b { font-weight: var(--c-font-weight-600); } .check-item .txt .det { color: var(--c-color-text-secondary); font-size: var(--c-font-size-75); display: block; margin-top: 2px; } .check-item .meta { color: var(--c-color-text-secondary); font-family: var(--c-font-family-mono); font-size: var(--c-font-size-75); font-variant-numeric: tabular-nums; } /* Calculator card */ .calc-card { background: var(--c-color-background-1); border: var(--c-border-width-100) solid var(--c-color-gray-200); border-radius: var(--c-border-radius-200); padding: var(--c-space-250); } .calc-card .calc-row { display: flex; align-items: center; justify-content: space-between; gap: var(--c-space-200); padding: var(--c-space-150) 0; border-bottom: var(--c-border-width-100) solid var(--c-color-gray-200); } .calc-card .calc-row:last-child { border-bottom: none; padding-bottom: 0; } .calc-card .calc-row:first-child { padding-top: 0; } .calc-card .calc-row .k { color: var(--c-color-text-secondary); font-size: var(--c-font-size-100); } .calc-card .calc-row .v { color: var(--c-color-text-primary); font-weight: var(--c-font-weight-700); font-family: var(--c-font-family-mono); font-variant-numeric: tabular-nums; font-size: var(--c-font-size-200); } .calc-card .calc-row .v.pos { color: var(--c-color-positive); } .calc-card .calc-row .v.big { font-size: var(--c-font-size-600); } /* Correlation list */ .corr-list { display: flex; flex-direction: column; gap: var(--c-space-100); } .corr-row { display: grid; grid-template-columns: 180px 1fr 60px; align-items: center; gap: var(--c-space-150); } .corr-row .who { display: flex; align-items: center; gap: var(--c-space-100); font-size: var(--c-font-size-75); } .corr-row .who .av { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 9px; } .corr-row .who .nm { color: var(--c-color-text-primary); font-family: var(--c-font-family-mono); } .corr-row .track { height: 6px; background: var(--c-color-surface-2); border-radius: var(--c-border-radius-50); position: relative; overflow: hidden; } .corr-row .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--c-color-blue-500); } .corr-row .fill.high { background: var(--c-color-reminder); } .corr-row .fill.danger { background: var(--c-color-negative); } .corr-row .v { color: var(--c-color-text-primary); font-family: var(--c-font-family-mono); font-variant-numeric: tabular-nums; text-align: right; font-size: var(--c-font-size-75); font-weight: var(--c-font-weight-600); } /* ============================================================ COMPARE MODE EXTENSIONS ============================================================ */ .cmp-head { display: grid; grid-template-columns: 1fr 80px 1fr; align-items: center; padding: var(--c-space-300); background: var(--c-color-background-1); border-bottom: var(--c-border-width-100) solid var(--c-color-gray-200); } .cmp-head .vs { font-family: var(--c-font-family-mono); font-size: var(--c-font-size-300); font-weight: var(--c-font-weight-700); text-align: center; color: var(--c-color-text-caption); letter-spacing: 0.06em; } .cmp-head .side { display: flex; align-items: center; gap: var(--c-space-200); } .cmp-head .side.right { justify-content: flex-end; flex-direction: row-reverse; text-align: right; } .cmp-head .side .avatar { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; } .cmp-head .side .info .name { font-size: var(--c-font-size-300); font-weight: var(--c-font-weight-700); color: var(--c-color-text-primary); } .cmp-head .side .info .addr { font-family: var(--c-font-family-mono); font-size: var(--c-font-size-50); color: var(--c-color-text-caption); margin-top: 2px; } .cmp-table { width: 100%; border-collapse: collapse; background: var(--c-color-background-1); } .cmp-table tr { border-bottom: var(--c-border-width-100) solid var(--c-color-gray-200); } .cmp-table tr:last-child { border-bottom: none; } .cmp-table tr.is-section td { background: var(--c-color-surface-1); padding: var(--c-space-100) var(--c-space-200); font-size: var(--c-font-size-75); color: var(--c-color-text-secondary); font-weight: var(--c-font-weight-600); text-transform: uppercase; letter-spacing: 0.06em; } .cmp-table td { padding: var(--c-space-200); font-size: var(--c-font-size-100); vertical-align: middle; } .cmp-table .col-a, .cmp-table .col-b { width: 40%; font-family: var(--c-font-family-mono); font-variant-numeric: tabular-nums; font-weight: var(--c-font-weight-600); font-size: var(--c-font-size-200); } .cmp-table .col-a { text-align: right; color: var(--c-color-text-primary); } .cmp-table .col-b { text-align: left; color: var(--c-color-text-primary); } .cmp-table .col-key { width: 20%; text-align: center; color: var(--c-color-text-secondary); font-size: var(--c-font-size-75); text-transform: uppercase; letter-spacing: 0.04em; font-weight: var(--c-font-weight-500); } .cmp-table .winner { color: var(--c-color-positive); font-weight: var(--c-font-weight-700); } .cmp-table .winner::before { content: '◆ '; } /* Legend chip */ .legend { display: inline-flex; align-items: center; gap: var(--c-space-100); font-size: var(--c-font-size-75); color: var(--c-color-text-secondary); } .legend .swatch { width: 12px; height: 12px; border-radius: 2px; } /* ============================================================ EMPTY / WARNING STATES ============================================================ */ .empty-state { padding: 64px 32px; text-align: center; background: var(--c-color-background-1); border: var(--c-border-width-100) dashed var(--c-color-gray-200); border-radius: var(--c-border-radius-200); display: flex; flex-direction: column; align-items: center; gap: var(--c-space-150); } .empty-state .ic { font-size: 36px; opacity: 0.6; } .empty-state .ttl { font-size: var(--c-font-size-300); font-weight: var(--c-font-weight-700); color: var(--c-color-text-primary); } .empty-state .desc { font-size: var(--c-font-size-100); color: var(--c-color-text-secondary); max-width: 480px; } .warn-callout { display: flex; align-items: flex-start; gap: var(--c-space-200); padding: var(--c-space-250); background: var(--c-color-reminder-bg); border: var(--c-border-width-100) solid var(--c-color-reminder); border-radius: var(--c-border-radius-200); } .warn-callout.fail { background: var(--c-color-negative-bg); border-color: var(--c-color-negative); } .warn-callout .ic { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--c-color-reminder); color: var(--c-color-background-2); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; } .warn-callout.fail .ic { background: var(--c-color-negative); color: #fff; } .warn-callout .body .ttl { font-size: var(--c-font-size-200); font-weight: var(--c-font-weight-700); color: var(--c-color-reminder); margin-bottom: 4px; } .warn-callout.fail .body .ttl { color: var(--c-color-negative); } .warn-callout .body .desc { font-size: var(--c-font-size-100); color: var(--c-color-text-primary); } .warn-callout .actions { margin-left: auto; } /* ============================================================ DCA / SIZE CLASSIFICATION CHIPS ============================================================ */ .dca-chip { display: inline-flex; align-items: center; gap: var(--c-space-50); padding: 2px var(--c-space-100); font-family: var(--c-font-family-sans); font-size: var(--c-font-size-50); font-weight: var(--c-font-weight-600); border-radius: var(--c-border-radius-50); line-height: 1.4; white-space: nowrap; text-transform: none; letter-spacing: 0; } .dca-chip.pure { background: var(--c-color-green-800); color: var(--c-color-green-300); } .dca-chip.light { background: var(--c-color-blue-800); color: var(--c-color-blue-300); } .dca-chip.heavy { background: var(--c-color-beige-800); color: var(--c-color-beige-500); } .dca-chip.grid { background: var(--c-color-red-800); color: var(--c-color-red-400); } /* DCA detail panel inside trader card */ .dca-panel { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--c-space-200); margin-top: var(--c-space-200); } .dca-panel .stat { background: var(--c-color-surface-1); border: 1px solid var(--c-color-gray-200); border-radius: var(--c-border-radius-100); padding: var(--c-space-150) var(--c-space-200); } .dca-panel .stat .k { font-size: var(--c-font-size-50); color: var(--c-color-text-secondary); text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--c-font-weight-500); margin-bottom: 4px; } .dca-panel .stat .v { font-family: var(--c-font-family-mono); font-size: var(--c-font-size-300); color: var(--c-color-text-primary); font-variant-numeric: tabular-nums; font-weight: var(--c-font-weight-700); line-height: 1.1; } .dca-panel .stat .v.warn { color: var(--c-color-reminder); } .dca-panel .stat .v.fail { color: var(--c-color-negative); } .dca-panel .stat .v.ok { color: var(--c-color-positive); } .dca-panel .stat .sub { font-size: var(--c-font-size-50); color: var(--c-color-text-caption); font-family: var(--c-font-family-mono); margin-top: 2px; } /* Inflation bar — visual indicator of max/median */ .inflation-bar { margin-top: var(--c-space-200); padding: var(--c-space-150) var(--c-space-200); background: var(--c-color-surface-1); border: 1px solid var(--c-color-gray-200); border-radius: var(--c-border-radius-100); } .inflation-bar .head { display: flex; justify-content: space-between; align-items: center; font-size: var(--c-font-size-75); color: var(--c-color-text-secondary); margin-bottom: var(--c-space-100); } .inflation-bar .head b { color: var(--c-color-text-primary); font-family: var(--c-font-family-mono); font-variant-numeric: tabular-nums; } .inflation-bar .track { position: relative; height: 12px; background: var(--c-color-surface-2); border-radius: var(--c-border-radius-50); overflow: hidden; } .inflation-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--c-color-positive); } .inflation-bar .fill.med { background: var(--c-color-reminder); } .inflation-bar .fill.high { background: var(--c-color-negative); } .inflation-bar .marks { display: flex; justify-content: space-between; font-family: var(--c-font-family-mono); font-size: var(--c-font-size-50); color: var(--c-color-text-caption); margin-top: 4px; } /* ============================================================ ICON SYSTEM (Lucide outline, inline SVG sprite) Source sprite: design-system/icons.svg Usage: Decorative -> aria-hidden="true". Semantic -> role="img" + aria-label. ============================================================ */ .vc-ic { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; flex-shrink: 0; stroke-width: 1.75; overflow: visible; } /* Size modifiers (resolve to em, scale with parent font-size) */ .vc-ic--sm { width: 0.875em; height: 0.875em; stroke-width: 2; } .vc-ic--md { width: 1em; height: 1em; stroke-width: 1.75; } .vc-ic--lg { width: 1.25em; height: 1.25em; stroke-width: 1.5; } .vc-ic--xl { width: 1.5em; height: 1.5em; stroke-width: 1.5; } .vc-ic--2x { width: 2em; height: 2em; stroke-width: 1.25; } /* Semantic color modifiers (bind to DS tokens, override currentColor inheritance) */ .vc-ic--positive { color: var(--c-color-positive); } .vc-ic--negative { color: var(--c-color-negative); } .vc-ic--reminder { color: var(--c-color-reminder); } .vc-ic--official { color: var(--c-color-official); } .vc-ic--muted { color: var(--c-color-text-caption); } .vc-ic--primary { color: var(--c-color-text-primary); } /* Tab/badge inline-with-text alignment helper */ .vc-ic--lead { margin-right: 6px; } .vc-ic--trail { margin-left: 6px; } /* Status dots (replace 🟢🟡🔴) — semantic indicator, not icon */ .vc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; vertical-align: 0.05em; flex-shrink: 0; } .vc-dot--active { color: var(--c-color-positive); } .vc-dot--slowing { color: var(--c-color-reminder); } .vc-dot--dormant { color: var(--c-color-negative); } .vc-dot--muted { color: var(--c-color-gray-400); }