/* ============================================================
   Market Watch 2.0 — Main Stylesheet
   Design system → Layout → Components → Views → Responsive
   ============================================================ */

/* ─── Design tokens ───────────────────────────────────────── */
:root {
    --bg:           #0f0f0f;
    --panel:        #1a1a1a;
    --card:         #202020;
    --hover:        #252525;
    --text:         #f0f0f0;
    --text-sec:     #c0c0c0;
    --muted:        #9a9a9a;
    --border:       #303030;
    --border-hover: #444;
    --primary:      #00b337;
    --primary-h:    #00cc40;
    --secondary:    #e4007c;
    --gain:         #00b337;
    --loss:         #e4007c;
    --green:        #00b337;
    --red:          #e4007c;
    --warn:         #ffc107;
    --accent:       #00b337;
    --tier-high:    #36AB81;
    --tier-mid:     #FAA61A;
    --tier-low:     #F04747;
    --surface:      #1a1a1a;
    --surface-2:    #242424;
    --surface-hover: rgba(255,255,255,.06);
    --sidebar-w:    250px;
    --topbar-h:     56px;
    --mobile-nav-height: 64px;
    --radius:       8px;
    --radius-sm:    4px;
    --radius-lg:    12px;
    --shadow:       0 2px 8px rgba(0,0,0,.4);
}

/* ─── Reset / Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    font-size: 15px;
    overflow-x: hidden;
    /* Safe area for notched phones */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    -webkit-tap-highlight-color: transparent;
}
/* Prevent scroll when mobile sidebar is open */
body.sidebar-open,
body.more-menu-open { overflow: hidden; touch-action: none; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-h); }
/* Remove 300ms tap delay on touch devices */
button, a, [role="button"] { touch-action: manipulation; }
img { display: block; max-width: 100%; height: auto; }
button { cursor: pointer; font-family: inherit; }
select, input { font-family: inherit; }
ul, ol { list-style: none; }

/* ─── Utilities ──────────────────────────────────────────── */
.muted { color: var(--muted); }
.gain  { color: var(--gain); }
.loss  { color: var(--loss); }
.text-center { text-align: center; }

/* Improved scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }

/* Smooth transitions for interactive elements */
button, a, select, input, .summary-card, .tsc-card, .pulse-card, .tmover-card, .mover-item {
    transition: all .15s ease;
}

/* Focus ring for accessibility */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ─── App Layout ──────────────────────────────────────────── */
.app-layout {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
    min-height: 100dvh; /* iOS Safari: avoid address bar jump */
}

/* ─── Sidebar ─────────────────────────────────────────────── */
.sidebar {
    background: var(--panel);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    z-index: 10;
}
.sidebar-brand {
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--border);
    text-align: center;
}
.sidebar-brand img { width: 100%; max-width: 180px; margin: 0 auto .5rem; }
.sidebar-brand h1 { font-size: .95rem; font-weight: 600; color: var(--text-sec); line-height: 1.3; }

.sidebar-nav { flex: 1; padding: .75rem 0; }
.sidebar-nav ul { display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1.25rem;
    color: var(--text-sec);
    font-size: .9rem;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
    position: relative;
}
.sidebar-nav a:hover {
    background: var(--hover);
    color: var(--text);
}
.sidebar-nav a.active {
    background: rgba(0,179,55,.08);
    color: var(--primary);
    border-left-color: var(--primary);
    font-weight: 600;
}
.sidebar-nav i { width: 20px; text-align: center; font-size: .95rem; }

.sidebar-footer {
    padding: .6rem .85rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    text-align: center;
}
.sidebar-footer .sf-updated,
.sidebar-footer .sf-affiliate {
    font-size: .68rem;
    color: var(--muted);
    line-height: 1.35;
}
.sidebar-footer .sf-updated strong { color: var(--primary); font-weight: 600; }
.sidebar-footer .sf-affiliate { font-size: .6rem; opacity: .7; }
/* sidebar-social defined below with full styles */

/* Mobile sidebar overlay */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 99;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.sidebar-overlay.visible { display: block; }

/* ─── Mobile Bottom Navigation ────────────────────────────── */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--mobile-nav-height);
    height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--panel);
    border-top: 1px solid var(--border);
    align-items: center;
    justify-content: space-around;
    z-index: 100;
    box-shadow: 0 -2px 12px rgba(0,0,0,.4);
    -webkit-overflow-scrolling: touch;
}
.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: .35rem .25rem;
    text-decoration: none;
    color: var(--muted);
    transition: color .15s, background .15s;
    min-height: 56px;
    -webkit-tap-highlight-color: transparent;
}
.mobile-nav-item:hover,
.mobile-nav-item:focus {
    color: var(--primary);
    background: rgba(0,179,55,.06);
}
.mobile-nav-item.active {
    color: var(--primary);
    font-weight: 600;
}
.mobile-nav-item i {
    font-size: 1.1rem;
    margin-bottom: .15rem;
}
.mobile-nav-item span {
    font-size: .65rem;
    font-weight: 500;
}
.mobile-nav-item.nav-external span { font-size: .6rem; }
.mobile-nav-item.mobile-nav-more {
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
}
.mobile-nav-more-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: .15rem;
    flex-shrink: 0;
}
.mobile-nav-more-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
}

/* ─── More menu sheet (mobile) ─────────────────────────────── */
.more-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 200;
    opacity: 0;
    transition: opacity .2s ease;
}
.more-menu-overlay.visible {
    display: block;
    opacity: 1;
}
.more-menu-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 85vh;
    background: var(--panel);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,.4);
    z-index: 201;
    transform: translateY(100%);
    transition: transform .25s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom);
}
.more-menu-sheet.open {
    transform: translateY(0);
}
.more-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.more-menu-header-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    flex: 1;
}
.more-menu-logo {
    width: 96px;
    height: 96px;
    object-fit: contain;
    border-radius: var(--radius);
}
.more-menu-close {
    background: none;
    border: none;
    padding: .5rem;
    min-width: 44px;
    min-height: 44px;
    color: var(--muted);
    cursor: pointer;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
}
.more-menu-close:hover { color: var(--text); background: var(--hover); }
.more-menu-body {
    overflow-y: auto;
    padding: 1rem 1.25rem;
    -webkit-overflow-scrolling: touch;
}
.more-menu-section {
    margin-bottom: 1.25rem;
}
.more-menu-section:last-child { margin-bottom: 0; }
.more-menu-section-label {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    display: block;
    margin-bottom: .5rem;
    text-align: center;
}
.more-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    padding: .75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: .9rem;
    color: var(--text);
    cursor: pointer;
    transition: background .15s, border-color .15s;
    margin-bottom: .5rem;
}
.more-menu-btn:hover { background: var(--hover); border-color: var(--primary); }
.more-menu-btn i { color: var(--primary); font-size: 1rem; display: flex; align-items: center; justify-content: center; }
.more-menu-last-updated {
    padding: .6rem 1rem;
    background: var(--surface);
    border-radius: var(--radius);
    font-size: .85rem;
    color: var(--text-sec);
    text-align: center;
}
.more-menu-label { display: block; font-size: .7rem; color: var(--muted); margin-bottom: .2rem; }
.more-menu-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
    font-size: .9rem;
    transition: background .15s, border-color .15s;
    margin-bottom: .4rem;
}
.more-menu-link:hover { background: var(--hover); border-color: var(--primary); }
.more-menu-link i:first-child { color: var(--primary); font-size: 1rem; display: flex; align-items: center; justify-content: center; }
.more-menu-ext { font-size: .65rem; color: var(--muted); }
.more-menu-social {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .5rem 0;
    justify-content: center;
}
.more-menu-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--muted);
    font-size: 1.25rem;
    transition: background .15s, color .15s;
}
.more-menu-social a:hover { background: var(--hover); color: var(--primary); }

/* ─── App Content ─────────────────────────────────────────── */
.app-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 3rem;
}

/* ─── Top Bar ─────────────────────────────────────────────── */
.topbar {
    position: sticky;
    top: 0;
    z-index: 9;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 1.25rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text);
    font-size: 1.2rem;
    padding: .5rem;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: var(--radius);
}
.menu-toggle:hover { background: var(--hover); }
.search-wrapper {
    flex: 1;
    position: relative;
    max-width: 380px;
}
.search-wrapper i { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search-wrapper input {
    width: 100%;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    padding: .45rem 1rem .45rem 2.4rem;
    font-size: .9rem;
    transition: border-color .15s;
}
.search-wrapper input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0,179,55,.12);
}
.topbar-right { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.currency-picker { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .85rem; }
.currency-picker select {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    padding: .35rem .6rem;
    font-size: .85rem;
}

/* ─── Loading Bar (top of page) ───────────────────────────── */
.loading-bar-wrap {
    height: 3px;
    background: transparent;
    overflow: hidden;
    transition: opacity .4s;
}
.loading-bar-fill {
    height: 3px;
    background: var(--primary);
    width: 0;
    transition: width .4s ease;
}

/* ─── Buttons ─────────────────────────────────────────────── */
.btn-primary {
    background: var(--primary);
    color: #000;
    border: none;
    border-radius: var(--radius);
    padding: .5rem 1.2rem;
    font-weight: 600;
    font-size: .9rem;
    transition: background .15s;
}
.btn-primary:hover { background: var(--primary-h); }

.btn-secondary {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .45rem 1rem;
    font-size: .85rem;
    transition: background .15s, border-color .15s;
}
.btn-secondary:hover { background: var(--hover); border-color: var(--border-hover); }

.btn-refresh {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-sec);
    padding: .4rem .85rem;
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    transition: all .15s;
}
.btn-refresh:hover { background: var(--hover); border-color: var(--primary); color: var(--primary); }

.btn-retry {
    background: var(--card);
    border: 1px solid var(--warn);
    color: var(--warn);
    border-radius: var(--radius);
    padding: .4rem .9rem;
    font-size: .85rem;
    margin-top: .5rem;
}
.btn-retry:hover { background: rgba(255,193,7,.15); }

.btn-buy {
    background: var(--primary);
    color: #000;
    font-weight: 600;
    border-radius: var(--radius);
    padding: .45rem 1rem;
    font-size: .85rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: background .15s;
}
.btn-buy:hover { background: var(--primary-h); color: #000; }

.btn-buy-sm {
    background: var(--primary);
    color: #000;
    font-weight: 600;
    border-radius: 6px;
    padding: .3rem .75rem;
    font-size: .78rem;
    white-space: nowrap;
    transition: background .15s;
}
.btn-buy-sm:hover { background: var(--primary-h); color: #000; }

.btn-buy-full {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: var(--primary);
    color: #000;
    font-weight: 700;
    border-radius: var(--radius);
    padding: .75rem;
    font-size: .95rem;
    margin-top: 1rem;
    width: 100%;
    transition: background .15s;
}
.btn-buy-full:hover { background: var(--primary-h); color: #000; }

/* ─── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb {
    position: sticky;
    top: var(--topbar-h);
    z-index: 8;
    padding: .6rem 1.25rem;
    font-size: .82rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.breadcrumb a { color: var(--primary); }
.breadcrumb .sep { color: var(--border-hover); }

/* ─── SEO Intro ───────────────────────────────────────────── */
.seo-intro {
    margin: .75rem 1.25rem;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(0,179,55,.25);
    border-radius: var(--radius-lg);
}
.seo-intro summary {
    padding: .7rem 1rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: .5rem;
    list-style: none;
    user-select: none;
}
.seo-intro summary::-webkit-details-marker { display: none; }
.seo-intro summary .chevron { margin-left: auto; transition: transform .2s; font-size: .8rem; }
.seo-intro[open] summary .chevron { transform: rotate(180deg); }
.seo-intro .intro-body { padding: .25rem 1rem 1rem; }
.seo-intro .intro-body p { font-size: .9rem; color: var(--text-sec); margin-bottom: .5rem; }

/* ─── Views ───────────────────────────────────────────────── */
.view-panel {
    padding: 1.25rem;
    min-width: 0;
}
.view-panel[hidden] { display: none !important; }
.view-topbar {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.view-title {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.view-title i { color: var(--primary); font-size: 1rem; opacity: .8; }
.view-subtitle { color: var(--muted); font-size: .9rem; }
.view-controls { display: flex; gap: .5rem; align-items: center; margin-left: auto; }

/* ─── Cards View Header ──────────────────────────────────── */
.cv-header {
    margin-bottom: .75rem;
}
.cv-header-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.cv-search-wrap {
    flex: 1;
    position: relative;
    max-width: 320px;
    min-width: 180px;
}
.cv-search-wrap > i {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: .82rem;
}
.cv-search-input {
    width: 100%;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text);
    padding: .45rem 1rem .45rem 2.2rem;
    font-size: .88rem;
    transition: border-color .15s, box-shadow .15s;
}
.cv-search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0,179,55,.12);
}

/* ─── Cards Toolbar ──────────────────────────────────────── */
.cv-filters-wrap { margin-bottom: .6rem; }
.cv-mobile-toggle { display: none; }
.cv-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: .65rem .85rem;
    margin-bottom: .6rem;
}
.cv-filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    flex: 1 1 auto;
    min-width: 0;
}
#cv-ms-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}
#cv-ms-filters .ms-filter { flex-shrink: 0; }
.cv-sort-group {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}
.cv-range-group {
    display: flex;
    align-items: center;
    gap: .35rem;
}
.cv-range-group .dfb-label {
    font-size: .7rem;
    white-space: nowrap;
}

/* Price Range Filter */
.cv-price-range {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    flex-wrap: wrap;
    margin-bottom: .35rem;
}
.cv-price-range .dfb-label {
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-sec);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: .25rem;
}
.cv-price-range .dfb-label i { color: var(--primary); font-size: .65rem; }
.cv-price-inputs {
    display: flex;
    align-items: center;
    gap: .3rem;
}
.cv-price-input {
    width: 72px;
    padding: .3rem .4rem;
    font-size: .75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    text-align: center;
    -moz-appearance: textfield;
}
.cv-price-input::-webkit-inner-spin-button,
.cv-price-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cv-price-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(0,179,55,.15); }
.cv-price-sep { color: var(--muted); font-size: .75rem; }
.cv-price-apply-btn,
.cv-price-clear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    font-size: .65rem;
    transition: all .15s;
}
.cv-price-apply-btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.cv-price-clear-btn:hover { background: var(--loss); border-color: var(--loss); color: #fff; }
.cv-price-presets {
    display: flex;
    gap: .25rem;
    flex-wrap: wrap;
}
.cv-price-preset {
    padding: .2rem .55rem;
    font-size: .65rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text-sec);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.cv-price-preset:hover {
    background: var(--hover);
    border-color: var(--border-hover);
    color: var(--text);
}
.cv-price-preset.active {
    background: rgba(0,179,55,.12);
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}
.filter-select {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    padding: .38rem .6rem;
    font-size: .82rem;
    min-width: 0;
    transition: border-color .15s, box-shadow .15s;
    max-width: 160px;
}
.filter-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0,179,55,.1);
}
.filter-active {
    border-color: var(--primary) !important;
    background: rgba(0,179,55,.06);
}
.cv-sort-select { min-width: 150px; }
.cv-per-page-select { min-width: 0; width: 56px; }
.per-page-wrap {
    font-size: .78rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: .3rem;
}
.cv-clear-btn {
    font-size: .78rem;
    padding: .35rem .65rem;
    display: flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
}

/* ─── Intent Chips ───────────────────────────────────────── */
.cv-chips-bar, .intent-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .6rem;
}
.intent-chip {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-sec);
    padding: .28rem .75rem;
    font-size: .78rem;
    display: flex;
    align-items: center;
    gap: .3rem;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.intent-chip:hover {
    background: var(--hover);
    border-color: var(--border-hover);
    color: var(--text);
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.intent-chip.active {
    background: rgba(0,179,55,.12);
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
    box-shadow: 0 0 0 2px rgba(0,179,55,.1);
}
.intent-chip i { font-size: .68rem; }
.chip-count {
    font-size: .62rem;
    font-weight: 700;
    background: rgba(255,255,255,.08);
    border-radius: 10px;
    padding: .08rem .35rem;
    min-width: 18px;
    text-align: center;
    line-height: 1.3;
}
.intent-chip.active .chip-count {
    background: rgba(0,179,55,.2);
    color: var(--primary);
}
.chip-desc {
    font-size: .58rem;
    font-weight: 400;
    color: var(--primary);
    opacity: .8;
    white-space: nowrap;
}

/* ─── Results Bar ────────────────────────────────────────── */
.cv-results-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .5rem;
    flex-wrap: wrap;
}
.cv-stats {
    font-size: .8rem;
    color: var(--muted);
}
.cv-total-value {
    font-size: .78rem;
    color: var(--text-sec);
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-left: auto;
}
.cv-total-value i { color: var(--tier-high); font-size: .72rem; }
.cv-total-value strong { color: var(--text); }

/* ─── Empty state ────────────────────────────────────────── */
.cv-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 3rem 1rem;
    color: var(--muted);
    text-align: center;
}
.cv-empty-state > i { font-size: 2rem; opacity: .5; }
.cv-empty-state p { font-size: .95rem; }
.cv-empty-state .cv-empty-hint { font-size: .82rem; opacity: .9; margin: -0.25rem 0 0; }

/* ─── Results Stats (legacy) ─────────────────────────────── */

/* ─── Dashboard ───────────────────────────────────────────── */
.dash-section { margin-bottom: 2rem; }
.section-heading {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: .9rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    letter-spacing: -.01em;
}
.section-heading i {
    color: var(--primary);
    font-size: .95em;
    opacity: .8;
}
.section-heading-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .9rem;
    flex-wrap: wrap;
}
.section-heading-row .section-heading { margin-bottom: 0; }

