/* ═══════════════════════════════════════════════════
   PROMPT — Component Styles (components.css)
   Structural rules: layout, sizing, spacing, typography,
   @keyframes, @media responsive breakpoints.

   PUT HERE:  display, flex, grid, padding, margin, gap,
              width, height, border-radius, font-size,
              position, z-index, transform, animation,
              overflow, cursor, transition (timing only).
              Use var(--*) for colors so themes auto-switch.
   NOT HERE:  color, background, box-shadow, border-color,
              opacity, filter → dark-colors.css (if dark-only)
              or style.css (if light-mode default).
   RULE:      body.dark selectors ARE allowed here for
              structural-only dark overrides (e.g. display:none).
   ═══════════════════════════════════════════════════ */

body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background:
    radial-gradient(ellipse 900px 600px at 80% -5%, rgba(255,180,0,0.03), transparent 60%),
    radial-gradient(ellipse 700px 500px at 5% 90%, rgba(255,180,0,0.02), transparent 60%); }

a { text-decoration: none; }

a.sb-item:hover { opacity: 1; }

a:focus-visible { outline: none; }

code { background: var(--gray-100); padding: 2px 6px; border-radius: var(--radius-xs); font-size: 12px; font-family: var(--font-mono); }

.container { max-width: 1400px; margin: 0 auto; padding: var(--sp-5) var(--sp-6); }

@media (max-width: 768px) {
  .container { padding: var(--sp-4); }
}

header { position: sticky; top: 0; z-index: 100; margin-bottom: var(--sp-5); }

header::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--bg); border-bottom: 1px solid var(--border); z-index: -1; transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }

header.scrolled::before {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
  border-bottom-color: transparent;
}

.header-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); /* Identical to .container — guarantees pixel-perfect alignment */
  max-width: 1400px; margin: 0 auto; padding: var(--sp-4) var(--sp-6); transition: padding-top 0.3s ease, padding-bottom 0.3s ease; }

header.scrolled .header-inner { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }

header h1 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }

@media (max-width: 768px) {
  .header-inner { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}

.card, .stat-card, .eco-card, .g-card, .pipeline-card { background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius); transition: border-color 0.18s ease, box-shadow 0.18s ease; }

.card:hover, .stat-card:hover, .eco-card:hover, .g-card:hover { box-shadow: 0 4px 16px var(--hover-subtle); }

.section { margin-bottom: var(--sp-6); }

.section h2, h2 { font-size: 16px; font-weight: 700; margin-bottom: var(--sp-4); letter-spacing: -0.01em; text-transform: none; }

table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-card); font-size: 13px; }

th { text-align: left; padding: var(--sp-3); font-size: 12px; background: var(--gray-50); border-bottom: 1px solid var(--border); font-weight: 500; white-space: nowrap; position: sticky; top: 0; z-index: 10; }

td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--gray-100); white-space: nowrap; }

tr:last-child td { border-bottom: none; }

tr { transition: background 0.1s; }

tr:hover td { background: var(--hover-bg); }

.positive { font-weight: 600; }

.negative { font-weight: 600; }

.symbol { font-weight: 500; text-transform: uppercase; font-size: 12px; margin-left: 4px; }

.rank { font-size: 13px; }

.chain-cell { position: relative; white-space: nowrap; }

.chain-primary { font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }

.chain-primary img { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; }

.chain-more { font-size: 11px; margin-left: 2px; cursor: pointer; font-weight: 600; }

.chain-dropdown { display: none; position: fixed; z-index: 9999; background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: var(--sp-1) 0; min-width: 180px; max-height: 240px; overflow-y: auto; }

.chain-dropdown-item { padding: 6px var(--sp-3); font-size: 13px; white-space: nowrap; transition: background 0.1s; display: flex; align-items: center; gap: 6px; }

.chain-dropdown-item img { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; }

.chain-dropdown-item:hover { background: var(--hover-bg); }

.chain-dropdown-item:first-child { font-weight: 600; }

.socials { display: flex; gap: 2px; align-items: center; }

.social-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-xs); transition: color 0.15s, background 0.15s; }

.social-icon:hover { background: var(--gray-100); }

.social-icon svg { width: 14px; height: 14px; }

.exchange-cell { position: relative; }

.exchange-primary { font-size: 12px; font-weight: 500; }

.exchange-more { font-size: 11px; margin-left: 2px; cursor: pointer; font-weight: 600; }

.exchange-dropdown { display: none; position: fixed; z-index: 9999; background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: var(--sp-1) 0; min-width: 160px; }

.exchange-dropdown-item { padding: 6px var(--sp-3); font-size: 13px; white-space: nowrap; transition: background 0.1s; }

.exchange-dropdown-item:hover { background: var(--hover-bg); }

.exchange-dropdown-item:first-child { font-weight: 600; }

.tag { display: inline-flex; align-items: center; background: var(--gray-100); padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 500; margin: 1px 2px; white-space: nowrap; line-height: 1.5; letter-spacing: 0; transition: background 0.15s, color 0.15s; border: none; }

.tag:hover { background: var(--gray-200); }

.tag-more { cursor: pointer; }

.narrative-cell { position: relative; display: inline; }

.narrative-dropdown { display: none; position: fixed; z-index: 9999; background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: var(--sp-1) 0; min-width: 200px; max-height: 240px; overflow-y: auto; }

.narrative-dropdown-item { padding: 6px var(--sp-3); font-size: 11px; white-space: nowrap; transition: background 0.1s; }

.narrative-dropdown-item:hover { background: var(--hover-bg); }

.links-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.link-item { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border-card); padding: 8px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; transition: border-color 0.18s ease, box-shadow 0.18s ease; }

.link-item:hover { box-shadow: 0 4px 16px var(--hover-subtle); opacity: 1; }

.token-header { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); flex-wrap: wrap; }

.token-header h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }

.token-header .symbol-badge { background: var(--gray-100); padding: 3px 10px; border-radius: var(--radius-full); font-size: 12px; font-weight: 600; text-transform: uppercase; }

.chart-container { background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius); padding: var(--sp-5); margin-bottom: var(--sp-5); height: 400px; }

@media (max-width: 768px) {
  .chart-container { padding: var(--sp-3); height: 300px; }
}

.back-link:hover { opacity: 1; }

button, .btn { font-family: var(--font-body); cursor: pointer; transition: background 0.18s, color 0.15s, border-color 0.18s, transform 0.1s; }

button:active, .btn:active { transform: translateY(0.5px); }

button:focus-visible, .btn:focus-visible { outline: none; }

.btn-primary, button[type="submit"] { padding: 7px 13px; border: 1px solid transparent; border-radius: 8px; background: var(--brand-amber); font-size: 12px; font-weight: 600; }

.btn-primary::after, button[type="submit"]::after { content: "→"; margin-left: 3px; display: inline-block; transform: translateX(0); font-weight: 500; transition: transform 0.18s cubic-bezier(.16,1,.3,1); }

.btn-primary:hover::after, button[type="submit"]:hover::after { transform: translateX(3px); }

.btn-primary:hover, button[type="submit"]:hover { background: rgba(255,196,51,0.95); }

.rf-btn-tiny { padding: 7px 13px; border-radius: 8px; font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; line-height: 1.2; display: inline-flex; align-items: center; gap: 6px; transition: background 0.18s, color 0.15s, border-color 0.18s, transform 0.1s; font-family: var(--font-body); border: 1px solid transparent; white-space: nowrap; letter-spacing: -0.005em; }

.rf-btn-tiny:active { transform: translateY(0.5px); }

.rf-btn-tiny:focus-visible { outline: none; }

.rf-btn-tiny.is-xs { padding: 4px 10px; font-size: 11px; }

.rf-btn-tiny.is-sm { padding: 5px 12px; font-size: 11px; }

.rf-btn-tiny.is-md { padding: 9px 16px; font-size: 13px; }

.rf-btn-tiny:not(.no-arrow)::after { content: "→"; margin-left: 2px; transform: translateX(0); display: inline-block; transition: transform 0.18s cubic-bezier(.16,1,.3,1); font-weight: 500; }

.rf-btn-tiny:not(.no-arrow):hover::after { transform: translateX(3px); }

.rf-btn-tiny-solid { background: var(--brand-amber); }

.rf-btn-tiny-solid:hover { background: rgba(255,196,51,0.95); }

.rf-btn-tiny-ghost { background: var(--surface); border: 1px solid var(--gray-200); }

.rf-btn-tiny-ghost:hover { background: var(--gray-50); }

.rf-dd { position: relative; }

.rf-dd-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px 8px 16px; border-radius: 10px;
  border: 1px solid var(--gray-200);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%);
  color: var(--brand-amber-strong); font-size: 12px; font-weight: 600;
  font-family: var(--font-body); letter-spacing: -0.005em;
  cursor: pointer; white-space: nowrap;
  transition: background 0.18s, color 0.15s, border-color 0.18s;
}

.rf-dd-trigger:hover { background: var(--white-90); }

.rf-dd.is-open .rf-dd-trigger { background: rgba(255,255,255,0.96); }

.rf-dd-caret { transition: transform 0.2s cubic-bezier(.16,1,.3,1); }

.rf-dd.is-open .rf-dd-caret { transform: rotate(180deg); }

.rf-dd-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 280px; background: var(--surface);
  border: 1px solid var(--border-card); border-radius: 14px;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 0; max-height: 280px; overflow: hidden; z-index: 50;
  opacity: 0; visibility: hidden; transform: translateY(-4px) scale(0.98);
  transition: opacity 0.18s, transform 0.2s cubic-bezier(.16,1,.3,1), visibility 0s linear 0.2s;
  scrollbar-width: thin;
}

.rf-dd.is-open .rf-dd-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition: opacity 0.18s, transform 0.22s cubic-bezier(.16,1,.3,1), visibility 0s linear 0s; }

.rf-dd-items { overflow-y: auto; max-height: 300px; padding: 6px; }

.rf-dd-panel, .rf-dd-items { scrollbar-width: thin; }

.rf-dd-panel::-webkit-scrollbar, .rf-dd-items::-webkit-scrollbar { width: 5px; }

.rf-dd-panel::-webkit-scrollbar-track, .rf-dd-items::-webkit-scrollbar-track { background: transparent; margin-block: 10px; }

.rf-dd-panel::-webkit-scrollbar-thumb, .rf-dd-items::-webkit-scrollbar-thumb { background: var(--hover-strong); border-radius: 999px; }

.rf-dd-panel:hover::-webkit-scrollbar-thumb, .rf-dd-items:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.16); }

.rf-dd-section { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; padding: 8px 10px 4px; }

.rf-dd-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; cursor: pointer; transition: background 0.15s; }

.rf-dd-item:hover { background: var(--hover-bg); }

.rf-dd-item.is-selected { background: var(--brand-amber-bg); }

.rf-dd-item-logo { width: 24px; height: 24px; border-radius: 50%; background: var(--gray-100); flex-shrink: 0; box-shadow: 0 0 0 1px var(--gray-100); }

.rf-dd-item-text { flex: 1; min-width: 0; }

.rf-dd-name { font-size: 12.5px; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }

.rf-dd-meta { font-family: var(--font-mono); font-size: 9.5px; margin-top: 1px; display: flex; align-items: center; gap: 5px; }

.rf-dd-item-side { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; }

input[type="number"], input[type="text"], input[type="date"],
input[type="datetime-local"], select, textarea { font-family: var(--font-body); padding: 8px 12px; border: 1px solid var(--border-card); border-radius: var(--radius-sm); font-size: 13px; background: var(--surface); transition: border-color 0.15s; outline: none; }

select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a1a1aa' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }

input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; appearance: none; -webkit-appearance: none; border: 1.5px solid var(--gray-300); border-radius: 5px; background: transparent; position: relative; transition: border-color 0.15s; }

input[type="checkbox"]:checked { background: transparent; }

input[type="checkbox"]:checked::after { content: ""; position: absolute; inset: 1px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23B07A00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.5L5 9l4.5-6'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; }

.info-box { padding: var(--sp-2) var(--sp-3); background: var(--gray-50); border: 1px solid var(--border-card); border-radius: var(--radius-sm); font-size: 12px; }

::-webkit-scrollbar { width: 5px; height: 5px; }

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb { background: var(--hover-strong); border-radius: 999px; }

::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.16); }

details summary { cursor: pointer; user-select: none; font-weight: 600; }

details summary:hover { opacity: 0.7; }

::selection { background: rgba(0, 0, 0, 0.08); }

.font-mono { font-family: var(--font-mono); }

.filter-bar { display: flex; gap: 10px; align-items: center; margin-bottom: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius); }

.filter-bar label { font-size: 12px; font-weight: 500; }

.filter-count { font-size: 12px; margin-left: auto; font-weight: 500; }

@media (max-width: 768px) {
  .filter-bar { padding: var(--sp-3); gap: 6px; }
  .filter-bar input[type="text"] { width: 100%; }
}

.pipeline-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }

@media (max-width: 768px) { .pipeline-grid { grid-template-columns: 1fr; } }

.pipeline-card { padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }

.pipeline-card .pipe-header { display: flex; align-items: center; justify-content: space-between; }

.pipeline-card .pipe-label { font-weight: 600; font-size: 14px; }

.pipeline-card .pipe-desc { font-size: 12px; line-height: 1.5; }

.pipeline-card .pipe-status { font-size: 12px; min-height: 16px; }

.pipeline-card .pipe-status.running { font-weight: 600; }

.pipe-btn { padding: 6px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; border: 1px solid var(--border-card); background: var(--surface); cursor: pointer; transition: background 0.15s, border-color 0.15s; }

.pipe-btn:hover { background: var(--gray-50); }

.pipe-btn.running { background: var(--amber-subtle); cursor: default; }

.pr-card-wrap { position:relative; background:var(--surface); border:1px solid var(--border-card); border-radius:var(--radius); overflow:hidden; isolation:isolate; }

.pr-scan-grid { position:absolute; inset:0; width:100%; height:100%; opacity:0.85; }

.pr-overlay { position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0.4),var(--white-85) 60%,var(--white-92));backdrop-filter:blur(0.5px); }

.pr-card-head { position:relative; z-index:1; padding:10px 16px; border-bottom:1px solid var(--gray-100); background:var(--surface); display:flex; align-items:center; }

.pr-status { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:8.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:2px 8px; background:var(--gray-100); border-radius:999px; line-height:1.5; }

.pr-pulse-dot { width:5px; height:5px; border-radius:50%; background:var(--brand-amber); animation:prDotPulse 1.8s ease-in-out infinite; }

@keyframes prDotPulse { 0%,100% { box-shadow:0 0 0 0 rgba(255,180,0,0.55); } 50% { box-shadow:0 0 0 4px rgba(255,180,0,0); } }

@keyframes prAiPulse { 0% { transform:scale(1);opacity:0.55; } 80%,100% { transform:scale(1.7);opacity:0; } }

.pr-stats { display:inline-flex; align-items:center; gap:18px; padding:10px 16px; background:var(--surface); border:1px solid var(--gray-200); border-radius:999px; }

.pr-stat { display:flex; flex-direction:column; align-items:center; gap:3px; }

.pr-stat-label { font-family:var(--font-mono); font-size:8.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; }

@keyframes prSkel { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }

@media (max-width:600px) { .pr-stats { display:flex; flex-direction:row; gap:8px; padding:6px 10px; } .pr-stat-label { font-size:7px; } .pr-stat-num { font-size:11px; } .pr-stat-divider { height:16px; } }

.evt-pulse { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--brand-amber); box-shadow: 0 0 0 2.5px var(--surface), 0 0 10px rgba(255,180,0,0.55); transform: translate(-50%, -50%); }

.evt-pulse::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--brand-amber); opacity: 0; animation: evtPulse 2.4s cubic-bezier(.16,1,.3,1) infinite; }

@keyframes evtPulse {
  0% { transform: scale(1); opacity: 0.6; }
  80%,100% { transform: scale(2.6); opacity: 0; }
}

.evt-guide { position: absolute; width: 1px; height: 100%; background: repeating-linear-gradient(180deg, rgba(255,180,0,0.6) 0 4px, transparent 4px 7px); transform: translateX(-50%); }

.evt-guide-chip { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--surface); border: 1px solid rgba(255,180,0,0.4); padding: 2px 6px; border-radius: 4px; white-space: nowrap; }

.evt-phase-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-amber); box-shadow: 0 0 0 2px var(--surface); transform: translate(-50%, -50%); z-index: 2; }

.evt-phase-stem { position: absolute; width: 1px; background: var(--gray-300); bottom: 50%; height: 24px; transform: translateX(-50%); }

.evt-phase-chip { position: absolute; transform: translate(-50%, -100%); margin-top: -2px; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--surface); border: 1px solid var(--gray-200); padding: 2px 8px; border-radius: 999px; white-space: nowrap; line-height: 1.4; }

.evt-num-mark { position: absolute; width: 17px; height: 17px; border-radius: 50%; background: var(--brand-amber); font-family: var(--font-mono); font-size: 9.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--surface); transform: translate(-50%, -50%); letter-spacing: -0.03em; }

.evt-legend { display: flex; gap: 14px; margin-top: 10px; font-family: var(--font-body); font-size: 10.5px; flex-wrap: wrap; }

.evt-legend-item { display: inline-flex; align-items: center; gap: 5px; }

.evt-legend-n { width: 14px; height: 14px; border-radius: 50%; background: var(--brand-amber); font-family: var(--font-mono); font-size: 8.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }

.evt-band { position: absolute; top: 0; bottom: 0; background: rgba(255,180,0,0.1); border-left: 1px dashed rgba(255,180,0,0.5); border-right: 1px dashed rgba(255,180,0,0.5); }

.evt-band-tag { position: absolute; transform: translateX(-50%); font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--surface); border: 1px solid rgba(255,180,0,0.4); padding: 2px 8px; border-radius: 4px; white-space: nowrap; z-index: 7; }

.date-pick-input { width:100%; padding:7px 10px; height:34px; border:1px solid var(--border-card); border-radius:var(--radius-sm); background:var(--surface); outline:none; font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:0.02em; cursor:pointer; transition:border-color 0.15s,box-shadow 0.15s; color-scheme:light; }

.date-pick-input:focus { box-shadow:0 0 0 3px var(--brand-amber-10); }

.date-pick-input::-webkit-calendar-picker-indicator { filter:opacity(0.4); cursor:pointer; padding:2px; border-radius:4px; transition:filter 0.15s,background 0.15s; }

.date-pick-input::-webkit-calendar-picker-indicator:hover { filter:opacity(0.7); background:var(--brand-amber-bg); }

.date-pick-input::-webkit-datetime-edit { font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:0.02em; }

.date-pick-input::-webkit-datetime-edit-fields-wrapper { padding:0; }

.date-pick-input::-webkit-datetime-edit-day-field,
.date-pick-input::-webkit-datetime-edit-month-field,
.date-pick-input::-webkit-datetime-edit-year-field,
.date-pick-input::-webkit-datetime-edit-hour-field,
.date-pick-input::-webkit-datetime-edit-minute-field,
.date-pick-input::-webkit-datetime-edit-ampm-field { padding:1px 2px; border-radius:3px; transition:background 0.1s,color 0.1s; }

.date-pick-input::-webkit-datetime-edit-day-field:focus,
.date-pick-input::-webkit-datetime-edit-month-field:focus,
.date-pick-input::-webkit-datetime-edit-year-field:focus,
.date-pick-input::-webkit-datetime-edit-hour-field:focus,
.date-pick-input::-webkit-datetime-edit-minute-field:focus,
.date-pick-input::-webkit-datetime-edit-ampm-field:focus { background:var(--brand-amber-bg); outline:none; }

.evt-hot { position: relative; }

.evt-hot-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-amber); box-shadow: 0 0 0 2px var(--surface); transform: translate(-50%, -50%); cursor: help; }

.evt-hot-pop { position: absolute; transform: translate(-50%, calc(-100% - 10px)); background: var(--surface); border: 1px solid var(--gray-200); border-radius: 8px; box-shadow: 0 6px 20px var(--overlay-heavy); padding: 8px 10px; min-width: 140px; pointer-events: none; opacity: 0; transition: opacity 0.18s; }