/* Summary cards */
.summary-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .9rem;
    margin-bottom: 2rem;
}
.summary-card {
    background: linear-gradient(135deg, var(--panel) 0%, var(--card) 100%);
    border: 1px solid var(--border);
    overflow: visible;
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    position: relative;
}
.summary-card:hover {
    border-color: var(--border-hover);
    background: linear-gradient(135deg, var(--card) 0%, var(--hover) 100%);
}
.sc-icon {
    font-size: 1.5rem;
    color: var(--primary);
    margin-top: .1rem;
    flex-shrink: 0;
    opacity: .85;
}
.sc-body { display: flex; flex-direction: column; gap: .2rem; overflow: visible; }
.sc-label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; overflow: visible; }
.sc-label:has(.info-tip-wrap) { display: inline-flex; align-items: center; gap: .25rem; }
.sc-value { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; }
.sc-sub { font-size: .7rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }

/* Set breakdown */
.table-scroll { overflow-x: auto; }
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}
.data-table th {
    text-align: left;
    padding: .6rem .75rem;
    color: var(--muted);
    border-bottom: 2px solid var(--border);
    font-weight: 700;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.data-table td {
    padding: .55rem .75rem;
    border-bottom: 1px solid rgba(48,48,48,.6);
    color: var(--text-sec);
}
.data-table tbody tr:hover td { background: var(--hover); }
.data-table .num { text-align: right; }

/* Top movers */
.range-btns { display: flex; gap: .3rem; }
.range-btn {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    padding: .3rem .7rem;
    font-size: .8rem;
    transition: all .15s;
}
.range-btn:hover { border-color: var(--primary); color: var(--primary); }
.range-btn.active { background: rgba(0,179,55,.15); border-color: var(--primary); color: var(--primary); font-weight: 600; }

.movers-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.movers-col { display: flex; flex-direction: column; gap: .4rem; }
.movers-col-title {
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .4rem 0;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.gainers-title { color: var(--gain); }
.losers-title  { color: var(--loss); }
.movers-list   { display: flex; flex-direction: column; gap: .4rem; }

a.mover-item {
    text-decoration: none;
    color: inherit;
}
.mover-item {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .65rem .85rem;
    display: grid;
    grid-template-columns: 48px 1fr auto auto auto;
    align-items: center;
    gap: .65rem;
    transition: border-color .15s, background .15s, box-shadow .15s;
    cursor: pointer;
}
.mover-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.mover-item:hover { background: var(--hover); border-color: var(--primary); }
.mover-img {
    width: 44px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
}
.mover-info { min-width: 0; }
/* mover-metrics hosts the info btn inline with stats */
.mover-name {
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
    display: block;
    flex: 1;
    min-width: 0;
}
.mover-name:hover { color: var(--primary); }
.mover-set { font-size: .72rem; color: var(--muted); display: block; }
.mover-metrics {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .4rem;
    margin-top: .2rem;
}
.mover-metric {
    font-size: .66rem;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: .15rem;
}
.mover-metric i { font-size: .58rem; color: var(--primary); }
.mover-metric-hot { color: #fb923c; }
.mover-metric-hot i { color: #fb923c; }
.mover-spread { color: var(--gain); font-weight: 600; }
.mover-chart-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    min-width: 72px;
}
.mover-range { font-size: .58rem; color: var(--muted); white-space: nowrap; }
.mover-price { text-align: right; flex-shrink: 0; }
.mover-current { font-size: .88rem; font-weight: 700; display: block; }
.mover-delta { font-size: .78rem; display: flex; align-items: center; gap: .25rem; justify-content: flex-end; }
.mover-delta small { font-size: .72rem; }
.no-data { font-size: .85rem; color: var(--muted); padding: .5rem; }

/* Price tiers */
.tiers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .9rem;
}
.tier-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    border-left-width: 4px;
    padding: 1rem;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}
.tier-high { border-left-color: var(--tier-high); }
.tier-mid  { border-left-color: var(--tier-mid); }
.tier-low  { border-left-color: var(--tier-low); }
.tier-icon { font-size: 1.3rem; margin-top: .1rem; }
.tier-high .tier-icon { color: var(--tier-high); }
.tier-mid  .tier-icon { color: var(--tier-mid); }
.tier-low  .tier-icon { color: var(--tier-low); }
.tier-title { font-weight: 700; font-size: .9rem; margin-bottom: .25rem; }
.tier-count { font-size: .85rem; color: var(--text-sec); display: block; }
.tier-avg   { font-size: .82rem; color: var(--muted); display: block; }

/* ─── Cards Grid ──────────────────────────────────────────── */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .65rem;
    margin-bottom: 1rem;
}
a.card-item {
    text-decoration: none;
    color: inherit;
}
.card-item {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s, transform .15s, box-shadow .15s;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    display: flex;
    flex-direction: column;
}
.card-item:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,179,55,.12), 0 4px 8px rgba(0,0,0,.2);
}
.card-item:focus { outline: 2px solid var(--primary); outline-offset: 2px; }
.ci-image-wrap {
    position: relative;
    background: linear-gradient(180deg, #0a0a0a, #151515);
    aspect-ratio: 3/4;
    overflow: hidden;
}
.ci-image-wrap img { width: 100%; height: 100%; object-fit: contain; transition: transform .2s, filter .2s; }
.card-item:hover .ci-image-wrap img { transform: scale(1.04); filter: brightness(1.05); }
.ci-info {
    padding: .5rem .6rem .55rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 1;
}
.ci-name {
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ci-meta { display: flex; flex-wrap: wrap; gap: .2rem .3rem; }
.ci-set { font-size: .68rem; color: var(--muted); }
.ci-type { font-size: .68rem; color: var(--text-sec); }
.ci-domain {
    font-size: .62rem;
    color: var(--accent);
    background: rgba(0,179,55,.1);
    padding: .05rem .3rem;
    border-radius: 3px;
    font-weight: 600;
}
.ci-rarity { font-size: .68rem; font-weight: 700; }
.ci-price-row {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
}
.ci-price { font-size: .92rem; font-weight: 800; letter-spacing: -.01em; }
.ci-dollar { font-size: .78rem; font-weight: 700; }
.ci-dollar.gain { color: var(--gain); }
.ci-dollar.loss { color: var(--loss); }
.ci-change { font-size: .68rem; font-weight: 600; opacity: .8; }

/* Card direct price */
.ci-direct {
    font-size: .68rem;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: .25rem;
}
.ci-direct i { font-size: .58rem; }

/* Card momentum badge */
.ci-mom {
    font-size: .55rem;
    font-weight: 700;
    padding: .1rem .3rem;
    border-radius: 3px;
    white-space: nowrap;
}
.ci-mom.badge-mom-strong-upward { background: rgba(0,179,55,.15); color: var(--gain); }
.ci-mom.badge-mom-moderate-upward { background: rgba(74,222,128,.1); color: #4ade80; }
.ci-mom.badge-mom-stable { background: rgba(255,255,255,.06); color: var(--muted); }
.ci-mom.badge-mom-moderate-downward { background: rgba(251,146,60,.1); color: #fb923c; }
.ci-mom.badge-mom-strong-downward { background: rgba(228,0,124,.12); color: var(--loss); }
.ci-mom-lowval { opacity: .6; border: 1px dashed rgba(255,255,255,.15); }
.ci-tag-hot {
    font-size: .55rem;
    padding: .1rem .3rem;
    border-radius: 3px;
    background: rgba(255,107,0,.2);
    color: #fb923c;
    display: inline-flex;
    align-items: center;
    gap: .15rem;
}
.ci-tag-cold {
    font-size: .55rem;
    padding: .1rem .3rem;
    border-radius: 3px;
    background: rgba(100,149,237,.2);
    color: #6495ed;
    display: inline-flex;
    align-items: center;
    gap: .15rem;
}
.ci-tag-buylow {
    font-size: .55rem;
    padding: .1rem .3rem;
    border-radius: 3px;
    background: rgba(0,179,55,.15);
    color: var(--gain);
    display: inline-flex;
    align-items: center;
    gap: .15rem;
}
.ci-tag-stable {
    font-size: .55rem;
    padding: .1rem .3rem;
    border-radius: 3px;
    background: rgba(255,255,255,.06);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: .15rem;
}
.ci-tag-volume {
    font-size: .55rem;
    padding: .1rem .3rem;
    border-radius: 3px;
    background: rgba(0,179,55,.12);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: .15rem;
}
.ci-mom-status {
    font-size: .58rem;
    font-weight: 700;
    background: var(--surface-2);
    color: var(--muted);
    padding: .05rem .3rem;
    border-radius: 3px;
    letter-spacing: .3px;
}

/* Foil badge (legacy + new) */
.foil-badge { background: rgba(255,215,0,.25); color: #ffd700; border: 1px solid rgba(255,215,0,.4); font-size: .7rem; }

/* Skeleton cards */
.skeleton-card { pointer-events: none; }
.skeleton {
    background: linear-gradient(90deg, var(--panel) 25%, var(--hover) 50%, var(--panel) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 4px;
}
.skeleton-img { aspect-ratio: 3/4; width: 100%; border-radius: 0; }
.skeleton-line { height: 14px; margin: .4rem .6rem; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ─── Pagination ──────────────────────────────────────────── */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: center;
    margin-top: 1.25rem;
    padding: .75rem 0;
}
.pg-btn {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text-sec);
    border-radius: var(--radius);
    padding: .4rem .75rem;
    font-size: .82rem;
    min-width: 38px;
    transition: all .15s;
    font-weight: 500;
}
.pg-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(0,179,55,.06);
}
.pg-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #000;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,179,55,.2);
}
.pg-prev, .pg-next {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-weight: 600;
}
.pg-ellipsis { color: var(--muted); padding: .35rem .3rem; font-size: .85rem; align-self: center; }

.pg-jump {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-left: .5rem;
    padding-left: .5rem;
    border-left: 1px solid var(--border);
}
.pg-jump-input {
    width: 48px;
    padding: .3rem .35rem;
    font-size: .78rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    text-align: center;
    -moz-appearance: textfield;
}
.pg-jump-input::-webkit-inner-spin-button,
.pg-jump-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pg-jump-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(0,179,55,.15); }
.pg-jump-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text-sec);
    cursor: pointer;
    font-size: .7rem;
    transition: all .15s;
}
.pg-jump-btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.pg-jump-of { font-size: .72rem; color: var(--muted); white-space: nowrap; }

/* ─── Sets Grid ───────────────────────────────────────────── */
/* ─── Sets View Header ─────────────────────────────────── */
.sv-header { margin-bottom: .75rem; }
.sv-header-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}
.sv-search-wrap {
    flex: 1;
    position: relative;
    max-width: 280px;
    min-width: 160px;
}
.sv-search-wrap > i {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: .82rem;
}
.sv-search-input {
    width: 100%;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text);
    padding: .42rem 1rem .42rem 2.2rem;
    font-size: .85rem;
    transition: border-color .15s, box-shadow .15s;
}
.sv-search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0,179,55,.12);
}
.sv-controls {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}
.sv-controls .sv-sort-select {
    min-width: 220px;
    width: auto;
}
.sv-controls .sv-count {
    margin-left: auto;
}
.sv-range-group {
    display: flex;
    align-items: center;
    gap: .35rem;
}
.sv-range-group .dfb-label {
    font-size: .7rem;
    white-space: nowrap;
}
.sv-count {
    font-size: .78rem;
    color: var(--muted);
}

/* ─── Sets Grid ──────────────────────────────────────────── */
.sets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 1rem;
}

/* ─── Set Card (redesigned) ──────────────────────────────── */
.set-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .15s, box-shadow .15s, transform .15s;
    cursor: pointer;
}
.set-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 20px rgba(0,179,55,.1), 0 2px 8px rgba(0,0,0,.2);
    transform: translateY(-1px);
}
.set-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.sc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, var(--card) 0%, var(--panel) 100%);
}
.sc-header-left {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}
.sc-name {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sc-abbr {
    font-size: .65rem;
    font-weight: 700;
    color: var(--accent);
    background: rgba(0,179,55,.1);
    padding: .1rem .35rem;
    border-radius: 4px;
    flex-shrink: 0;
}
.sc-card-count {
    font-size: .72rem;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ─── Set KPI Stats Row ──────────────────────────────────── */
.sc-stats-row {
    display: flex;
    gap: .5rem;
    padding: .6rem .85rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.sc-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 55px;
}
.sc-kpi-val {
    font-size: .88rem;
    font-weight: 700;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: .2rem;
}
.sc-kpi-val i { font-size: .7rem; }
.sc-kpi-label {
    font-size: .6rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}

/* ─── Set Preview Sections (Top by Price / Top Sellers) ─── */
.sc-preview-section {
    padding: .5rem .85rem;
    border-bottom: 1px solid rgba(48,48,48,.5);
}
.sc-preview-label {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .68rem;
    font-weight: 700;
    color: var(--text-sec);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .4rem;
}
.sc-preview-label i { font-size: .6rem; color: var(--primary); }
.sc-preview-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .35rem;
}

/* ─── Mini Card (inside set preview) ─────────────────────── */
.sc-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .3rem;
    cursor: pointer;
    transition: border-color .12s, transform .12s, box-shadow .12s;
    text-align: center;
    gap: .15rem;
    overflow: hidden;
}
.sc-mini:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.sc-mini img {
    width: 100%;
    aspect-ratio: 63/88;
    object-fit: cover;
    border-radius: 3px;
}
.sc-mini-info {
    display: flex;
    flex-direction: column;
    gap: .05rem;
    width: 100%;
    min-width: 0;
}
.sc-mini-name {
    font-size: .58rem;
    color: var(--text-sec);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.sc-mini-metric {
    font-size: .65rem;
    font-weight: 700;
    color: var(--text);
}
.sc-mini-pct {
    font-size: .58rem;
    font-weight: 700;
}
.sc-mini-pct.gain { color: var(--gain); }
.sc-mini-pct.loss { color: var(--loss); }

/* ─── Set Card Actions ───────────────────────────────────── */
.sc-actions {
    display: flex;
    gap: .5rem;
    padding: .65rem .85rem;
    margin-top: auto;
}
.sc-actions .btn-primary { flex: 1; }
.sc-actions .btn-outline { flex-shrink: 0; }

/* ─── Price Distribution (drawer) ────────────────────────── */
.set-price-dist {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.spd-row {
    display: grid;
    grid-template-columns: 50px 1fr 56px;
    align-items: center;
    gap: .5rem;
}
.spd-label {
    font-size: .7rem;
    color: var(--text-sec);
    text-align: right;
}
.spd-bar-wrap {
    height: 8px;
    background: var(--surface-2, rgba(255,255,255,.06));
    border-radius: 4px;
    overflow: hidden;
}
.spd-bar {
    height: 100%;
    background: var(--primary);
    border-radius: 4px;
    min-width: 2px;
    transition: width .3s ease;
}
.spd-count {
    font-size: .68rem;
    color: var(--muted);
    text-align: right;
}
.spd-pct {
    opacity: .8;
    font-size: .62rem;
}

/* Drawer accent for sets */
.drawer-accent-set .drawer-header {
    border-left: 4px solid var(--primary);
    background: linear-gradient(90deg, rgba(0,179,55,.06) 0%, transparent 100%);
}
.drawer-accent-set .drawer-title {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -.02em;
}
.drawer-accent-set .drawer-panel { box-shadow: -8px 0 32px rgba(0,179,55,.1); }

/* ─── Set Explorer Drawer (unique layout) ──────────────────────────────────── */
.drawer-accent-set .drawer-body { padding: 0; }
.set-drawer-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 1.5rem;
}

/* Hero: key stats + primary CTA + trend */
.set-drawer-hero {
    background: linear-gradient(180deg, rgba(0,179,55,.08) 0%, transparent 100%);
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid var(--border);
}
.set-drawer-hero-stats {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    margin-bottom: 1rem;
}
.set-drawer-stat {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.set-drawer-stat-label {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
}
.set-drawer-stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}
.set-drawer-stat-value.gain { color: var(--green); }
.set-drawer-stat-value.loss { color: var(--red); }
.set-drawer-stat-hero .set-drawer-stat-value { font-size: 1.05rem; }
.set-drawer-stat-highlight .set-drawer-stat-value { color: var(--primary); }
.set-drawer-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.set-drawer-browse-btn {
    flex-shrink: 0;
    padding: .5rem 1rem;
    font-weight: 600;
}
.set-drawer-trend {
    flex: 1;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
}
.set-drawer-trend svg {
    width: 100%;
    max-width: 200px;
    height: 36px;
}
.set-drawer-trend-caption {
    font-size: .62rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Secondary stats grid */
.set-drawer-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    padding: .85rem 1.25rem;
    background: var(--surface-2, rgba(255,255,255,.03));
    border-bottom: 1px solid var(--border);
}
.set-drawer-stats-grid .set-drawer-stat-value { font-size: .88rem; }

/* Browse by: Momentum + Rarity side-by-side */
.set-drawer-browse-by {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--panel);
}
.set-drawer-section-head {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-sec);
    margin: 0 0 .5rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.set-drawer-browse-by-col .set-momentum-summary,
.set-drawer-browse-by-col .et-rarity-comp {
    margin-top: 0;
}
.set-drawer-browse-by-col .smom-hint,
.set-drawer-browse-by-col .smom-row { margin-bottom: .2rem; }
.set-drawer-browse-by-col .set-momentum-summary .smom-row:last-child,
.set-drawer-browse-by-col .et-rarity-comp .rc-row:last-child { margin-bottom: 0; }