.evt-hot:hover .evt-hot-pop, .evt-hot.is-shown .evt-hot-pop { opacity: 1; }

.evt-hot-pop-title { font-size: 11.5px; font-weight: 600; letter-spacing: -0.005em; margin-bottom: 2px; }

.evt-hot-pop-meta { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.02em; }

.evt-hot-pop-delta { display: inline-block; margin-left: 4px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; }

.evt-hot-pop::after { content: ""; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 8px; height: 8px; background: var(--surface); border-right: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); }

@media (max-width: 768px) {
  .stat-card { min-width: unset; padding: var(--sp-3) var(--sp-4); }
}

@media (max-width: 640px) {
  .container { padding: var(--sp-3) var(--sp-4); }

  /* Tables: horizontal scroll */
  table { font-size: 11px; }
  th, td { padding: 6px 8px; }
  .table-scroll { -webkit-overflow-scrolling: touch; }

  /* Inputs: prevent iOS zoom (must be ≥16px) */
  input, select, textarea { font-size: 16px; }

  /* Touch targets: minimum 44px */
  button, a.rf-btn-tiny, .rf-dd-trigger { min-height: 44px; }
}

@media (max-width: 480px) {
  .stats-bar { flex-direction: column; }
  .stat-card { min-width: unset; }

  .container { padding: var(--sp-2) var(--sp-3); }

  h2 { font-size: 16px; }
}

html { overflow-y: scroll; }

.chart-controls { display:flex; gap:4px; margin-bottom:8px; align-items:center; }

.chart-ctrl-btn { font-size:10.5px; padding:5px 12px; border-radius:6px; border:1px solid transparent; background:transparent; cursor:pointer; font-weight:600; letter-spacing:-0.005em; transition: background 0.18s ease, color 0.15s ease, box-shadow 0.18s ease, transform 0.1s ease; position:relative; }

/* inactive-tab hover: subtle neutral lift only — no amber inset (that's the
   ACTIVE indicator; reusing it here made a hovered inactive tab look selected). */
.chart-ctrl-btn:hover:not(.active) { background:var(--surface); box-shadow:0 1px 3px rgba(14,14,14,0.06); }

.chart-ctrl-btn.active { background:var(--surface); box-shadow:0 1px 3px rgba(14,14,14,0.06), 0 0 0 1px var(--brand-amber-18) inset; }

.chart-ctrl-btn.active:hover { background:var(--surface); box-shadow:0 1px 3px rgba(14,14,14,0.06), 0 0 0 1px rgba(255,180,0,0.28) inset; }

.chart-ctrl-btn:active { transform:translateY(0.5px); }

.chart-ctrl-btn:disabled, .chart-ctrl-btn[disabled] { opacity:0.4; cursor:not-allowed; }

.chart-ctrl-btn[disabled]:hover { background:transparent; box-shadow:none; }

.chart-ctrl-label { font-size:10px; text-transform:uppercase; letter-spacing:0.04em; margin-right:4px; font-weight:600; }

.chart-ctrl-sep { width:1px; height:14px; background:var(--border); margin:0 6px; }

.tv-chart { width:100%; height:400px; border-radius:var(--radius); overflow:hidden; margin-top:8px; border:1px solid var(--hover-medium); background:rgba(255,255,255,0.45); box-shadow:0 2px 8px var(--hover-subtle), inset 0 1px 0 var(--white-80); }

.chart-label-layer { position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:4; }

.chart-leaders-svg { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; overflow:visible; }

.chart-dot { position:absolute; width:10px; height:10px; border-radius:50%; transform:translate(-50%,-50%); pointer-events:auto; cursor:default; box-shadow: 0 0 0 2px var(--surface), 0 0 4px var(--overlay-heavy); z-index: 5; }

.chart-dot-end { position:absolute; width:6px; height:6px; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; border: 2px solid; box-sizing: content-box; background: var(--surface); box-shadow: 0 0 4px var(--overlay-heavy); z-index: 5; }

.chart-pill { position:absolute; transform:translate(-50%,0); padding: 2px 7px; border-radius:var(--radius-xs); font-size: 10px; font-weight: 600; line-height: 1.4; font-family: inherit; letter-spacing: 0.01em; white-space: nowrap; pointer-events: auto; cursor: default; transition: transform 0.15s ease; }

.chart-pill:hover { transform: translate(-50%, -1px); z-index: 20; }

.pill-neutral { background: #f4f4f5; border: 1px solid var(--gray-200); }

.pill-up { background: #e7f6ee; border: 1px solid rgba(16,185,129,0.2); }

.pill-down { background: #fdeaea; border: 1px solid rgba(239,68,68,0.15); }

.pill-pin { background: var(--pill-bg); border: 1px solid var(--pill-border); box-shadow: 0 1px 3px var(--pill-shadow, var(--hover-subtle)); }

.chart-pill-tooltip { display: none; position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); background: var(--surface); border: 1px solid var(--gray-200); border-radius:var(--radius); padding: 8px 11px; font-size: 11px; font-weight: 400; line-height: 1.5; white-space: normal; width: max-content; max-width: 260px; box-shadow: var(--shadow-lg); pointer-events: none; z-index: 30; }

.chart-pill:hover .chart-pill-tooltip,
    .chart-dot:hover .chart-pill-tooltip { display: block; }

.chart-dot:hover { transform: translate(-50%,-50%) scale(1.5); z-index: 20; }

.chart-pill-tooltip .tt-title { font-weight: 700; margin-bottom: 2px; font-size: 11px; }

.chart-pill-tooltip .tt-desc { font-size: 10.5px; line-height: 1.45; }

.chart-pill-tooltip .tt-meta { font-size: 10px; margin-top: 4px; display:flex; gap:4px; flex-wrap:wrap; }

.chart-pill-tooltip .tt-meta span { white-space:nowrap; padding:1px 5px; background: var(--gray-50); border-radius:var(--radius-xs); border: 1px solid var(--gray-100); }

@keyframes tickUp { 0%{color:var(--green)} 70%{color:var(--green)} 100%{color:var(--text)} }

@keyframes tickDown { 0%{color:var(--red)} 70%{color:var(--red)} 100%{color:var(--text)} }

.tick-up { animation: tickUp 2s ease-out; }

.tick-down { animation: tickDown 2s ease-out; }

.section { margin-top: 28px; }

.section h2 { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 14px; padding: 0 0 0 12px; border: none; font-family: var(--font-mono); display: flex; align-items: center; gap: 10px; scroll-margin-top: 64px; }

.section h2 .sec-num { font-weight: 400; }

.section h2 .sec-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-amber); flex-shrink: 0; }

.section h2 .sec-line { flex: 1; height: 1px; background: var(--border-card); }

.section h2 .sec-right { margin-left: auto; font-weight: 400; letter-spacing: 0.04em; font-size: 10px; text-transform: none; }

.stat-card { padding: var(--sp-4) var(--sp-5); flex: 1; min-width: 120px; background: var(--surface); border: 1px solid var(--border-card); border-radius:var(--radius-sm); transition: border-color 0.12s; }

.stat-card .label { font-size: 12px; font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; margin-bottom: 2px; }

.stat-card .value { font-size: 24px; margin-top: 2px; letter-spacing: -0.02em; line-height: 1.2; font-weight: 700; }

.stats-bar { gap: var(--sp-3); margin-bottom: var(--sp-4); display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.empty-state { padding: var(--sp-12) var(--sp-6); background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius); text-align: center; padding: var(--sp-6); border: 1px dashed var(--gray-200); border-radius:var(--radius); }

.empty-state h3 { font-size: 16px; margin-bottom: var(--sp-2); font-size: 14px; font-weight: 600; margin-bottom: var(--sp-1); }

@keyframes rfFadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes rfSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

@keyframes rfPopIn { 0% { opacity: 0; transform: translateY(8px) scale(0.985); } 100% { opacity: 1; transform: translateY(0) scale(1); } }

@keyframes rfBarGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@keyframes rfPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,180,0,0.35); } 70% { box-shadow: 0 0 0 8px rgba(255,180,0,0); } }

@keyframes rfSpark { 0%,100% { opacity: 0.8; } 50% { opacity: 0.4; } }

.su-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }

@media (max-width: 900px) { .su-grid { grid-template-columns: 1fr; } }

.rf-btn-tiny-solid { background: var(--brand-amber); }

.rf-btn-tiny-solid:hover { background: rgba(255,196,51,0.95); opacity: 1; }

.rf-btn-tiny-solid:active { background: rgba(255,180,0,0.8); }

.rf-btn-tiny-ghost { background: var(--surface); border: 1px solid var(--gray-200); }

.rf-btn-tiny-ghost:hover { background: var(--gray-50); opacity: 1; }

.rf-btn-tiny-ghost:active { background: var(--gray-100); }

.rf-btn-tiny-neutral { background: var(--gray-100); }

.rf-btn-tiny-neutral:hover { background: var(--gray-200); opacity: 1; }

.rf-btn-tiny-neutral:active { background: var(--gray-300); }

.rf-btn-tiny-quiet { background: transparent; padding: 7px 8px; }

.rf-btn-tiny-quiet:hover { background: var(--gray-100); opacity: 1; }

.rf-cat { font-family: var(--font-body); font-size: 10px; font-weight: 500; padding: 2px 9px; border-radius: 999px; border: none; letter-spacing: 0; white-space: nowrap; display: inline-flex; align-items: center; line-height: 1.5; }

.rf-validity-bar { flex: 1; height: 3px; background: var(--gray-100); border-radius: 999px; overflow: hidden; position: relative; }

.rf-validity-fill { height: 100%; border-radius: 999px; transform-origin: left center; animation: rfBarGrow 0.7s cubic-bezier(.16,1,.3,1) both; }

.rfpp-overlay {
      display: none; position: fixed; inset: 0; z-index: 1000;
      align-items: center; justify-content: center;
      background: rgba(14,14,14,0.45);
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      animation: rfFadeIn 0.2s ease-out;
      padding: 24px;
    }

.rfpp-overlay.open { display: flex; }

.rfpp { background: var(--surface); border-radius: 14px; box-shadow: 0 24px 80px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.6) inset; width: min(880px, 100%); max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; position: relative; animation: rfPopIn 0.28s cubic-bezier(.16,1,.3,1) both; }

.rfpp-close { position: absolute; top: 16px; right: 16px; z-index: 5; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--gray-100); background: var(--surface); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color 0.15s, border-color 0.15s, transform 0.15s, background 0.15s; }

.rfpp-close:hover { transform: rotate(90deg); }

.rfpp-close svg { width: 13px; height: 13px; }

.rfpp-head { padding: 28px 32px 18px; border-bottom: 1px solid var(--gray-100); flex-shrink: 0; }

.rfpp-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; background: var(--rfpp-accent-bg, rgba(255,180,0,0.1)); border-radius: 999px; margin-bottom: 10px; }

.rfpp-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: rfSpark 1.6s ease-in-out infinite; }

.rfpp-title { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 6px; }

.rfpp-sub { font-size: 12.5px; line-height: 1.5; max-width: 64ch; }

.rfpp-method-label::before { content: ""; width: 12px; height: 1px; background: var(--text-muted); }

.rfpp-body::-webkit-scrollbar { width: 5px; }

.rfpp-body::-webkit-scrollbar-thumb { background: var(--hover-strong); border-radius: 999px; }

.rfpp-body:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.16); }

.rfpp-section-label { position: sticky; top: -8px; z-index: 2; background: var(--surface); padding: 14px 0 10px; margin-top: -8px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; display: flex; align-items: center; gap: 8px; }

.rfpp-section-label::after { content: ""; flex: 1; height: 1px; background: var(--gray-100); }

.rfpp-row { display: grid; grid-template-columns: 168px 90px 1fr 40px; gap: 14px; align-items: center; padding: 11px 12px; border-radius: 8px; transition: background 0.15s ease; animation: rfSlideUp 0.32s cubic-bezier(.16,1,.3,1) both; }

.rfpp-row + .rfpp-row { border-top: 1px solid var(--gray-50); }

.rfpp-row:hover { background: var(--hover-bg); }

.rfpp-row .m-name { font-size: 12px; font-weight: 600; }

.rfpp-row .m-raw { font-family: var(--font-mono); font-size: 12px; font-weight: 700; }

.rfpp-row .m-ctx { font-size: 11px; line-height: 1.5; }

.rfpp-row .m-score { font-family: var(--font-mono); font-size: 13px; font-weight: 700; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--rfpp-accent-bg, rgba(255,180,0,0.1)); letter-spacing: -0.02em; }

.rfpp-row-utility { display: grid; grid-template-columns: 160px 80px 60px 1fr 64px 36px; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 8px; transition: background 0.15s ease; animation: rfSlideUp 0.32s cubic-bezier(.16,1,.3,1) both; }

.rfpp-row-utility + .rfpp-row-utility { border-top: 1px solid var(--gray-50); }

.rfpp-row-utility:hover { background: var(--hover-bg); }

.rfpp-row-utility .u-name { font-size: 12px; font-weight: 600; }

.rfpp-row-utility .u-cons { font-family: var(--font-mono); font-size: 12px; font-weight: 700; }

.rfpp-row-utility .u-ass { font-family: var(--font-mono); font-size: 10.5px; display: inline-flex; align-items: center; gap: 4px; }

.rfpp-row-utility .u-ctx { font-size: 11px; line-height: 1.5; }

.rfpp-row-comm { position: relative; padding: 14px 14px 14px 18px; border-radius: 10px; transition: background 0.18s ease, border-color 0.18s ease; animation: rfSlideUp 0.32s cubic-bezier(.16,1,.3,1) both; border: 1px solid transparent; }

.rfpp-row-comm + .rfpp-row-comm { margin-top: 4px; }

.rfpp-row-comm:hover { background: var(--hover-bg); }

.rfpp-row-comm::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cat-color, var(--rfpp-accent, var(--brand-amber))); opacity: 0.85; }

.rfpp-row-comm .c-head { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 12px; margin-bottom: 6px; }

.rfpp-row-comm .c-headL { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.rfpp-row-comm .c-name { font-size: 13px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; display: flex; align-items: center; gap: 4px; }

.c-tip { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 50%; font-size: 8px; font-weight: 700; background: var(--gray-100); cursor: default; flex-shrink: 0; line-height: 1; }

.c-tip:hover { background: var(--gray-200); }

.rfpp-row-comm .c-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 9.5px; }

.rfpp-row-comm .c-meta .sep { opacity: 0.4; }

.rfpp-row-comm .c-scoreBlock { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

.rfpp-row-comm .c-impact-pill { font-size: 9px; font-weight: 600; padding: 2px 8px; border-radius: 999px; text-align: center; letter-spacing: 0.02em; text-transform: capitalize; display: inline-flex; align-items: center; gap: 4px; line-height: 1.5; }

.rfpp-row-comm .c-impact-pill .deg { font-family: var(--font-mono); font-size: 8px; opacity: 0.7; letter-spacing: 0.04em; }

.rfpp-row-comm .c-body { display: grid; grid-template-columns: 156px 1fr; align-items: start; gap: 8px 16px; margin-top: 2px; }

.rfpp-row-comm .c-methodology { grid-column: 1 / -1; font-size: 10.5px; line-height: 1.5; padding: 8px 10px; margin-top: 4px; background: var(--gray-50); border-radius: 6px; border-left: 2px solid var(--gray-200); }

.rfpp-row-comm .c-method-label { font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-right: 8px; opacity: 0.7; }

.rfpp-row-comm .c-validity { display: flex; flex-direction: column; gap: 5px; }

.rfpp-row-comm .c-validity-row { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 8.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

.rfpp-row-comm .c-validity-row .pct { font-size: 10.5px; letter-spacing: -0.02em; text-transform: none; }

.rfpp-row-comm .c-validity .rf-validity-bar { height: 4px; width: 100%; flex: none; overflow: visible; }

.rfpp-row-comm .c-validity .rf-validity-fill { animation: none; transform: scaleX(1); }

.rfpp-row-comm .c-ctx { font-size: 11.5px; line-height: 1.55; }

.rfpp-row-comm .c-assess { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 9px; font-weight: 700; padding: 4px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--gray-200); text-decoration: none; margin-left: auto; flex-shrink: 0; opacity: 0; pointer-events: none; transition: opacity 0.18s, color 0.15s, background 0.15s, border-color 0.15s; letter-spacing: 0.04em; }

.rfpp-row-comm:hover .c-assess { opacity: 1; pointer-events: auto; }

.rfpp-row-comm .c-assess:hover { background: var(--brand-amber); }

.rfpp-section-redirect { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px; padding:10px 14px; border-radius:8px; background:var(--gray-50); border:1px solid var(--gray-100); text-decoration:none; transition:background 0.15s, border-color 0.15s; }

.rfpp-section-redirect:hover { background:var(--accent-subtle); }

.rfpp-section-redirect span:first-child { font-size:11px; font-weight:500; }

.rfpp-section-redirect-btn { font-family:var(--font-mono); font-size:10px; font-weight:700; white-space:nowrap; letter-spacing:0.02em; }

.rfpp-section-redirect:hover .rfpp-section-redirect-btn { text-decoration:underline; }

.rfpp-row-comm .c-score-badge { font-family: var(--font-mono); font-size: 14px; font-weight: 700; padding: 5px 10px; border-radius: 8px; min-width: 42px; text-align: center; background: var(--rfpp-accent-bg, var(--brand-amber-bg)); letter-spacing: -0.02em; }

.rfpp-footer { padding: 14px 32px; flex-shrink: 0; border-top: 1px solid var(--gray-100); background: var(--gray-50); display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.rfpp-footer .help { font-size: 11px; line-height: 1.4; display: flex; align-items: center; gap: 8px; }

.rfpp-footer .help::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-amber-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23B07C00' stroke-width='2.5'%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }

.rfpp-cta-row { display: flex; gap: 8px; }

.rfpp.va-financial,
    .rfpp.va-general { --rfpp-accent: var(--brand-amber); --rfpp-accent-bg: var(--brand-amber-bg); }

.rfpp.va-onchain { --rfpp-accent: #1d4ed8; --rfpp-accent-bg: rgba(59,130,246,0.1); }

.rfpp.va-social { --rfpp-accent: #6d28d9; --rfpp-accent-bg: rgba(139,92,246,0.1); }

.rfpp.va-utility { --rfpp-accent: var(--brand-amber); --rfpp-accent-bg: var(--brand-amber-bg); }

.rfpp.va-products { --rfpp-accent: var(--brand-amber); --rfpp-accent-bg: var(--brand-amber-bg); }

.rfpp.va-community { --rfpp-accent: var(--green); --rfpp-accent-bg: var(--green-bg); }

.rfpp .rfpp-eyebrow { background: var(--rfpp-accent-bg); }

.chart-ctrl-btn { transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s; }

.chart-ctrl-btn:active { transform: translateY(1px); }

.section > * { animation: rfFadeIn 0.4s ease-out both; }

.pillar-info-btn { transition: background 0.15s, color 0.15s, transform 0.1s; }

.pillar-info-btn:hover { transform: translateY(-0.5px); }

.pillar-info-btn:active { transform: translateY(0); }

.td-grid-2, .td-grid-3 { /* classes added to inline grids for responsive override */; }

.table-scroll { overflow-x: auto; border-radius: var(--radius); -webkit-overflow-scrolling: touch; overflow-x:auto; -webkit-overflow-scrolling:touch; }

.table-scroll table { min-width:600px; }

@media (max-width:768px) {
      .tv-chart { height:320px; }
      .chart-controls { flex-wrap:wrap; gap:3px; }
      .chart-ctrl-btn { padding:4px 8px; font-size:9.5px; }
      .chart-ctrl-sep { margin:0 3px; }

      /* Token header */
      .td-header { padding:16px; }
      .td-row1 { flex-wrap:wrap; gap:6px; }
      .td-row1 h1 { font-size:20px; }
      .td-social { display:none; }

      /* Price: stack vertically, MCap becomes horizontal chips */
      .td-price-row { flex-direction:column; gap:14px; }
      /* 2×2 grid — always balanced (auto-fit dropped to 3 cols at ~520px and
         orphaned the 4th metric on its own row). */
      .td-mcap-right { text-align:left; font-size:11px; line-height:1.4; display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; white-space:normal; }

      /* Pillar cards: 2 columns */
      .td-pillars { grid-template-columns:1fr 1fr; gap:10px; }
      .td-grid-2 { grid-template-columns:1fr 1fr; }
      .td-grid-3 { grid-template-columns:1fr 1fr; }

      /* Section headers with tabs: scroll horizontally */
      .section h2 { flex-wrap:wrap; gap:6px; }
      #val-tab-group { flex-wrap:wrap; gap:3px; }
      #supply-unlocks-section { flex-direction:column; align-items:flex-start; gap:8px; }
    }

@media (max-width:640px) {
            .section h2 { font-size:11px; }
      .chart-controls { gap:2px; }
      .chart-ctrl-btn { padding:5px 8px; font-size:9px; min-height:36px; }
      .chart-ctrl-label { font-size:8px; margin-right:2px; }
      .chart-ctrl-sep { display:none; }

      /* Token header */
      .td-header { padding:12px; }
      .td-row1 h1 { font-size:18px; }
      .td-row1 img { width:32px; height:32px; }
      #header-price { font-size:24px; }

      /* Chart */
      .tv-chart { height:240px; height:280px; }
      .td-chart-header { flex-direction:column; align-items:flex-start; gap:6px; }
      .td-chart-header > div { overflow-x:auto; width:100%; -webkit-overflow-scrolling:touch; }
      .chart-controls { flex-wrap:nowrap; }
      .sig-strip { height:48px; }
      .sig-strip-brand-sub { display:none; }
      .sig-strip-brand-sep { display:none; }
      #signal-timeline { height:16px; }
      #signal-markers { height:16px; }

      /* Pillar cards: single column */
      .td-pillars { grid-template-columns:1fr; }
      .td-grid-2 { grid-template-columns:1fr; }
      .td-grid-3 { grid-template-columns:1fr; }

      /* All complex grids stack */
      
      
      .su-grid { grid-template-columns:1fr; }

      /* Popup full-width */
      .pillar-popup-overlay .rfpp { width:calc(100vw - 24px); max-width:none; margin:12px; }

      /* CEX bar compact */
      #cex-bar-outer { margin-top:8px; padding-top:8px; }

      /* Tags + period changes: wrap */
      .td-row1 .tag { font-size:9px; padding:2px 6px; }
      .td-price-left > div[style*="gap:18px"] { gap:10px;flex-wrap:wrap; }

      /* PR stats inside cards: stay horizontal, just tighter */
      .pr-stats { gap:10px; padding:8px 12px; }
      .pr-stat-label { font-size:7.5px; }
    }

@media (max-width:480px) {
      .tv-chart { height:240px; }
      .sig-d-row { flex-direction:column; }
      .sig-d-meters { flex-direction:column; gap:8px; }
      #header-price { font-size:22px; }
      .td-mcap-right { font-size:10px; grid-template-columns:1fr 1fr; }
      .score-ring { width:90px; height:90px; }
      .score-ring .ring-score { font-size:28px; }

      /* Tags wrap tighter */
      .td-price-left > div[style*="flex-wrap"] { gap:4px; }
    }

.u-meter { flex:1; height:6px; position:relative; overflow:visible; }

.u-meter-track { position:absolute; inset:0; background:var(--gray-100); border-radius:3px; }

.u-statrow { display:flex; align-items:center; gap:6px; padding:5px 0; border-bottom:1px solid var(--gray-50); font-size:10px; }

.u-statval { min-width:22px; text-align:right; font-family:var(--font-mono); font-weight:700; font-size:10px; }

.app-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; position: relative; z-index: 1; }

.main-area { display: flex; flex-direction: column; min-width: 0; overflow-x: hidden; }

.topbar { position: sticky; top: 0; z-index: 50; padding: 10px 24px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; background: #ffffff; border-bottom: 1px solid rgba(14,14,14,0.06); }

.topbar .crumbs { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11.5px; }

.topbar .crumbs a { transition: color 0.12s; }

.topbar .crumbs .sep { opacity: 0.3; }

.topbar .crumbs .now { font-weight: 600; }

.topbar .tb-spacer { display: none; }

.tb-search { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 18px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); width: 480px; max-width: 100%; box-shadow: var(--shadow-xs); transition: border-color 0.15s, box-shadow 0.15s; }

.tb-search:focus-within { box-shadow: 0 0 0 3px var(--brand-amber-10); }

.tb-search svg { opacity: 0.5; flex-shrink: 0; }

.tb-search input { flex: 1; background: 0; border: 0; outline: 0; font-size: 13px; font-family: var(--font-body); }

.tb-search kbd { font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; border: 1px solid var(--rule); border-radius: 4px; }

.tb-right { display: flex; align-items: center; gap: 10px; justify-self: end; }

.tb-balance { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 18px; background: var(--white-80); border: 1px solid rgba(14,14,14,0.08); border-radius: 999px; box-shadow: inset 0 1px 0 var(--white-90), 0 1px 3px rgba(14,14,14,0.04); }

.tb-bal-amt { font-family: var(--font-mono); font-weight: 700; font-size: 13px; }

.tb-bal-label { font-family: var(--font-mono); font-size: 11px; }

.tb-bal-info { display: flex; align-items: center; opacity: 0.4; }

.tb-icon { width: 40px; height: 40px; border-radius: 999px; background: var(--white-80); border: 1px solid rgba(14,14,14,0.08); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: inset 0 1px 0 var(--white-90), 0 1px 3px rgba(14,14,14,0.04); transition: color 0.12s, border-color 0.12s; }

.tb-notif { position: relative; }

.tb-wallet-connect { padding: 7px 13px; border-radius: 8px; background: var(--brand-amber); font-size: 12px; font-weight: 600; border: none; cursor: pointer; font-family: var(--font-body); transition: background 0.18s, transform 0.1s; }

.tb-wallet-connect:hover { background: rgba(255,196,51,0.95); }

.tb-wallet-connect:active { transform: translateY(0.5px); }

.tb-wallet-pill { display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--white-80); border: 1px solid rgba(14,14,14,0.08); cursor: pointer; box-shadow: inset 0 1px 0 var(--white-90), 0 1px 3px rgba(14,14,14,0.04); font-family: var(--font-mono); transition: border-color 0.12s; }

.tb-wallet-av { width: 32px; height: 32px; border-radius: 50%; background: conic-gradient(from 120deg, var(--brand-amber), #FF7B3D, #B89BFF, #6FB7FF, var(--brand-amber)); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); }

.tb-wallet-addr { font-size: 12px; font-weight: 600; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.um-drop.open { display: block; }

.page-content { padding: 0 24px 80px; flex: 1; width: 100%; }

.toast-container { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:9999; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; max-width:calc(100vw - 32px); }

.toast { pointer-events:auto; display:flex; align-items:center; gap:10px; padding:14px 20px; background:var(--surface); border:1px solid var(--border-card); border-radius:var(--radius); box-shadow:0 8px 30px rgba(0,0,0,0.12); font-size:13px; transform:translateY(140%); opacity:0; transition:transform 0.3s cubic-bezier(.16,1,.3,1),opacity 0.3s; width:min(600px, calc(100vw - 32px)); }

.toast.is-visible { transform:translateY(0); opacity:1; }

.toast.is-exit { transform:translateY(140%); opacity:0; }

.toast-icon { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.toast-icon.success { background:var(--green-bg); }

.toast-icon.error { background:rgba(239,68,68,0.1); }

.toast-icon.warn { background:var(--brand-amber-bg); }

.toast-icon.info { background:rgba(59,130,246,0.1); }

.toast-msg { flex:1; line-height:1.4; }

.toast-msg b { font-weight:700; }

.toast-close { cursor:pointer; opacity:0.4; font-size:16px; line-height:1; }

.toast-close:hover { opacity:1; }

.mobile-toggle { display: none; position: fixed; bottom: 16px; left: 16px; z-index: 200; width: 44px; height: 44px; border-radius: 12px; background: var(--ink); border: none; cursor: pointer; box-shadow: var(--shadow-md); }

.mobile-toggle svg { width: 20px; height: 20px; }

@media (max-width: 900px) {
    /* html body … raises specificity so the drawer's single column beats the
       later base `.app-shell { grid-template-columns:240px 1fr }` rules that sit
       further down this file (source order would otherwise re-add a sidebar
       column while the sidebar is an off-canvas drawer). */
    html body .app-shell { grid-template-columns: 1fr; }
    .mobile-toggle { display: flex; align-items: center; justify-content: center; }
    .topbar { padding: 10px 16px; }
    .page-content { padding: 0 16px 80px; }
  }

@media (max-width: 640px) {
    .topbar { grid-template-columns: 1fr auto; gap: 8px; }
    .tb-search { display: none; } /* search via CMD+K or separate page on mobile */
    .tb-balance { display: none; } /* too wide for mobile topbar */
    .crumbs { font-size: 10px; }
    .crumbs .sep { margin: 0 3px; }
    .tb-wallet-addr { max-width: 50px; font-size: 10px; }
    .tb-icon { width: 36px; height: 36px; }
    .tb-icon svg { width: 14px; height: 14px; }
    .page-content { padding: 0 12px 80px; }
    .toast-container { left: 50%; right: auto; bottom: 12px; top: auto; transform: translateX(-50%); }
    .toast { width: calc(100vw - 24px); }
  }

.sb-promote { position:relative; display:block; margin:8px 0 14px; padding:12px; border-radius:11px; background:radial-gradient(ellipse 80px 60px at 100% 0%,rgba(255,180,0,0.32),transparent 60%),radial-gradient(ellipse 100px 80px at 0% 100%,var(--brand-amber-18),transparent 60%),var(--brand-amber-08); border:1px solid rgba(255,180,0,0.22); overflow:hidden; text-decoration:none; transition:transform 0.18s cubic-bezier(.16,1,.3,1),border-color 0.18s,box-shadow 0.18s; }

.sb-promote:hover { transform:translateY(-1px); box-shadow:0 6px 20px var(--brand-amber-18); opacity:1; }

.sb-promote-glow { position:absolute; top:-20px; right:-20px; width:80px; height:80px; border-radius:50%; background:radial-gradient(circle,rgba(255,180,0,0.45),transparent 65%); filter:blur(6px); animation:sbGlow 4s ease-in-out infinite; pointer-events:none; }

@keyframes sbGlow { 0%,100%{opacity:0.6;} 50%{opacity:1;} }

.sb-promote-icon { width:26px; height:26px; border-radius:7px; background:var(--brand-amber); display:flex; align-items:center; justify-content:center; margin-bottom:8px; box-shadow:0 4px 12px rgba(255,180,0,0.4),0 1px 0 var(--white-50) inset; position:relative; z-index:1; }

.sb-promote-icon svg { width:14px; height:14px; }

.sb-promote-eyebrow { font-family:var(--font-mono); font-size:9px; letter-spacing:0.14em; text-transform:uppercase; font-weight:700; margin-bottom:6px; position:relative; z-index:1; }

.sb-promote-title { font-size:12.5px; font-weight:700; margin-bottom:2px; position:relative; z-index:1; }

.sb-promote-sub { font-size:10.5px; line-height:1.4; margin-bottom:10px; position:relative; z-index:1; }

.ask-fab-btn { position: fixed; bottom: 20px; right: 20px; z-index: 190; width: 42px; height: 42px; border-radius: 12px; background: var(--brand-amber); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(255,180,0,0.4), 0 8px 32px var(--hover-strong); transition: transform 0.15s, box-shadow 0.15s; }

.ask-fab-btn:hover { transform: scale(1.06); box-shadow: 0 6px 20px rgba(255,180,0,0.5), 0 12px 40px var(--overlay-heavy); }

.ask-fab-btn.open { background: var(--text-on-brand); box-shadow: 0 4px 16px rgba(0,0,0,0.2); }

.ask-fab-btn.open img { display: none; }

.ask-fab-btn .open-icon { display: none; }

.ask-fab-btn.open .open-icon { display: block; }

.ask-fab-btn svg { width: 18px; height: 18px; }

.ask-popup {
    position: fixed; bottom: 72px; right: 20px; z-index: 189;
    width: 380px;
    background: rgba(255,255,255,0.75);
    border: 1px solid var(--white-70);
    border-top: 1px solid var(--white-90);
    border-radius: 18px;
    backdrop-filter: blur(17px) saturate(180%);
    -webkit-backdrop-filter: blur(17px) saturate(180%);
    box-shadow: 0 8px 40px var(--overlay-heavy), 0 2px 8px var(--hover-subtle), inset 0 1px 0 var(--white-90);
    overflow: hidden;
    display: none;
    flex-direction: column;
    opacity: 0; transform: translateY(12px) scale(0.96);
    transition: opacity 0.2s, transform 0.2s;
  }

.ask-popup.visible { display: flex; opacity: 1; transform: translateY(0) scale(1); }

.ask-popup-head { padding: 14px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--hover-medium); }

.ask-popup-head .ic { width: 28px; height: 28px; border-radius: 8px; background: var(--brand-amber); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(255,180,0,0.3); }

.ask-popup-head .ic::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: white; }

.ask-popup-head h4 { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }

.ask-popup-head .status { margin-left: auto; font-family: var(--font-mono); font-size: 10px; display: flex; align-items: center; gap: 5px; }

.ask-popup-head .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-amber); animation: fabPulse 1.5s infinite; }

@keyframes fabPulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

.ask-popup-body { padding: 14px 16px; max-height: 280px; overflow-y: auto; }

.ask-popup-msg { font-size: 12px; line-height: 1.55; margin-bottom: 12px; }

.ask-popup-msg .role { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 4px; }

.ask-popup-msg .hl { display: inline; padding: 1px 5px; border-radius: 3px; background: rgba(255,180,0,0.15); font-weight: 600; font-size: 11px; font-family: var(--font-mono); }

.ask-popup-cite { font-family: var(--font-mono); font-size: 9px; margin-top: 4px; }

.ask-popup-input { border-top: 1px solid var(--hover-medium); padding: 10px 14px; display: flex; align-items: center; gap: 8px; }

.ask-popup-input span { font-weight: 700; font-size: 14px; }

.ask-popup-input input { flex: 1; background: none; border: none; outline: none; font-size: 13px; font-family: inherit; }

.ask-popup-input .send { width: 30px; height: 30px; border-radius: 8px; background: var(--text); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.12s; }

.ask-popup-input .send:hover { background: #333; }

.ask-popup-foot { padding: 6px 14px; border-top: 1px solid var(--hover-subtle); display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; }

.ask-popup-foot a { text-decoration: none; font-weight: 600; }

#cex-scroll-wrapper { will-change: transform; }

#header-exchange-grid { contain: layout; }

.td-price-left { display: flex; flex-direction: column; }

@media (min-width: 901px) {
                    html body .td-mcap-right { align-self: center; }
        }

.td-mcap-right { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px; text-align: left; line-height: 1.3; white-space: nowrap; align-self: flex-start; }

.td-mcap-right > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 13px; border: 1px solid var(--border-card); border-radius: 8px; background: var(--surface); flex: 0 0 auto; }

.mcap-warn-tip { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 11px; font-weight: 400; line-height: 1.5; white-space: nowrap; box-shadow: var(--shadow-md); }

.mcap-warn:hover .mcap-warn-tip { display: block; }

@keyframes livePulse { 0%,100%{opacity:1} 50%{opacity:0.35} }

@keyframes loadDot { 0%,80%,100%{opacity:0.2;transform:scale(0.8)} 40%{opacity:1;transform:scale(1.2)} }

@keyframes loadDot { 0%,80%,100%{opacity:0.2;transform:scale(0.8)} 40%{opacity:1;transform:scale(1.2)} }

@keyframes shimmer { 0%{background-position:-100px 0} 100%{background-position:100px 0} }

.ex-price-loading { width:60px; height:12px; border-radius:var(--radius-sm); background:linear-gradient(90deg,var(--gray-100,var(--gray-100)) 25%,var(--gray-200,var(--gray-200)) 50%,var(--gray-100,var(--gray-100)) 75%); background-size:200px 100%; animation:shimmer 1.5s infinite; }

a#tv-attr-logo{ --fill:#131722; --stroke:#fff; position:absolute; left:10px; bottom:10px; height:19px; width:35px; margin:0; padding:0; border:0; z-index:3; }

a#tv-attr-logo[data-dark]{ --fill:#D1D4DC; --stroke:#131722; }

.sig-marker::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

.sig-marker:hover { transform: translateX(-50%) translateY(-1px); box-shadow: 0 2px 8px var(--overlay-heavy); z-index: 10; }

.sig-marker.active { box-shadow: 0 0 0 2px rgba(255,180,0,0.2); z-index: 10; }

.sig-marker.is-pinned { box-shadow: 0 0 0 1.5px var(--brand-amber-bg); z-index: 8; }

.sig-marker.in-cluster { display: none; }

.sig-cluster { position: absolute; top: 2px; transform: translateX(-50%); cursor: pointer; z-index: 5; display: flex; align-items: center; gap: 0; }

.sig-cluster.is-open .sig-cluster-badge { background: var(--brand-amber-08); display: flex; }

.sig-cluster-items {
          display: none; flex-direction: column; gap: 2px;
          position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
          background: rgba(255,255,255,0.96); border: 1px solid var(--gray-200);
          border-radius: 8px; padding: 4px; min-width: 120px;
          box-shadow: 0 4px 16px var(--hover-strong);
          backdrop-filter: blur(12px); z-index: 20;
        }

.sig-cluster.is-open .sig-cluster-items { display: flex; }

.sig-cluster-items .sig-marker { position: static; transform: none; display: flex; width: 100%; border-radius: 6px; }

.sig-cluster-items .sig-marker:hover { transform: none; background: var(--hover-bg); }

.sig-cluster-items .sig-marker.active { box-shadow: 0 0 0 2px rgba(255,180,0,0.2); }

.sig-cluster-items .sig-marker.is-pinned { box-shadow: 0 0 0 1.5px var(--brand-amber-bg); }

.sig-strip { background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius-sm); margin-top: 6px; height: 72px; overflow: hidden; position: relative; }

.sig-strip-bg { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, var(--accent-subtle) 0%, var(--brand-amber-bg) 35%, rgba(255,196,51,0.08) 60%, rgba(255,180,0,0.04) 100%); }

.sig-strip-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 120% at 85% 50%, var(--brand-amber-10), transparent 70%); }

.sig-strip-brand { display: flex; align-items: center; gap: 8px; position: relative; z-index: 1; }

.sig-strip-brand-text { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }

.sig-strip-brand-sep { width: 1px; height: 14px; background: var(--gray-200); }

.sig-strip-brand-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.02em; }

.sig-strip-count { margin-left: auto; position: relative; z-index: 1; font-family: var(--font-mono); font-size: 9px; display: flex; align-items: center; gap: 6px; }

.sig-strip-count .sig-ct { font-weight: 700; font-size: 12px; background: var(--gray-50); padding: 2px 8px; border-radius: var(--radius-full); border: 1px solid var(--gray-100); }

.sig-strip-detail { padding: 12px 16px; height: 100%; display: flex; flex-direction: column; justify-content: center; animation: sigStripIn 0.15s ease-out; }

@keyframes sigStripIn { from { opacity:0; } to { opacity:1; } }

.sig-d-row { display: flex; align-items: center; gap: 14px; height: 100%; }

.sig-d-left { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }

.sig-d-head { display: flex; align-items: center; gap: 6px; }

.sig-d-type { font-family: var(--font-mono); font-size: 8px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

.sig-d-move { font-family: var(--font-mono); font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-full); }

.sig-d-source { font-family: var(--font-mono); font-size: 7px; font-weight: 600; padding: 1px 5px; border-radius: var(--radius-full); letter-spacing: 0.04em; text-transform: uppercase; }