/* Card list sections */
.set-drawer-card-sections {
    padding: 0 1.25rem 1rem;
}
.set-drawer-card-sections .drawer-section {
    margin-top: 1rem;
}
.set-drawer-card-sections .drawer-section:first-child {
    margin-top: 1rem;
}
.set-drawer-card-sections .drawer-section-title {
    font-size: .75rem;
}

/* Legacy set card compat (kept for v1 fallback) */
.set-card-img { position: relative; background: #111; display: flex; align-items: center; justify-content: center; padding: 1rem; height: 140px; }
.set-card-img img { max-height: 100%; width: auto; object-fit: contain; }
.btn-view-set { margin-top: auto; }

/* ─── Sealed Grid ─────────────────────────────────────────── */
/* ─── Sealed View Header (parity with Sets/Cards) ──────────────────────────── */
.sl-header { margin-bottom: .75rem; }
.sl-header-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}
.sl-search-wrap {
    flex: 1;
    position: relative;
    max-width: 280px;
    min-width: 160px;
}
.sl-search-wrap > i {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: .82rem;
}
.sl-search-input {
    width: 100%;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text);
    padding: .42rem 1rem .42rem 2.2rem;
    font-size: .85rem;
    transition: border-color .15s, box-shadow .15s;
}
.sl-search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0,179,55,.12);
}
.sl-controls {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}
.sl-controls .sl-sort-select { min-width: 180px; width: auto; }
.sl-controls .sl-per-page-select { min-width: 70px; width: auto; }
.sl-controls .sl-filter-group { display: flex; align-items: center; gap: .35rem; }
.sl-controls .sl-filter-group .dfb-label { font-size: .7rem; white-space: nowrap; }
.sl-controls .sl-filter-group select { min-width: 140px; }
.sl-controls .sl-range-group { display: flex; align-items: center; gap: .35rem; }
.sl-controls .sl-range-group .dfb-label { font-size: .7rem; white-space: nowrap; }
.sl-controls .sl-count { margin-left: auto; font-size: .78rem; color: var(--muted); }
.sl-chips-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    min-height: 0;
    margin-bottom: .5rem;
}
.sl-chips-bar:empty { display: none; }
.sl-chips-bar .active-filters-label { font-size: .75rem; color: var(--text-sec); margin-right: .2rem; }
.sl-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: rgba(0,179,55,.12);
    color: var(--primary);
    border: 1px solid rgba(0,179,55,.25);
    border-radius: 999px;
    padding: .15rem .5rem;
    font-size: .72rem;
    font-weight: 600;
}
.sl-chip-remove {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: .85rem;
    padding: 0 .1rem;
    opacity: .7;
}
.sl-chip-remove:hover { opacity: 1; }
.sl-results-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .6rem;
    flex-wrap: wrap;
}
.sl-stats, .sl-total-value { font-size: .82rem; color: var(--text-sec); margin: 0; }
.sl-total-value { font-weight: 600; color: var(--primary); }

.sealed-summary-cards { display: flex; gap: .9rem; flex-wrap: wrap; margin-bottom: 1rem; }
.sealed-summary-cards .summary-card { flex: 1; min-width: 180px; }
.sealed-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .65rem;
}
/* Sealed card-item parity — same layout/styling as .card-item */
a.sealed-card-item {
    text-decoration: none;
    color: inherit;
}
.sealed-card-item {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s, transform .15s, box-shadow .15s;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    display: flex;
    flex-direction: column;
}
.sealed-card-item:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,179,55,.12), 0 4px 8px rgba(0,0,0,.2);
}
.sealed-card-item:focus { outline: 2px solid var(--primary); outline-offset: 2px; }
.sci-image-wrap {
    position: relative;
    background: linear-gradient(180deg, #0a0a0a, #151515);
    aspect-ratio: 3/4;
    overflow: hidden;
}
.sci-image-wrap img { width: 100%; height: 100%; object-fit: contain; transition: transform .2s, filter .2s; }
.sealed-card-item:hover .sci-image-wrap img { transform: scale(1.04); filter: brightness(1.05); }
.sci-badge { position: absolute; top: .35rem; right: .35rem; font-size: .65rem; padding: .15rem .35rem; border-radius: 4px; }
.sci-badge-hot { background: rgba(251,146,60,.25); color: #fb923c; }
.sci-type-tag {
    position: absolute;
    bottom: .35rem;
    left: .35rem;
    font-size: .58rem;
    font-weight: 700;
    padding: .1rem .3rem;
    border-radius: 3px;
    background: rgba(0,0,0,.6);
    color: #fff;
}
.sci-info {
    padding: .5rem .6rem .55rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 1;
}
.sci-name { font-size: .82rem; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sci-set, .sci-type { font-size: .68rem; color: var(--muted); }
.sci-price-row { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.sci-price { font-size: .92rem; font-weight: 800; letter-spacing: -.01em; }
.sci-dollar { font-size: .78rem; font-weight: 700; }
.sci-dollar.gain { color: var(--gain); }
.sci-dollar.loss { color: var(--loss); }
.sci-change { font-size: .68rem; font-weight: 600; opacity: .8; }
.sci-stats-col { display: flex; flex-direction: column; gap: .15rem; font-size: .68rem; color: var(--text-sec); }
.sci-stat-icon { margin-right: .2rem; }
.sci-spark-row { margin-top: .2rem; }
.sci-spark-row .sparkline { display: block; }
.sci-footer {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: auto;
    padding-top: .35rem;
}
.sci-tag-hot {
    font-size: .55rem;
    padding: .1rem .3rem;
    border-radius: 3px;
    background: rgba(255,107,0,.2);
    color: #fb923c;
    display: inline-flex;
    align-items: center;
    gap: .15rem;
}
.sci-info-btn { flex-shrink: 0; }
.sci-buy-label { font-size: .7rem; color: var(--accent); flex: 1; min-width: 0; }
.sealed-item {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color .15s;
}
.sealed-item:hover { border-color: var(--primary); }
.sealed-img-wrap { position: relative; background: #111; display: flex; align-items: center; justify-content: center; height: 160px; padding: .75rem; }
.sealed-img-wrap img { max-height: 100%; width: auto; object-fit: contain; }
.sealed-info { padding: .75rem; display: flex; flex-direction: column; gap: .4rem; }
.sealed-name { font-size: .9rem; font-weight: 600; }
.sealed-set { font-size: .78rem; color: var(--muted); }
.sealed-price-row { display: flex; align-items: center; gap: .5rem; }
.sealed-price { font-size: 1.05rem; font-weight: 700; }
.sealed-change { font-size: .8rem; font-weight: 600; }

/* ─── Card Modal (Premium Domain-Themed) ─────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.82);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem;
    padding-left: max(.5rem, env(safe-area-inset-left));
    padding-right: max(.5rem, env(safe-area-inset-right));
    padding-bottom: max(.5rem, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
}
.modal-overlay[hidden] { display: none !important; }
.modal-container {
    width: 100%;
    max-width: 880px;
    max-height: 96vh;
    position: relative;
    animation: modalFadeIn .25s ease;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
}
@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(.97) translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* The inner themed wrapper — border/glow set inline by JS */
.md-modal {
    background: var(--panel);
    border: 2px solid;
    border-radius: 14px;
    overflow: hidden;
}
.md-body-scroll {
    overflow-y: auto;
    max-height: calc(96vh - 44px);
    padding: .6rem 1rem .75rem;
    scrollbar-width: thin;
}

/* ── Branded header bar ─────────────────────────────────── */
.md-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .55rem 1rem;
    border-bottom: 1px solid;
    background: rgba(0,0,0,.25);
}
.md-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.md-logo {
    height: 44px;
    width: auto;
    border-radius: 6px;
}
.md-brand-text {
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-sec);
    letter-spacing: .03em;
}
.md-close {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
    font-size: 1.1rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s;
}
.md-close:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.3); }

/* Hide the original shell close button — we use .md-close inside */
.modal-close { display: none; }
.modal-body { padding: 0; }

/* ── Top section: image + info ──────────────────────────── */
.md-top {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
    align-items: stretch;
}
.md-img-col {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
}
.md-img-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.md-card-img {
    width: 100%;
    border-radius: 10px;
    border: 2px solid;
    display: block;
}
.md-info-col { min-width: 0; }

.md-card-name {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0 0 .2rem;
    line-height: 1.2;
    word-break: break-word;
}
.md-subtitle {
    font-size: .75rem;
    color: var(--text-sec);
    margin: 0 0 .3rem;
}
.md-sep { color: var(--muted); margin: 0 .15rem; }

/* ── Chips (domain + tags) ──────────────────────────────── */
.md-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    margin-bottom: .35rem;
}
.md-domain-chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: .68rem;
    font-weight: 600;
}
.md-tag-chip {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(255,255,255,.06);
    color: var(--text-sec);
    font-size: .72rem;
    border: 1px solid rgba(255,255,255,.1);
}

/* ── Hero price block ───────────────────────────────────── */
.md-hero-price {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .1rem;
    flex-wrap: wrap;
}
.md-price {
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: -.02em;
}
.md-hero-change {
    font-size: .85rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: 5px;
    white-space: nowrap;
}
.md-hero-change.gain { color: var(--gain); background: rgba(0,179,55,.12); }
.md-hero-change.loss { color: var(--loss); background: rgba(240,71,71,.12); }
.md-hero-change small { font-size: .72rem; font-weight: 500; opacity: .7; margin-left: .2rem; }

.md-condition {
    font-size: .68rem;
    color: var(--muted);
    margin: 0 0 .35rem;
}

/* ── Stat pills ─────────────────────────────────────────── */
.md-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-bottom: .5rem;
}
.md-stat {
    font-size: .65rem;
    color: var(--text-sec);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    padding: .15rem .4rem;
    border-radius: 4px;
    white-space: nowrap;
}
.md-stat i { margin-right: .15rem; font-size: .58rem; opacity: .7; }
.md-stat-foil { color: #FFD700; border-color: rgba(255,215,0,.3); background: rgba(255,215,0,.08); }

/* ── Effect text box ────────────────────────────────────── */
.md-effect {
    padding: .5rem .75rem;
    border-radius: 6px;
    border: 1px solid;
    margin-bottom: .35rem;
}
.md-effect strong {
    display: block;
    margin-bottom: .25rem;
    font-size: .78rem;
}
.md-effect p {
    margin: 0;
    font-size: .75rem;
    line-height: 1.5;
    color: #e0e0e0;
    white-space: pre-line;
    word-break: break-word;
}

.md-flavor {
    font-size: .7rem;
    color: var(--muted);
    font-style: italic;
    margin: .15rem 0 .25rem;
    line-height: 1.4;
}

/* ── Bottom row: chart + data side-by-side ───────────────── */
.md-bottom-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-top: .75rem;
}

/* ── Chart section with period tabs ─────────────────────── */
.md-chart-section {
    display: flex;
    flex-direction: column;
    background: rgba(0,0,0,.2);
    border-radius: 8px;
    padding: .5rem .75rem .75rem;
    border: 1px solid rgba(255,255,255,.06);
}
.md-tabs {
    display: flex;
    gap: .2rem;
    margin-bottom: .4rem;
    overflow-x: auto;
}
.md-tab {
    font-size: .65rem;
    font-weight: 600;
    padding: .2rem .5rem;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.04);
    color: var(--text-sec);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.md-tab:hover:not(:disabled) { background: rgba(255,255,255,.1); color: #fff; }
.md-tab-active {
    background: rgba(0,179,55,.15);
    color: var(--primary);
    border-color: rgba(0,179,55,.4);
}
.md-tab-disabled {
    opacity: .3;
    cursor: not-allowed;
}
.md-chart-wrap {
    flex: 1;
    min-height: 150px;
    position: relative;
}
.md-chart-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

/* ── Data grid: signals + price data ────────────────────── */
.md-data-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
}
.md-data-col {
    background: rgba(0,0,0,.15);
    border-radius: 6px;
    padding: .5rem .75rem;
    border: 1px solid rgba(255,255,255,.06);
}
.md-data-heading {
    font-size: .68rem;
    font-weight: 700;
    color: var(--text-sec);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 .3rem;
    padding-bottom: .2rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.md-data-heading i { margin-right: .3rem; font-size: .65rem; opacity: .6; }
.md-period-label {
    font-size: .65rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--muted);
    margin-left: .3rem;
}
.md-data-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .15rem 0;
    font-size: .72rem;
}
.md-data-row + .md-data-row { border-top: 1px solid rgba(255,255,255,.04); }
.md-data-label {
    color: var(--muted);
    font-size: .7rem;
}
.md-data-label:has(.info-tip-wrap) { display: inline-flex; align-items: center; gap: .25rem; }
.md-data-label .info-tip-icon {
    min-width: 24px;
    min-height: 24px;
    font-size: 14px;
    opacity: .6;
}
.md-data-label .info-tip-body {
    font-size: .75rem;
    max-width: 220px;
    min-width: 180px;
}
/* Info tips in modal scroll area: open upward so they don't get cut off */
.md-body-scroll .info-tip-wrap.md-data-tip .info-tip-body {
    top: auto;
    bottom: calc(100% + 10px);
    left: 0;
}
.md-body-scroll .info-tip-wrap.md-data-tip .info-tip-body::before {
    top: 100%;
    bottom: auto;
    left: 12px;
    border: 6px solid transparent;
    border-top-color: var(--border);
    border-bottom-color: transparent;
}
.md-data-value {
    font-weight: 600;
    color: var(--text);
    text-align: right;
}
.md-data-value.gain { color: var(--gain); }
.md-data-value.loss { color: var(--loss); }
.md-data-value.md-mom-strong-upward { color: var(--gain); }
.md-data-value.md-mom-moderate-upward { color: #4ade80; }
.md-data-value.md-mom-stable { color: var(--muted); }
.md-data-value.md-mom-moderate-downward { color: #fb923c; }
.md-data-value.md-mom-strong-downward { color: var(--loss); }

/* ── Buy CTA button ─────────────────────────────────────── */
.md-buy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    padding: .6rem;
    margin-top: .75rem;
    border-radius: 8px;
    border: 2px solid;
    font-size: .9rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
    cursor: pointer;
}
.md-buy-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}
.md-buy-btn i { font-size: .9rem; }

/* ─── Loading / State blocks ──────────────────────────────── */
.state-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 3rem 1rem;
    text-align: center;
}
.state-loading .spinner-ring {
    width: 40px;
    height: 40px;
    border: 4px solid var(--primary);
    border-top-color: var(--loss);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.state-text { font-size: .9rem; color: var(--muted); }
.state-error i { font-size: 2rem; color: var(--loss); }
.state-error .state-text { color: var(--text-sec); }
.state-empty i { font-size: 2rem; color: var(--border-hover); }
.progress-bar { width: 220px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--primary); transition: width .3s ease; border-radius: 2px; }

/* ─── Color utilities ─────────────────────────────────────── */
.gain { color: var(--gain); }
.loss { color: var(--loss); }
.warn { color: var(--warn); }

/* ─── Skip link (accessibility) ──────────────────────────── */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 9999;
    background: var(--primary);
    color: #000;
    padding: .5rem 1rem;
    border-radius: 0 0 var(--radius) var(--radius);
    font-weight: 700;
    font-size: .9rem;
    transition: top .15s;
}
.skip-link:focus { top: 0; }

/* ─── Sidebar enhancements ────────────────────────────────── */
.nav-divider {
    height: 1px;
    background: var(--border);
    margin: .5rem 1rem;
}
.sidebar-nav a.nav-external { font-style: italic; }
.sidebar-nav a.nav-external .nav-ext-icon {
    font-size: .65rem;
    opacity: .6;
    margin-left: auto;
}
/* data-source styles moved to .sf-source in sidebar-footer block */
.seo-nav-hidden { display: none; }
.seo-deep-links {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.sidebar-social {
    display: flex;
    gap: .55rem;
    margin-top: .15rem;
    flex-wrap: wrap;
}
.sidebar-social a {
    color: var(--muted);
    font-size: 1.05rem;
    transition: color .15s;
}
.sidebar-social a:hover { color: var(--primary); }

/* ─── Breadcrumb loading message ──────────────────────────── */
.loading-msg {
    margin-left: auto;
    font-size: .75rem;
    color: var(--muted);
}

/* ─── SEO intro trust blocks ──────────────────────────────── */
.regional-notice {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    background: rgba(255,193,7,.07);
    border: 1px solid rgba(255,193,7,.2);
    border-radius: var(--radius);
    padding: .65rem .85rem;
    margin-top: .75rem;
    font-size: .83rem;
    color: var(--text-sec);
}
.regional-notice i {
    color: var(--warn);
    margin-top: .15rem;
    flex-shrink: 0;
}
.methodology-block {
    margin-top: .6rem;
    padding: .5rem .75rem;
    border-left: 3px solid var(--border);
    font-size: .82rem;
    color: var(--muted);
}

/* ─── Market Heat in summary card ────────────────────────── */
#sc-heat {
    display: flex;
    flex-wrap: nowrap;
    gap: 0 .25rem;
    align-items: center;
    font-size: clamp(0.8rem, 0.4rem + 0.6vw, 1.1rem);
    min-width: 0;
}
.heat-tier {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: inherit;
    font-weight: 800;
    min-width: 2.5em;
}
.heat-tier .heat-label { font-size: 0.85em; }
.heat-tier .heat-num { font-size: 1.15em; font-weight: 800; }
.heat-dot-legacy {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: .15rem;
}
.heat-sep { color: var(--border); font-size: inherit; margin: 0 .2rem; opacity: .35; }
/* Market heat card — icon matches other summary cards */
.heat-tier { display: inline-flex; align-items: center; gap: .15rem; }

/* ─── Info-tooltip pattern (reused for Market Direction, Volume, etc.) ─── */
.info-tip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: .3rem;
}
.info-tip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    cursor: help;
    color: var(--muted);
    font-size: 14px;
    opacity: .6;
    transition: opacity .15s, color .15s;
    border-radius: 4px;
}
.info-tip-icon:hover, .info-tip-icon:focus { opacity: 1; color: var(--warn); }
.info-tip-body {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 920;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0,0,0,.55);
    padding: .75rem .9rem;
    width: 260px;
    font-size: .75rem;
    line-height: 1.5;
    color: var(--text);
    pointer-events: auto;
}
.info-tip-body strong { display: block; margin-bottom: .3rem; font-size: .8rem; color: var(--text); }
.info-tip-body ul { margin: .35rem 0 .35rem; padding-left: 1.1rem; list-style: disc; }
.info-tip-body li { margin-bottom: .2rem; }
.info-tip-body::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 12px;
    border: 6px solid transparent;
    border-bottom-color: var(--border);
}
.info-tip-icon:hover + .info-tip-body,
.info-tip-icon:focus + .info-tip-body,
.info-tip-body:hover { display: block; }
.info-tip-close {
    position: absolute;
    top: .4rem;
    right: .4rem;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    transition: color .12s, background .12s;
}
.info-tip-close:hover { color: var(--text); background: rgba(255,255,255,.06); }
.info-tip-body { padding-right: 2.25rem; }

/* Market direction card */
.market-dir-card { position: relative; overflow: visible; }
/* Contain summary block — avoid overflow-x: hidden (it forces overflow-y: auto and clips info-tips) */
#dash-summary { padding-top: 2rem; min-width: 0; overflow: visible; }
.summary-cards-grid { overflow: visible; min-width: 0; }
.summary-card { min-width: 0; }
.summary-card .sc-body { min-width: 0; overflow-wrap: break-word; }
.summary-wrapper { min-width: 0; }
/* Extra top spacing so info tooltips above summary cards aren't cut off when banner is closed */
.summary-excl-note {
    font-size: .68rem;
    color: var(--muted);
    margin: .5rem 0 0;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border);
    line-height: 1.4;
}

/* ─── Dashboard date range row ───────────────────────────── */
.dash-range-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--border);
}
.range-label { font-size: .82rem; color: var(--muted); }

/* ─── Tier sections — 3-column layout ───────────────────── */
.tier-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
}
.tier-column {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    display: flex;
    flex-direction: column;
}
.tier-column.tier-high { border-top: 3px solid var(--tier-high); box-shadow: 0 -4px 20px rgba(54,171,129,.06), 0 1px 4px rgba(0,0,0,.2); }
.tier-column.tier-mid  { border-top: 3px solid var(--tier-mid);  box-shadow: 0 -4px 20px rgba(250,166,26,.06), 0 1px 4px rgba(0,0,0,.2); }
.tier-column.tier-low  { border-top: 3px solid var(--tier-low); }

.tier-col-header {
    padding: .65rem .85rem .4rem;
    cursor: pointer;
    transition: background .15s;
}
.tier-high .tier-col-header {
    background: linear-gradient(to bottom, rgba(54,171,129,.1) 0%, rgba(54,171,129,.03) 100%);
}
.tier-mid .tier-col-header {
    background: linear-gradient(to bottom, rgba(250,166,26,.08) 0%, rgba(250,166,26,.02) 100%);
}
.tier-low .tier-col-header {
    background: linear-gradient(to bottom, rgba(240,71,71,.08) 0%, rgba(240,71,71,.02) 100%);
}
.tier-high .tier-col-header:hover { background-image: linear-gradient(to bottom, rgba(54,171,129,.1), rgba(54,171,129,.03)), linear-gradient(rgba(255,255,255,.03), rgba(255,255,255,.03)); }
.tier-mid .tier-col-header:hover  { background-image: linear-gradient(to bottom, rgba(250,166,26,.08), rgba(250,166,26,.02)), linear-gradient(rgba(255,255,255,.03), rgba(255,255,255,.03)); }
.tier-low .tier-col-header:hover  { background-image: linear-gradient(to bottom, rgba(240,71,71,.08), rgba(240,71,71,.02)), linear-gradient(rgba(255,255,255,.03), rgba(255,255,255,.03)); }
.tier-col-title { font-size: .95rem; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.tier-high .tier-col-title { color: var(--tier-high); }
.tier-mid  .tier-col-title { color: var(--tier-mid); }
.tier-low  .tier-col-title { color: var(--tier-low); }

.tier-kpi-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    padding: 0 .85rem .6rem;
    font-size: .75rem;
    color: var(--text-sec);
}
.tier-kpi {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
}
.tier-kpi:not(:last-child)::after {
    content: '·';
    margin-left: .5rem;
    color: var(--border);
    font-weight: 400;
}
.tier-kpi strong { color: var(--text); font-weight: 700; }
.tier-kpi.gain { color: var(--gain); }
.tier-col-gainers, .tier-col-losers {
    padding: .6rem .85rem .75rem;
    border-top: 1px solid var(--border);
}
.tier-col-gainers {
    border-top-color: rgba(0,179,55,.2);
    background: linear-gradient(to bottom, rgba(0,179,55,.04) 0%, transparent 100%);
}
.tier-col-losers {
    border-top-color: rgba(228,0,124,.2);
    background: linear-gradient(to bottom, rgba(228,0,124,.04) 0%, transparent 100%);
}

/* Legacy classes kept for compatibility */
.tier-sections { display: flex; flex-direction: column; gap: 1rem; }
.tier-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.tier-section.tier-high { border-top: 3px solid var(--tier-high); }
.tier-section.tier-mid  { border-top: 3px solid var(--tier-mid); }
.tier-section.tier-low  { border-top: 3px solid var(--tier-low); }

.tier-section-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    cursor: pointer;
}
.tier-section-head:hover { background: rgba(255,255,255,.02); }
.tier-section-title { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.tier-high .tier-section-title { color: var(--tier-high); }
.tier-mid  .tier-section-title { color: var(--tier-mid); }
.tier-low  .tier-section-title { color: var(--tier-low); }

.tier-section-stats {
    display: flex;
    gap: .35rem .5rem;
    flex-wrap: wrap;
    align-items: center;
    font-size: .8rem;
    color: var(--muted);
    margin-left: auto;
}
.ts-sep { opacity: .4; }
.ts-count, .ts-avg, .ts-total { color: var(--text-sec); }
.ts-total { font-weight: 700; }
.ts-hot { font-weight: 700; }
.ts-trending { font-weight: 600; }

.tier-movers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.tier-movers-col {
    padding: .75rem;
    border-right: 1px solid var(--border);
}
.tier-movers-col:last-child { border-right: none; }

.tmover-col-title {
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}
.tmover-col-title.gainers-title { color: var(--gain); }
.tmover-col-title.gainers-title::before {
    content: '';
    width: 3px;
    height: .9em;
    background: var(--gain);
    border-radius: 2px;
}
.tmover-col-title.losers-title { color: var(--loss); }
.tmover-col-title.losers-title::before {
    content: '';
    width: 3px;
    height: .9em;
    background: var(--loss);
    border-radius: 2px;
}

.tmover-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    padding: .65rem .55rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--card);
    transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
    text-align: center;
    gap: .35rem;
    position: relative;
    min-width: 0;
    overflow: hidden;
}
.tmover-card:hover {
    background: var(--hover);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.tmover-card img {
    width: 44px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.tmover-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    min-width: 0;
    width: 100%;
}
/* tmover-meta hosts the info btn inline with volume */
.tmover-name {
    font-size: .72rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    flex: 1;
    min-width: 0;
}
.tmover-price { font-size: .8rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.tmover-change {
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}
.tmover-change.gain { color: var(--gain); }
.tmover-change.loss { color: var(--loss); }
.tmover-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: .2rem;
    flex-wrap: wrap;
}
.tmover-vol {
    font-size: .62rem;
    color: var(--muted);
    white-space: nowrap;
}
.tmover-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .4rem;
}

/* ─── Rarity Breakdown grid ───────────────────────────────── */
.section-subtext {
    font-size: .8rem;
    color: var(--muted);
    margin-top: -.5rem;
    margin-bottom: .75rem;
}
.rarity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: .6rem;
}
.rarity-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .65rem .5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    transition: border-color .15s, transform .1s;
}
.rarity-item.rarity-clickable { cursor: pointer; }
.rarity-item.rarity-clickable:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}
.rarity-item.rarity-clickable:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.rarity-symbol { font-size: 1.3rem; line-height: 1.2; }
.rarity-name { font-size: .7rem; color: var(--muted); line-height: 1.2; }
.rarity-count { font-size: .8rem; font-weight: 700; color: var(--text); }
.rarity-avg { font-size: .75rem; color: var(--text-sec); }

/* ─── Advanced filters accordion (Sealed view) ────────────── */
.adv-toggle-btn {
    display: flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}
.adv-toggle-btn.active {
    background: var(--primary);
    color: #000;
    border-color: var(--primary);
}
.adv-filters-panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: .75rem;
}
.adv-filters-inner {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: flex-end;
}
.adv-filter-group {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 140px;
}
.adv-label {
    font-size: .75rem;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.adv-input {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    padding: .4rem .65rem;
    font-size: .85rem;
    outline: none;
    transition: border-color .15s;
}
.adv-input:focus { border-color: var(--primary); }
.adv-filters-panel .search-wrapper {
    max-width: 220px;
}
.adv-filters-panel .search-wrapper input {
    width: 100%;
}

/* ─── Results stats line ──────────────────────────────────── */
.results-stats {
    font-size: .8rem;
    color: var(--muted);
    margin-bottom: .5rem;
}

/* ─── Sealed product type tag ────────────────────────────── */
.sealed-type-tag {
    position: absolute;
    bottom: .3rem;
    left: .3rem;
    background: rgba(0,0,0,.75);
    color: var(--text-sec);
    font-size: .65rem;
    font-weight: 600;
    padding: .15rem .4rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .04em;
    pointer-events: none;
}

/* ─── Set freshness badge ─────────────────────────────────── */
.set-fresh-badge {
    background: var(--primary);
    color: #000;
    font-size: .58rem;
    font-weight: 800;
    padding: .15rem .4rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .06em;
    flex-shrink: 0;
    line-height: 1;
}
.set-release {
    font-size: .72rem;
    color: var(--muted);
    margin-top: -.25rem;
    margin-bottom: .3rem;
}

/* ─── Responsive — Desktop/Laptop (scaled viewports) ───────────
   Optimized for: 1920x1080 (ideal), 125% scaling (~1536px), 1366–1440 laptops
   See: Windows Scale & layout "125% (Recommended)" on many laptops
──────────────────────────────────────────────────────────────── */
/* 1600px: 125% scale on 1920, or 1920x1200 — gentle tightening */
@media (max-width: 1600px) {
    .summary-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: .75rem;
    }
    .dash-filter-bar {
        padding: .65rem .85rem;
        gap: .45rem .6rem;
    }
    .dfb-group { min-width: 0; }
    .ms-trigger { max-width: 160px; }
    .tier-3col { gap: .6rem; }
    .tier-column { padding: 0; }
    .tmover-list { gap: .35rem; }
    .tier-col-header, .tier-kpi-strip, .tier-col-gainers, .tier-col-losers {
        padding-left: .7rem;
        padding-right: .7rem;
    }
    .cards-grid { grid-template-columns: repeat(4, 1fr); }
    .sealed-grid { grid-template-columns: repeat(4, 1fr); }
}

/* 1400px: 1440x900, 1366x768 — tier columns wrap to 2 */
@media (max-width: 1400px) {
    .summary-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: .65rem;
    }
    .summary-card { padding: 1rem 1.1rem; }
    .sc-value { font-size: 1.4rem; }
    .tier-3col {
        grid-template-columns: repeat(2, 1fr);
        gap: .6rem;
    }
    .tier-column.tier-low { grid-column: 1 / -1; }
    .dash-filter-bar {
        padding: .6rem .75rem;
        gap: .4rem .55rem;
    }
    .ms-trigger { max-width: 140px; }
    .range-btns { flex-wrap: wrap; }
    .tmover-list { gap: .3rem; }
    .tmover-card { padding: .5rem .4rem; }
    .tmover-name { font-size: .7rem; }
    .tmover-price { font-size: .75rem; }
    .top-sellers-grid { grid-template-columns: repeat(3, 1fr); }
    .pulse-cards-grid.pulse-even { grid-template-columns: repeat(4, 1fr); }
}

/* 1280px: smaller laptops — filter bar scrollable, tier 2-col maintained */
@media (max-width: 1280px) {
    .summary-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: .6rem;
    }
    .market-heat-card { grid-column: 1 / -1; }
    .dash-filters-collapsible { margin: 0 -1.25rem 1rem; }
    .dash-sticky-filters { padding: .4rem 1rem; }
    .dash-filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding: .55rem .75rem;
        gap: .4rem .5rem;
    }
    .dash-filter-bar::-webkit-scrollbar { height: 4px; }
    .dfb-group { min-width: 90px; flex-shrink: 0; }
    .dfb-range-group { flex-shrink: 0; }
    .dfb-reset, .dfb-count { flex-shrink: 0; }
    .ms-trigger { max-width: 130px; min-width: 90px; }
    .top-sellers-grid { grid-template-columns: repeat(2, 1fr); }
    .pulse-cards-grid.pulse-even { grid-template-columns: repeat(3, 1fr); }
}

/* ─── Responsive — Tablet / small laptop ───────────────────── */
@media (max-width: 1100px) {
    .movers-grid { grid-template-columns: 1fr; }
    .tier-3col { grid-template-columns: 1fr; }
    .tier-column.tier-low { grid-column: auto; }
    .tier-movers-grid { grid-template-columns: 1fr; }
    .tier-movers-col { border-right: none; border-bottom: 1px solid var(--border); }
    .tier-movers-col:last-child { border-bottom: none; }
}

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

    /* Hide sidebar — use bottom nav instead */
    .sidebar {
        display: none !important;
    }
    .menu-toggle { display: none !important; }
    .sidebar-overlay { display: none !important; }

    /* Show mobile bottom nav */
    .mobile-bottom-nav {
        display: flex;
    }

    /* Reserve space for bottom nav */
    .app-content {
        padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 1rem);
    }

    /* Back-to-top: above bottom nav */
    .back-to-top {
        bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 0.5rem);
    }

    .md-top { grid-template-columns: 140px 1fr; gap: .75rem; }
    .md-bottom-row { grid-template-columns: 1fr; }
    .md-card-name { font-size: 1.05rem; }
    .md-price { font-size: 1.4rem; }

}

/* ═══════════════════════════════════════════════════════════
   Conversion & CTA enhancements
═══════════════════════════════════════════════════════════ */