.sig-d-source.community { background: rgba(139,92,246,0.08); }

.sig-d-source.auto { background: var(--green-subtle); }

.sig-d-title { font-weight: 600; font-size: 12px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sig-d-date { font-family: var(--font-mono); font-size: 9px; }

.sig-d-meters { display: flex; gap: 10px; flex-shrink: 0; width: 260px; }

.sig-meter { flex: 1; }

.sig-meter-label { font-family: var(--font-mono); font-size: 7.5px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: 2px; }

.sig-meter-bar { height: 3px; background: var(--gray-100); border-radius: 2px; overflow: hidden; }

.sig-meter-fill { height: 100%; border-radius: 2px; }

.sig-meter-value { display: flex; justify-content: space-between; margin-top: 2px; }

.sig-meter-pct { font-family: var(--font-mono); font-size: 9px; font-weight: 700; }

.sig-meter-votes { font-family: var(--font-mono); font-size: 8px; }

.sig-d-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.sig-d-back { border: none; background: none; cursor: pointer; font-family: var(--font-mono); font-size: 9px; font-weight: 600; padding: 4px 8px; border-radius: var(--radius-sm); transition: background 0.15s; }

.sig-d-back:hover { background: var(--hover-bg); }

.sig-d-pin { border: none; cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 9px; font-weight: 600; background: var(--brand-amber-bg); transition: background 0.15s; }

.sig-d-pin:hover { background: var(--brand-amber-18); }

.sig-d-pin.is-pinned { background: var(--gray-100); }

.sig-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--brand-amber); transform: translate(-50%, -50%); box-shadow: 0 0 0 2.5px var(--surface), 0 0 10px rgba(255,180,0,0.5); z-index: 3; opacity: 0; transition: opacity 0.2s ease; }

.sig-dot.visible, .sig-dot-group.visible .sig-dot { opacity: 1; }

.sig-dot::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--brand-amber); opacity: 0; animation: sigDotPulse 2.4s cubic-bezier(.16,1,.3,1) infinite; }

@keyframes sigDotPulse { 0%{transform:scale(1);opacity:0.6;} 80%,100%{transform:scale(2.4);opacity:0;} }

.sig-dot-stem { display: none; }

.sig-dot-chip {
          position: absolute; z-index: 4; pointer-events: none;
          font-family: var(--font-mono); font-size: 8px; font-weight: 600;
          letter-spacing: 0.06em; text-transform: uppercase;
          color: var(--brand-amber-strong); background: var(--white-92);
          border: 1px solid rgba(255,180,0,0.25);
          padding: 2px 8px; border-radius: var(--radius-full); white-space: nowrap;
          transform: translateX(-50%);
          backdrop-filter: blur(4px);
          opacity: 0; transition: opacity 0.2s ease;
        }

.sig-dot-chip.visible, .sig-dot-group.visible .sig-dot-chip { opacity: 1; }

.sig-dot-group.pinned .sig-dot,
        .sig-dot-group.pinned .sig-dot-chip { opacity: 1; }

.sig-range.pinned { opacity: 1; }

.sig-pin-x { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; border-radius: 50%; border: none; background: var(--hover-strong); font-size: 8px; line-height: 1; cursor: pointer; pointer-events: auto; margin-left: 4px; vertical-align: middle; transition: background 0.15s, color 0.15s; }

.sig-pin-x:hover { background: rgba(220,38,38,0.12); }

.sig-range { position: absolute; top: 0; bottom: 0; z-index: 2; pointer-events: none; background: rgba(255,180,0,0.05); border-left: 1px dashed rgba(255,180,0,0.35); border-right: 1px dashed rgba(255,180,0,0.35); opacity: 0; transition: opacity 0.2s ease; }

.sig-range.visible { opacity: 1; }

.sig-range-tag {
          position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
          font-family: var(--font-mono); font-size: 8px; font-weight: 600;
          letter-spacing: 0.06em; text-transform: uppercase;
          color: var(--brand-amber-strong); background: var(--white-92);
          border: 1px solid rgba(255,180,0,0.25);
          padding: 2px 8px; border-radius: var(--radius-full); white-space: nowrap;
          backdrop-filter: blur(4px); z-index: 2;
        }

.sig-range-lines { position: absolute; top: 12px; left: 0; right: 0; height: 1px; pointer-events: none; z-index: 1; }

.sig-range-line { position: absolute; top: 0; height: 1px; border-top: 1px dashed rgba(255,180,0,0.3); }

.sig-range-line-l { left: 0; }

.sig-range-line-r { right: 0; }

#moves-table { width:100%;min-width:800px;border-collapse:collapse;background:var(--surface) !important;border:1px solid var(--border-card);border-radius:var(--radius);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;overflow:hidden;transition:border-color 0.18s ease, box-shadow 0.2s ease; }

#moves-table thead th { background:var(--gray-50); padding: 14px 16px; }

#moves-table tbody tr:hover td { background:var(--hover-bg); }

#moves-table thead { display:table; width:100%; table-layout:fixed; }

#moves-table tbody { display:block; max-height:200px; overflow-y:auto; scrollbar-width:thin; }

#moves-table tbody::-webkit-scrollbar { width:5px; }

#moves-table tbody::-webkit-scrollbar-thumb { background:var(--hover-strong); border-radius:999px; }

#moves-table tbody:hover::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.16); }

#moves-table tbody tr { display:table; width:100%; table-layout:fixed; }

#moves-table th, #moves-table td { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

#moves-table th:nth-child(1), #moves-table td:nth-child(1) { width:18%; }

#moves-table th:nth-child(2), #moves-table td:nth-child(2) { width:7%; }

#moves-table th:nth-child(3), #moves-table td:nth-child(3) { width:9%; }

#moves-table th:nth-child(4), #moves-table td:nth-child(4) { width:9%; }

#moves-table th:nth-child(5), #moves-table td:nth-child(5) { width:9%; }

#moves-table th:nth-child(6), #moves-table td:nth-child(6) { width:10%; }

#moves-table th:nth-child(7), #moves-table td:nth-child(7) { width:10%; }

#moves-table th:nth-child(8), #moves-table td:nth-child(8) { width:8%; }

#moves-table th:nth-child(9), #moves-table td:nth-child(9) { width:9%; }

#moves-table th:nth-child(10), #moves-table td:nth-child(10) { width:7%; }

#moves-table th:nth-child(11), #moves-table td:nth-child(11) { width:4%; }

@media (max-width:768px) {
          /* Compact scrollable panel — NOT a full-height dump of every move.
             The old override removed the tbody height cap so all rows spilled
             into a giant vertical list. Keep the block-tbody + internal vertical
             scroll, and drop the two least-scanned FDV columns so the table needs
             far less horizontal scroll on a phone. */
          #moves-table { min-width:520px; }
          #moves-table thead { display:table; width:100%; table-layout:fixed; }
          #moves-table tbody { display:block; max-height:46vh; overflow-y:auto; }
          #moves-table tbody tr { display:table; width:100%; table-layout:fixed; }
          #moves-table th:nth-child(6), #moves-table td:nth-child(6),
          #moves-table th:nth-child(7), #moves-table td:nth-child(7) { display:none; }
          #moves-table th:nth-child(1), #moves-table td:nth-child(1) { width:34%; }
          #moves-table th:nth-child(2), #moves-table td:nth-child(2) { width:14%; }
          #moves-table th:nth-child(3), #moves-table td:nth-child(3) { width:18%; }
          #moves-table th:nth-child(4), #moves-table td:nth-child(4) { width:17%; }
          #moves-table th:nth-child(5), #moves-table td:nth-child(5) { width:17%; }
        }

.seg-tip { display:none; position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); white-space:nowrap; font-size:9px; font-family:var(--font-mono); background:var(--surface); border:1px solid var(--border-card); border-radius:var(--radius-sm); padding:3px 8px; box-shadow:var(--shadow-sm); z-index:10; pointer-events:none; }

.seg-tip-wrap:hover .seg-tip { display:block; }

.scroll-fade { overflow-y: auto; scrollbar-width: thin; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 24px), transparent 100%); transition: -webkit-mask-image 0.2s ease, mask-image 0.2s ease; }

.scroll-fade.no-overflow { -webkit-mask-image: none; mask-image: none; }

.scroll-fade.is-scrolled { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }

.scroll-fade.is-end { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24px, #000 100%); mask-image: linear-gradient(180deg, transparent 0, #000 24px, #000 100%); }

.scroll-fade::-webkit-scrollbar { width: 5px; }

.scroll-fade::-webkit-scrollbar-track { background: transparent; }

.scroll-fade::-webkit-scrollbar-thumb { background: var(--hover-strong); border-radius: 999px; }

.scroll-fade:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.16); }

.pillar-scroll { max-height: 160px; padding: 4px 16px 4px 0; margin-right: -16px; }

.metric-section-link { display:inline-flex; align-items:center; justify-content:center; width:13px; height:13px; border-radius:50%; background:var(--gray-100); font-size:8px; text-decoration:none; line-height:1; vertical-align:middle; margin-left:2px; transition:background 0.15s, color 0.15s; }

.metric-section-link:hover { background:rgba(255,180,0,0.15); }

.pillar-info-btn { padding: 2px 8px 2px 9px; border-radius: 8px; border: none; background: var(--gray-100); display: inline-flex; align-items: center; gap: 3px; cursor: pointer; flex-shrink: 0; font-size: 8.5px; font-weight: 700; font-family: var(--font-mono); line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; transition: background 0.15s, color 0.15s, transform 0.1s; }

.pillar-info-btn::after { content: "→"; font-family: var(--font-body); font-size: 9px; font-weight: 500; letter-spacing: 0; transform: translateX(0); transition: transform 0.18s cubic-bezier(.16,1,.3,1); }

.pillar-info-btn:hover { background: var(--brand-amber-18); }

.pillar-info-btn:hover::after { transform: translateX(2px); }

.pillar-info-btn:active { transform: translateY(0); }

.rf-dd-section:first-child { padding-top: 4px; }

.val-tabs-wrap { position: relative; }

.val-tab { display: none; }

.val-tab.active { display: block; animation: rfFadeIn 0.22s ease-out; }

.val-row-1 { min-height: 230px; overflow: visible; }

.pk-thead { display: grid; grid-template-columns: 30px 22px minmax(110px,1fr) 1fr 60px 76px 16px; column-gap: 12px; align-items: center; padding: 4px 20px 6px 12px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }

.pk-thead span.r { text-align: right; }

.pk-row + .pk-row { margin-top: 2px; }

.pk-row { display: grid; grid-template-columns: 30px 22px minmax(110px,1fr) 1fr 60px 76px 16px; column-gap: 12px; align-items: center; padding: 8px 20px 8px 12px; border-radius: 8px; transition: background 0.15s ease; animation: rfSlideUp 0.4s cubic-bezier(.16,1,.3,1) both; }

.pk-row:hover { background: var(--hover-bg); }

.pk-row.is-self { background: linear-gradient(135deg, var(--brand-amber-08), rgba(255,180,0,0.02)); border: 1px solid rgba(255,180,0,0.22); padding: 7px 11px; }

.pk-row.is-self:hover { background: linear-gradient(135deg, var(--brand-amber-bg), rgba(255,180,0,0.03)); }

.pk-row.is-hl { background: rgba(59,130,246,0.05); border: 1px solid rgba(59,130,246,0.18); padding: 7px 11px; }

.pk-rank { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: -0.02em; }

.pk-logo { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 1px var(--gray-100); background: var(--gray-50); flex-shrink: 0; }

.pk-name { font-size: 11px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pk-bar { position: relative; height: 6px; }

.pk-bar-track { height: 6px; border-radius: 3px; background: var(--gray-100); overflow: visible; position: relative; }

.pk-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, rgba(255,180,0,0.1) 0%, var(--brand-amber) 100%); transform-origin: left; animation: rfBarGrow 0.6s cubic-bezier(.16,1,.3,1) both; position: relative; }

.pk-bar-fill::after { content: ""; position: absolute; top: 50%; right: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-amber); transform: translate(50%, -50%); box-shadow: 0 0 6px rgba(255,180,0,0.4); }

.pk-score { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-align: right; letter-spacing: -0.02em; }

.pk-sim { font-family: var(--font-mono); font-size: 10px; text-align: right; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }

.pk-sim .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gray-300); }

.pk-sim.s-hi .dot { background: var(--green); }

.pk-sim.s-md .dot { background: var(--amber); }

.pk-go { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; text-decoration: none; opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s, transform 0.15s; }

.pk-row:hover .pk-go { opacity: 1; }

.pk-go:hover { background: var(--hover-bg); transform: translateX(2px); }

.pk-go svg { width: 11px; height: 11px; }

@media (max-width: 900px) { .pk-thead, .pk-row { grid-template-columns: 24px 20px minmax(80px,1fr) 1fr 46px 36px 14px; column-gap: 8px; } }

.score-ring { position:relative; width:120px; height:120px; margin:0 auto 6px; }

.score-ring svg { width:100%; height:100%; }

.score-ring .ring-track { stroke-width:12; stroke-dasharray:209.4 41.9; stroke-linecap:round; }

.score-ring .ring-fill { stroke-width:12; stroke-linecap:round; transition:stroke-dasharray 0.6s ease,stroke 0.3s; }

.score-ring .ring-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }

.score-ring .ring-score { font-size:36px; font-weight:700; font-family:var(--font-mono); letter-spacing:-0.03em; line-height:1; }

.score-ring .ring-denom { font-size:11px; margin-top:2px; }

@media (max-width:640px) {
          .pk-thead, .pk-row { grid-template-columns:20px minmax(60px,1fr) 1fr 40px 14px; column-gap:6px; }
          .pk-row .pk-sim { display:none; }
          .score-ring { width:90px; height:90px; }
          .score-ring .ring-score { font-size:28px; }
        }

@keyframes btDotPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(59,130,246,0.55); } 50% { box-shadow: 0 0 0 4px rgba(59,130,246,0); } }

@keyframes btBadgePulse { 0% { transform: scale(1); opacity: 0.55; } 80% { transform: scale(1.7); opacity: 0; } 100% { transform: scale(1.7); opacity: 0; } }

.pr-card-wrap { position: relative; background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius); overflow: hidden; isolation: isolate; }

.pr-card-bg { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.pr-scan-grid { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.85; }

.pr-scan-line { display: none; }

.pr-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.4), var(--white-85) 60%, var(--white-92)); backdrop-filter: blur(0.5px); }

.pr-card-head { position: relative; z-index: 1; padding: 10px 16px; border-bottom: 1px solid var(--gray-100); background: var(--surface); }

.pr-status { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; background: var(--gray-100); border-radius: 999px; line-height: 1.5; }

.pr-pulse-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brand-amber, var(--brand-amber)); box-shadow: 0 0 0 0 rgba(255,180,0,0.6); animation: prDotPulse 1.8s ease-in-out infinite; }

@keyframes prDotPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,180,0,0.55); } 50% { box-shadow: 0 0 0 4px rgba(255,180,0,0); } }

@keyframes prDotPulsePurple { 0%,100% { box-shadow: 0 0 0 0 rgba(139,92,246,0.55); } 50% { box-shadow: 0 0 0 4px rgba(139,92,246,0); } }

.pr-card-body { position:relative; z-index:1; padding:28px 24px 22px; text-align:center; position: relative; z-index: 1; padding: 28px 24px 22px; text-align: center; }

.pr-ai-badge { position:relative; width:44px; height:44px; border-radius:12px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; position: relative; width: 44px; height: 44px; border-radius: 12px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; }

.pr-ai-badge svg { width:18px; height:18px; position:relative; z-index:1; width: 18px; height: 18px; position: relative; z-index: 1; }

.pr-ai-pulse, .pr-ai-pulse--2 { position:absolute; inset:0; border-radius:12px; border:1.5px solid rgba(255,180,0,0.4); opacity:0; animation:prAiPulse 2.4s cubic-bezier(.16,1,.3,1) infinite; position: absolute; inset: 0; border-radius: 12px; border: 1.5px solid rgba(255,180,0,0.4); opacity: 0; animation: prAiPulse 2.4s cubic-bezier(.16,1,.3,1) infinite; }

.pr-ai-pulse--2 { animation-delay:1.2s; animation-delay: 1.2s; }

@keyframes prAiPulse { 0% { transform: scale(1); opacity: 0.55; } 80% { transform: scale(1.7); opacity: 0; } 100% { transform: scale(1.7); opacity: 0; } }

@keyframes chartLoadPulse { 0% { transform: scale(1); opacity: 0.55; } 80% { transform: scale(1.8); opacity: 0; } 100% { transform: scale(1.8); opacity: 0; } }

.pr-title { font-size:18px; font-weight:700; letter-spacing:-0.02em; margin-bottom:6px; line-height:1.2; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; line-height: 1.2; }

.pr-sub { font-size:12px; line-height:1.55; max-width:460px; margin:0 auto 18px; font-size: 12px; line-height: 1.55; max-width: 460px; margin: 0 auto 18px; }

.pr-stats { display: inline-flex; align-items: center; gap: 18px; padding: 10px 16px; background: var(--surface); border: 1px solid var(--gray-200); border-radius: 999px; }

.pr-stat { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; }

.pr-stat-num { font-family:var(--font-mono); font-size:13px; font-weight:700; letter-spacing:-0.02em; display:inline-flex; align-items:center; justify-content:center; min-height:14px; font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: -0.02em; display: inline-flex; align-items: center; justify-content: center; min-height: 14px; }

.pr-stat-label { font-family: var(--font-mono); font-size: 8.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

.pr-stat-divider { width:1px; height:24px; background:var(--gray-200); width: 1px; height: 24px; background: var(--gray-200); }

.pr-skel { display:inline-block; height:10px; border-radius:999px; background:linear-gradient(90deg,var(--gray-100) 0%,var(--gray-200) 50%,var(--gray-100) 100%); background-size:200% 100%; animation:prSkel 1.6s ease-in-out infinite; display: inline-block; height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--gray-100) 0%, var(--gray-200) 50%, var(--gray-100) 100%); background-size: 200% 100%; animation: prSkel 1.6s ease-in-out infinite; }

@keyframes prSkel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@media (max-width: 640px) {
          .pr-stats { gap:6px; padding:6px 10px; border-radius:12px; flex-wrap:nowrap; }
          .pr-stat-num { font-size:10px; }
          .pr-stat-label { font-size:6.5px; letter-spacing:0.04em; }
          .pr-stat-divider { height:16px; }
          .pr-card-body { padding:16px 12px 14px; }
          .pr-title { font-size:14px; }
          .pr-sub { font-size:10px; margin-bottom:10px; }
        }

.ph-toggle {
    position: fixed; bottom: 20px; right: 70px; z-index: 200;
    width: 42px; height: 42px; border-radius:var(--radius);
    background: var(--white-85); border: 1px solid rgba(14,14,14,0.1);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px var(--hover-strong), inset 0 1px 0 var(--white-80);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); transition: all 0.15s;
  }

.ph-toggle.active { background: var(--brand-amber); }

.ph-toggle svg { width: 18px; height: 18px; }

[data-ph] { position: relative; transition: filter 0.3s, opacity 0.3s; }

body.ph-blur [data-ph] { filter: blur(4px); opacity: 0.35; pointer-events: none; user-select: none; }

body.ph-blur [data-ph]::after { content: attr(data-ph); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 5; font-size: 11px; font-weight: 600; font-family: var(--font-mono); letter-spacing: 0.04em; filter: none; opacity: 1; pointer-events: none; }

.links-scroll { max-height:480px; padding:4px 0; }

@keyframes v6Drift1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(50px,-40px); } }

@keyframes v6Drift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-40px,50px); } }

@keyframes v6Drift3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(60px,40px); } }

.app-shell { background: transparent !important; position: relative; z-index: 1; display: grid; grid-template-columns: 240px 1fr; }

.pip,

/* sb-item.active .pip dark-mode colors → dark-colors.css */