/* Card overlay badges */
.ci-badge {
    position: absolute;
    top: .35rem;
    border-radius: 4px;
    font-size: .6rem;
    font-weight: 800;
    padding: .18rem .35rem;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .15rem;
    backdrop-filter: blur(4px);
}
.ci-badge-hot      { left: .35rem; background: rgba(255,107,0,.9); color: #fff; }
.ci-badge-sale     { right: .35rem; background: rgba(0,179,55,.9); color: #fff; }
.ci-badge-foil     { left: .35rem; top: auto; bottom: .35rem; background: rgba(0,0,0,.7); color: #fde047; font-size: .8rem; }
.ci-badge-volatile { right: .35rem; top: auto; bottom: .35rem; background: rgba(239,68,68,.85); color: #fff; }

/* ─── Card grid: body enhancements ───────────────────────── */
.ci-range {
    display: flex;
    gap: .25rem;
    font-size: .68rem;
    color: var(--muted);
}
.ci-range-sep { opacity: .4; }

/* Explicit text stat rows (matching Top Sellers style) */
.ci-stats-col {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin-top: .2rem;
}
.ci-stat {
    font-size: .68rem;
    color: var(--text-sec);
    display: flex;
    align-items: center;
    gap: .25rem;
    line-height: 1.3;
}
.ci-stat strong { color: var(--text); }
.ci-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    font-size: .5rem;
    flex-shrink: 0;
}
.ci-stat-icon.gain { background: rgba(0,179,55,.15); color: var(--gain); }
.ci-stat-icon.loss { background: rgba(228,0,124,.12); color: var(--loss); }
.ci-spread, .mover-spread, .dcr-spread {
    color: var(--primary);
    font-weight: 700;
    background: rgba(0,179,55,.1);
    padding: .05rem .25rem;
    border-radius: 3px;
    font-size: .65rem;
}

.ci-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .35rem;
    margin-top: auto;
    padding-top: .35rem;
}
.ci-footer-tags {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
}
.ci-buy-btn {
    flex: 1;
    text-align: center;
    padding: .32rem .5rem;
    font-size: .72rem;
    border-radius: 6px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
}
.ci-buy-label {
    pointer-events: none;
}
.ci-info-btn {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 6px;
    min-width: 28px;
    min-height: 28px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    flex-shrink: 0;
    transition: color .12s, border-color .12s, background .12s;
}
.ci-info-btn:hover {
    color: #000;
    border-color: var(--warn);
    background: var(--warn);
}
.ci-change i { font-size: .65rem; margin-right: .1rem; }

/* ─── Card Tooltip ─────────────────────────────────────────── */
.card-tooltip {
    position: fixed;
    width: 260px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0,0,0,.6);
    z-index: 9000;
    opacity: 0;
    transform: translateY(6px) scale(.97);
    pointer-events: none;
    transition: opacity .15s, transform .15s;
}
.card-tooltip.ctt-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.ctt-inner { padding: .85rem; display: flex; flex-direction: column; gap: .4rem; }

.ctt-header {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
}
.ctt-name { font-size: .9rem; font-weight: 700; flex: 1; line-height: 1.3; }
.ctt-close {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}
.ctt-close:hover { color: var(--text); }

.ctt-badges { display: flex; flex-wrap: wrap; gap: .3rem; }
.ctt-rarity { font-size: .75rem; font-weight: 700; }
.ctt-badge {
    font-size: .68rem;
    font-weight: 700;
    padding: .1rem .4rem;
    border-radius: 12px;
    display: flex; align-items: center; gap: .2rem;
}
.ctt-hot  { background: rgba(255,107,0,.2); color: #FF6B00; }
.ctt-cold { background: rgba(228,0,124,.15); color: var(--loss); }
.ctt-sale { background: rgba(0,179,55,.2); color: var(--primary); }

.ctt-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .5rem;
    font-size: .72rem;
    color: var(--muted);
    border-top: 1px solid var(--border);
    padding-top: .35rem;
}

.ctt-price-block { display: flex; flex-direction: column; gap: .1rem; }
.ctt-market-price { font-size: 1.35rem; font-weight: 800; color: var(--primary); }
.ctt-price-sub { font-size: .7rem; color: var(--muted); margin-top: -.15rem; }
.ctt-range {
    display: flex;
    gap: .3rem;
    font-size: .75rem;
    color: var(--text-sec);
    margin-top: .1rem;
}
.ctt-range-sep { opacity: .4; }

.ctt-changes {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    font-size: .78rem;
    font-weight: 600;
}

.ctt-volume {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .75rem;
    font-size: .73rem;
    color: var(--muted);
}
.ctt-volume span { display: flex; align-items: center; gap: .25rem; }
.ctt-volume i { color: var(--primary); }

.ctt-cta-row {
    display: flex;
    gap: .4rem;
    margin-top: .2rem;
}
.ctt-buy-btn {
    flex: 1;
    background: var(--primary);
    color: #000;
    font-size: .8rem;
    font-weight: 700;
    padding: .45rem .65rem;
    border-radius: 8px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    text-decoration: none;
    transition: background .12s;
}
.ctt-buy-btn:hover { background: var(--primary-h); color: #000; }
.ctt-buy-low-btn {
    background: var(--primary);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    padding: .4rem .55rem;
    border-radius: 8px;
    text-decoration: none;
    display: flex; align-items: center; gap: .2rem;
    white-space: nowrap;
    transition: background .12s;
}
.ctt-buy-low-btn:hover { background: #1d4ed8; color: #fff; }

.ctt-disclaimer { font-size: .65rem; color: var(--muted); text-align: center; }
.ctt-disclaimer a { color: var(--muted); text-decoration: underline; }

/* ─── Market Pulse ────────────────────────────────────────── */
.market-pulse-section {
    margin-bottom: 1rem;
}
.pulse-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
}
.pulse-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .88rem;
    font-weight: 700;
    color: var(--primary);
}
.pulse-label i { font-size: .9rem; }
.pulse-view-all {
    font-size: .75rem;
    color: var(--primary);
    white-space: nowrap;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .2rem;
}
.pulse-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .5rem;
}
.pulse-cards-grid.pulse-even {
    grid-template-columns: repeat(5, 1fr);
}

/* Section explainer strip */
.section-explainer {
    font-size: .75rem;
    color: var(--muted);
    margin: 0 0 .6rem;
    padding: .4rem .7rem;
    background: rgba(255,255,255,.02);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    line-height: 1.45;
}
.section-explainer i { margin-right: .25rem; opacity: .6; }
.mobile-only-hint { display: none; }
.pulse-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem .4rem;
    font-size: .68rem;
    color: var(--text-sec);
    margin-top: .15rem;
}
.pulse-card-meta i { font-size: .6rem; }
.pulse-card-mom {
    font-size: .62rem;
    background: rgba(255,255,255,.06);
    padding: .05rem .3rem;
    border-radius: var(--radius-sm);
}
.pulse-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .55rem;
    text-decoration: none;
    color: var(--text);
    transition: border-color .15s, transform .15s, box-shadow .15s;
    text-align: center;
    gap: .3rem;
    position: relative;
    overflow: hidden;
}
.pulse-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.pulse-card-gain {
    border-left: 3px solid var(--gain);
    background: linear-gradient(135deg, rgba(0,179,55,.04) 0%, var(--card) 100%);
}
.pulse-card-loss {
    border-left: 3px solid var(--loss);
    background: linear-gradient(135deg, rgba(228,0,124,.04) 0%, var(--card) 100%);
}
.pulse-card-img {
    width: 44px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.pulse-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    min-width: 0;
    width: 100%;
}
/* pulse-card-meta hosts the info btn inline with stats */
.pulse-card-name {
    font-size: .75rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    max-width: 100%;
}
.pulse-card-price { font-size: .82rem; font-weight: 700; }
.pulse-card-pct { font-size: .72rem; font-weight: 700; }
.pulse-card-pct.gain { color: var(--gain); }
.pulse-card-pct.loss { color: var(--loss); }
.pulse-card-vol { font-size: .62rem; color: var(--muted); }

/* ─── Affiliate disclosure banner ─────────────────────────── */
/* ─── Multi-banner system ─────────────────────────────────── */
.banner-container {
    position: sticky;
    top: 0;
    z-index: 500;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}
.site-banner {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem 1rem;
    font-size: .8rem;
    color: var(--text-sec);
    animation: bannerSlideIn .3s ease;
}
.site-banner--hiding {
    animation: bannerSlideOut .25s ease forwards;
}
@keyframes bannerSlideIn {
    from { transform: translateY(-100%); opacity: 0; max-height: 0; }
    to   { transform: none; opacity: 1; max-height: 80px; }
}
@keyframes bannerSlideOut {
    from { opacity: 1; max-height: 80px; }
    to   { opacity: 0; max-height: 0; padding: 0 1rem; }
}
.site-banner > i { flex-shrink: 0; }
.site-banner__body { flex: 1; }
.site-banner__body a { color: inherit; font-weight: 600; text-decoration: underline; }
.site-banner__body a:hover { opacity: .8; }
.site-banner__close {
    background: none;
    border: none;
    color: var(--muted);
    font-size: .9rem;
    padding: .2rem .4rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: color .12s;
}
.site-banner__close:hover { color: var(--text); }
.site-banner__close--disabled {
    opacity: .7;
    cursor: not-allowed;
}
.site-banner__close--disabled i { color: var(--muted); }

/* Sidebar affiliate notice styles moved to .sf-affiliate in sidebar-footer block */

/* ══════════════════════════════════════════════════════════
   DRILLDOWN DRAWER
   ══════════════════════════════════════════════════════════ */
.drilldown-drawer {
    position: fixed;
    inset: 0;
    z-index: 1100;
    pointer-events: none;
}
.drilldown-drawer.drawer-open {
    pointer-events: auto;
}

.drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.48);
    opacity: 0;
    transition: opacity .25s ease;
}
.drawer-open .drawer-backdrop { opacity: 1; }

.drawer-panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 480px;
    max-width: 100vw;
    background: var(--panel);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
    box-shadow: -12px 0 48px rgba(0,0,0,.4);
}
.drawer-open .drawer-panel { transform: translateX(0); }

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    gap: .75rem;
    flex-shrink: 0;
}
.drawer-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.drawer-close {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 1.2rem;
    padding: .25rem .4rem;
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
    transition: color .12s, background .12s;
}
.drawer-close:hover { color: var(--text); background: var(--surface-hover, rgba(255,255,255,.06)); }

.drawer-header-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
}
/* List | Grid segmented control */
.drawer-view-toggle {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.drawer-view-toggle:not([hidden]) { display: flex; }
.drawer-view-btn {
    padding: .35rem .65rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color .12s, background .12s;
}
.drawer-view-btn:not(:last-child) { border-right: 1px solid var(--border); }
.drawer-view-btn:hover { color: var(--text); background: var(--surface-hover, rgba(255,255,255,.06)); }
.drawer-view-btn.active {
    background: rgba(0,179,55,.15);
    color: var(--primary);
    font-weight: 600;
}

/* Expanded drawer — centered full-screen overlay */
.drawer-panel.drawer-expanded {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 95vw;
    max-width: 1400px;
    transition: transform .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1);
}
.drawer-open .drawer-panel.drawer-expanded { transform: translateX(-50%); }

/* Grid view filter chips (Momentum + Rarity) */
.drawer-grid-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
    margin: 1rem 0;
    padding: .75rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.drawer-grid-filter-col {
    flex: 1;
    min-width: 140px;
}
.drawer-grid-filter-head {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-sec);
    margin-bottom: .4rem;
}
.drawer-grid-filter-head i { margin-right: .3rem; opacity: .8; }
.drawer-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.drawer-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .5rem;
    font-size: .75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2, rgba(255,255,255,.04));
    color: var(--text);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.drawer-filter-chip:hover {
    border-color: var(--border-hover);
    background: var(--surface-hover);
}
.drawer-filter-chip-active {
    border-color: var(--primary);
    background: rgba(0,179,55,.12);
    color: var(--primary);
}
.drawer-filter-chip-label.gain { color: var(--gain); }
.drawer-filter-chip-label.loss { color: var(--loss); }
.drawer-filter-chip-active .drawer-filter-chip-label.gain,
.drawer-filter-chip-active .drawer-filter-chip-label.loss { color: inherit; }
.drawer-filter-chip-count {
    font-size: .7rem;
    opacity: .85;
}
.drawer-filter-empty { font-size: .8rem; color: var(--muted); }
.drawer-filter-clear {
    align-self: center;
    padding: .25rem .5rem;
    font-size: .75rem;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.drawer-filter-clear:hover { color: var(--text); border-color: var(--border-hover); }
.set-drawer-stats-grid-expanded { margin-bottom: 0; }

.drawer-grid-wrap {
    margin-top: 1rem;
}
.drawer-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .75rem;
}
@media (min-width: 600px) {
    .drawer-cards-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
@media (min-width: 900px) {
    .drawer-cards-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* Drawer grid card item (matches .card-item structure) */
.drawer-card-item {
    display: flex;
    flex-direction: column;
    background: var(--surface-2, rgba(255,255,255,.04));
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .08s;
}
.drawer-card-item:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.drawer-card-item:hover .ci-image-wrap img { transform: scale(1.04); filter: brightness(1.05); }
.drawer-card-item .ci-image-wrap {
    aspect-ratio: 5/7;
    overflow: hidden;
    background: var(--surface);
}
.drawer-card-item .ci-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s, filter .2s;
}
.drawer-card-item .ci-info {
    padding: .5rem .6rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.drawer-card-item .ci-name {
    font-size: .8rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.drawer-card-item .ci-set, .drawer-card-item .ci-rarity {
    font-size: .7rem;
    color: var(--muted);
}
.drawer-card-item .ci-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
}
.drawer-card-item .ci-stat {
    font-size: .68rem;
    color: var(--muted);
}
.drawer-card-item .ci-spark-row { margin-top: .25rem; }
.drawer-card-item .ci-spark-row .sparkline { display: block; }
.drawer-card-item .ci-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .35rem;
    margin-top: .35rem;
    flex-wrap: wrap;
}
.drawer-card-item .ci-mom {
    font-size: .6rem;
    padding: .15rem .35rem;
    border-radius: 4px;
}
.drawer-card-item .btn-buy-sm {
    padding: .2rem .35rem;
    font-size: .7rem;
}
.drawer-card-item .ci-info-btn {
    min-width: 28px;
    min-height: 28px;
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: .75rem;
}

.drawer-panel.drawer-expanded .drawer-body {
    padding: 1rem 1.25rem 1.5rem;
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 1rem 1.5rem;
    overscroll-behavior: contain;
}
.drawer-body::-webkit-scrollbar { width: 6px; }
.drawer-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Stat row at top of drawer */
.drawer-stats-row {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    padding: 1rem 0 .5rem;
}
.drawer-stat {
    background: var(--surface-2, rgba(255,255,255,.04));
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .5rem .8rem;
    min-width: 80px;
    text-align: center;
}
.ds-label {
    display: block;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    margin-bottom: .25rem;
}
.ds-value {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}
.ds-value.gain { color: var(--green); }
.ds-value.loss { color: var(--red); }

/* Section within drawer body */
.drawer-section { margin-top: 1.2rem; }
.drawer-section-title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-sec);
    margin: 0 0 .6rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.drawer-section-body { display: flex; flex-direction: column; gap: .35rem; }

/* Compact card row inside drawer */
.drawer-card-row {
    display: grid;
    grid-template-columns: 16px 44px 1fr auto auto;
    align-items: center;
    gap: .5rem;
    padding: .45rem .5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s;
    border: 1px solid transparent;
}
.drawer-card-row:hover {
    background: var(--surface-2, rgba(255,255,255,.05));
    border-color: var(--border);
}
.dcr-rank {
    font-size: .7rem;
    color: var(--muted);
    font-weight: 600;
    text-align: center;
}
.dcr-img {
    width: 44px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}
.dcr-info {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}
.dcr-name {
    font-size: .78rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dcr-foil { font-size: .7rem; }
.dcr-set {
    font-size: .68rem;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dcr-signals {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    font-size: .66rem;
    color: var(--muted);
}
.dcr-volume, .dcr-qty { color: var(--text-sec); }
.dcr-direct { color: var(--accent); font-size: .62rem; }
.dcr-price-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .1rem;
    min-width: 60px;
}
.dcr-price {
    font-size: .82rem;
    font-weight: 700;
    color: var(--text);
}
.dcr-dollar {
    font-size: .72rem;
    font-weight: 700;
}
.dcr-dollar.gain { color: var(--green); }
.dcr-dollar.loss { color: var(--red); }
.dcr-change {
    font-size: .62rem;
    font-weight: 600;
    opacity: .8;
}
.dcr-change.gain { color: var(--green); }
.dcr-change.loss { color: var(--red); }
.dcr-buy { font-size: .65rem; padding: .2rem .5rem; flex-shrink: 0; }

/* Quick actions block */
.drawer-quick-actions {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .75rem 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: .5rem;
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD STICKY FILTER WRAPPER (collapsible)
   ══════════════════════════════════════════════════════════ */
.dash-filters-collapsible {
    margin: 0 -1.25rem 1rem;
    border-bottom: 1px solid var(--border);
}
.dash-filters-collapsible summary {
    padding: .5rem 1.25rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: .5rem;
    list-style: none;
    user-select: none;
    background: var(--bg);
    transition: background .15s;
}
.dash-filters-collapsible summary:hover {
    background: rgba(0,179,55,.06);
}
.dash-filters-collapsible summary::-webkit-details-marker { display: none; }
.dash-filters-collapsible summary .chevron {
    margin-left: auto;
    transition: transform .2s;
    font-size: .8rem;
    color: var(--muted);
}
.dash-filters-collapsible[open] summary .chevron { transform: rotate(180deg); }

.dash-sticky-filters {
    position: sticky;
    top: var(--topbar-h);
    z-index: 8;
    background: var(--bg);
    padding: .5rem 1.25rem .5rem;
    transition: box-shadow .25s;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: visible;
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD SECTION QUICK-NAV
   ══════════════════════════════════════════════════════════ */
.dash-section-nav {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: .15rem 0 .35rem;
}
.dash-section-nav::-webkit-scrollbar { display: none; }
.dsn-link {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .65rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--muted);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    white-space: nowrap;
    transition: all .12s;
    text-decoration: none;
    flex-shrink: 0;
}
.dsn-link:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: rgba(0,179,55,.08);
}
.dsn-link i { font-size: .65rem; }

/* Scroll targets: offset so sections appear below sticky filter bar */
#dash-summary,
#dash-pulse-section,
#dash-tier-sections,
#dash-movers,
#dash-top-sellers,
#dash-momentum,
#dash-rarity-matrix {
    scroll-margin-top: calc(var(--topbar-h) + 180px);
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD GLOBAL FILTER BAR
   ══════════════════════════════════════════════════════════ */
/* Mobile collapsible wrapper — toggle hidden on desktop */
.dfb-mobile-wrap { display: block; }
.dfb-mobile-toggle { display: none; }
.dash-filter-bar {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: .55rem .7rem;
    background: linear-gradient(180deg, var(--surface) 0%, var(--panel) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: .75rem 1rem;
    margin-bottom: .5rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    overflow: visible;
}
.dfb-group {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.dfb-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    font-weight: 600;
}
.dfb-range-group { flex-direction: column; }
.dfb-reset {
    align-self: flex-end;
    padding: .35rem .75rem;
    font-size: .78rem;
}
.dfb-reset-active {
    border-color: var(--accent);
    color: var(--accent);
}
.dfb-count {
    align-self: flex-end;
    font-size: .75rem;
    color: var(--muted);
    margin-left: auto;
    white-space: nowrap;
}

/* ── Multi-select popover filter ──────────────────────── */
.ms-filter { position: relative; display: inline-block; }
.ms-trigger {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    padding: .35rem .55rem;
    font-size: .78rem;
    cursor: pointer;
    min-width: 0;
    max-width: 180px;
    transition: border-color .15s, box-shadow .15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.ms-trigger:hover { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(0,179,55,.08); }
.ms-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ms-filter.ms-active .ms-trigger {
    border-color: var(--primary);
    background: rgba(0,179,55,.08);
    box-shadow: 0 0 0 2px rgba(0,179,55,.1);
}
.ms-chevron {
    font-size: .55rem;
    margin-left: auto;
    transition: transform .15s;
    flex-shrink: 0;
    opacity: .6;
}
.ms-trigger[aria-expanded="true"] .ms-chevron { transform: rotate(180deg); opacity: 1; }
.ms-summary { overflow: hidden; text-overflow: ellipsis; }
.ms-popover {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 800;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.03);
    min-width: 200px;
    max-width: 280px;
    max-height: 300px;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(8px);
}
.ms-popover[hidden] { display: none; }
.ms-popover-actions {
    display: flex;
    gap: .35rem;
    padding: .45rem .6rem;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,.02);
}
.ms-popover-actions button {
    font-size: .7rem;
    padding: .2rem .5rem;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border);
    color: var(--text-sec);
    cursor: pointer;
    transition: background .15s, color .15s;
    font-weight: 600;
}
.ms-popover-actions button:hover { background: rgba(0,179,55,.1); color: var(--primary); border-color: var(--primary); }
.ms-options {
    overflow-y: auto;
    padding: .4rem .6rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.ms-option {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .35rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: .78rem;
    color: var(--text);
    transition: background .1s;
    user-select: none;
}
.ms-option:hover { background: rgba(255,255,255,.05); }
.ms-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-option input[type="checkbox"] {
    accent-color: var(--primary);
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    cursor: pointer;
}

/* ── Multi-select chips bar ──────────────────────────── */
.ms-chips-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    min-height: 0;
    margin-bottom: .25rem;
}
.ms-chips-bar:empty { display: none; }
.ms-chips-bar .active-filters-label {
    font-size: .75rem;
    color: var(--text-sec);
    margin-right: .2rem;
}
.ms-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: rgba(0,179,55,.12);
    color: var(--primary);
    border: 1px solid rgba(0,179,55,.25);
    border-radius: 999px;
    padding: .15rem .5rem;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}