.sb-promote, a.sb-promote { flex-shrink: 0; text-decoration: none; }

.topbar {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--line-1);
  padding: 14px 28px;
  z-index: 50;
  position: sticky;
  top: 0;
}

.topbar .crumbs { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 13px; letter-spacing: -0.008em; }

.topbar .crumbs a { font-weight: 500; transition: color .12s; }

.topbar .crumbs .sep { opacity: 1; }

.topbar .crumbs .now { font-weight: 600; }

.tb-search { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border: none; border-radius: 999px; background: var(--hover-subtle) !important; width: clamp(280px, 36vw, 420px); transition: background .15s, box-shadow .15s, border-color .15s; }

.tb-search:hover { background: var(--hover-medium) !important; }

.tb-search:focus-within { background: #fff !important; box-shadow: 0 0 0 3px rgba(245,158,11,0.15); }

.tb-search input:focus { outline: none; box-shadow: none; background: transparent !important; }

.tb-search svg { opacity: 1; flex-shrink: 0; }

.tb-search input { background: transparent !important; border: 0; outline: 0 !important; font-size: 13.5px; font-family: var(--font-body); letter-spacing: -0.008em; width: 100%; }

.tb-search kbd { font-family: var(--font-mono); font-size: 10px; padding: 3px 7px; background: var(--hover-subtle) !important; border: none; border-radius: 6px; font-weight: 600; }

.tb-right { display: flex; align-items: center; gap: 8px; }

.tb-balance { display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 14px; border-radius: 8px; background: var(--hover-subtle) !important; border: none; font-family: var(--font-mono); }

.tb-bal-amt { font-weight: 700; font-size: 13px; }

.tb-bal-label { font-weight: 700; font-size: 11px; letter-spacing: 0.04em; }

.tb-bal-info { display: inline-flex; }

.tb-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--hover-subtle) !important; border: none; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s, transform .12s; }

.tb-icon:hover { background: var(--hover-strong) !important; }

.tb-icon:active { transform: scale(0.96); }

.tb-icon svg { width: 16px; height: 16px; }


.topbar .tb-wallet-connect,
button.tb-wallet-connect { padding: 8px 16px; border-radius: 8px; background: var(--brand) !important; font-weight: 600; font-size: 12.5px; border: none; letter-spacing: -0.005em; box-shadow: none; transition: background .15s; }

.topbar .tb-wallet-connect:hover,
button.tb-wallet-connect:hover { background: var(--brand-hover) !important; }

.tb-wallet-pill { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 8px; background: var(--hover-subtle) !important; border: none; }

.tb-wallet-pill:hover { background: var(--hover-medium) !important; }

.tb-wallet-av { width: 28px; height: 28px; background: conic-gradient(from 120deg, var(--cat-yellow), var(--cat-coral), var(--cat-violet), var(--cat-indigo), var(--cat-yellow)) !important; }

.tb-wallet-addr { font-size: 12.5px; font-family: var(--font-mono); font-weight: 600; }

.container, .page-content { max-width: 1440px; padding: 24px 32px 80px; margin: 0 auto; position: relative; z-index: 1; }

@media (max-width: 768px) {
  .container, .page-content { padding: 16px 16px 64px; }
}

.section { margin-bottom: 28px; position: relative; }

.section > h2,

.section h2 > span:first-child { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; }

.sec-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand) !important; display: inline-block; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(245,158,11,0.18); }

.sec-line { display: none; }

.sec-right { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; font-weight: 600; }

h2#valuation-section { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: none; }

.card, .stat-card, .eco-card, .g-card, .pipeline-card,
.pr-card-wrap,
table,
[style*="background:var(--surface)"][style*="border:1px solid var(--border-card)"],
[style*="background:var(--surface);border:1px solid var(--border-card)"] {
  background: rgba(255,255,255,0.86);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line-1);
  box-shadow: var(--sh-xs);
  border-radius: var(--radius);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}


.td-header { padding: 36px 40px; border-radius: var(--radius); overflow: hidden; margin-bottom: 24px; border: 1px solid var(--border-card); box-shadow: var(--shadow-card); }

@media (max-width: 768px) {
  .td-header { padding: 24px; border-radius: 20px; }
}

.td-row1 { align-items: center; gap: 10px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line-1); flex-wrap: wrap; }

.td-row1 img:first-of-type { border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,0.05), 0 6px 20px -4px var(--hover-strong); width: 44px; height: 44px; }

.td-row1 .tag img,
.td-row1 .chain-cell img,
.td-row1 a img { border-radius: 50%; box-shadow: none; }

.td-row1 .tag img[width],
.td-row1 .chain-cell img[width],
.td-row1 a img[width] { width: attr(width px); height: attr(height px); }

.td-row1 .tag img:not([width]),
.td-row1 .chain-cell img:not([width]),
.td-row1 a img:not([width]) { width: 12px; height: 12px; }

.td-row1 .tag img,
.td-row1 .chain-cell img,
.td-row1 a img { max-width: 14px; max-height: 14px; }

.td-row1 h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.035em; margin-right: 2px; }

.td-row1 > span:nth-of-type(1) { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; line-height: 1; padding-top: 0; padding-bottom: 0; }

.td-row1 > .tag:first-of-type { background: var(--ink) !important; font-family: var(--font-mono); font-weight: 700; font-size: 10px; padding: 4px 9px; letter-spacing: 0.04em; border-radius: 6px; }

.td-row1 .tag[style*="display:inline-flex"] {
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  padding: 4px 10px 4px 5px;
  color: var(--ink-2) !important;
  font-size: 11.5px;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

#header-price { font-size: 72px; font-weight: 700; letter-spacing: -0.04em; line-height: 0.95; font-family: var(--font-body); font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) { #header-price { font-size: 56px; } }

@media (max-width: 768px)  { #header-price { font-size: 44px; } }

.td-price-left > div:first-child { align-items: baseline; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }

.td-price-left > div:nth-child(2) {
  display: flex;
  gap: 24px;
  padding: 0;
  margin-top: 6px;
  border: none;
  background: transparent !important;
  backdrop-filter: none;
  flex-wrap: wrap;
  align-items: baseline;
}

.td-price-left > div:nth-child(2) > span { font-family: var(--font-mono); font-size: 13px; letter-spacing: -0.01em; display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }

.td-price-left > div:nth-child(2) > div { display: flex; flex-direction: column; gap: 4px; padding: 0; border-right: none; }

.td-price-left > div:nth-child(2) > div > *:first-child { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; }

.td-price-left > div:nth-child(2) > div > *:nth-child(2),
.td-price-left > div:nth-child(2) > div > *:last-child { font-family: var(--font-mono); font-size: 15px; font-weight: 600; letter-spacing: -0.02em; font-feature-settings: "tnum" 1; }

.td-mcap-right { font-family: var(--font-mono); font-size: 12px; line-height: 1.8; padding: 6px 0 6px 28px; border-left: 1px solid var(--line-1); letter-spacing: -0.005em; min-width: 200px; text-align: left; white-space: nowrap; }

.td-mcap-right strong { font-weight: 600; font-feature-settings: "tnum" 1; }

.td-mcap-right > div { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; text-align: left; }

.td-mcap-right > div > strong { text-align: right; font-variant-numeric: tabular-nums; }

.td-social { gap: 4px; padding: 0; }

.td-social .social-icon { width: 34px; height: 34px; border-radius: 10px; background: transparent !important; }

.td-social .social-icon:hover { background: rgba(0,0,0,0.05) !important; transform: translateY(-1px); }

.td-social .social-icon svg { width: 16px; height: 16px; }

.tag { background: var(--hover-subtle) !important; border: none; font-family: var(--font-body); font-weight: 500; font-size: 11.5px; padding: 3px 9px; border-radius: 6px; letter-spacing: -0.005em; }

.tag:hover { background: var(--hover-strong) !important; }

.td-row1 .tag:nth-of-type(3) { background: var(--c-violet-bg) !important; }

.td-row1 .tag:nth-of-type(4) { background: var(--c-indigo-bg) !important; }

.td-row1 .tag:nth-of-type(5) { background: var(--c-teal-bg) !important; }

.td-row1 .tag:nth-of-type(6) { background: var(--c-pink-bg) !important; }

.td-row1 .tag:nth-of-type(7) { background: var(--c-sky-bg) !important; }

.chain-more, .tag-more, .exchange-more { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }

.chain-dropdown, .narrative-dropdown, .exchange-dropdown {
  background: var(--surface) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-lg);
  border-radius: 14px;
  padding: 6px;
}

.chain-dropdown-item, .narrative-dropdown-item, .exchange-dropdown-item { border-radius: 10px; padding: 9px 12px; font-size: 10px; display: flex; align-items: center; min-height: 18px; }

.chain-dropdown-item:hover, .narrative-dropdown-item:hover, .exchange-dropdown-item:hover { background: var(--hover-bg) !important; }

.btn-primary, button[type="submit"],
.rf-btn-tiny.rf-btn-tiny-solid,
button.rf-btn-tiny-solid { background: var(--brand) !important; font-weight: 600; font-size: 12.5px; letter-spacing: -0.005em; border: none; border-radius: 8px; padding: 8px 14px; box-shadow: none; transition: background .15s ease; line-height: 1.2; }

.btn-primary::after, button[type="submit"]::after,
.rf-btn-tiny.rf-btn-tiny-solid::after { content: "→"; display: inline-block; margin-left: 4px; font-weight: 500; transition: transform .18s cubic-bezier(.16,1,.3,1); }

.btn-primary.no-arrow::after, button[type="submit"].no-arrow::after,
.rf-btn-tiny.no-arrow::after { display: none; }

#custom-score-btn.rf-btn-tiny.no-arrow::after { content: "→"; display: inline-block; margin-left: 4px; font-weight: 500; transition: transform .18s cubic-bezier(.16,1,.3,1); }

#custom-score-btn.rf-btn-tiny:hover::after { transform: translateX(3px); }

#custom-score-btn.rf-btn-tiny:hover { background: var(--brand) !important; }

.btn-primary:hover::after, button[type="submit"]:hover::after,
.rf-btn-tiny.rf-btn-tiny-solid:hover::after { transform: translateX(3px); }

.btn-primary:hover, button[type="submit"]:hover,
.rf-btn-tiny.rf-btn-tiny-solid:hover { background: var(--brand) !important; }

.btn-primary:active, button[type="submit"]:active,
.rf-btn-tiny.rf-btn-tiny-solid:active { background: var(--brand) !important; }

body.btn-soft .btn-primary,
body.btn-soft button[type="submit"],
body.btn-soft .rf-btn-tiny.rf-btn-tiny-solid,
body.btn-soft .tb-wallet-connect { box-shadow: 0 1px 2px rgba(180,83,9,0.18), 0 4px 12px -4px rgba(180,83,9,0.32); transition: background .15s, box-shadow .2s; }

body.btn-soft .btn-primary:hover,
body.btn-soft button[type="submit"]:hover,
body.btn-soft .rf-btn-tiny.rf-btn-tiny-solid:hover,
body.btn-soft .tb-wallet-connect:hover { box-shadow: 0 2px 4px rgba(180,83,9,0.24), 0 8px 24px -4px rgba(180,83,9,0.42); }

body.btn-soft .rf-btn-tiny.rf-btn-tiny-ghost { box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

body.btn-soft .rf-btn-tiny.rf-btn-tiny-ghost:hover { box-shadow: 0 2px 8px -2px var(--overlay-heavy); }

body.btn-soft .tag { background: rgba(245,158,11,0.08) !important; font-weight: 600; }

body.btn-glass .btn-primary,
body.btn-glass button[type="submit"],
body.btn-glass .rf-btn-tiny.rf-btn-tiny-solid,
body.btn-glass .tb-wallet-connect {
  background: rgba(245,158,11,0.92) !important;
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(245,158,11,0.5);
  box-shadow: 0 1px 0 var(--white-50) inset, 0 2px 8px rgba(180,83,9,0.18);
  transition: background .15s, border-color .15s;
}

body.btn-glass .btn-primary:hover,
body.btn-glass button[type="submit"]:hover,
body.btn-glass .rf-btn-tiny.rf-btn-tiny-solid:hover,
body.btn-glass .tb-wallet-connect:hover { background: rgba(234,88,12,0.95) !important; }

body.btn-glass .rf-btn-tiny.rf-btn-tiny-ghost,
body.btn-glass .tb-icon,
body.btn-glass .tb-balance,
body.btn-glass .tb-wallet-pill,
body.btn-glass .tb-search {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 1px 0 var(--white-50) inset, 0 1px 2px var(--hover-subtle);
}

body.btn-glass .tag {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,0.05);
}

body.btn-outline .btn-primary,
body.btn-outline button[type="submit"],
body.btn-outline .rf-btn-tiny.rf-btn-tiny-solid,
body.btn-outline .tb-wallet-connect { background: transparent !important; border: 1.5px solid var(--brand); box-shadow: none; transition: background .15s, color .15s; }

body.btn-outline .btn-primary:hover,
body.btn-outline button[type="submit"]:hover,
body.btn-outline .rf-btn-tiny.rf-btn-tiny-solid:hover,
body.btn-outline .tb-wallet-connect:hover { background: var(--brand) !important; }

body.btn-outline .rf-btn-tiny.rf-btn-tiny-ghost { border-width: 1.5px; }

body.btn-outline .tag { background: transparent !important; border: 1px solid var(--line-3); }

body.btn-lifted .btn-primary,
body.btn-lifted button[type="submit"],
body.btn-lifted .rf-btn-tiny.rf-btn-tiny-solid,
body.btn-lifted .tb-wallet-connect { box-shadow: 0 2px 0 var(--cat-amber-deep), 0 4px 12px -2px rgba(180,83,9,0.28); transition: transform .1s ease, box-shadow .1s ease, background .15s; }

body.btn-lifted .btn-primary:hover,
body.btn-lifted button[type="submit"]:hover,
body.btn-lifted .rf-btn-tiny.rf-btn-tiny-solid:hover,
body.btn-lifted .tb-wallet-connect:hover { transform: translateY(-1px); box-shadow: 0 3px 0 var(--cat-amber-deep), 0 8px 20px -2px rgba(180,83,9,0.38); }

body.btn-lifted .btn-primary:active,
body.btn-lifted button[type="submit"]:active,
body.btn-lifted .rf-btn-tiny.rf-btn-tiny-solid:active,
body.btn-lifted .tb-wallet-connect:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--cat-amber-deep); }

body.btn-lifted .rf-btn-tiny.rf-btn-tiny-ghost { box-shadow: 0 2px 0 var(--line-3); }

body.btn-lifted .rf-btn-tiny.rf-btn-tiny-ghost:hover { transform: translateY(-1px); box-shadow: 0 3px 0 var(--line-3); }

body.btn-lifted .rf-btn-tiny.rf-btn-tiny-ghost:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--line-3); }

body.btn-lifted .tag { box-shadow: 0 1px 0 var(--hover-medium); }

body.btn-mono .btn-primary,
body.btn-mono button[type="submit"],
body.btn-mono .rf-btn-tiny.rf-btn-tiny-solid,
body.btn-mono .tb-wallet-connect { background: var(--ink) !important; border: none; box-shadow: 0 1px 2px var(--hover-strong); }