.ms-chip-remove {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: .85rem;
    line-height: 1;
    padding: 0 .1rem;
    opacity: .7;
    transition: opacity .15s;
}
.ms-chip-remove:hover { opacity: 1; }

/* ── Advanced Filter Panel ─────────────────────────────── */
.adv-filter-panel {
    margin-bottom: 1rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}
.adv-filter-panel--collapsed {
    padding: .4rem .85rem;
}
.adv-filter-panel--collapsed .adv-filter-body {
    display: none;
}
.adv-filter-panel:not(.adv-filter-panel--collapsed) {
    padding: .65rem .85rem;
}
.adv-filter-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    background: none;
    border: none;
    padding: .25rem 0;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    text-align: left;
    transition: background .15s;
}
.adv-filter-toggle:hover {
    background: rgba(255,255,255,.03);
    border-radius: var(--radius-sm);
}
.adv-filter-chevron {
    margin-left: auto;
    font-size: .7rem;
    color: var(--muted);
}
.adv-filter-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}
.adv-filter-title {
    font-size: .82rem;
    font-weight: 800;
    color: var(--text-sec);
    display: flex;
    align-items: center;
    gap: .4rem;
    letter-spacing: .02em;
}
.adv-filter-title i { font-size: .85rem; color: var(--muted); }
.adv-badge {
    font-size: .65rem;
    background: var(--primary);
    color: #000;
    border-radius: 10px;
    padding: .1rem .45rem;
    font-weight: 700;
}
.adv-filter-body {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 0;
    padding: .6rem 0 .6rem .2rem;
    margin-top: .35rem;
    border-top: 1px solid var(--border);
}
.adv-filter-panel--collapsed .adv-filter-body {
    margin-top: 0;
    border-top: none;
    padding: 0;
}
.tt-group {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    width: 100%;
}
.tt-group + .tt-group {
    border-top: 1px solid var(--border);
    padding-top: .55rem;
}
.tt-group-label {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    white-space: nowrap;
    min-width: 5.5rem;
    padding-top: .35rem;
}
.tt-group-items {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .55rem;
}
.trait-toggle {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .3rem .55rem;
    transition: border-color .12s;
}
.trait-toggle:hover { border-color: var(--border-hover); }
.tt-label {
    font-size: .75rem;
    color: var(--text-sec);
    white-space: nowrap;
}
.tt-label i { font-size: .65rem; margin-right: .15rem; }
.tt-btns {
    display: flex;
    gap: 1px;
    border-radius: 4px;
    overflow: hidden;
}
.tt-btn {
    background: var(--bg);
    border: none;
    color: var(--muted);
    font-size: .65rem;
    padding: .15rem .4rem;
    transition: background .12s, color .12s;
}
.tt-btn:hover { background: var(--hover); color: var(--text); }
.tt-btn.active { background: var(--primary); color: #000; font-weight: 600; }
.tt-only.active { background: var(--gain); color: #000; }
.tt-exclude.active { background: var(--loss); color: #fff; }

/* Summary filtered state */
.summary-wrapper--filtered { margin-bottom: 2rem; }
.summary-wrapper--filtered .summary-cards-grid { margin-bottom: 0; }
.summary-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .68rem;
    font-weight: 600;
    color: var(--primary);
    background: rgba(0,179,55,.15);
    border: 1px solid rgba(0,179,55,.3);
    padding: .25rem .6rem;
    border-radius: 4px;
    margin-bottom: .75rem;
}

/* Summary skeleton state (loading) */
.summary-cards-grid.summary-skeleton .sc-value,
.summary-cards-grid.summary-skeleton .sc-sub { opacity: .45; }
.skeleton-text {
    background: linear-gradient(90deg, var(--panel) 25%, var(--hover) 50%, var(--panel) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 4px;
    color: transparent !important;
    user-select: none;
    display: inline-block;
    min-width: 60px;
}

/* Dashboard loading block (phase: loading) */
.dash-loading-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 2.5rem 1rem;
    text-align: center;
}
.dash-loading-block .spinner-ring {
    width: 36px;
    height: 36px;
    border: 3px solid var(--primary);
    border-top-color: var(--loss);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

/* Filter bar: loading/disabled state */
.dash-filter-bar--loading {
    opacity: .6;
    pointer-events: none;
    position: relative;
}
.dash-filter-bar--loading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}

/* Inline partial-load chip */
.dash-partial-chip {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(234,179,8,.08);
    border: 1px solid rgba(234,179,8,.3);
    border-radius: var(--radius);
    padding: .45rem .75rem;
    margin-bottom: .75rem;
    font-size: .78rem;
    color: var(--warn);
}
.dash-partial-chip i { flex-shrink: 0; }
.dpc-dismiss {
    background: none;
    border: none;
    color: var(--muted);
    font-size: .9rem;
    cursor: pointer;
    margin-left: auto;
    padding: 0 .25rem;
    flex-shrink: 0;
    transition: color .12s;
}
.dpc-dismiss:hover { color: var(--text); }

/* Filter-aware empty states */
.no-data-filtered {
    display: flex;
    align-items: center;
    gap: .4rem;
}
.no-data-filtered i {
    font-size: .75rem;
    color: var(--muted);
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   COLLAPSIBLE SECTIONS
   ══════════════════════════════════════════════════════════ */
.section-heading-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .9rem;
    flex-wrap: wrap;
}
.section-heading-bar .section-heading { margin-bottom: 0; }
.section-count {
    font-size: .75rem;
    color: var(--muted);
    margin-left: auto;
    white-space: nowrap;
}
.section-collapse-btn {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    flex-shrink: 0;
    transition: all .15s;
}
.section-collapse-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
}
.section-collapse-btn .fa-chevron-up {
    transition: transform .2s ease;
}
.section-collapse-btn.rotated .fa-chevron-up {
    transform: rotate(180deg);
}
.section-collapsible-body {
    overflow: hidden;
    max-height: 5000px;
    transition: max-height .35s ease, opacity .25s ease;
    opacity: 1;
}
.section-collapsible-body.collapsed {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
}

/* ══════════════════════════════════════════════════════════
   PEEK + EXPAND (show more)
   ══════════════════════════════════════════════════════════ */
.peek-container {
    overflow: hidden;
    max-height: var(--peek-height, 320px);
    transition: max-height .35s ease;
}
.peek-container.expanded {
    max-height: none;
}
.show-more-wrap {
    display: flex;
    justify-content: center;
    padding: .6rem 0 0;
    margin-top: .5rem;
    border-top: 1px solid var(--border);
}
.show-more-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .85rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--primary);
    background: transparent;
    border: 1px solid var(--primary);
    border-radius: 20px;
    cursor: pointer;
    transition: all .15s;
}
.show-more-btn:hover {
    background: rgba(0,179,55,.1);
    color: var(--primary-h);
    border-color: var(--primary-h);
}
.show-more-btn i { font-size: .65rem; transition: transform .2s; }
.peek-container.expanded + .show-more-wrap .show-more-btn i { transform: rotate(180deg); }
.peek-container.expanded + .show-more-wrap .show-more-btn .expand-text { display: none; }
.peek-container.expanded + .show-more-wrap .show-more-btn .collapse-text { display: inline; }
.show-more-btn .collapse-text { display: none; }

/* Peek heights per section */
.peek-sellers { --peek-height: 280px; }   /* first row + half of second (~6 cards in 4-col grid) */
.peek-momentum { --peek-height: 220px; }  /* Stacked bar + Strong Upward + Moderate Upward (2 bars) */
.peek-movers { --peek-height: 320px; }    /* top 3 gainers + 3 decliners */

/* ══════════════════════════════════════════════════════════
   BACK TO TOP BUTTON
   ══════════════════════════════════════════════════════════ */
.back-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 50;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--primary);
    color: #000;
    border: none;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
    transition: transform .15s, opacity .15s, background .15s;
    cursor: pointer;
    opacity: .85;
}
.back-to-top:hover {
    transform: translateY(-2px);
    opacity: 1;
    background: var(--primary-h);
}
.back-to-top[hidden] { display: none !important; }

/* ══════════════════════════════════════════════════════════
   RARITY MATRIX TABLE
   ══════════════════════════════════════════════════════════ */