body.btn-mono .btn-primary:hover,
body.btn-mono button[type="submit"]:hover,
body.btn-mono .rf-btn-tiny.rf-btn-tiny-solid:hover,
body.btn-mono .tb-wallet-connect:hover { background: #1F1F1F !important; }

body.btn-mono .tag { background: var(--ink) !important; font-weight: 500; }

body.hov-lift .btn-primary,
body.hov-lift button[type="submit"],
body.hov-lift .rf-btn-tiny.rf-btn-tiny-solid,
body.hov-lift .rf-btn-tiny.rf-btn-tiny-ghost,
body.hov-lift .tb-wallet-connect,
body.hov-lift .ask-fab-btn { transition: transform .15s ease, background .15s, box-shadow .15s; }

body.hov-lift .btn-primary:hover,
body.hov-lift button[type="submit"]:hover,
body.hov-lift .rf-btn-tiny.rf-btn-tiny-solid:hover,
body.hov-lift .rf-btn-tiny.rf-btn-tiny-ghost:hover,
body.hov-lift .tb-wallet-connect:hover,
body.hov-lift .ask-fab-btn:hover { transform: translateY(-2px); }

body.hov-lift .btn-primary:active,
body.hov-lift .rf-btn-tiny.rf-btn-tiny-solid:active,
body.hov-lift .tb-wallet-connect:active { transform: translateY(0); }

body.hov-glow .btn-primary:hover,
body.hov-glow button[type="submit"]:hover,
body.hov-glow .rf-btn-tiny.rf-btn-tiny-solid:hover,
body.hov-glow .tb-wallet-connect:hover { box-shadow: 0 0 0 4px rgba(245,158,11,0.18), 0 8px 20px -2px rgba(245,158,11,0.4); }

body.hov-glow .rf-btn-tiny.rf-btn-tiny-ghost:hover { box-shadow: 0 0 0 4px var(--hover-subtle), 0 4px 12px -2px rgba(0,0,0,0.12); }

body.hov-glow .ask-fab-btn:hover { box-shadow: 0 0 0 6px var(--hover-medium), 0 12px 32px -4px rgba(0,0,0,0.35); }

body.hov-brighten .btn-primary,
body.hov-brighten button[type="submit"],
body.hov-brighten .rf-btn-tiny.rf-btn-tiny-solid,
body.hov-brighten .rf-btn-tiny.rf-btn-tiny-ghost,
body.hov-brighten .tb-wallet-connect,
body.hov-brighten .ask-fab-btn { transition: filter .15s; }

body.hov-brighten .btn-primary:hover,
body.hov-brighten button[type="submit"]:hover,
body.hov-brighten .tb-wallet-connect:hover { background: var(--brand) !important; filter: brightness(1.08) saturate(1.1); }

body.hov-brighten .rf-btn-tiny.rf-btn-tiny-solid:hover { filter: none; background: var(--brand) !important; }

body.hov-brighten .rf-btn-tiny.rf-btn-tiny-ghost:hover { filter: brightness(0.97); background: #fff !important; }

body.hov-brighten .ask-fab-btn:hover { filter: brightness(1.2); background: var(--ink) !important; }

body.hov-shift .btn-primary:hover,
body.hov-shift button[type="submit"]:hover,
body.hov-shift .rf-btn-tiny.rf-btn-tiny-solid:hover,
body.hov-shift .tb-wallet-connect:hover { background: var(--red) !important; }

body.hov-shift .rf-btn-tiny.rf-btn-tiny-ghost:hover { background: rgba(245,158,11,0.08) !important; }

body.hov-shift .ask-fab-btn:hover { background: var(--brand) !important; }

body.hov-scale .btn-primary,
body.hov-scale button[type="submit"],
body.hov-scale .rf-btn-tiny.rf-btn-tiny-solid,
body.hov-scale .rf-btn-tiny.rf-btn-tiny-ghost,
body.hov-scale .tb-wallet-connect,
body.hov-scale .ask-fab-btn { transition: transform .15s ease, background .15s; }

body.hov-scale .btn-primary:hover,
body.hov-scale button[type="submit"]:hover,
body.hov-scale .rf-btn-tiny.rf-btn-tiny-solid:hover,
body.hov-scale .rf-btn-tiny.rf-btn-tiny-ghost:hover,
body.hov-scale .tb-wallet-connect:hover,
body.hov-scale .ask-fab-btn:hover { transform: scale(1.06); }

body.lbl-outline .tag { background: transparent !important; border: 1px solid var(--line-3); font-weight: 500; }

body.lbl-outline .tag:hover { background: var(--overlay-light) !important; }

body.lbl-outline .td-row1 .tag:nth-of-type(3),
body.lbl-outline .td-row1 .tag:nth-of-type(4),
body.lbl-outline .td-row1 .tag:nth-of-type(5),
body.lbl-outline .td-row1 .tag:nth-of-type(6),
body.lbl-outline .td-row1 .tag:nth-of-type(7),
body.lbl-outline .td-price-left > div[style*="gap:5px"] > .tag {
  background: transparent;
}

body.lbl-pill .tag,
body.lbl-pill .td-row1 .tag,
body.lbl-pill .td-price-left > div[style*="gap:5px"] > .tag {
  border-radius: 999px;
  padding: 3px 11px;
}

body.lbl-solid .tag { background: var(--ink) !important; font-weight: 500; }

body.lbl-solid .td-price-left > div[style*="gap:5px"] > .tag:nth-of-type(1) { background: var(--c-violet); color: #fff !important; }

body.lbl-solid .td-price-left > div[style*="gap:5px"] > .tag:nth-of-type(2) { background: var(--c-indigo); color: #fff !important; }

body.lbl-solid .td-price-left > div[style*="gap:5px"] > .tag:nth-of-type(3) { background: var(--c-teal); color: #fff !important; }

body.lbl-solid .td-price-left > div[style*="gap:5px"] > .tag:nth-of-type(4) { background: var(--c-pink); color: #fff !important; }

body.lbl-sharp .tag,
body.lbl-sharp .td-row1 .tag,
body.lbl-sharp .td-price-left > div[style*="gap:5px"] > .tag {
  border-radius: 3px;
  padding: 3px 8px;
  font-weight: 600;
}

body.lbl-mono .tag,
body.lbl-mono .td-price-left > div[style*="gap:5px"] > .tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
}

body.nav-amber .sidebar a.sb-item.active,
body.nav-amber .sb-item.active { background: var(--brand) !important; }

body.nav-soft .sidebar a.sb-item.active,
body.nav-soft .sb-item.active { background: rgba(245,158,11,0.10) !important; font-weight: 600; }

body.nav-rail .sidebar a.sb-item.active,
body.nav-rail .sb-item.active { background: transparent !important; font-weight: 600; position: relative; box-shadow: inset 3px 0 0 var(--brand); border-radius: 0 8px 8px 0; }

body.nav-glass .sidebar a.sb-item.active,
body.nav-glass .sb-item.active {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(8px);
  color: var(--ink) !important;
  font-weight: 600;
  box-shadow: 0 1px 2px var(--hover-subtle), 0 0 0 1px rgba(0,0,0,0.05);
}

body.nav-violet .sidebar a.sb-item.active,
body.nav-violet .sb-item.active { background: linear-gradient(135deg, var(--c-indigo), var(--c-violet)) !important; }

.sig-strip-default .sig-strip-bg { background:
    repeating-linear-gradient(90deg,
      rgba(245,158,11,0.0) 0,
      rgba(245,158,11,0.0) 18px,
      rgba(245,158,11,0.05) 18px,
      rgba(245,158,11,0.05) 19px) !important; opacity: 0.5; }

.rf-btn-tiny.rf-btn-tiny-ghost { background: #fff !important; border: 1px solid var(--line-3); font-weight: 600; font-size: 12.5px; border-radius: 8px; padding: 7px 13px; box-shadow: none; transition: background .15s, border-color .15s; }

.rf-btn-tiny.rf-btn-tiny-ghost:hover { background: var(--overlay-light) !important; }

.rf-btn-tiny.is-xs { padding: 5px 11px; font-size: 11.5px; border-radius: 6px; }

.rf-btn-tiny.is-sm { padding: 6px 12px; font-size: 12px; border-radius: 7px; }

.rf-btn-tiny.is-md { padding: 9px 16px; font-size: 13px; border-radius: 8px; }

.chart-controls {
  padding: 3px;
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  display: inline-flex;
  gap: 0;
  align-items: center;
  box-shadow: 0 1px 2px var(--hover-subtle), inset 0 1px 0 rgba(255,255,255,0.6);
}

#val-tab-group {
  padding: 3px;
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  display: inline-flex;
  box-shadow: 0 1px 2px var(--hover-subtle), inset 0 1px 0 rgba(255,255,255,0.6);
}

.chart-controls .chart-ctrl-label { padding: 0 10px 0 12px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; font-weight: 700; text-transform: uppercase; }

.chart-ctrl-btn { padding: 6px 12px; border-radius: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; background: transparent !important; border: none; transition: all .15s ease; }

.chart-ctrl-btn:hover:not([disabled]):not(.active) { background: var(--hover-subtle) !important; }

.chart-ctrl-btn.active,
.chart-controls .chart-ctrl-btn.active,
.td-chart-header .chart-controls .chart-ctrl-btn.active { background: #fff !important; box-shadow: 0 1px 2px var(--hover-medium), 0 2px 4px var(--hover-subtle); }

.chart-ctrl-btn[disabled] { opacity: 0.35; }

#val-tab-group { padding: 3px; background: var(--hover-subtle) !important; border: none; border-radius: 10px; display: inline-flex; }

#val-tab-group .chart-ctrl-btn { border-radius: 7px; }

#val-tab-group .chart-ctrl-btn.active { background: #fff !important; box-shadow: 0 1px 2px var(--hover-medium), 0 2px 4px var(--hover-subtle), 0 0 0 1px var(--hover-subtle); }

.chart-container, #tvChart { border-radius: 20px; }

.positive { font-weight: 700; font-variant-numeric: tabular-nums; }

.negative { font-weight: 700; font-variant-numeric: tabular-nums; }

#moves-table thead th { background: rgba(0,0,0,0.02) !important; }

#moves-table tbody tr:hover td { background: var(--hover-bg) !important; }

.score-ring { width: 180px; height: 180px; margin: 12px auto 16px; }

.score-ring .ring-track { stroke-width: 7; }

.score-ring .ring-fill { stroke-width: 7; filter: none; }

.score-ring .ring-score { font-size: 60px; font-weight: 800; letter-spacing: -0.04em; font-family: var(--font-body); font-variant-numeric: tabular-nums; }

#custom-score-value.ring-score[style*="font-size:36px"] {
  color: var(--brand);
}

.score-ring .ring-denom { font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 6px; font-weight: 700; }

.val-row-1 > div { padding: 32px 28px; border-radius: 20px; }

.td-pillars { gap: 14px; }

.td-pillars > div { padding: 20px 22px; border-radius: 18px; position: relative; overflow: hidden; display: flex; flex-direction: column; }

.td-pillars > div > *:last-child { margin-top: auto; }

.td-pillars > div > .pillar-scroll:last-child,
.td-pillars > div > .pillar-body:last-child { margin-top: 0; }

.td-pillars > div:hover { transform: translateY(-2px); box-shadow: var(--sh); }

.td-pillars .score-ring { width: 92px; height: 92px; margin: 4px auto 8px; }

.td-pillars .score-ring .ring-score { font-size: 28px; }

.td-pillars .score-ring .ring-denom { font-size: 9px; }

.td-pillars .score-ring .ring-track,
.td-pillars .score-ring .ring-fill { stroke-width: 6; }

.pillar-info-btn { background: var(--hover-subtle) !important; border: none; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; padding: 4px 10px; border-radius: 5px; }

.pillar-info-btn::after { display: none; }

.pillar-info-btn:hover { background: var(--brand-bg) !important; transform: none; }

.rfpp-overlay {
  background: rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.rfpp {
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  border: 1px solid var(--line-2);
  box-shadow: 0 32px 80px -16px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.6) inset;
  border-radius: 24px;
  overflow: hidden;
}

.rfpp-close { width: 36px; height: 36px; border-radius: 12px; background: var(--hover-subtle) !important; border: none; }

.rfpp-close:hover { background: var(--ink) !important; }

.rfpp-head { padding: 32px 40px 24px; border-bottom: 1px solid var(--line-1); }

.rfpp-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; font-weight: 800; text-transform: uppercase; padding: 5px 11px; border-radius: 6px; display: inline-block; }

.rfpp-title { font-family: var(--font-body); font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }

.rfpp-sub { font-size: 14px; line-height: 1.55; margin-top: 8px; max-width: 64ch; }

.rfpp [style*="background:rgba(255,180,0"][style*="padding"][style*="border"] {
  background: linear-gradient(135deg, rgba(251,191,36,0.12), rgba(245,158,11,0.04)) !important;
  border: 1px solid rgba(245,158,11,0.22);
  border-radius: 14px;
}

.ask-fab-btn img { filter: none; }

.ph-toggle {
  background: rgba(255,255,255,0.86) !important;
  backdrop-filter: blur(12px);
  border: 1px solid var(--line-1);
  border-radius: 12px;
  box-shadow: var(--sh-xs);
}

.toast {
  background: rgba(10,10,10,0.94) !important;
  color: #fff !important;
  border-radius: 12px;
  backdrop-filter: blur(16px);
  box-shadow: var(--sh-lg);
}

[style*="position: fixed"][style*="z-index: 9999"][style*="background: var(--surface)"] {
  border-radius: 10px;
  background: var(--surface) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-lg);
}

[style*="background: var(--text,#1a1a1a)"][style*="color: rgb(255, 255, 255)"] {
  background: rgba(10,10,10,0.94) !important;
  backdrop-filter: blur(12px);
  border-radius: 8px;
}

[style*="font-family:var(--font-mono)"],
[style*="font-family:'SF Mono'"],
[style*='font-family:"SF Mono"'],
.ring-score, .ring-denom, code, kbd {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "ss01" 1;
  font-variant-numeric: tabular-nums;
}

.pk-bar-fill { background: var(--brand) !important; }

.pk-bar-fill::after { background: var(--brand) !important; box-shadow: 0 0 6px rgba(245,158,11,0.5); }

.pk-row.is-self { background: var(--brand-bg) !important; border: 1px solid rgba(245,158,11,0.25); }

.pr-overlay { background: transparent !important; }

.pr-scan-grid { opacity: 0.12; }

#tvChart {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.td-mcap-right > div > *:first-child { font-size: 12px; }

body.stats-grid .td-mcap-right { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; border-left: none; padding: 0; margin-top: 18px; min-width: 0; }

body.stats-grid .td-mcap-right > div { padding: 10px 14px; background: rgba(0,0,0,0.025) !important; border-radius: 8px; }

body.stats-cards .td-mcap-right { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; border-left: none; padding: 0; margin-top: 20px; min-width: 0; }

body.stats-cards .td-mcap-right > div { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; background: var(--glass-bg) !important; border: 1px solid var(--line-1); border-radius: 10px; }

body.stats-cards .td-mcap-right > div > *:first-child { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; }

body.stats-cards .td-mcap-right > div > strong { font-size: 18px; font-weight: 700; letter-spacing: -0.025em; }

body.stats-inline .td-mcap-right { display: flex; gap: 24px; border-left: none; padding: 0; margin-top: 18px; flex-wrap: wrap; min-width: 0; }

.td-mcap-right > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }

.td-mcap-right > div > *:first-child { font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.06em; }

.td-mcap-right > div > strong { font-family: var(--font-mono); font-size: 14px; }

body.stats-grid .td-mcap-right { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-left: none; padding: 0; margin-top: 18px; min-width: 0; }

body.stats-grid .td-mcap-right > div { padding: 12px 16px; background: var(--glass-bg) !important; border: 1px solid var(--line-1); border-radius: 10px; flex-direction: column; align-items: flex-start; gap: 4px; }

body.stats-grid .td-mcap-right > div > *:first-child { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; }

body.stats-grid .td-mcap-right > div > strong { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }

body.stats-cards .td-mcap-right { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; border-left: none; padding: 0; margin-top: 20px; min-width: 0; }

body.stats-cards .td-mcap-right > div { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px; background: var(--glass-bg) !important; border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 1px 2px var(--overlay-light); }

body.stats-cards .td-mcap-right > div > *:first-child { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; }

body.stats-cards .td-mcap-right > div > strong { font-size: 22px; font-weight: 800; letter-spacing: -0.025em; }

body.stats-inline .td-mcap-right { margin-top: 0; padding: 0; width: auto; display: grid; grid-template-columns: max-content max-content; column-gap: 28px; row-gap: 10px; border-left: none; align-items: baseline; }

body.stats-inline .td-mcap-right > div { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: transparent !important; padding: 0; }

body.stats-inline .td-mcap-right > div > *:first-child { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; }

body.stats-inline .td-mcap-right > div > strong { font-family: var(--font-mono); font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }

body.stats-divided .td-mcap-right { display: flex; flex-direction: column; padding: 0 0 0 24px; border-left: 1px solid var(--line-2); gap: 0; }

body.stats-divided .td-mcap-right > div { padding: 10px 0; border-bottom: 1px dashed var(--line-1); display: flex; justify-content: space-between; gap: 24px; }

body.stats-divided .td-mcap-right > div:last-child { border-bottom: none; }

body.stats-chips .td-mcap-right { display: flex; flex-wrap: wrap; gap: 8px; border-left: none; padding: 0; margin-top: 18px; min-width: 0; }

body.stats-chips .td-mcap-right > div { display: inline-flex; align-items: baseline; gap: 8px; background: var(--brand-bg) !important; border: 1px solid rgba(255,180,0,0.22); border-radius: 8px; padding: 7px 14px; font-family: var(--font-mono); }

body.stats-chips .td-mcap-right > div > *:first-child { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; }

body.stats-chips .td-mcap-right > div > strong { font-size: 13.5px; font-weight: 700; }

body.stats-compact .td-mcap-right { display: flex; flex-wrap: wrap; gap: 20px; border-left: none; padding: 10px 14px; margin-top: 14px; min-width: 0; background: rgba(0,0,0,0.025) !important; border-radius: 8px; align-items: baseline; }

body.stats-compact .td-mcap-right > div { display: inline-flex; flex-direction: row; align-items: baseline; gap: 6px; background: transparent !important; padding: 0; border: none; }

body.stats-compact .td-mcap-right > div > *:first-child { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }

body.stats-compact .td-mcap-right > div > strong { font-family: var(--font-mono); font-size: 13px; font-weight: 700; }

body.stats-monoblock .td-mcap-right { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-left: none; padding: 0; margin-top: 18px; min-width: 0; background: rgba(0,0,0,0.025) !important; border: 1px solid var(--line-1); border-radius: 10px; overflow: hidden; }

body.stats-monoblock .td-mcap-right > div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 18px; border-right: 1px solid var(--line-1); background: transparent !important; }

body.stats-monoblock .td-mcap-right > div:last-child { border-right: none; }

body.stats-monoblock .td-mcap-right > div > *:first-child { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; }

body.stats-monoblock .td-mcap-right > div > strong { font-family: var(--font-mono); font-size: 17px; font-weight: 700; letter-spacing: -0.025em; }

body.stats-inline .td-mcap-right > div { flex-direction: column; align-items: flex-start; gap: 2px; background: transparent !important; padding: 0; }

body.stats-inline .td-mcap-right > div > *:first-child { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; }

body.stats-inline .td-mcap-right > div > strong { font-size: 16px; font-weight: 700; }

body.stats-divided .td-mcap-right { display: flex; flex-direction: column; padding: 6px 0 6px 28px; border-left: 1px solid var(--line-2); }

body.stats-divided .td-mcap-right > div { padding: 6px 0; border-bottom: 1px dashed var(--line-1); }

body.stats-divided .td-mcap-right > div:last-child { border-bottom: none; }

body.stats-chips .td-mcap-right { display: flex; flex-wrap: wrap; gap: 8px; border-left: none; padding: 0; margin-top: 18px; min-width: 0; }

body.stats-chips .td-mcap-right > div { display: inline-flex; align-items: center; gap: 8px; background: var(--brand-bg) !important; border: 1px solid rgba(245,158,11,0.18); border-radius: 8px; padding: 6px 12px; font-size: 12px; }

body.stats-chips .td-mcap-right > div > strong { font-size: 13px; font-weight: 700; }

body.stats-compact .td-mcap-right { display: flex; flex-wrap: wrap; gap: 14px; border-left: none; padding: 8px 0 0; margin-top: 12px; min-width: 0; border-top: 1px dashed var(--line-2); }

body.stats-compact .td-mcap-right > div { display: inline; font-size: 11px; background: transparent !important; padding: 0; }

body.stats-compact .td-mcap-right > div > strong { font-size: 12px; margin-left: 4px; }

body.stats-monoblock .td-mcap-right { display: grid; grid-template-columns: repeat(4, max-content); gap: 0; border-left: none; padding: 0; margin-top: 18px; min-width: 0; background: var(--overlay-light) !important; border-radius: 8px; overflow: hidden; }

body.stats-monoblock .td-mcap-right > div { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 18px; border-right: 1px solid var(--hover-medium); background: transparent !important; }

body.stats-monoblock .td-mcap-right > div:last-child { border-right: none; }

body.stats-monoblock .td-mcap-right > div > *:first-child { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; }

body.stats-monoblock .td-mcap-right > div > strong { font-family: var(--font-mono); font-size: 15px; font-weight: 700; }

#cex-bar-outer { width: 100%; max-width: 100%; box-sizing: border-box; margin-top: 24px; padding: 24px 0 0; overflow: visible; }

#cex-bar-outer > div { overflow: visible; }

#cex-slider-mask { overflow: hidden; }

.ask-fab-btn img { filter: none; }

.section + .section { margin-top: 0; }

.tag, .pillar-info-btn, .chain-more, .tag-more, .exchange-more,
.sig-marker { border-radius: 4px; }

.chart-ctrl-btn, .pip { border-radius: 6px; }

.btn-primary, button[type="submit"], .rf-btn-tiny,
.tb-balance, .tb-icon, .tb-wallet-pill, .tb-wallet-connect,
.tb-search, .ph-toggle, .toast,
.chain-dropdown-item, .narrative-dropdown-item, .exchange-dropdown-item,

.chart-controls, #val-tab-group, .chain-dropdown, .narrative-dropdown,
.exchange-dropdown, .chart-container, #tvChart,
[style*="position: fixed"][style*="z-index: 9999"][style*="background: var(--surface)"] { border-radius: 12px; }

.td-header, .rfpp, #weights-modal .rfpp,
.card, .stat-card, .eco-card, .g-card, .pipeline-card, .pr-card-wrap,
[style*="background:var(--surface)"][style*="border:1px solid var(--border-card)"],
[style*="background:var(--surface);border:1px solid var(--border-card)"] { border-radius: 16px; }

body, .sb-item, h1, h2, h3, h4, p, button, a, span, div,
.rfpp-title, .rfpp-sub, .ring-denom, .pt-bg-label, .pt-title,
.td-row1 h1, .sb-promote-title { font-family: var(--font-body); }

.ring-score, #header-price, td, th,
.tag.tag-more, .chain-more, .tag-more, .exchange-more,
.chart-ctrl-btn, .chart-ctrl-label, .pillar-info-btn,
.sig-marker, .rfpp-eyebrow, .rfpp-method-label, .pip,
.tb-bal-amt, .tb-bal-label, .tb-wallet-addr,
.sb-group-label, .sb-promote-eyebrow,
.sec-right, .pt-section,
.positive, .negative,
code, kbd { font-family: var(--font-mono); }

.section > div[style*="margin-bottom:12px"][style*="background:var(--surface)"] {
  background: linear-gradient(90deg, rgba(245,158,11,0.08), rgba(124,58,237,0.06));
  border: 1px solid rgba(245,158,11,0.18);
  border-radius: 12px;
}

.card, .stat-card, .eco-card, .g-card, .pipeline-card,
.pr-card-wrap, table, #moves-table,
[style*="background:var(--surface)"][style*="border:1px solid var(--border-card)"],
[style*="background:var(--surface);border:1px solid var(--border-card)"],
.val-row-1 > div, .td-pillars > div,
#supply-unlocks-section > div,
.rfpp, #weights-modal .rfpp,
.chain-dropdown, .narrative-dropdown, .exchange-dropdown,
.chart-container, #tvChart, .tv-chart,
.topbar, .sidebar,
.tb-icon, .tb-balance, .tb-wallet-pill, .tb-search,
.rf-btn-tiny.rf-btn-tiny-ghost,
.chart-controls, #val-tab-group,
#prompt-tweaks,
.sig-strip-default,
.sb-promote {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.td-header {
  background: var(--glass-bg) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

#moves-table thead th { background: var(--glass-bg) !important; }

.tv-chart, #tvChart, .chart-container {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

#tvChart > div, #tvChart .tv-lightweight-charts,
#tvChart table, #tvChart table tr, #tvChart table tr > td { background: transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none; }

.pr-overlay { background: transparent !important; }

.pr-scan-grid { opacity: 0.12; }

.td-grid-2 > div,
.td-grid-3 > div,
.section .section,
.rfpp .rfpp-body > div,
[style*="background:var(--surface)"][style*="border:1px solid var(--border-card)"],
[style*="background:var(--surface);border:1px solid var(--border-card)"] {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--white-50);
}

.pr-card-body, .pr-card-wrap .pr-card-body {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.sig-strip, #signal-strip,
.pr-card-head, .pr-stats {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}

.pr-card-head { border-radius: 16px 16px 0 0; border-bottom: 1px solid var(--white-50); }

.pr-stats { box-shadow: var(--glass-shadow); }

.card, .stat-card, .eco-card, .g-card, .pipeline-card,
.pr-card-wrap, table,
[style*="background:var(--surface)"][style*="border:1px solid var(--border-card)"],
[style*="background:var(--surface);border:1px solid var(--border-card)"],
.val-row-1 > div, .td-pillars > div,
#supply-unlocks-section > div,
.rfpp, #weights-modal .rfpp,
.chain-dropdown, .narrative-dropdown, .exchange-dropdown,
.chart-container, #tvChart,
.topbar {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.tb-icon, .tb-balance, .tb-wallet-pill, .tb-search,
.rf-btn-tiny.rf-btn-tiny-ghost,
.chart-controls, #val-tab-group,
#prompt-tweaks {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}


#moves-table, #moves-table thead, #moves-table tbody,
table, table thead, table tbody {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

#moves-table thead th { background: var(--glass-bg) !important; }

#tvChart, #tvChart .tv-lightweight-charts {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.section > h2 + div[style*="background:var(--surface)"], .section > div[style*="background:var(--surface)"] {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.card, .stat-card, .eco-card, .g-card, .pipeline-card,
.pr-card-wrap, table,
[style*="background:var(--surface)"][style*="border:1px solid var(--border-card)"],
[style*="background:var(--surface);border:1px solid var(--border-card)"],
.val-row-1 > div,
.td-pillars > div,
#supply-unlocks-section > div,
.section > h2 + div[style*="background:var(--surface)"],
#weights-modal .rfpp,
.rfpp {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: 0 1px 2px var(--hover-subtle), inset 0 1px 0 var(--white-50);
}
/* Dropdowns: solid surface, no glass — must be fully opaque */
.chain-dropdown, .narrative-dropdown, .exchange-dropdown {
  background: var(--surface) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


.topbar {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.rf-btn-tiny.rf-btn-tiny-ghost:hover { background: var(--glass-bg) !important; }

#custom-score-btn.rf-btn-tiny-ghost:hover { background: var(--glass-bg) !important; }

.tb-icon, .tb-balance, .tb-wallet-pill, .tb-search {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.chart-container, #tvChart {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.tag {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#prompt-tweaks {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.rfpp-body [style*="border-radius:6px"][style*="font-weight:700"] {
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 4px 10px;
  font-weight: 700;
}

.rfpp-body > div > div:last-child[style*="background"] {
  background: var(--overlay-light) !important;
  border-left: 2px solid var(--brand);
  border-radius: 0 6px 6px 0;
  padding: 10px 12px;
}

.td-price-left { display: flex; flex-direction: column; gap: 16px; flex: 1 1 auto; min-width: 0; }

.td-price-left > div:first-child { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.btn-primary, .btn-primary:hover, .btn-primary:active,
button[type="submit"], button[type="submit"]:hover, button[type="submit"]:active,
.rf-btn-tiny.rf-btn-tiny-solid, .rf-btn-tiny.rf-btn-tiny-solid:hover, .rf-btn-tiny.rf-btn-tiny-solid:active,
.tb-wallet-connect, .tb-wallet-connect:hover, .tb-wallet-connect:active { background: var(--brand) !important; }

.rf-btn-tiny.rf-btn-tiny-ghost { background: #fff !important; }

.rf-btn-tiny.rf-btn-tiny-ghost:hover { background: var(--overlay-light) !important; }

.tb-icon:hover, .tb-balance:hover, .tb-wallet-pill:hover { background: var(--hover-medium) !important; }

.btn-primary, button[type="submit"], .rf-btn-tiny,
.tb-icon, .tb-balance, .tb-wallet-connect, .tb-wallet-pill, .tb-search,
.chart-ctrl-btn, .pillar-info-btn, .sb-item, .tag,
.social-icon, .chain-dropdown-item, .narrative-dropdown-item, .exchange-dropdown-item { transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; }

.tag { font-size: 11px; padding: 3px 9px; font-weight: 500; }

.tag.tag-more, .td-row1 > .tag:first-of-type, .chain-more { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em; font-weight: 700; }

.pillar-info-btn { font-size: 9px; padding: 3px 8px; letter-spacing: 0.14em; }

.card:hover, .stat-card:hover, .eco-card:hover, .g-card:hover,
.pr-card-wrap:hover, .td-pillars > div:hover { box-shadow: var(--sh-2); transform: none; }

.section > h2, .section h2:not(#valuation-section),
h2#valuation-section { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: none; margin-bottom: 14px; }

button[disabled], .chart-ctrl-btn[disabled] { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
/* Canonical disabled button: NO opacity dimming — the label stays fully legible
   and the greyed-out palette (set in component-colors.css / dark-colors.css) is
   what signals "inactive". See design/README.md § Buttons → Disabled/inactive. */
.rf-btn-tiny[disabled], .rf-btn-tiny.disabled, .rf-btn-tiny.is-disabled,
.btn-primary[disabled], button[type="submit"][disabled] { opacity: 1; cursor: not-allowed; pointer-events: none; }

.pillar-info-btn:hover, .tag:hover, .social-icon:hover,
.chain-dropdown-item:hover, .narrative-dropdown-item:hover { transform: none; }

@media (max-width: 1024px) {
  /* Drawer mode up to 1024px: single column, sidebar is off-canvas (nav.css).
     html body … beats the later base `.app-shell { 240px 1fr }` rules in this
     file so no phantom sidebar column is left behind. (Was a 220px rail here —
     removed: the hamburger hid >900px while the rail didn't always render,
     leaving tablets/narrow windows with no navigation.) */
  html body .app-shell { grid-template-columns: 1fr; }
  .container, .page-content { padding: 16px 20px 64px; }
  #header-price { font-size: 56px; }
  .val-row-1.td-grid-2 { grid-template-columns: 1fr 1fr; }
  }

@media (max-width: 768px) {
  /* App shell collapses to single column; sidebar becomes drawer */
  .app-shell { grid-template-columns: 1fr; display: block; }

  /* Topbar compress */
  .topbar { padding: 10px 14px; gap: 8px; }
  .topbar .crumbs { font-size: 11px; gap: 4px; }
  .topbar .crumbs .now { font-size: 11px; }
  .tb-search { display: none; }
  .tb-balance { display: none; }
  .tb-icon { width: 32px; height: 32px; }
  .tb-icon svg { width: 14px; height: 14px; }
  .tb-wallet-pill { padding: 3px 10px 3px 3px; }
  .tb-wallet-av { width: 24px; height: 24px; }
  .tb-wallet-addr { font-size: 11px; max-width: 64px; }
  .tb-wallet-connect { padding: 6px 12px; font-size: 11px; }

  /* Container padding */
  .container, .page-content { padding: 12px 14px 64px; }

  /* Hero card */
  .td-header { padding: 20px; border-radius: 18px; margin-bottom: 16px; }
  .td-row1 { gap: 8px; margin-bottom: 16px; padding-bottom: 14px; }
  .td-row1 img:first-of-type { width: 36px; height: 36px; }
  .td-row1 h1 { font-size: 20px; }
  .td-row1 > span:nth-of-type(1) { font-size: 11px; }
  .td-row1 > .tag:first-of-type { font-size: 9px; padding: 2px 6px; }
  .td-social { width: 100%; justify-content: flex-start; margin-top: 4px; gap: 2px; }
  .td-social .social-icon { width: 30px; height: 30px; }

  /* Price + selector stack vertically on mobile */
    .td-price-left > div:first-child { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
  #header-price { font-size: 40px; line-height: 1; }
  
  /* MCap stack */
  .td-mcap-right { border-left: none; padding: 12px 0 0; border-top: 1px dashed var(--line-1); min-width: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-size: 12px; line-height: 1.6; }
  .td-mcap-right > div { justify-content: flex-start; gap: 8px; }

  /* CEX bar */
  #cex-bar-outer { padding: 14px 0 0; margin-top: 14px; }

  /* Valuation rows */
  .val-row-1.td-grid-2 { grid-template-columns: 1fr; gap: 10px; }
  .val-row-1 > div { padding: 20px 18px; border-radius: 16px; }
  .score-ring { width: 140px; height: 140px; }
  .score-ring .ring-score { font-size: 44px; }

  /* Pillars: 1 col */
    .td-pillars > div { padding: 16px 18px; border-radius: 14px; }
  .td-pillars .score-ring { width: 80px; height: 80px; }
  .td-pillars .score-ring .ring-score { font-size: 22px; }

  /* Advanced intelligence grid */
  
  /* Sections */
  .section { margin-bottom: 20px; }
  .section > h2, .section h2:not(#valuation-section), h2#valuation-section { font-size: 10px; gap: 8px; }

  /* Chart */
    .chart-controls { padding: 2px; }
  .chart-ctrl-btn { padding: 5px 9px; font-size: 10px; }
  .chart-controls .chart-ctrl-label { padding: 0 6px 0 8px; font-size: 8.5px; }

  /* Valuation tabs - allow wrap */
  
  /* Tables */
    
  /* Popups full-screen */
    .rfpp-head { padding: 22px 22px 18px; }
  .rfpp-title { font-size: 22px; }
  .rfpp-sub { font-size: 13px; }
    
  /* Weights modal */
  
  /* Tweaks panel on mobile = bottom sheet */
  
  /* Promote card width */
  .sb-promote { max-width: 100%; }

  /* About / Team grid stack */
  [class*="about-team"], .td-grid-3 { grid-template-columns: 1fr; gap: 10px; }

  /* Floating elements - smaller on mobile */
  .ask-fab-btn { width: 38px; height: 38px; bottom: 14px; right: 14px; }
  
  /* Period selector keeps narrow trigger */
    }

@media (max-width: 480px) {
  .container, .page-content { padding: 10px 12px 56px; }
  .td-header { padding: 16px; }
  #header-price { font-size: 32px; }
  .td-row1 h1 { font-size: 17px; }
  .td-mcap-right { grid-template-columns: 1fr; gap: 6px; }
  .td-mcap-right > div { padding: 6px 0; border-bottom: 1px dashed var(--line-1); }
  .td-mcap-right > div:last-child { border-bottom: none; }
  .score-ring { width: 120px; height: 120px; }
  .score-ring .ring-score { font-size: 36px; }
    .topbar .crumbs { display: none; }
  .tb-icon { width: 30px; height: 30px; }
}

.mobile-toggle { display: none; }

@media (max-width: 768px) {
  .mobile-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--hover-subtle); border: none; cursor: pointer; }
}

@media (max-width: 1024px) {
    .main-area { align-items: stretch; min-width: 0; max-width: 100%; }
  .page-content, .container { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
  /* Any element with an intrinsic-width child must be allowed to shrink */
  .page-content *, .container * { min-width: 0; }
  /* Horizontal scrollers stay contained, never blow out page width */
  .table-scroll, #cex-bar-outer, .cex-scroll, #cex-scroll-wrapper { max-width: 100%; overflow-x: auto !important; }
  /* CEX ticker is an auto-marquee — clip, don't user-scroll */
  #cex-bar-outer { overflow: hidden; }
}

@media (max-width: 768px) {
  /* Hamburger → top-left, sitting in the topbar (was a bottom-left FAB) */
  .mobile-toggle {
    position: fixed;
    top: 9px; left: 12px; bottom: auto;
    width: 40px; height: 40px;
    border-radius: 11px; z-index: 1001;
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border);
    color: var(--ink) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
  .mobile-toggle svg { width: 18px; height: 18px; }

  /* Topbar: flex row → hamburger · compact context · right cluster.
     (Was padding-left:62px to clear an old FIXED hamburger button; the hamburger
     now sits in-flow as the first item, so that left gap just shoved everything
     right — symmetric padding keeps it hugging the left edge.) */
  html body .topbar { display: flex; align-items: center; padding: 9px 14px; gap: 8px; min-height: 58px; }
  /* Show ONLY the current token as compact context (hide the Explore/Markets path) */
  html body .topbar .crumbs { display: flex; align-items: center; min-width: 0; flex: 1 1 auto; overflow: hidden; }
  html body .topbar .crumbs a, html body .topbar .crumbs .sep { display: none; }
  html body .topbar .crumbs .now { display: inline-block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  html body .topbar .tb-right { margin-left: auto; flex: 0 0 auto; }

  /* Drawer scrim */
    
  /* Force the drawer to actually slide in (earlier .open rule wasn't winning) */
  html body .sidebar.open { left: 0; transform: none; }
  /* Hide the wallet balance pill on mobile — it overflowed the topbar and
     crushed the context label to zero width. Higher specificity than the
     global `html body .topbar .tb-balance{display:inline-flex}` rule below. */
  html body .main-area .topbar .tb-balance { display: none; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  html body .val-row-1.td-grid-2 { grid-template-columns: 1fr 1fr; gap: 12px; }
    html body .td-grid-3 { grid-template-columns: 1fr 1fr; }
  /* Token Design can hold its 2-up split on a tablet */
  html body #supply-unlocks-section .su-grid { grid-template-columns: 1.4fr 1fr; }
}

.td-price-left > div[style*="gap:5px"] > .tag:nth-of-type(1) {
  color: var(--c-violet);
  background: var(--c-violet-bg) !important;
}

.td-price-left > div[style*="gap:5px"] > .tag:nth-of-type(2) {
  color: var(--c-indigo);
  background: var(--c-indigo-bg) !important;
}

.td-price-left > div[style*="gap:5px"] > .tag:nth-of-type(3) {
  color: var(--c-teal);
  background: var(--c-teal-bg) !important;
}

.td-price-left > div[style*="gap:5px"] > .tag:nth-of-type(4) {
  color: var(--c-pink);
  background: var(--c-pink-bg) !important;
}

.td-row1 > .chain-cell + .tag,
.td-row1 > .chain-cell + .tag + .tag,
.td-row1 > .chain-cell + .tag + .tag + .tag,
.td-row1 > .chain-cell + .tag + .tag + .tag + .tag { /* selectors don't match anything; leave empty */; }

.td-row1 .tag.tag-more,
.td-price-left .tag.tag-more { background: rgba(0,0,0,0.05) !important; font-family: var(--font-mono); }

#watchlist-btn.rf-btn-tiny.rf-btn-tiny-ghost {
  padding: 7px 14px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid var(--line-3);
  background: var(--glass-bg) !important;
  backdrop-filter: blur(12px);
  font-weight: 600;
  color: var(--ink) !important;
}

#watchlist-btn:hover { background: var(--brand-bg) !important; }

#wl-icon { font-size: 13px; }

.td-social a[href*="whitepaper"] { display: none; }

#prompt-tweaks {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 99999;
  display: none;
  flex-direction: column;
  width: 340px;
  background: var(--white-92);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  box-shadow: 0 32px 80px -16px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.6) inset;
  font-family: var(--font-body);
  color: var(--ink);
  overflow: hidden;
  animation: pt-in .22s cubic-bezier(.16,1,.3,1) both;
}

@keyframes pt-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tv-chart, #tvChart, .chart-container {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#tvChart, #tvChart > .tv-lightweight-charts,
#tvChart .tv-lightweight-charts > table,
#tvChart .tv-lightweight-charts > table > tr,
#tvChart .tv-lightweight-charts > table > tr > td {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#moves-table {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

#moves-table thead, #moves-table tbody, #moves-table tr,
#moves-table td { background: transparent !important; }

#moves-table th { background: rgba(255,255,255,0.16) !important; backdrop-filter: none; }

.pr-card-wrap .pr-card-body, .pr-card-body,
body .pr-card-wrap .pr-card-body,
html body .pr-card-wrap .pr-card-body {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.pr-card-wrap {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border);
}

.pr-card-head,
body .pr-card-wrap .pr-card-head {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.pr-scan-grid, .pr-overlay { display: none; }

.pr-stats {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--hover-strong);
  box-shadow: none;
}

.section a[style*="background:var(--surface)"],
.section a[style*="background: var(--surface)"] {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}

.section, .section .section,
.td-grid-2, .td-grid-3,
.val-row-1, #val-row2, #val-row3,
.td-pillars,
.pr-card-wrap {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body .section,
body .td-grid-2, body .td-grid-3,
body .val-row-1, body #val-row2, body #val-row3,
body .td-pillars,
body .pr-card-wrap,
html body .pr-card-wrap {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#tvChart .tv-lightweight-charts > table > tr:first-child > td:last-child,
#tvChart .tv-lightweight-charts > table > tr:last-child > td {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html body .rf-btn-tiny.rf-btn-tiny-ghost,
html body button.rf-btn-tiny-ghost,
html body .rf-btn-tiny-ghost {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}

#searchResults {
  background: rgba(255,255,255,0.98) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--line-2);
}

#askPopup, .ask-popup {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}

.sig-cluster-items {
  background: var(--surface) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border-card);
}

#peer-compare-trigger.rf-dd-trigger,
.rf-dd-trigger {
  background: var(--surface) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border-card);
}

.rf-dd-panel {
  background: var(--surface) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border-card);
}

#phToggle.ph-toggle, .ph-toggle {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}

.su-grid .td-grid-3 > div,
.su-grid > div .td-grid-3 > div,
#supply-unlocks-section .td-grid-3 > div,
html body .su-grid .td-grid-3 > div,
html body .su-grid > div .td-grid-3 > div {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
}

html body th,
html body table thead th,
html body #moves-table thead th {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--glass-border);
}

html body .chart-ctrl-btn.active,
html body .chart-controls .chart-ctrl-btn.active {
  background: var(--white-85) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--ink) !important;
  box-shadow: 0 1px 2px var(--hover-medium), 0 2px 4px var(--hover-subtle), 0 0 0 1px var(--hover-subtle);
},
html body .section a[style*="background"]:not([href^="/token/"]) {
  background: var(--white-78) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--white-70);
  border-radius: 16px;
}

.td-grid-2 > div[style*="padding"],
.td-grid-3 > div[style*="padding"] {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}

.section > div[style*="border-radius:8px"][style*="margin-bottom"] {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}

html body .rf-btn-tiny.rf-btn-tiny-ghost:hover { background: rgba(255,255,255,0.55) !important; }

html body div[style*="backdrop-filter: blur(4px)"] {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

html body .td-header,
html body .chart-container,
html body .tv-chart,
html body #tvChart,
html body #moves-table,
html body .section a[style*="background"]:not([href^="/token/"]),
html body .td-grid-2 > div[style*="padding"],
html body .td-grid-3 > div[style*="padding"],
html body .val-row-1 > div,
html body .td-pillars > div,
html body .rfpp,
html body .sb-promote,
html body .topbar,
html body .sidebar,
html body .sig-strip-default {
  background: var(--white-78) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--white-70);
}

html body .pr-card-wrap,
html body .pr-card-wrap .pr-card-body,
html body .pr-card-wrap .pr-card-head {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--white-70);
}

html body #tvChart .tv-lightweight-charts > table > tr:first-child > td:last-child,
html body #tvChart .tv-lightweight-charts > table > tr:last-child > td {
  background: var(--white-78) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

html body .section,
html body .td-grid-2,
html body .td-grid-3,
html body .val-row-1,
html body #val-row2,
html body #val-row3,
html body .td-pillars,
html body .su-grid {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html body #moves-table thead, html body #moves-table tbody,
html body #moves-table tr, html body #moves-table th, html body #moves-table td {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html body div.td-header,
html body .container div.td-header {
  background: var(--white-78) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--white-70);
  border-radius: 16px;
}

html body .td-pillars > div,
html body #val-row2 > div,
html body #val-row3 > div {
  background: var(--white-78) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--white-70);
  border-radius: 16px;
},
html body #tvChart,
html body .tv-chart,
html body .chart-container,
html body .sb-promote,
html body a.sb-promote { border-radius: 16px; }

html body .section .td-grid-2 > div,
html body .section .td-grid-3 > div {
  background: var(--white-78) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--white-70);
  border-radius: 16px;
}

html body .td-grid-2 > div.pr-card-wrap {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html body .td-header .tb-search,
html body .td-header .tb-balance,
html body .td-header #watchlist-btn.rf-btn-tiny-ghost,
html body .td-header .rf-btn-tiny-ghost,
html body .td-header .chart-ctrl-btn:not(.active),
html body .td-header .pillar-info-btn,
html body .topbar .tb-search,
html body .topbar .tb-balance,
html body .topbar .tb-wallet-pill,
html body .topbar .tb-icon,
html body .sidebar .sb-promote,
html body .val-row-1 > div .rf-btn-tiny-ghost,
html body .val-row-1 > div .chart-ctrl-btn:not(.active),
html body .td-pillars > div .pillar-info-btn,
html body #moves-table .rf-btn-tiny-ghost > div,
html body .rfpp .rfpp-body > div {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--hover-medium);
}

html body .sidebar a.sb-promote,
html body .sb-promote {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--white-50);
}