.rarity-matrix {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-x: auto;
}
.rm-header-row,
.rm-row {
    display: grid;
    grid-template-columns: 130px repeat(var(--rm-cols, 1), minmax(90px, 1fr));
    gap: 2px;
}
.rm-row-label-head,
.rm-col-header {
    padding: .45rem .5rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    background: var(--surface-2, rgba(255,255,255,.04));
    border-radius: 4px;
    text-align: center;
}
.rm-row-label-head { text-align: left; }
.rm-row { margin-top: 2px; }
.rm-row-label {
    padding: .4rem .5rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    background: var(--surface);
    border-radius: 4px;
    border: 1px solid var(--border);
}
.rm-sym { font-size: .9rem; flex-shrink: 0; }
.rm-rarity-name {
    font-size: .72rem;
    font-weight: 600;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rm-cell {
    padding: .35rem .4rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
}
.rm-cell-empty {
    color: var(--muted);
    font-size: .75rem;
    justify-content: center;
}
.rm-cell-clickable {
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.rm-cell-clickable:hover,
.rm-cell-clickable:focus {
    background: var(--surface-2, rgba(255,255,255,.07));
    border-color: var(--accent);
    outline: none;
}
.rm-cell-price {
    font-size: .75rem;
    font-weight: 700;
    color: var(--text);
    display: block;
}
.rm-cell-count {
    font-size: .65rem;
    color: var(--muted);
    display: block;
}

/* ══════════════════════════════════════════════════════════
   TOP SELLERS SECTION
   ══════════════════════════════════════════════════════════ */
/* ─── Top Sellers Grid (5×4) ──────────────────────────────── */
.top-sellers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
}
a.tsc-card {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .55rem;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    gap: .55rem;
    overflow: hidden;
}
a.tsc-card:hover {
    border-color: var(--primary);
    box-shadow: 0 3px 12px rgba(0,179,55,.12), 0 2px 6px rgba(0,0,0,.25);
}
.tsc-rank {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .58rem;
    font-weight: 800;
    background: var(--surface-2);
    color: var(--text-sec);
    border: 1px solid var(--border);
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.tsc-card:nth-child(1)  .tsc-rank { background: #FFD700; color: #000; border-color: #FFD700; }
.tsc-card:nth-child(2)  .tsc-rank { background: #C0C0C0; color: #000; border-color: #C0C0C0; }
.tsc-card:nth-child(3)  .tsc-rank { background: #CD7F32; color: #000; border-color: #CD7F32; }
.tsc-card:nth-child(n+4):nth-child(-n+10) .tsc-rank { background: var(--surface); color: var(--text); border-color: var(--border-hover); }
.card-info-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    min-width: 28px;
    min-height: 28px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    background: rgba(0,0,0,.55);
    color: var(--text-sec);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    z-index: 3;
    cursor: pointer;
    transition: background .12s, color .12s, transform .12s;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}
.card-info-btn:hover {
    background: var(--warn);
    color: #000;
    border-color: var(--warn);
    transform: scale(1.15);
}
*:hover > .card-info-btn:not(.card-info-btn--inline),
.card-info-btn:focus-visible:not(.card-info-btn--inline) {
    opacity: 1;
    pointer-events: auto;
}
.card-info-btn--sm {
    min-width: 28px;
    min-height: 28px;
    width: 28px;
    height: 28px;
    font-size: .75rem;
}

/* Inline variant — sits next to text, not overlaid on image */
.card-info-btn--inline {
    position: static;
    opacity: .6;
    pointer-events: auto;
    flex-shrink: 0;
    color: var(--muted);
    border-color: var(--border);
    margin-left: .25rem;
}
*:hover > * > .card-info-btn--inline,
*:hover .card-info-btn--inline,
.card-info-btn--inline:hover,
.card-info-btn--inline:focus-visible {
    opacity: 1;
}
.tsc-img {
    width: auto;
    height: 100%;
    max-width: 140px;
    aspect-ratio: 63/88;
    object-fit: cover;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
    flex-shrink: 0;
    align-self: stretch;
}
.tsc-body {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    flex: 1;
}
.tsc-name {
    font-size: .82rem;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}
.tsc-set {
    font-size: .64rem;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tsc-price-row {
    display: flex;
    align-items: baseline;
    gap: .3rem;
    flex-wrap: wrap;
    margin-top: .1rem;
}
.tsc-price { font-size: .95rem; font-weight: 800; color: var(--text); }
.tsc-pct { font-size: .68rem; font-weight: 700; }
.tsc-pct.gain { color: var(--gain); }
.tsc-pct.loss { color: var(--loss); }
.tsc-dollar { font-size: .62rem; font-weight: 600; }
.tsc-dollar.gain { color: var(--gain); }
.tsc-dollar.loss { color: var(--loss); }

/* Stat lines — icon + label + bold value */
.tsc-stats-col {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin-top: .1rem;
}
.tsc-sl {
    font-size: .7rem;
    color: var(--text);
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: .3rem;
}
.tsc-sl strong { font-weight: 700; }
.tsc-sl-icon { font-size: .58rem; width: 14px; text-align: center; flex-shrink: 0; }
.tsc-sl-icon.gain { color: var(--gain); }

/* Footer row — momentum tag + sparkline + info */
.tsc-footer {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-top: auto;
}
.tsc-tag {
    font-size: .48rem;
    font-weight: 600;
    padding: .08rem .25rem;
    border-radius: 3px;
    background: rgba(255,255,255,.06);
    color: var(--text-sec);
    white-space: nowrap;
    flex-shrink: 0;
}
.tsc-tag.badge-mom-strong-upward { background: rgba(0,179,55,.15); color: var(--gain); }
.tsc-tag.badge-mom-moderate-upward { background: rgba(74,222,128,.1); color: #4ade80; }
.tsc-tag.badge-mom-stable { background: rgba(255,255,255,.06); color: var(--muted); }
.tsc-tag.badge-mom-moderate-downward { background: rgba(251,146,60,.1); color: #fb923c; }
.tsc-tag.badge-mom-strong-downward { background: rgba(228,0,124,.12); color: var(--loss); }

.tsc-tag-lowval, .tag-lowval { opacity: .6; border: 1px dashed rgba(255,255,255,.15); }
.tsc-tag-hot {
    background: rgba(255,107,0,.2);
    color: #fb923c;
}
.tsc-tag-hot i { font-size: .5rem; }

/* Momentum legend in section explainer */
.mom-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem .5rem;
    margin-top: .3rem;
    font-size: .6rem;
    color: var(--muted);
}
.mom-legend-item {
    font-size: .52rem;
    font-weight: 600;
    padding: .1rem .3rem;
    border-radius: 3px;
    display: inline-block;
}
.mom-legend-item.badge-mom-strong-upward { background: rgba(0,179,55,.15); color: var(--gain); }
.mom-legend-item.badge-mom-moderate-upward { background: rgba(74,222,128,.1); color: #4ade80; }
.mom-legend-item.badge-mom-stable { background: rgba(255,255,255,.06); color: var(--muted); }
.mom-legend-item.badge-mom-moderate-downward { background: rgba(251,146,60,.1); color: #fb923c; }
.mom-legend-item.badge-mom-strong-downward { background: rgba(228,0,124,.12); color: var(--loss); }
.tsc-footer .sparkline { flex: 1; min-width: 0; }

.approx-badge {
    font-size: .7rem;
    background: var(--surface-2, rgba(255,255,255,.06));
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: .15rem .4rem;
    color: var(--muted);
}

/* ══════════════════════════════════════════════════════════
   SET CARD ENHANCEMENTS (actions row + Details button)
   ══════════════════════════════════════════════════════════ */
.set-card-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .6rem;
}
.btn-outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-sec);
    padding: .35rem .7rem;
    border-radius: 6px;
    font-size: .78rem;
    cursor: pointer;
    transition: border-color .12s, color .12s, background .12s;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(0,179,55,.08);
}

/* Set deep-dive rarity composition bars */
.set-rarity-comp {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.src-row {
    display: grid;
    grid-template-columns: 110px 1fr 30px 60px;
    align-items: center;
    gap: .4rem;
}
.src-rarity {
    font-size: .72rem;
    color: var(--text-sec);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.src-bar-wrap {
    height: 8px;
    background: var(--surface-2, rgba(255,255,255,.06));
    border-radius: 4px;
    overflow: hidden;
}
.src-bar {
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
    min-width: 2px;
    transition: width .3s ease;
}
.src-count {
    font-size: .68rem;
    color: var(--muted);
    text-align: right;
}
.src-value {
    font-size: .66rem;
    color: var(--text-sec);
    text-align: right;
    font-weight: 600;
}

/* Set trend sparkline */
.set-trend-chart { text-align: center; padding: .5rem 0; }
.set-trend-sparkline { display: block; margin: 0 auto; }
.set-trend-caption { font-size: .65rem; color: var(--muted); margin-top: .3rem; }

/* Set momentum summary in drawer */
.set-momentum-summary { display: flex; flex-direction: column; gap: .25rem; }
.smom-hint { font-size: .65rem; color: var(--muted); margin: 0 0 .25rem; }
.smom-row { display: flex; justify-content: space-between; padding: .2rem .4rem; border-radius: var(--radius-sm); font-size: .78rem; }
.smom-row-clickable { cursor: pointer; }
.smom-row:hover, .smom-row-clickable:hover { background: rgba(255,255,255,.06); }
.rc-row-clickable { cursor: pointer; }
.rc-row:hover, .rc-row-clickable:hover { background: rgba(255,255,255,.06); }
.smom-label { color: var(--text); }
.smom-label.gain { color: var(--gain); }
.smom-label.loss { color: var(--loss); }
.smom-count { font-weight: 700; color: var(--text-sec); }

/* ══════════════════════════════════════════════════════════
   PARTIAL FAILURE WARNING BANNER
   ══════════════════════════════════════════════════════════ */
.partial-warning-banner {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    background: rgba(234,179,8,.1);
    border: 1px solid rgba(234,179,8,.35);
    border-radius: 8px;
    padding: .7rem 1rem;
    margin: .75rem 1.25rem;
    font-size: .8rem;
    color: var(--text);
}
.partial-warning-banner i { color: #eab308; margin-top: .1rem; flex-shrink: 0; }
.partial-warning-banner span { flex: 1; line-height: 1.5; }
.partial-warning-banner em { font-style: normal; font-weight: 600; }
.pw-retry {
    background: none;
    border: none;
    color: #eab308;
    cursor: pointer;
    font-size: .8rem;
    text-decoration: underline;
    padding: 0 .25rem;
}
.pw-dismiss {
    background: none;
    border: none;
    color: var(--muted);
    font-size: .9rem;
    cursor: pointer;
    padding: .1rem .3rem;
    flex-shrink: 0;
    transition: color .12s;
}
.pw-dismiss:hover { color: var(--text); }
.btn-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD TIER SECTION — clickable headers
   ══════════════════════════════════════════════════════════ */
.tier-clickable {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: .35rem;
    transition: opacity .12s;
}
.tier-clickable:hover,
.tier-clickable:focus {
    text-decoration: underline;
    outline: none;
}
.tier-clickable:hover .tier-drill-hint {
    color: var(--primary);
    opacity: 1;
}
.tier-drill-hint {
    font-size: .7rem;
    color: var(--muted);
    font-weight: 400;
    opacity: .6;
    transition: color .12s, opacity .12s;
}

/* Market heat card — click hint + hover affordance */
.market-heat-card {
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.market-heat-card:hover {
    border-color: var(--tier-high);
    box-shadow: 0 0 0 1px rgba(54,171,129,.2);
}
.heat-click-hint {
    font-size: .65rem;
    color: var(--muted);
    font-weight: 400;
    margin-left: .25rem;
    opacity: .5;
    transition: opacity .12s;
    white-space: nowrap;
}
.market-heat-card:hover .heat-click-hint { opacity: 1; color: var(--tier-high); }

/* Mover items — image/name clickable */
.mover-name { cursor: pointer; }
.mover-name:hover { text-decoration: underline; }

/* body lock when drawer open */
body.has-drawer { overflow: hidden; }

/* Drawer accent borders — colored left stripe on the panel header + top glow */
.drawer-accent-heat  .drawer-header,
.drawer-accent-high  .drawer-header,
.drawer-accent-mid   .drawer-header,
.drawer-accent-low   .drawer-header,
.drawer-accent-rarity .drawer-header,
.drawer-accent-momentum .drawer-header {
    border-left: 4px solid var(--primary);
    background: linear-gradient(90deg, rgba(0,179,55,.06) 0%, transparent 100%);
}

.drawer-accent-heat  .drawer-panel,
.drawer-accent-high  .drawer-panel,
.drawer-accent-mid   .drawer-panel,
.drawer-accent-low   .drawer-panel,
.drawer-accent-rarity .drawer-panel,
.drawer-accent-momentum .drawer-panel {
    box-shadow: -8px 0 32px rgba(0,179,55,.12);
}

/* ─── Responsive — 1100px ─────────────────────────────────── */
@media (max-width: 1100px) {
    .cards-grid { grid-template-columns: repeat(4, 1fr); }
    .sealed-grid { grid-template-columns: repeat(4, 1fr); }
    .pulse-cards-grid.pulse-even { grid-template-columns: repeat(5, 1fr); }
}
/* ─── Responsive — 900px (tablet / iOS landscape) ─────────── */
@media (max-width: 900px) {
    .top-sellers-grid { grid-template-columns: repeat(2, 1fr); }
    .tier-3col { grid-template-columns: 1fr; }
    .tier-movers-grid { grid-template-columns: 1fr; }
    .tier-movers-col:first-child { border-right: none; border-bottom: 1px solid var(--border); }
    .md-top { grid-template-columns: 120px 1fr; gap: .5rem; }
    .md-bottom-row { grid-template-columns: 1fr; }
    .md-price { font-size: 1.2rem; }
    .cv-header-row { flex-direction: column; gap: .5rem; }
    .cv-search-wrap { max-width: none; min-width: 0; }
    .cv-toolbar { flex-direction: column; padding: .5rem; }
    .cv-sort-group { width: 100%; }
    .cards-grid { grid-template-columns: repeat(2, 1fr); }
    .sealed-grid { grid-template-columns: repeat(2, 1fr); }
    .pulse-cards-grid.pulse-even { grid-template-columns: repeat(3, 1fr); }
    /* Summary cards: 2x2 + Market Heat full row at 900px */
    .summary-cards-grid { grid-template-columns: repeat(2, 1fr); gap: .65rem; }
    .market-heat-card { grid-column: 1 / -1; }
    .summary-card { padding: .9rem 1rem; }
    .sc-value { font-size: 1.35rem; }
    /* Dashboard filter bar: horizontal scroll at 900px */
    .dash-filter-bar {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: .5rem;
        padding: .6rem .75rem;
        align-items: flex-end;
    }
    .dash-filter-bar::-webkit-scrollbar { display: none; }
    .dfb-group { min-width: 100px; flex-shrink: 0; }
    .dfb-count { margin-left: 0; flex-shrink: 0; }
    .dash-filters-collapsible { margin: 0 -1rem 1rem; }
    .dash-filters-collapsible summary { padding: .5rem 1rem; }
    .dash-sticky-filters { padding: .4rem 1rem; }
    /* Section nav: ensure touch-friendly scroll */
    .dash-section-nav { -webkit-overflow-scrolling: touch; padding: .25rem 0 .4rem; }
    .dsn-link { padding: .4rem .65rem; min-height: 40px; }
    /* View panel */
    .view-panel { padding: 1rem; }
    /* Topbar: compact */
    .topbar { padding: 0 1rem; }
    .search-wrapper { max-width: 280px; }
    /* Scroll margin: shorter sticky bar at 900px */
    #dash-summary, #dash-pulse-section, #dash-tier-sections, #dash-movers,
    #dash-top-sellers, #dash-momentum, #dash-rarity-matrix {
        scroll-margin-top: calc(var(--topbar-h) + 140px);
    }
}

/* ─── Responsive — 600px ──────────────────────────────────── */
@media (max-width: 600px) {
    /* Reduce empty space at top */
    .view-panel { padding-top: .5rem; }
    #dash-summary { padding-top: .75rem; }
    /* Info tips in summary cards: hidden on mobile */
    #dash-summary .info-tip-wrap { display: none; }
    .breadcrumb { padding: .4rem .75rem; }
    .seo-intro { margin: .4rem .75rem; }
    .seo-intro summary { padding: .5rem .75rem; font-size: .85rem; }
    /* Sticky filters: disable sticky on mobile to prevent overlap */
    .dash-filters-collapsible { margin: 0 -.75rem 1rem; }
    .dash-filters-collapsible summary { padding: .5rem .75rem; font-size: .85rem; }
    .dash-sticky-filters { position: relative; top: auto; padding: .4rem .75rem; }
    /* Filter bar: collapsible on mobile with title */
    .dfb-mobile-toggle {
        display: flex;
        align-items: center;
        gap: .5rem;
        width: 100%;
        background: linear-gradient(180deg, var(--surface) 0%, var(--panel) 100%);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: .5rem .75rem;
        margin-bottom: .5rem;
        cursor: pointer;
        font-family: inherit;
        color: inherit;
        text-align: left;
        box-shadow: 0 1px 4px rgba(0,0,0,.15);
        transition: background .15s;
    }
    .dfb-mobile-toggle:hover { background: var(--surface-hover); }
    .dfb-mobile-title { font-size: .82rem; font-weight: 800; color: var(--text-sec); display: flex; align-items: center; gap: .4rem; }
    .dfb-mobile-title i { font-size: .85rem; color: var(--muted); }
    .dfb-mobile-count { margin-left: auto; font-size: .78rem; color: var(--muted); }
    .dfb-mobile-chevron { margin-left: .35rem; font-size: .7rem; color: var(--muted); }
    .dfb-mobile-wrap--collapsed .dash-filter-bar { display: none; }
    .dfb-mobile-wrap:not(.dfb-mobile-wrap--collapsed) .dfb-mobile-toggle { margin-bottom: .5rem; }
    /* Filter bar: 2-column grid on mobile — compact, top-aligned */
    .dash-filter-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .4rem .5rem;
        padding: .5rem .75rem;
        align-items: start;
        overflow: visible;
    }
    .dfb-group { min-width: 0; }
    .dfb-group .ms-trigger { max-width: 100%; }
    /* TAG | RANGE — top-aligned, RANGE gets slightly more width for buttons */
    .dfb-range-group {
        min-width: 0;
        align-self: start;
    }
    .dfb-range-group .dfb-label { margin-bottom: 0; }
    .dfb-range-group .range-btns {
        flex-wrap: wrap;
        gap: .25rem;
        margin-top: .15rem;
    }
    .dfb-range-group .range-btn {
        flex: 1 1 auto;
        min-width: 2.5rem;
        min-height: 36px;
        padding: .35rem .45rem;
        font-size: .7rem;
    }
    .dfb-reset { grid-column: 1; }
    .dfb-count { grid-column: 2; justify-self: end; align-self: center; margin-left: 0; }
    /* Section nav: stacked/wrapped — all links visible */
    .dash-section-nav {
        flex-wrap: wrap;
        overflow: visible;
        gap: .35rem;
        padding: .35rem 0;
    }
    /* Card Traits: organized grid for mobile */
    .adv-filter-body { padding-top: .5rem; }
    .tt-group {
        margin-bottom: 1rem;
        padding-bottom: .75rem;
        border-bottom: 1px solid var(--border);
    }
    .tt-group:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
    .tt-group-label {
        font-size: .68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--muted);
        margin-bottom: .5rem;
        display: block;
    }
    .tt-group-items {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: .4rem;
    }
    .trait-toggle {
        flex-direction: column;
        align-items: stretch;
        gap: .3rem;
        padding: .45rem .5rem;
        min-height: 44px;
    }
    .tt-label { font-size: .72rem; }
    .tt-btns { justify-content: flex-start; }
    .tt-btn { padding: .3rem .5rem; font-size: .68rem; min-height: 36px; }
    /* Market Heat: full width, centered */
    .market-heat-card { grid-column: 1 / -1; }
    .market-heat-card .sc-body { flex: 1; min-width: 0; width: 100%; align-items: center; text-align: center; }
    .market-heat-card .sc-value { display: flex; justify-content: center; width: 100%; }
    #sc-heat { justify-content: space-evenly; flex: 1; min-width: 0; width: 100%; }
    .cards-grid { grid-template-columns: repeat(2, 1fr); }
    .sealed-grid { grid-template-columns: repeat(2, 1fr); }
    .sl-header-row { flex-direction: column; gap: .5rem; }
    .sl-search-wrap { max-width: none; min-width: 0; }
    .sl-controls { flex-direction: column; align-items: stretch; }
    .sl-controls .sl-count { margin-left: 0; }
    .pulse-cards-grid.pulse-even { grid-template-columns: repeat(2, 1fr); }
    .sets-grid { grid-template-columns: 1fr; }
    .sc-preview-row { grid-template-columns: repeat(3, 1fr); }
    .sc-stats-row { gap: .35rem; }
    .sc-kpi-val { font-size: .78rem; }
    .sv-header-row { flex-direction: column; gap: .5rem; }
    .sv-search-wrap { max-width: none; min-width: 0; }
    .sc-actions { flex-direction: column; }
    /* Summary: 2x2 + Market Heat full row */
    .summary-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: .5rem;
    }
    .summary-card { text-align: center; }
    .summary-card .sc-body { align-items: center; }
    .market-heat-card { grid-column: 1 / -1; }
    .tiers-grid { grid-template-columns: 1fr; }
    .view-panel { padding: .5rem .9rem .9rem; }
    .movers-grid { grid-template-columns: 1fr; }
    .topbar { padding: 0 .75rem; gap: .5rem; min-height: 52px; }
    .topbar-right .refresh-label { display: none; }
    .btn-refresh { min-width: 44px; min-height: 44px; padding: .5rem; justify-content: center; }
    .search-wrapper { max-width: none; flex: 1; min-width: 0; }
    .rarity-grid { grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); }
    /* Price Tiers: improved mobile layout — spacing, hierarchy, readability */
    .tier-3col { gap: 1rem; }
    .tier-column { padding: 0; }
    .tier-col-header {
        padding: .75rem .85rem .5rem;
        justify-content: flex-start;
        text-align: left;
    }
    .tier-col-title { font-size: 1rem; }
    .tier-kpi-strip {
        padding: 0 .85rem .65rem;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: .5rem .75rem;
        font-size: .78rem;
        text-align: left;
    }
    .tier-col-gainers, .tier-col-losers {
        padding: .5rem .85rem .75rem;
    }
    .tmover-col-title {
        font-size: .78rem;
        margin-bottom: .5rem;
    }
    .tmover-list {
        grid-template-columns: repeat(3, 1fr);
        gap: .4rem;
    }
    .tmover-card {
        padding: .5rem .4rem;
        min-height: 88px;
    }
    .tmover-name { font-size: .72rem; line-height: 1.25; }
    .tmover-price { font-size: .78rem; }
    .tmover-change { font-size: .72rem; }
    .tmover-meta { display: flex; align-items: center; gap: .25rem; margin-top: .2rem; }
    .tmover-vol { font-size: .6rem; }
    .tmover-card .tmover-meta .sparkline { display: none; }
    .adv-filters-inner { flex-direction: column; }
    .adv-filter-group { min-width: 100%; }
    .dash-range-row { flex-wrap: wrap; gap: .5rem; }
    .tier-section-head { gap: .4rem; }
    .tier-section-stats { margin-left: 0; }
    .ms-popover { min-width: 160px; }
    .ms-trigger { min-width: 90px; max-width: 140px; min-height: 44px; padding: .5rem .65rem; align-items: center; }
    .range-btn { min-height: 44px; padding: .5rem .75rem; display: inline-flex; align-items: center; }
    /* Tooltip: full-width on mobile, centered */
    .card-tooltip { width: calc(100vw - 24px); left: 12px !important; }
    /* Pulse: 2-col, compact for mobile — show 4 gainers + 4 losers only */
    .pulse-cards-grid,
    .pulse-cards-grid.pulse-even {
        grid-template-columns: repeat(2, 1fr);
        gap: .4rem;
    }
    #market-pulse .pulse-card:nth-child(5),
    #market-pulse .pulse-card:nth-child(10) {
        display: none;
    }
    .pulse-card { padding: .5rem; }
    .pulse-card-name { font-size: .7rem; }
    .pulse-card-price { font-size: .75rem; }
    .pulse-card-pct { font-size: .68rem; }
    .pulse-header { flex-wrap: wrap; gap: .35rem; }
    .pulse-label { font-size: .8rem; }
    /* Affiliate banner: stack on small */
    .site-banner { flex-wrap: wrap; font-size: .75rem; padding: .4rem .75rem; }
    /* Card grid enhancements */
    .ci-range, .ci-direct { display: none; }
    .card-item .ci-info, .sealed-card-item .sci-info { padding: .55rem .65rem .6rem; }
    .ci-stats-col { font-size: .6rem; }
    .cv-header-row { flex-direction: column; gap: .5rem; }
    .cv-search-wrap { max-width: none; min-width: 0; }
    /* Cards filters: collapsible on mobile */
    .cv-mobile-toggle {
        display: flex;
        align-items: center;
        gap: .5rem;
        width: 100%;
        background: linear-gradient(180deg, var(--surface) 0%, var(--panel) 100%);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: .5rem .75rem;
        margin-bottom: .5rem;
        cursor: pointer;
        font-family: inherit;
        color: inherit;
        text-align: left;
        box-shadow: 0 1px 4px rgba(0,0,0,.15);
        transition: background .15s;
    }
    .cv-mobile-toggle:hover { background: var(--surface-hover); }
    .cv-mobile-title { font-size: .82rem; font-weight: 800; color: var(--text-sec); display: flex; align-items: center; gap: .4rem; }
    .cv-mobile-title i { font-size: .85rem; color: var(--muted); }
    .cv-mobile-chevron { margin-left: auto; font-size: .7rem; color: var(--muted); }
    .cv-filters-wrap--collapsed .cv-toolbar,
    .cv-filters-wrap--collapsed .cv-price-range { display: none; }
    .cv-filters-wrap:not(.cv-filters-wrap--collapsed) .cv-mobile-toggle { margin-bottom: .5rem; }
    .cv-toolbar { padding: .5rem; flex-direction: column; align-items: stretch; gap: .5rem; }
    .cv-filter-group { width: 100%; }
    .cv-sort-group { width: 100%; flex-wrap: wrap; gap: .4rem; }
    .cv-range-group { width: 100%; }
    /* MS filters + range: horizontal scroll for touch */
    #cv-ms-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: .2rem;
    }
    #cv-ms-filters::-webkit-scrollbar { display: none; }
    #cv-ms-filters .ms-filter { flex-shrink: 0; }
    .cv-range-group .range-btns {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .cv-range-group .range-btns::-webkit-scrollbar { display: none; }
    .cv-range-group .range-btn { flex-shrink: 0; min-height: 36px; padding: .35rem .5rem; }
    /* Price presets: horizontal scroll */
    .cv-price-range { flex-direction: column; align-items: stretch; padding: .5rem .65rem; gap: .4rem; }
    .cv-price-inputs { flex-wrap: wrap; }
    .cv-price-input { min-width: 60px; }
    .cv-price-presets {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .cv-price-presets::-webkit-scrollbar { display: none; }
    .cv-price-preset { flex-shrink: 0; }
    /* Intent chips: horizontal scroll */
    .cv-chips-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: .25rem;
        gap: .35rem;
    }
    .cv-chips-bar::-webkit-scrollbar { display: none; }
    .cv-chips-bar .intent-chip { flex-shrink: 0; }
    /* Active filter chips: horizontal scroll */
    #cv-chips-bar.ms-chips-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #cv-chips-bar.ms-chips-bar::-webkit-scrollbar { display: none; }
    #cv-chips-bar .ms-chip { flex-shrink: 0; }
    .filter-select { flex: 1; max-width: none; min-width: 0; }
    .cv-results-bar { flex-direction: column; gap: .25rem; }
    .cv-total-value { margin-left: 0; }
    /* Filter bar: stacked (see above), no scroll */
    .dash-filters-collapsible { margin: 0 -.9rem 1rem; }
    .dash-filters-collapsible summary { padding: .5rem .9rem; }
    .dash-sticky-filters {
        padding: .4rem .9rem;
        position: relative;
    }
    .mobile-only-hint { display: inline; }
    /* Card traits: collapsible on mobile — minimized by default to save space */
    #cv-adv-filters .adv-filter-toggle { min-height: 44px; padding: .5rem 0; }
    /* Top sellers: compact 1-col on mobile — info icon overlay reduces accidental TCGPlayer redirects */
    .top-sellers-grid { grid-template-columns: 1fr; gap: .4rem; }
    .tsc-card { padding: .5rem; flex-direction: row; align-items: center; gap: .5rem; min-height: auto; }
    .tsc-card .tsc-img { width: 44px; height: 60px; max-width: none; margin: 0; flex-shrink: 0; }
    .tsc-body { min-width: 0; flex: 1; gap: .1rem; }
    .tsc-body .tsc-name { font-size: .78rem; }
    .tsc-body .tsc-set { display: none; }
    .tsc-body .tsc-price-row { margin-top: 0; }
    .tsc-body .tsc-stats-col { display: none; }
    .tsc-body .tsc-footer { margin-top: .15rem; flex-wrap: wrap; gap: .25rem; }
    .tsc-footer .sparkline { display: none; }
    /* Info icon on mobile — always visible, uniform 28×28 */
    .tsc-card .card-info-btn,
    .pulse-card .card-info-btn,
    .tmover-card .card-info-btn,
    .mover-item .card-info-btn {
        opacity: 1 !important;
        background: rgba(255,255,255,.06);
        border-color: var(--border);
        color: var(--text-sec);
        flex-shrink: 0;
    }
    .tsc-card .card-info-btn {
        position: absolute;
        top: .5rem;
        right: .5rem;
        margin-left: 0;
        z-index: 2;
    }
    /* Movers: stack chart col */
    .mover-item { grid-template-columns: 44px 1fr auto auto; }
    .mover-chart-col { display: none; }
    /* Rarity matrix: fit viewport width on mobile */
    #dash-rarity-matrix { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .rarity-matrix { font-size: .7rem; width: 100%; min-width: 0; }
    .rm-header-row,
    .rm-row {
        grid-template-columns: 72px repeat(var(--rm-cols, 1), minmax(0, 1fr));
    }
    .rm-rarity-name { display: none; }
    .rm-row-label { justify-content: center; }
    .rm-sym { flex-shrink: 0; }
    .rm-row-label-head { text-align: center; }
    /* Drawer: full width on mobile */
    .drawer-panel { width: 100vw; max-width: 100vw; padding-right: env(safe-area-inset-right); }
    .drawer-close { min-width: 44px; min-height: 44px; padding: .5rem; }
    /* Card modal: scrollable on mobile so all content (effect, flavor, etc.) is readable */
    .modal-overlay { padding: .35rem; padding-left: max(.35rem, env(safe-area-inset-left)); padding-right: max(.35rem, env(safe-area-inset-right)); }
    .modal-container { max-width: calc(100vw - .7rem); max-height: 100dvh; }
    .md-modal { border-radius: 10px; max-height: calc(100dvh - .7rem); display: flex; flex-direction: column; overflow: hidden; }
    .md-header {
        padding: .5rem .75rem;
        min-height: 52px;
        flex-shrink: 0;
    }
    .md-header .md-logo { height: 32px; }
    .md-header .md-brand-text { font-size: .8rem; font-weight: 600; }
    .md-close { width: 40px; height: 40px; font-size: 1.1rem; min-width: 40px; min-height: 40px; }
    .md-body-scroll {
        padding: .35rem .6rem .5rem;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    .md-body-scroll .info-tip-wrap { display: none; }
    /* Top: image left | info right — saves vertical space */
    .md-top {
        grid-template-columns: 100px 1fr;
        gap: .6rem;
        align-items: center;
        flex-shrink: 0;
    }
    .md-img-col {
        justify-content: center;
        max-width: 100px;
        margin: 0;
    }
    .md-card-img { border-radius: 6px; }
    .md-info-col { min-width: 0; overflow-wrap: break-word; }
    .md-card-name { font-size: .82rem; line-height: 1.2; margin-bottom: .1rem; word-break: break-word; }
    .md-subtitle { font-size: .6rem; margin-bottom: .15rem; }
    .md-chips { gap: .1rem; margin-bottom: .15rem; }
    .md-domain-chip, .md-tag-chip { font-size: .55rem; }
    .md-hero-price { gap: .25rem; margin-bottom: .1rem; flex-wrap: wrap; }
    .md-price { font-size: 1rem; }
    .md-hero-change { font-size: .65rem; padding: .1rem .35rem; }
    .md-condition { font-size: .55rem; margin-bottom: .15rem; }
    .md-stats { gap: .15rem; margin-bottom: .2rem; }
    .md-stat { font-size: .52rem; padding: .08rem .25rem; }
    .md-effect {
        padding: .35rem .5rem;
        font-size: .7rem;
        line-height: 1.45;
        margin-bottom: .2rem;
        min-width: 0;
        word-break: break-word;
    }
    .md-effect strong { font-size: .72rem; }
    .md-effect p { font-size: .7rem; margin: 0; white-space: pre-line; word-break: break-word; }
    .md-flavor { font-size: .6rem; line-height: 1.4; margin-bottom: .2rem; word-break: break-word; }
    .md-bottom-row { gap: .35rem; margin-top: .35rem; flex-shrink: 0; }
    .md-chart-section { padding: .25rem .4rem; }
    .md-chart-wrap { min-height: 70px; }
    .md-tabs { margin-bottom: .2rem; }
    .md-tab { font-size: .52rem; padding: .1rem .28rem; }
    .md-data-grid {
        grid-template-columns: 1fr 1fr;
        gap: .25rem;
        min-width: 0;
    }
    .md-data-col { padding: .25rem .4rem; min-width: 0; overflow-wrap: break-word; }
    .md-data-heading { font-size: .55rem; margin-bottom: .15rem; }
    .md-data-row { font-size: .55rem; padding: .05rem 0; }
    .md-data-label { font-size: .55rem; }
    .md-buy-btn { padding: .45rem .6rem; font-size: .78rem; margin-top: .35rem; min-height: 40px; flex-shrink: 0; }
    .drawer-card-row { grid-template-columns: 44px 1fr auto auto; }
    .dcr-rank { display: none; }
    /* Set drawer: stack browse-by columns */
    .set-drawer-browse-by { grid-template-columns: 1fr; }
    .set-drawer-stats-grid { grid-template-columns: repeat(2, 1fr); }
    /* Set card: stack action buttons */
    .set-card-actions { flex-direction: column; }
    /* Section heading: wrap better */
    .section-heading-bar { gap: .4rem; }
    .section-count { margin-left: 0; font-size: .7rem; }
    /* Back to top: 44px touch target, above bottom nav */
    .back-to-top {
        width: 44px; height: 44px; font-size: .9rem;
        bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 0.5rem);
        right: 1rem;
    }
    /* Momentum: scaled for mobile — touch targets, readable labels */
    .mom-bar-row {
        grid-template-columns: minmax(95px, 1fr) 28px 28px 38px 24px;
        gap: .4rem .35rem;
        font-size: .75rem;
        min-height: 44px;
        padding: .5rem .5rem;
    }
    .mom-label {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: .73rem;
    }
    .mom-label i { flex-shrink: 0; }
    .mom-count, .mom-pct { font-size: .7rem; }
    .mom-avg-val { font-size: .65rem; }
    .mom-drill-arrow { font-size: .55rem; }
    .mom-stacked-bar { height: 32px; margin-bottom: .85rem; }
    .mom-stacked-pct { font-size: .65rem; }
    .mom-hint, .mom-top-names { padding-left: .5rem; }
    #dash-momentum .section-explainer { font-size: .78rem; line-height: 1.4; margin-bottom: .75rem; }
    .mom-methodology { padding: .5rem .6rem; font-size: .72rem; }
    /* Section nav: larger touch targets */
    .dsn-link { padding: .5rem .75rem; min-height: 44px; font-size: .8rem; }
    /* Scroll margin: filters not sticky on mobile, so less offset */
    #dash-summary, #dash-pulse-section, #dash-tier-sections, #dash-movers,
    #dash-top-sellers, #dash-momentum, #dash-rarity-matrix {
        scroll-margin-top: calc(var(--topbar-h) + 1rem);
    }
    /* Breadcrumb: truncate on mobile */
    .breadcrumb { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .breadcrumb .sep { margin: 0 .25rem; }
    /* Summary cards: tighter on mobile */
    .summary-card { padding: .85rem 1rem; }
    .summary-card .sc-body { overflow-wrap: break-word; }
    .summary-card:has(.info-tip-wrap) .sc-body { gap: .35rem; }
    .sc-value { font-size: 1.3rem; }
    /* Show more button: touch target */
    .show-more-btn { min-height: 44px; padding: .5rem 1rem; }
}

/* ─── Responsive — 400px (very narrow phones) ─────────────── */
@media (max-width: 400px) {
    .summary-cards-grid {
        grid-template-columns: 1fr;
        gap: .5rem;
    }
    .market-heat-card { grid-column: auto; }
}

/* ─── Responsive — 480px (small phones) ───────────────────── */
@media (max-width: 480px) {
    .view-panel { padding: .75rem; }
    .dash-filters-collapsible { margin: 0 -.75rem 1rem; }
    .dash-filters-collapsible summary { padding: .5rem .75rem; font-size: .85rem; }
    .dash-sticky-filters { padding: .4rem .75rem; }
    .section-heading { font-size: 1rem; }
    .breadcrumb { font-size: .75rem; }
    .seo-intro summary { padding: .5rem .75rem; font-size: .85rem; }
    .currency-picker select { padding: .35rem .4rem; font-size: .8rem; }
}

/* ── Momentum Widget ──────────────────────────────────────────── */
.mom-stacked-bar {
    display: flex;
    width: 100%;
    height: 28px;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
}
.mom-stacked-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter .15s, transform .15s;
    cursor: pointer;
    min-width: 24px;
    flex-shrink: 0;
}
.mom-stacked-segment:hover {
    filter: brightness(1.15);
}
.mom-stacked-segment:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; z-index: 1; }
.mom-stacked-pct {
    font-size: .68rem;
    font-weight: 800;
    color: rgba(0,0,0,.85);
    text-shadow: 0 1px 0 rgba(255,255,255,.4);
    white-space: nowrap;
}
.mom-seg-strong-downward .mom-stacked-pct,
.mom-seg-moderate-downward .mom-stacked-pct {
    color: rgba(255,255,255,.95);
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.mom-bars { display: flex; flex-direction: column; gap: .35rem; }
.mom-bar-row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 44px 44px 58px 20px;
    grid-template-rows: auto auto auto;
    align-items: center;
    gap: .25rem .6rem;
    font-size: .82rem;
}
.mom-avg-val { font-size: .72rem; color: var(--text-sec); text-align: right; }
.mom-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
    color: var(--text);
}
.mom-count { text-align: right; font-weight: 700; color: var(--text); }
.mom-pct { text-align: right; color: var(--muted); font-size: .75rem; }
.mom-clickable {
    cursor: pointer;
    border-radius: var(--radius);
    padding: .4rem .6rem;
    margin: 0 -.5rem;
    transition: background .15s;
    border: 1px solid transparent;
}
.mom-clickable:hover {
    background: rgba(255,255,255,.03);
    border-color: var(--border);
}
.mom-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mom-hint {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: .7rem;
    color: var(--muted);
    font-style: italic;
    line-height: 1.3;
    padding-left: 1.25rem;
}
.mom-top-names {
    grid-column: 1 / -1;
    grid-row: 3;
    font-size: .68rem;
    color: var(--text-sec);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 1.25rem;
}
.mom-drill-arrow {
    grid-column: 5;
    grid-row: 1;
    justify-self: end;
    color: var(--muted);
    font-size: .6rem;
    opacity: .3;
    transition: opacity .12s;
}
.mom-clickable:hover .mom-drill-arrow { opacity: 1; }