html body .td-header .td-mcap-right,
html body .td-header .td-mcap-right > div,
html body .td-header .td-price-left > div:nth-child(2),
html body .td-header .td-price-left > div:nth-child(2) > * {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html body .chart-ctrl-btn.active,
html body .chart-controls .chart-ctrl-btn.active {
  background: rgba(255,255,255,0.6) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 2px var(--hover-medium), 0 0 0 1px var(--hover-subtle);
}

html body .section > div[style*="background:var(--surface)"][style*="margin-bottom:12px"] {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
}

html body .tb-search input { background: transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none; }

html body .tb-search {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 10px;
  padding: 0 14px;
  height: 42px;
  align-items: center;
  transition: border-color .15s, box-shadow .15s;
}

html body .tb-search:focus-within { box-shadow: 0 0 0 3px var(--brand-amber-18); }

html body .tb-search input { height: 100%; line-height: normal; padding: 0; font-size: 13.5px; align-self: center; }

html body .sig-strip-default,
html body #sig-strip-default.sig-strip-default,
html body div.sig-strip-default {
  background: var(--white-78) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--white-70);
  border-radius: 16px;
}

html body .section .section {
  border-top: none;
  border: none;
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html body .pr-card-wrap,
html body .td-grid-2 > div.pr-card-wrap {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}

html body .pr-card-wrap .pr-card-body,
html body .pr-card-wrap .pr-card-head {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
}

html body .td-header,
html body .chart-container, html body .tv-chart, html body #tvChart,
html body #moves-table,
html body .val-row-1 > div,
html body .td-pillars > div, html body #val-row2 > div, html body #val-row3 > div,
html body .rfpp, html body #weights-modal .rfpp,
html body .sidebar, html body .topbar,
html body .sb-promote, html body a.sb-promote,
html body .sig-strip-default,
html body .pr-card-wrap, html body .td-grid-2 > div.pr-card-wrap,
html body .card, html body .stat-card, html body .eco-card, html body .g-card, html body .pipeline-card,
html body #supply-unlocks-section > div, html body .su-grid > div,
html body .section .td-grid-2 > div, html body .section .td-grid-3 > div {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
}

 {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  padding: 7px 0;
} 
html body #tvChart > div[style*="position:absolute"][style*="top:8px"],
html body #tvChart > div[style*="position: absolute"][style*="top: 8px"] {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html body .section, html body .section .section,
html body .td-grid-2, html body .td-grid-3,
html body .val-row-1, html body #val-row2, html body #val-row3,
html body .td-pillars, html body .su-grid, html body .links-scroll,
html body .section > div:has(> .links-scroll),
html body .pr-card-wrap .pr-card-body, html body .pr-card-wrap .pr-card-head {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border: none;
}

html body .section .links-scroll.links-list > a:last-of-type,
html body .section .links-scroll.links-list > div[style*="align-items:center"]:last-of-type {
  border-bottom: 0;
}

html body .links-scroll.links-list > a > span:first-child,
html body .links-scroll.links-list > div[style*="align-items:center"] > span:first-child {
  width: 6px; height: 6px;
}

html body .links-scroll.links-list > a > span:nth-child(2),
html body .links-scroll.links-list > div[style*="align-items:center"] > span:nth-child(2) {
  font-size: 11px; font-weight: 500;
}

html body .links-scroll.links-list > a > span:last-child,
html body .links-scroll.links-list > div[style*="align-items:center"] > span:last-child {
  font-size: 9px;
}

html body .section a[style*="background:var(--surface)"]:hover {
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 var(--white-90), 0 4px 16px var(--hover-strong);
}

html body .chain-dropdown,
html body .narrative-dropdown,
html body .exchange-dropdown { box-shadow: 0 12px 32px rgba(0,0,0,0.16), 0 2px 8px var(--hover-strong); }

html body .td-row1 { align-items: center; }

html body .td-row1 > .tag,
html body .td-row1 > .chain-cell,
html body .td-row1 .tag.tag-more { display: inline-flex; align-items: center; margin-top: 0; margin-bottom: 0; }

html body #cex-bar-outer { padding-top: 14px; }

html body #cex-slider-mask { height: 32px; overflow: hidden; display: flex; align-items: center; }

html body #cex-bar-outer > div { align-items: center; }

html body .td-row1 { display: flex; align-items: center; }

html body .td-row1 > * { align-self: center; }

html body .td-row1 > h1,
html body .td-row1 > span,
html body .td-row1 > a,
html body .td-row1 > .tag,
html body .td-row1 > .chain-cell { line-height: 1; margin-top: 0; margin-bottom: 0; }

html body .td-row1 > .tag,
html body .td-row1 > .chain-cell,
html body .td-row1 .tag.tag-more { display: inline-flex; align-items: center; }

html body #cex-bar-outer { padding-top: 22px; padding-bottom: 4px; margin-bottom: -22px; }

html body #moves-table th:nth-child(1), html body #moves-table td:nth-child(1){ width:16%; }

html body #moves-table th:nth-child(2), html body #moves-table td:nth-child(2){ width:8%; }

html body #moves-table th:nth-child(3), html body #moves-table td:nth-child(3){ width:10%; }

html body #moves-table th:nth-child(4), html body #moves-table td:nth-child(4){ width:10%; }

html body #moves-table th:nth-child(5), html body #moves-table td:nth-child(5){ width:10%; }

html body #moves-table th:nth-child(6), html body #moves-table td:nth-child(6){ width:12%; }

html body #moves-table th:nth-child(7), html body #moves-table td:nth-child(7){ width:12%; }

html body #moves-table th:nth-child(8), html body #moves-table td:nth-child(8){ width:14%; }

html body #moves-table th:nth-child(9), html body #moves-table td:nth-child(9){ width:8%; }

@keyframes wtWarnFlash { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-3px)} 40%,80%{transform:translateX(3px)} }

.rfpp-overlay { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

html body .tb-wallet-connect::after, html body button.tb-wallet-connect::after { content: "→"; margin-left: 5px; display: inline-block; font-weight: 500; transition: transform 0.18s cubic-bezier(.16,1,.3,1); }

html body .tb-wallet-connect:hover::after { transform: translateX(3px); }

html body .tb-wallet-connect:hover { background: rgba(255,196,51,0.95) !important; }

html body .su-grid .td-grid-3 > div,
html body .su-grid .td-grid-2 > div { background: transparent !important; border: none; border-radius: 0; box-shadow: none; }

html body #watchlist-btn.rf-btn-tiny.rf-btn-tiny-ghost { border-radius: 6px; padding: 5px 11px; font-size: 11px; font-weight: 600; }

html body .sb-item { font-size: 13px; }

html body #moves-table td { font-size: 12px; }

html body #moves-table thead th { font-size: 9px; font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

html body .pillar-info-btn::after { display: inline-block; content: "\2192"; margin-left: 4px; font-family: var(--font-body); font-size: 9px; font-weight: 500; letter-spacing: 0; transform: translateX(0); transition: transform 0.18s cubic-bezier(.16,1,.3,1); }

html body .rf-btn-tiny,
html body .rf-btn-tiny.rf-btn-tiny-solid,
html body .rf-btn-tiny.rf-btn-tiny-ghost,
html body .rf-btn-tiny.is-xs,
html body button.rf-btn-tiny,
html body a.rf-btn-tiny,
html body .tb-wallet-connect,
html body button.tb-wallet-connect { font-size: 11px; }

html body .sb-group-label { font-size: 9px; }

html body .sb-promote-title { font-size: 12px; }

html body .sb-promote-sub { font-size: 10px; }

.nav-collapse-btn { flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border-card, rgba(255,255,255,0.08)); cursor: pointer; transition: background .14s, color .14s, border-color .14s; }

.topbar .tb-lead { display: flex; align-items: center; gap: 12px; min-width: 0; }

.nav-collapse-btn:hover { background: rgba(255,255,255,0.06); }

body:not(.dark) .nav-collapse-btn:hover { background: var(--hover-subtle); }

.nav-collapse-btn svg { width: 17px; height: 17px; }

html body .app-shell.nav-collapsed { grid-template-columns: 64px 1fr; }

html body .app-shell.nav-collapsed .sidebar { padding-left: 8px; padding-right: 8px; }

html body .app-shell.nav-collapsed .sidebar { overflow-x: hidden !important; }

html body .app-shell.nav-collapsed .sb-item { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; position: relative; font-size: 0; white-space: nowrap; overflow: hidden; height: 36px; min-height: 36px; box-sizing: border-box; }

html body .app-shell.nav-collapsed .sb-item > *:not(.ic) { display: none; }

html body .app-shell.nav-collapsed .sb-item .ic { font-size: 16px; flex: 0 0 auto; }

html body .app-shell.nav-collapsed .sb-group-label { display: none; }

html body .app-shell.nav-collapsed .sb-brand { display: flex; align-items: center; justify-content: center; height: 36px; flex: 0 0 36px; margin-bottom: 0; padding: 0; box-sizing: border-box; }

html body .app-shell.nav-collapsed .sb-brand img { display: none; }

html body .app-shell.nav-collapsed .sb-brand::before { content: ""; display: block; width: 26px; height: 26px; border-radius: 7px; background: radial-gradient(circle at 50% 50%, #FAFAF7 0 4.5px, var(--brand-amber) 4.7px); box-shadow: 0 3px 10px rgba(255,180,0,0.35); }

html body .app-shell.nav-collapsed .sb-promote { display: none; }

html body .app-shell.nav-collapsed .sb-group { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-card, rgba(255,255,255,0.08)); }

html body .app-shell.nav-collapsed .sb-group:first-of-type,
html body .app-shell.nav-collapsed .sb-group:first-child { margin-top: 0; padding-top: 36px; border-top: none; }

html body .app-shell.nav-collapsed .sb-item::after { content: attr(data-label); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); font-size: 12px; background: var(--surface-2, #1b1d25); font-family: var(--font-body); padding: 5px 9px; border-radius: 7px; white-space: nowrap; border: 1px solid var(--border-card, rgba(255,255,255,0.1)); box-shadow: 0 6px 20px rgba(0,0,0,0.4); opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 300; }

html body .app-shell.nav-collapsed .sb-item:hover::after { opacity: 1; }

.nav-collapse-btn { display: none; }

/* Collapse affordance only makes sense while the sidebar is in the grid (>900px).
   Below that the sidebar is an off-canvas drawer opened by the topbar hamburger. */
/* Collapse affordance only when the sidebar is actually in the grid (>1024px);
   at ≤1024 the sidebar is a drawer opened by the hamburger. */
@media (min-width: 1025px) { .nav-collapse-btn { display: inline-flex; } }

@media (max-width: 768px) { html body .app-shell.nav-collapsed { grid-template-columns: 1fr; } }

html body .chart-ctrl-label { font-size: 9px; }

html body .metric-section-link { font-size: 9px; }

html body #connect-wallet-btn { font-size: 11px; }

html body .td-row1 .tag,
html body .tag { font-size: 11px; }

html body .cs-stat-label,
html body .cs-cat-badge,
html body .pr-status,
html body .pr-stat-label { font-size: 8px; }

html body .topbar .td-row1 .tag,
html body .chart-controls .chart-ctrl-label,
html body .chart-ctrl .chart-ctrl-label { font-size: 11px; }

html body .chart-controls .chart-ctrl-label,
html body .chart-ctrl .chart-ctrl-label { font-size: 9px; }

html body .cs-cat-badge,
html body .np-phase { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; padding: 3px 7px; border-radius: 4px; /* unify shape (phase was a 999px pill) */
  border: none; min-width: 54px; /* uniform pill width → labels align */
  height: auto; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; flex-shrink: 0; }

html body .topbar { border-radius: 0; }

html body .topbar { border-left: none; border-right: none; border-top: none; }

html body .sidebar, html body .app-shell .sidebar { border-radius: 0; }

html body .td-header { position: relative; }

#header-motif { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; pointer-events: none; display: none; -webkit-mask-image: linear-gradient(to left, #000 46%, rgba(0,0,0,0.35) 70%, transparent 90%); mask-image: linear-gradient(to left, #000 46%, rgba(0,0,0,0.35) 70%, transparent 90%); }

html body .td-header > *:not(#header-motif) { position: relative; z-index: 1; }

.hm-logo { position: absolute; filter: drop-shadow(0 10px 30px rgba(0,0,0,0.22)); }

.hm-logo svg { display: block; width: 100%; height: 100%; }

html body:not(.wallet-connected) .main-area .topbar .tb-balance { display: none; }

html body .main-area .topbar { align-items: center; }

html body .main-area .topbar > * { align-self: center; }

html body .chart-controls,
html body #val-tab-group,
html body .val-horizon-group { gap: 2px; padding: 3px; border-radius: 10px; background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.07); }

html body .chart-ctrl-btn { border: none; outline: none; background: transparent !important; font-weight: 600; border-radius: 7px; box-shadow: none; transition: background .15s ease, color .15s ease; }

html body .chart-ctrl-btn:hover:not(.active):not([disabled]) { background: rgba(255,255,255,0.06) !important; }

html body .chart-ctrl-btn:focus-visible { outline: none !important; }

html body .chart-ctrl-btn[disabled] { opacity: 0.4; }

html body .topbar .tb-balance,
html body .topbar .tb-icon,
html body .topbar .tb-notif,
html body .topbar .tb-wallet-connect,
html body .topbar button.tb-wallet-connect { height: 36px; box-sizing: border-box; display: inline-flex; align-items: center; }

html body .topbar .tb-wallet-connect,
html body .topbar button.tb-wallet-connect { padding: 0 16px; }

html body .topbar .tb-balance { padding: 0 12px 0 14px; }

html body .topbar .tb-icon,
html body .topbar .tb-notif { width: 36px; padding: 0; justify-content: center; }

.td-design-card { background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius); padding: 14px 16px; }

#tweaks-panel{position:fixed;left:18px;bottom:18px;z-index:100000;width:248px;background:rgba(18,19,26,0.96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.12);border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,0.6);padding:14px;display:none;font-family:var(--font-sans,'Inter',sans-serif);}

#tweaks-panel.open{ display:block; max-height:calc(100vh - 36px); overflow-y:auto; }

html body #searchResults a:hover { background: var(--hover-bg); }

html body.stats-chips .td-price-row,
html body[class*="stats-"] .td-price-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }

html body.stats-chips .td-mcap-right,
html body[class*="stats-"] .td-mcap-right { align-self: center; }

@media (max-width: 768px) {
  html body.stats-chips .td-price-row,
  html body[class*="stats-"] .td-price-row { flex-direction: column; align-items: stretch; }
}

html body .td-mcap-right { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px; text-align: left; white-space: nowrap; align-self: flex-start; }

html body .td-mcap-right > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 7px 13px; border: 1px solid var(--border-card); border-radius: 8px; background: var(--surface) !important; flex: 0 0 auto; }

@media (min-width: 901px) {
  html body .td-price-row { flex-direction: row; align-items: center; justify-content: space-between; }
  html body .td-mcap-right { align-self: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SHARED MOBILE OVERRIDES (phones ≤640px)
   Appended last so these win over the base rules above by source order.
   Structural only — no color longhands (those stay in *-colors.css). These
   cover cross-page components (dropdowns, floating Ask widget, pillar popup
   rows); page-specific mobile rules live in each <page>.css.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Shared card header (title group + right-aligned action buttons). On a phone
     the title + a 3-button group (Declare/Validate/Assess, chart toggles, etc.)
     collide on one line — let it wrap so the actions drop to their own row
     (they keep their margin-left:auto, so they stay right-aligned). Only takes
     effect when the row would otherwise overflow, so wider headers are untouched. */
  .pr-card-head { flex-wrap: wrap; row-gap: 8px; }

  /* Fixed-position pickers must never exceed the viewport. JS anchors their
     left/top to a trigger; capping max-width keeps them from bleeding off a
     phone screen (they were min-width:160–200px with no upper bound). */
  .chain-dropdown, .narrative-dropdown, .exchange-dropdown, .rf-dd-panel {
    max-width: calc(100vw - 24px);
  }

  /* Floating Ask widget → near full-width card, still clear of the FAB above it. */
  .ask-popup { left: 12px; right: 12px; width: auto; }

  /* Pillar/metric popup rows: the desktop multi-track grids (168px 90px 1fr 40px
     etc.) can't fit ~366px. Reflow to one content column with the score/action
     pinned to the right, spanning the stacked rows. */
  .rfpp-row {
    grid-template-columns: minmax(0, 1fr) 40px;
    align-items: start; row-gap: 3px; column-gap: 10px;
  }
  .rfpp-row .m-name, .rfpp-row .m-raw, .rfpp-row .m-ctx { grid-column: 1; min-width: 0; }
  .rfpp-row .m-score { grid-column: 2; grid-row: 1 / -1; align-self: center; }

  .rfpp-row-utility {
    grid-template-columns: minmax(0, 1fr) 40px;
    align-items: start; row-gap: 3px; column-gap: 10px;
  }
  .rfpp-row-utility > * { grid-column: 1; min-width: 0; }
  .rfpp-row-utility > *:last-child { grid-column: 2; grid-row: 1 / -1; align-self: center; }
}


/* ══════════════════════════════════════════════════════════════════════════
   PRIMARY (GOLD) BUTTONS ALWAYS CARRY THE TRAILING ARROW
   Design consistency: every solid-gold CTA reads like the nav Connect button.
   This restores the arrow on solid gold buttons tagged .no-arrow (ghost/tab
   buttons keep their .no-arrow), and adds it to the pf-/wl- gold variants that
   never had one. Icon-only (.is-icon) buttons are excluded.
   ══════════════════════════════════════════════════════════════════════════ */
.rf-btn-tiny.rf-btn-tiny-solid.no-arrow:not(.is-icon)::after,
.btn-primary.no-arrow:not(.is-icon)::after,
button[type="submit"].no-arrow:not(.is-icon)::after,
.pf-btn-solid:not(.no-arrow)::after,
.wl-btn-solid:not(.no-arrow)::after {
  content: "→"; display: inline-block; margin-left: 4px; font-weight: 500;
  transition: transform 0.18s cubic-bezier(.16,1,.3,1);
}
.rf-btn-tiny.rf-btn-tiny-solid.no-arrow:not(.is-icon):hover::after,
.btn-primary.no-arrow:not(.is-icon):hover::after,
button[type="submit"].no-arrow:not(.is-icon):hover::after,
.pf-btn-solid:hover::after,
.wl-btn-solid:hover::after { transform: translateX(3px); }