.mom-methodology {
    margin-top: .75rem;
    background: rgba(255,255,255,.02);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .5rem .75rem;
    font-size: .78rem;
    color: var(--text-sec);
}
.mom-methodology summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: .4rem;
}
.mom-methodology summary:hover { color: var(--text); }
.mom-methodology p { margin: .5rem 0; line-height: 1.5; }
.mom-threshold-table { font-size: .75rem; margin-top: .4rem; }
.mom-threshold-table td:first-child { white-space: nowrap; font-weight: 600; }

/* ── Sparklines ───────────────────────────────────────────────── */
.sparkline { display: inline-block; vertical-align: middle; margin-left: .35rem; flex-shrink: 0; }
.ci-spark-row {
    margin-top: .35rem;
    min-height: 22px;
    display: flex;
    align-items: center;
}
.ci-spark-row .sparkline { margin: 0; width: 70px; height: 22px; }
.tmover-card .sparkline { margin: 0; display: inline-block; }
.mover-chart-col .sparkline { margin: 0; }

/* ── Momentum Badges ──────────────────────────────────────────── */
.badge-momentum {
    display: inline-flex;
    align-items: center;
    border-radius: 3px;
    padding: 0 4px;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1.6;
}
.badge-mom-strong-upward    { background: rgba(34,197,94,.12); color: var(--gain); }
.badge-mom-moderate-upward  { background: rgba(74,222,128,.1); color: #4ade80; }
.badge-mom-stable           { background: rgba(148,163,184,.1); color: var(--muted); }
.badge-mom-moderate-downward{ background: rgba(251,146,60,.1); color: #fb923c; }
.badge-mom-strong-downward  { background: rgba(239,68,68,.1); color: var(--loss); }
.badge-mom-unknown          { background: rgba(148,163,184,.06); color: var(--muted); }

.badge-volatile-sm {
    background: rgba(250,204,21,.1);
    color: #fbbf24;
}

/* (Old modal price-spread, domain-tag, effect-text CSS removed — replaced by md-* classes above) */

/* ── Drawer: Volatility / Momentum signals ────────────────────── */
.dcr-volatile {
    color: #ef4444;
    font-size: .65rem;
}
.dcr-mom {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--muted);
    background: var(--surface);
    padding: 0 3px;
    border-radius: 2px;
}
.drawer-hint {
    font-size: .82rem;
    color: var(--text-sec);
    padding: .5rem .75rem;
    font-style: italic;
    border-left: 3px solid var(--accent);
    background: rgba(0,179,55,.06);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-bottom: .75rem;
    line-height: 1.5;
}