/* ===== PIXEL FOXES -- DARK SLEEK REDESIGN ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --accent: #EAB300;
    --accent-dim: rgba(234, 179, 0, 0.1);
    --accent-glow: rgba(234, 179, 0, 0.25);
    --bg-primary: #050505;
    --bg-card: #0a0a0a;
    --bg-elevated: #0e0e0e;
    --bg-input: #080808;
    --text-main: #e8e8e8;
    --text-dim: rgba(232, 232, 232, 0.5);
    --text-muted: rgba(232, 232, 232, 0.3);
    --border: rgba(234, 179, 0, 0.12);
    --border-hover: rgba(234, 179, 0, 0.35);
    --radius: 10px;
    --radius-sm: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.5);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.6);
    --shadow-glow: 0 0 20px rgba(234, 179, 0, 0.08);
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Legacy compat -- JS references these old variable names */
    --fox-orange: #EAB300;
    --fox-yellow: #0e0e0e;
    --fox-bg: #050505;
    --fox-dark: rgba(234, 179, 0, 0.12);
    --fox-white: #e8e8e8;
    --card-bg: #0a0a0a;
    --text-primary: #e8e8e8;
    --text-secondary: rgba(232, 232, 232, 0.5);
    --border-color: rgba(234, 179, 0, 0.12);
    --input-bg: #080808;
    --modal-bg: #0e0e0e;
    --filter-bg: #0a0a0a;
    --header-bg: #050505;
    --stat-bg: #0a0a0a;
}

/* Dark theme is now the ONLY theme -- neutralize all [data-theme="dark"] overrides
   so they don't conflict with the new root styles. */
[data-theme="dark"] body { color: var(--text-main); }
[data-theme="dark"] .hamburger span { background: var(--accent); }
[data-theme="dark"] header,
[data-theme="dark"] .wallet-info,
[data-theme="dark"] .floor-price-section,
[data-theme="dark"] .chart-container,
[data-theme="dark"] .filters,
[data-theme="dark"] .nav-menu,
[data-theme="dark"] .overlay.open,
[data-theme="dark"] .dust-warning { /* inherit root */ }
[data-theme="dark"] .stat-box { background: var(--bg-elevated); border: none; color: var(--text-main); }
[data-theme="dark"] .stat-box .stat-value { color: #e8e8e8; text-shadow: none; }
[data-theme="dark"] .stat-box .stat-label { color: var(--accent); }
[data-theme="dark"] .marketplace-tabs .tab-btn { background: transparent; color: var(--text-muted); border-color: var(--border); }
[data-theme="dark"] .marketplace-tabs .tab-btn.active { background: var(--accent); color: #000; border-color: var(--accent); }
[data-theme="dark"] .filter-label { color: #EAB300; }
[data-theme="dark"] select, [data-theme="dark"] input[type="number"] { background: var(--bg-input); color: var(--text-main); border-color: var(--accent); }
[data-theme="dark"] .nft-card { background: var(--bg-card); border: none; }
[data-theme="dark"] .nft-card:hover { border: none; }
[data-theme="dark"] .nft-image { background: var(--bg-elevated); }
[data-theme="dark"] .nft-id { color: var(--text-dim); }
[data-theme="dark"] .nft-info .nft-id { color: var(--text-dim); }
[data-theme="dark"] .page-btn { background: transparent; color: var(--text-muted); border-color: var(--border); }
[data-theme="dark"] .page-btn:hover { background: transparent; color: var(--accent); }
[data-theme="dark"] .modal-content { background: #050505; border: none; }
[data-theme="dark"] .modal-text { color: var(--text-main); }
[data-theme="dark"] .modal-title { color: var(--accent); }
[data-theme="dark"] .modal-text input { background: var(--bg-input); color: var(--text-main); border-color: var(--border); }
[data-theme="dark"] .nav-menu { background: #050505; border-color: var(--border); }
[data-theme="dark"] .nav-menu a { color: var(--text-dim); border-color: var(--border); }
[data-theme="dark"] .nav-menu a:hover { color: var(--accent); }
[data-theme="dark"] .timeframe-btn { background: transparent; color: var(--text-muted); border-color: var(--border); }
[data-theme="dark"] .timeframe-btn:hover, [data-theme="dark"] .timeframe-btn.active { background: var(--accent); color: #000; }
[data-theme="dark"] #ownedCountBar { background: var(--bg-card) !important; }
[data-theme="dark"] #loadingIndicator, [data-theme="dark"] #noListings { color: var(--text-muted); }
[data-theme="dark"] .chart-title { color: var(--text-dim); }
[data-theme="dark"] .btn { border-color: var(--accent); background: transparent; color: #ffffff; }
[data-theme="dark"] .btn:hover { background: var(--accent); color: #000; }
[data-theme="dark"] .nft-price-line { color: var(--accent); }
[data-theme="dark"] .view-card-btn { background: #050505; color: #ffffff; border-color: var(--accent); }
[data-theme="dark"] .view-card-btn:hover { color: var(--accent); border-color: var(--accent); }
[data-theme="dark"] .action-card-btn { background: transparent; color: var(--accent); border-color: var(--accent); }
[data-theme="dark"] .action-card-btn:hover { background: var(--accent); color: #000; }
[data-theme="dark"] .action-card-btn.delist { background: transparent; color: var(--accent); }
[data-theme="dark"] .action-card-btn.delist:hover { background: var(--accent); color: #000; }
[data-theme="dark"] #ownedCountBar span { color: var(--text-dim) !important; }
[data-theme="dark"] #ownedCount, [data-theme="dark"] #ownedValue { color: var(--accent) !important; }
[data-theme="dark"] .toggle-switch { border: 2px solid var(--accent); background: var(--bg-elevated); }
[data-theme="dark"] .toggle-switch .toggle-knob { background: transparent; border: 2px solid var(--accent); box-shadow: none; }
[data-theme="dark"] .toggle-switch .toggle-label { color: #ffffff; text-shadow: none; }
[data-theme="dark"] .wallet-dropdown { background: #050505; border: none; }
[data-theme="dark"] .dd-header { background: var(--accent-dim); color: var(--text-dim); border-color: var(--border); }
[data-theme="dark"] .dd-item { color: var(--text-dim); border-color: var(--border); }
[data-theme="dark"] .dd-item:hover { background: var(--accent-dim); color: var(--accent); }
[data-theme="dark"] .bsv-price-header { background: var(--bg-elevated); border: 2px solid var(--accent); }
[data-theme="dark"] .bsv-price-value { color: #ffffff; }
[data-theme="dark"] .bsv-price-label { color: var(--accent); }
[data-theme="dark"] .activity-bar { background: var(--bg-elevated); border: none; }
[data-theme="dark"] .activity-bar-item .ab-img { border-color: var(--border); }
[data-theme="dark"] .activity-bar-item .ab-type.sale { background: rgba(76,175,80,0.12); color: #66BB6A; }
[data-theme="dark"] .activity-bar-item .ab-type.listing { background: rgba(66,165,245,0.12); color: #42A5F5; }
[data-theme="dark"] .activity-bar-item .ab-type.delist { background: rgba(239,83,80,0.12); color: #EF5350; }
[data-theme="dark"] .activity-item { border-bottom-color: var(--border); }

/* ===== BASE ===== */
body {
    font-family: 'Poppins', sans-serif;
    background: var(--bg-primary);
    color: var(--text-main);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
.container { max-width: 1400px; margin: 0 auto; padding: 20px; position: relative; z-index: 2; }

/* ===== TOP BANNER NAV ===== */
.top-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    padding: 18px 28px;
    position: relative;
    z-index: 900;
    box-shadow: 0 2px 16px rgba(0,0,0,0.4);
}
.top-banner .hamburger {
    display: flex !important;
    position: relative;
    top: auto;
    left: auto;
    width: 28px;
    height: 20px;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    flex-shrink: 0;
    z-index: 1001;
}
.top-banner .hamburger span {
    display: block;
    height: 2px;
    background: #000;
    border-radius: 2px;
    transition: all 0.3s;
}
.top-banner .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.top-banner .hamburger.open span:nth-child(2) { opacity: 0; }
.top-banner .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }
.top-banner-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
}
.top-banner-logo img {
    height: 32px;
    width: auto;
    image-rendering: pixelated;
}
.top-banner-links {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: auto;
}
.top-banner-links a {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #000;
    text-decoration: none;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.6;
    transition: opacity 0.2s;
}
.top-banner-links a:hover { opacity: 1; }
.top-banner-x {
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    opacity: 0.7 !important;
}
.top-banner-x:hover { opacity: 1 !important; }
.top-banner-bsv { display: flex; align-items: center; gap: 6px; font-family: 'Poppins', sans-serif; font-weight: 600; opacity: 0.7; }

/* ===== NAV MENU (slide-out) ===== */
.nav-menu { position: fixed; top: 0; left: -320px; width: 300px; height: 100vh; background: #050505; border-right: 1px solid var(--border); z-index: 1000; transition: left 0.3s; padding: 90px 30px 30px; box-shadow: var(--shadow-lg); }
.nav-menu.open { left: 0; }
.nav-menu a { display: block; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: var(--text-dim); text-decoration: none; padding: 20px 0; border-bottom: 1px solid var(--border); letter-spacing: 1px; transition: color var(--transition); }
.nav-menu a:hover { color: var(--accent); }
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); z-index: 999; display: none; }
.overlay.open { display: block; }

/* ===== HEADER ===== */
header { background: transparent; border: none; border-radius: var(--radius-lg); padding: 16px 24px; margin-bottom: 24px; box-shadow: none; }
.header-top { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 15px; }
.header-left-group { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo { display: flex; align-items: center; gap: 15px; }
.logo img { height: 55px; width: auto; max-width: 100%; image-rendering: pixelated; }
.header-right-group { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: auto; }
.wallet-section { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.wallet-info { background: var(--bg-input); padding: 10px 14px; border: 2px solid var(--accent); border-radius: var(--radius-sm); font-size: 14px; display: none; color: #ffffff; font-family: 'Poppins', sans-serif; white-space: nowrap; width: 220px; overflow: hidden; text-overflow: ellipsis; text-align: center; box-shadow: none; }
.wallet-info.connected { display: block; }
.header-toggles { display: flex; gap: 8px; align-items: center; }

/* ===== TOGGLES ===== */
.toggle-switch { position: relative; width: 56px; height: 32px; border: 2px solid var(--accent); background: var(--bg-elevated); cursor: pointer; padding: 0; display: inline-flex; align-items: center; flex-shrink: 0; border-radius: 16px; transition: all var(--transition); box-shadow: none; }
.toggle-switch:hover { border-color: var(--border-hover); }
.toggle-switch .toggle-knob { position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; background: transparent; border: 2px solid var(--accent); border-radius: 50%; transition: left 0.2s; box-shadow: none; }
.toggle-switch.active .toggle-knob { left: calc(100% - 24px); }
.toggle-switch .toggle-label { font-family: 'Poppins', sans-serif; font-size: 10px; color: #ffffff; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); pointer-events: none; line-height: 1; text-shadow: none; font-weight: 700; }
.toggle-switch.active .toggle-label { left: 6px; right: auto; }
.toggle-btc-icon { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 700; color: #ffffff; pointer-events: none; opacity: 0.8; line-height: 1; }
.toggle-switch.active .toggle-btc-icon { left: 8px; right: auto; }

/* ===== WALLET DROPDOWN ===== */
.wallet-dropdown { position: absolute; top: 100%; right: 0; margin-top: 8px; background: #050505; border: none; border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 100; min-width: 200px; overflow: hidden; }
.dd-header { padding: 12px 18px; font-family: 'Poppins', sans-serif; font-size: 9px; border-bottom: 1px solid var(--border); text-align: center; color: var(--text-dim); background: var(--accent-dim); }
.dd-item { padding: 12px 16px; cursor: pointer; font-family: 'Poppins', sans-serif; font-size: 9px; color: var(--text-dim); border-bottom: 1px solid var(--border); transition: all var(--transition); }
.dd-item:last-child { border-bottom: none; }
.dd-item:hover { background: var(--accent-dim); color: var(--accent); }

/* ===== BUTTONS ===== */
.btn { font-family: 'Poppins', sans-serif; font-size: 10px; padding: 12px 22px; border: 2px solid var(--accent); background: transparent; color: #ffffff; cursor: pointer; border-radius: var(--radius-sm); transition: all var(--transition); text-transform: uppercase; white-space: nowrap; letter-spacing: 0.5px; box-shadow: none; }
.btn:hover { background: var(--accent); color: #000; box-shadow: 0 0 20px rgba(234, 179, 0, 0.2); transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:disabled { opacity: 0.3; cursor: not-allowed; }
.btn:disabled:hover { background: transparent; color: #ffffff; transform: none; box-shadow: none; }

/* ===== BSV PRICE ===== */
.bsv-price-header { display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 36px; border: 2px solid var(--accent); background: var(--bg-elevated); font-family: 'Poppins', sans-serif; white-space: nowrap; border-radius: var(--radius-sm); box-shadow: none; }
.bsv-price-label { font-family: 'Poppins', sans-serif; font-size: 7px; color: var(--accent); opacity: 0.8; }
.bsv-price-value { font-size: 14px; font-weight: 600; color: #ffffff; }

/* ===== STATS ===== */
.floor-price-section { background: var(--bg-card); border: none; border-radius: var(--radius-lg); padding: 28px; margin-bottom: 24px; box-shadow: var(--shadow-sm); }
.floor-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 28px; }
.stat-box { background: var(--bg-elevated); border: none; border-radius: var(--radius); padding: 20px; text-align: center; transition: all var(--transition); color: var(--text-main); box-shadow: none; }
.stat-box:hover { box-shadow: var(--shadow-glow); }
.stat-label { font-family: 'Poppins', sans-serif; font-size: 10px; margin-bottom: 10px; color: var(--accent); letter-spacing: 1px; opacity: 1; font-weight: 700; }
.stat-value { font-family: 'Poppins', sans-serif; font-size: 20px; color: #e8e8e8; text-shadow: none; white-space: nowrap; font-weight: 600; }

/* ===== CHART ===== */
.chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
.chart-title { font-family: 'Poppins', sans-serif; font-size: 12px; color: var(--text-dim); letter-spacing: 1px; }
.chart-timeframe { display: flex; gap: 6px; }
.timeframe-btn { font-family: 'Poppins', sans-serif; font-size: 8px; padding: 8px 16px; border: 2px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; border-radius: 999px; transition: all var(--transition); box-shadow: none; }
.timeframe-btn:hover { border-color: var(--border-hover); color: var(--text-main); background: transparent; }
.timeframe-btn.active { background: var(--accent); color: #000; border-color: var(--accent); box-shadow: 0 0 12px rgba(234, 179, 0, 0.15); transform: none; }
.chart-container { background: var(--bg-input); padding: 20px; border: none; border-radius: var(--radius-lg); height: 350px; box-shadow: none; }

/* ===== ACTIVITY BAR ===== */
.activity-bar { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 16px; border: none; border-radius: var(--radius); background: var(--bg-elevated); overflow: hidden; }
.activity-bar-items { flex: 1; display: flex; gap: 12px; overflow: hidden; white-space: nowrap; font-family: 'Poppins', sans-serif; font-size: 16px; }
.activity-bar-item { display: inline-flex; gap: 5px; align-items: center; flex-shrink: 0; }
.activity-bar-item .ab-img { width: 32px; height: 32px; image-rendering: pixelated; border: 1px solid var(--border); border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.activity-bar-item .ab-type { font-family: 'Poppins', sans-serif; font-size: 7px; padding: 3px 6px; border-radius: 4px; border: none; }
.activity-bar-item .ab-type.sale { background: rgba(76,175,80,0.15); color: #66BB6A; }
.activity-bar-item .ab-type.listing { background: rgba(66,165,245,0.15); color: #42A5F5; }
.activity-bar-item .ab-type.delist { background: rgba(239,83,80,0.15); color: #EF5350; }
.activity-bar-item .ab-price { color: var(--accent); font-family: 'Poppins', sans-serif; font-size: 8px; }
.activity-bar-item .ab-time { opacity: 0.35; font-size: 14px; }
.activity-bar-empty { opacity: 0.35; font-size: 14px; }
.activity-bar-btn { font-size: 7px !important; padding: 8px 12px !important; white-space: nowrap; flex-shrink: 0; }

/* ===== SWEEP / LIST ===== */
.floor-sweep { background: var(--bg-card); border: none; border-radius: var(--radius); padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow-sm); }
.floor-sweep-title { font-family: 'Poppins', sans-serif; font-size: 13px; color: var(--text-dim); margin-bottom: 20px; text-align: center; letter-spacing: 1px; }
.slider-container { display: flex; flex-direction: column; gap: 16px; max-width: 800px; margin: 0 auto; }
.slider-input-group { display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; }
.slider-wrapper { flex: 1; min-width: 200px; }
input[type="range"] { width: 100%; height: 4px; background: var(--bg-elevated); border: none; outline: none; -webkit-appearance: none; border-radius: 2px; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; background: var(--accent); border: none; border-radius: 50%; cursor: pointer; box-shadow: 0 0 10px rgba(234,179,0,0.3); }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; background: var(--accent); border: none; border-radius: 50%; cursor: pointer; }
.quantity-input { display: flex; gap: 10px; align-items: center; }
.quantity-input input { font-family: 'Poppins', sans-serif; font-size: 22px; padding: 10px; border: 2px solid var(--accent); background: var(--bg-input); color: var(--text-main); width: 100px; text-align: center; border-radius: var(--radius-sm); }
.quantity-input label { font-family: 'Poppins', sans-serif; font-size: 10px; color: var(--text-muted); }
.sweep-info { display: flex; justify-content: space-around; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.sweep-stat { text-align: center; }
.sweep-stat-label { font-size: 14px; color: var(--text-muted); margin-bottom: 8px; }
.sweep-stat-value { font-family: 'Poppins', sans-serif; font-size: 14px; color: var(--accent); }
.sweep-button { text-align: center; margin-top: 20px; }
.sweep-button .btn { font-size: 12px; padding: 16px 36px; }

/* ===== FEE NOTICE ===== */
.fee-notice { background: var(--accent-dim); border: none; border-radius: var(--radius); padding: 14px; text-align: center; margin-bottom: 16px; font-family: 'Poppins', sans-serif; font-size: 9px; color: var(--accent); line-height: 1.8; }
.fee-highlight { color: #EF5350 !important; }
.net-highlight { color: #66BB6A !important; }

/* ===== TABS ===== */
.marketplace-tabs { display: flex; gap: 8px; margin-bottom: 24px; justify-content: center; }
.tab-btn { font-family: 'Poppins', sans-serif; font-size: 11px; padding: 16px 40px; border: 2px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; border-radius: var(--radius); transition: all var(--transition); min-width: 160px; text-align: center; box-shadow: none; letter-spacing: 1px; }
.tab-btn:hover { border-color: var(--border-hover); color: var(--text-main); transform: none; box-shadow: none; }
.tab-btn.active { background: var(--accent); color: #000; border-color: var(--accent); box-shadow: 0 0 20px rgba(234,179,0,0.15); transform: none; }

/* ===== BULK ACTIONS ===== */
.bulk-actions { background: var(--bg-card); border: none; border-radius: var(--radius); padding: 20px 24px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; box-shadow: var(--shadow-sm); }
.bulk-info { font-size: 18px; color: var(--text-dim); }
.bulk-info span { font-family: 'Poppins', sans-serif; color: var(--accent); margin: 0 8px; }
.bulk-buttons { display: flex; gap: 10px; flex-wrap: wrap; }

/* ===== FILTERS ===== */
.filters { background: transparent; border: none; border-radius: var(--radius); padding: 16px 0; margin-bottom: 20px; display: flex; gap: 10px; flex-wrap: nowrap; box-shadow: none; }
.filter-group { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.filter-label { font-family: 'Poppins', sans-serif; font-size: 10px; color: #EAB300; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.5px; font-weight: 600; }
select, input[type="number"] { font-family: 'Poppins', sans-serif; font-size: 16px; padding: 8px 10px; border: 2px solid var(--accent); background: var(--bg-input); color: var(--text-main); width: 100%; border-radius: var(--radius-sm); outline: none; transition: border-color var(--transition); }
select:focus, input[type="number"]:focus { border-color: var(--accent); }
select option { background: var(--bg-card); color: var(--text-main); }

/* ===== NFT GRID ===== */
/* GRID DENSITY -- 10 across
   The old 175px minimum gave 6 columns. .container is capped at 1400px with
   20px padding, so the grid is at most 1360px wide; ten tiles plus nine 10px
   gaps needs (1360 - 90) / 10 = 127px each. A 120px minimum lands on exactly
   10 at full width.
   auto-fill rather than repeat(10, 1fr) on purpose: on a laptop or a split
   window a hard ten would force unreadable slivers, whereas auto-fill steps
   down to 9, 8, 7 as the window narrows and the tiles keep their size. */
.market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.nft-card { background: var(--bg-card); border: none; border-radius: 10px; overflow: hidden; cursor: pointer; transition: all 0.25s; position: relative; box-shadow: none; }
.nft-card:hover { border-color: var(--accent); box-shadow: 0 4px 24px rgba(234,179,0,0.1); transform: translateY(-4px); }
.nft-card.selected { outline: 4px solid var(--accent); outline-offset: -4px; box-shadow: 0 0 20px rgba(234,179,0,0.25); }
.nft-card.sweep-highlight { outline: 3px solid var(--accent); outline-offset: -3px; box-shadow: 0 0 16px rgba(234,179,0,0.2); }
.nft-card.selected::before { display: none; }

.nft-image { width: 100%; background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.nft-image img { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.no-img { font-size: 80px; opacity: 0.15; }
/* Scaled for the 10-across grid. At ~127px wide, 14px of padding left only
   99px of content and "PIXEL FOXES 9999875" wrapped to two lines -- which made
   rows different heights and the grid look ragged. Tighter padding, smaller
   type, and nowrap keeps every card the same height. */
.nft-info { padding: 8px 8px 10px; }
.nft-id { font-family: 'Poppins', sans-serif; font-size: 8px; margin-bottom: 2px; color: var(--text-dim); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; }
.nft-id-link { cursor: pointer; transition: color var(--transition); }
.nft-id-link:hover { color: var(--accent); }

/* Card buttons */
.card-buttons { display: flex; gap: 0; margin-top: 10px; }
.action-card-btn { font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 600; padding: 10px 14px; border: 2px solid var(--accent); background: transparent; color: var(--accent); cursor: pointer; transition: all var(--transition); flex: 1; text-align: center; border-radius: var(--radius-sm); }
.action-card-btn:hover { background: var(--accent); color: #000; }
.action-card-btn.delist { background: transparent; color: var(--accent); }
.action-card-btn.delist:hover { background: var(--accent); color: #000; }
.view-card-btn { font-family: 'Poppins', sans-serif; font-size: 8px; font-weight: 600; padding: 10px 14px; border: 2px solid var(--accent); background: #050505; color: #ffffff; cursor: pointer; transition: all var(--transition); flex: 1; text-align: center; margin-left: -2px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.view-card-btn:hover { border-color: var(--accent); color: var(--accent); }

.nft-price-line { font-family: 'Poppins', sans-serif; font-size: 12px; color: var(--accent); margin-top: 2px; opacity: 0.9; min-height: 16px; white-space: nowrap; }
.listed-tag { position: absolute; top: 5px; left: 5px; background: var(--accent); color: #000; font-family: 'Poppins', sans-serif; font-size: 6px; padding: 3px 5px; border-radius: 3px; z-index: 10; border: none; }
/* Source badge -- top RIGHT so it never collides with .listed-tag, which a fox
   can carry at the same time. Colour-coded by whether we can sign for it:
   yellow/blue = spendable, red = we hold no key and a transfer will refuse. */
.src-tag { position: absolute; top: 5px; right: 5px; font-family: 'Poppins', sans-serif; font-size: 6px; letter-spacing: 0; padding: 3px 4px; border-radius: 4px; z-index: 10; font-weight: 600; pointer-events: none; }
.src-tag.src-pay { background: rgba(234,179,0,0.18); color: #EAB300; border: 1px solid rgba(234,179,0,0.35); }
.src-tag.src-ord { background: rgba(66,165,245,0.18); color: #42A5F5; border: 1px solid rgba(66,165,245,0.35); }
.src-tag.src-extra { background: rgba(102,187,106,0.18); color: #66BB6A; border: 1px solid rgba(102,187,106,0.35); }
.src-tag.src-none { background: rgba(239,83,80,0.18); color: #EF5350; border: 1px solid rgba(239,83,80,0.40); }
/* Cards we cannot sign for read as inert rather than broken. */
.nft-card.not-spendable .nft-image { opacity: 0.55; }

.page-btn { font-family: 'Poppins', sans-serif; font-size: 9px; padding: 10px 18px; border: 2px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm); box-shadow: none; transition: all var(--transition); }
.page-btn:hover { border-color: var(--accent); color: var(--accent); background: transparent; }

/* ===== DUST WARNING ===== */
.dust-warning { background: var(--accent-dim); border: none; border-radius: var(--radius); padding: 10px 14px; margin-bottom: 16px; margin-top: -8px; font-family: 'Poppins', sans-serif; font-size: 16px; color: var(--accent); text-align: center; }

/* ===== MODAL ===== */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); z-index: 1000; align-items: center; justify-content: center; padding: 20px; }
.modal.active { display: flex; }
.modal-content { background: #050505; border: none; border-radius: var(--radius-lg); padding: 36px; max-width: 520px; width: 95%; box-shadow: 0 0 60px rgba(234,179,0,0.08), var(--shadow-lg); animation: modalSlide 0.3s; }
@keyframes modalSlide { from { transform: translateY(-30px) scale(0.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.modal-title { font-family: 'Poppins', sans-serif; font-size: 14px; margin-bottom: 18px; color: var(--accent); word-wrap: break-word; letter-spacing: 1px; }
.modal-text { font-size: 18px; line-height: 1.6; margin-bottom: 28px; word-wrap: break-word; white-space: pre-line; color: var(--text-main); }
.modal-text img, .modal-text div, .modal-text input { white-space: normal; }
.modal-text input { background: var(--bg-input); color: var(--text-main); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; font-family: 'Poppins', sans-serif; font-size: 16px; }
.modal-text input:focus { border-color: var(--accent); outline: none; }
.modal-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ===== OWNED COUNT BAR ===== */
#ownedCountBar { background: var(--bg-card) !important; border: none !important; border-radius: var(--radius) !important; padding: 16px 24px !important; margin-bottom: 16px; text-align: center; box-shadow: var(--shadow-sm) !important; }
#ownedCountBar span { color: var(--text-dim) !important; }
#ownedCount, #ownedValue { color: var(--accent) !important; }

#loadingIndicator, #noListings { color: var(--text-muted); }

/* ===== ACTIVITY MODAL ===== */
.activity-list { max-height: 60vh; overflow-y: auto; }
.activity-item { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); font-family: 'Poppins', sans-serif; }
.activity-icon { font-size: 12px; min-width: 50px; text-align: center; font-family: 'Poppins', sans-serif; }
.activity-icon.sale { color: #66BB6A; }
.activity-icon.listing { color: #42A5F5; }
.activity-icon.delist { color: #EF5350; }
.activity-details { flex: 1; }
.activity-label { font-family: 'Poppins', sans-serif; font-size: 8px; margin-bottom: 4px; }
.activity-label.sale { color: #66BB6A; }
.activity-label.listing { color: #42A5F5; }
.activity-label.delist { color: #EF5350; }
.activity-price { font-family: 'Poppins', sans-serif; font-size: 10px; color: var(--accent); }
.activity-time { font-size: 14px; opacity: 0.4; min-width: 80px; text-align: right; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(234,179,0,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(234,179,0,0.3); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .top-banner { padding: 10px 16px; }
    .top-banner-logo img { height: 26px; }
    .top-banner-links { gap: 14px; }
    .top-banner-links a { font-size: 9px; }
    header { padding: 0; padding-bottom: 12px; position: relative; border-radius: var(--radius); }
    .header-top { flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0 12px; }
    .header-left-group { width: 100%; justify-content: center; flex-wrap: wrap; }
    .header-right-group { width: 100%; justify-content: center; flex-wrap: wrap; margin-left: 0; }
    .logo { justify-content: center; width: 100%; }
    .logo img { height: 40px; object-fit: contain; }
    .bsv-price-header { font-size: 14px; }
    .btn { font-size: 8px; padding: 10px 16px; }
    .bulk-actions { flex-direction: column; align-items: stretch; }
    .bulk-buttons { flex-direction: column; }
    .filters { flex-wrap: wrap; gap: 8px; padding: 14px; }
    .filter-group { flex: 1 1 calc(50% - 8px); min-width: calc(50% - 8px); }
    .market-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
    .stat-value { font-size: 13px; }
    .floor-sweep-title { font-size: 10px; }
    .chart-container { height: 260px; padding: 14px; }
    .marketplace-tabs { flex-direction: column; }
    .tab-btn { font-size: 10px; padding: 14px 20px; min-width: unset; width: 100%; }
    #ownedCountBar { padding: 12px 14px !important; }
    #ownedCountBar span { font-size: 9px !important; }
    #ownedCountBar #ownedCount, #ownedCountBar #ownedValue { font-size: 14px !important; }
    .activity-bar { gap: 8px; }
    .activity-bar-items { flex: 1; overflow: hidden; }
    .wallet-info { width: 180px; font-size: 13px; }
    .modal-content { padding: 24px; }
}

/* ===================================================================
   PROFILE AVATAR (header) + PROFILE PICKER MODAL + FOX CHAT
   =================================================================== */

/* ===== TIER RINGS =====
   Colored border around the profile fox based on how many foxes the user owns.
   Tiers: 1+ chad orange, 10+ twetch navy, 100+ black swan red, 1000+ dragon gold,
   10000+ sleepless pink.
   The ring is applied via CSS variables on the avatar wrapper so we can swap colors
   from JS without recompiling styles. We also add a subtle outer glow so the dark
   navy tier stays visible against the dark page background. */
.tier-ring {
    --tier-color: var(--accent);
    --tier-glow: rgba(234, 179, 0, 0.4);
    position: relative;
    display: inline-block;
    padding: 3px;
    background: var(--tier-color);
    background-color: transparent;   /* --tier-color is a gradient */
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 8px var(--tier-glow);
    transition: box-shadow var(--transition);
    flex-shrink: 0;
    line-height: 0; /* keep box tight to image */
}
/* ---- RARITY TIERS, by the holding wallet's fox count ----
   1+ common, 10+ uncommon, 100+ rare, 1,000+ epic, 10,000+ legendary,
   100,000+ exotic. Each is a gradient so the ring reads as a material rather
   than a flat swatch, and each carries a matching glow so the darker tiers
   stay visible against the page. */
.rarity-common    { --tier-color: linear-gradient(160deg,#a8adb4,#6b7280); --tier-glow: rgba(154,160,166,.40); }
.rarity-uncommon  { --tier-color: linear-gradient(160deg,#67c1fb,#3aa8ef); --tier-glow: rgba(90,180,246,.50); }
.rarity-rare      { --tier-color: linear-gradient(160deg,#6ef0a4,#2fcf86); --tier-glow: rgba(94,232,154,.50); }
.rarity-epic      { --tier-color: linear-gradient(160deg,#8b5cff,#4b1fe6); --tier-glow: rgba(124,77,255,.55); }
.rarity-legendary { --tier-color: linear-gradient(160deg,#ffd257,#f0a500 55%,#ffe9a3 72%,#e59400); --tier-glow: rgba(251,191,36,.55); }
/* Exotic shimmers: an oversized gradient panned by the animation, so it reads
   as iridescent rather than as one more colour. */
.rarity-exotic {
    --tier-color: linear-gradient(115deg,#c9a6ff,#8fb8ff 25%,#eaf4ff 45%,#8fe8d0 65%,#a78bfa 85%,#c9a6ff);
    --tier-glow: rgba(167,139,250,.60);
    background-size: 300% 300%;
    animation: rarity-shimmer 6s ease-in-out infinite;
}
@keyframes rarity-shimmer {
    0%,100% { background-position: 0% 50%; }
    50%     { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) { .rarity-exotic { animation: none; } }

/* No ring: below one fox, or an owner the holder index does not know. */
.rarity-none { padding: 0; background: transparent; box-shadow: none; }

/* The grid's image frame doubles as the ring. Padding creates the band; the
   gradient is the frame's own background showing through around the image. */
.nft-image[class*="rarity-"] {
    padding: 3px;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 0 10px var(--tier-glow, transparent);
}
.nft-image[class*="rarity-"] { background: var(--tier-color, transparent); }
.nft-image.rarity-none { padding: 0; background: transparent; box-shadow: none; }

/* Avatar button shown in the header when a fox is selected as profile pic */
.profile-avatar-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 4px 12px 4px 4px;
    background: var(--bg-elevated);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--transition);
    flex-shrink: 0;
}
.profile-avatar-btn:hover {
    background: var(--accent-dim);
    transform: translateY(-1px);
}
.profile-avatar-btn .tier-ring {
    padding: 2px;
}
.profile-avatar-btn img {
    /* 48px, not 32. The fox art is a 24x24 grid (each art-pixel is a 20px
       block in the 480px file). 32 / 24 = 1.33, so art-pixels landed on
       uneven numbers of screen pixels and looked mushy. 48 is a clean 2x,
       and stays whole on 1x, 1.5x and 2x screens alike. */
    width: var(--pfp, 36px);
    height: var(--pfp, 36px);
    border-radius: 50%;
    image-rendering: var(--pfp-render, pixelated);
    background: #1a1f2a;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}
.profile-avatar-name {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Profile picker grid (inside the modal) */
.profile-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 12px;
    max-height: 50vh;
    overflow-y: auto;
    padding: 4px;
    margin-top: 12px;
}
.profile-picker-cell {
    background: var(--bg-input);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px;
    cursor: pointer;
    transition: all var(--transition);
    text-align: center;
}
.profile-picker-cell:hover { border-color: var(--accent); transform: translateY(-1px); }
.profile-picker-cell.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }
.profile-picker-cell img {
    width: 100%;
    aspect-ratio: 1 / 1;
    image-rendering: pixelated;
    border-radius: 2px;
    background: #1a1f2a;
    object-fit: cover;
}
.profile-picker-cell .pp-id {
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-dim);
    margin-top: 4px;
    letter-spacing: 0.5px;
}

@media (max-width: 600px) {
    .profile-avatar-btn { height: 36px; padding: 3px 10px 3px 3px; }
    .profile-avatar-btn img { width: 30px; height: 30px; }
    .profile-avatar-name { font-size: 10px; }
    .profile-picker-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
}

/* ===== FOX CHAT PAGE ===== */
.foxchat-wrap {
    max-width: 680px;
    margin: 0 auto;
    padding: 32px 16px 80px;
}
.foxchat-header {
    text-align: center;
    margin-bottom: 28px;
}
.foxchat-title {
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 2px;
    text-transform: uppercase;
}
.foxchat-sub {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 6px;
    letter-spacing: 0.5px;
}

/* Composer */
.fc-composer {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}
.fc-composer-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.fc-composer-avatar {
    width: 44px;
    height: 44px;
    border-radius: 2px;
    background: #1a1f2a;
    image-rendering: pixelated;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}
.fc-composer-input {
    flex: 1;
    min-height: 70px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    padding: 10px 12px;
    resize: vertical;
    outline: none;
    transition: border-color var(--transition);
}
.fc-composer-input:focus { border-color: var(--accent); }
.fc-composer-input::placeholder { color: var(--text-muted); }
.fc-composer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-left: 56px;
}
.fc-charcount {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    color: var(--text-dim);
}
.fc-charcount.over { color: #EF5350; }

/* Locked state when no profile fox */
.fc-locked {
    background: var(--bg-card);
    border: 1px dashed var(--border-hover);
    border-radius: var(--radius-lg);
    padding: 28px;
    text-align: center;
    margin-bottom: 24px;
    color: var(--text-dim);
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    line-height: 1.7;
    letter-spacing: 0.3px;
}
.fc-locked .fc-locked-title {
    color: var(--accent);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* Feed */
.fc-feed { display: flex; flex-direction: column; gap: 12px; }
.fc-post {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    transition: border-color var(--transition);
    animation: fcFadeIn 0.3s ease-out;
}
@keyframes fcFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.fc-post:hover { border-color: var(--border-hover); }

/* Post layout -- flex row: avatar on the left, content (name + body) stacked
   on the right. This puts the message text right next to the avatar instead
   of below the whole head, and lets the username sit at the avatar's top edge. */
.fc-post {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.fc-post-avatar-wrap {
    flex-shrink: 0;
    /* Tier ring wrapper sits at the post's top-left, sized to the avatar. */
}
.fc-post-content {
    flex: 1;
    min-width: 0;     /* allow flex child to shrink below content width */
}
.fc-post-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.fc-post-avatar {
    width: 38px;
    height: 38px;
    border-radius: 2px;
    background: #1a1f2a;
    image-rendering: pixelated;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}
.fc-post-name {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.5px;
    line-height: 1.2;
}
.fc-post-meta {
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    color: var(--text-muted);
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.fc-post-meta a {
    color: var(--text-dim);
    text-decoration: none;
    transition: color var(--transition);
}
.fc-post-meta a:hover { color: var(--accent); }
/* Last-4-of-wallet identifier -- small monospace pill, neutral tone */
.fc-post-addr {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 0.5px;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 3px;
}
.fc-post-body {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-main);
    white-space: pre-wrap;
    word-wrap: break-word;
    /* Body sits in the content column right next to the avatar -- no left padding
       needed since the flex layout handles indentation. */
}
.fc-post-pending {
    font-size: 9px;
    color: #FF8C00;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.5px;
}
.fc-empty {
    text-align: center;
    color: var(--text-dim);
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    padding: 40px 20px;
    letter-spacing: 0.5px;
}

@media (max-width: 600px) {
    .foxchat-wrap { padding: 20px 12px 60px; }
    .foxchat-title { font-size: 18px; }
    .fc-composer-input { font-size: 13px; }
    .fc-post-body { font-size: 13px; margin-top: 2px; }
    .fc-composer-bottom { padding-left: 0; }
}

/* ===== FOX CHAT REPLIES ===== */
/* Reply button on each post (subtle, only the action) */
.fc-post-actions {
    display: flex;
    gap: 14px;
    margin-top: 8px;
    padding-left: 48px;
}
.fc-reply-btn {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    cursor: pointer;
    padding: 4px 0;
    letter-spacing: 0.5px;
    transition: color var(--transition);
}
.fc-reply-btn:hover { color: var(--accent); }
.fc-reply-btn.active { color: var(--accent); }

/* Inline reply composer (under the post being replied to) */
.fc-reply-composer {
    margin: 10px 0 4px 48px;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    display: none;
}
.fc-reply-composer.open { display: block; animation: fcFadeIn 0.2s ease-out; }
.fc-reply-composer textarea {
    width: 100%;
    min-height: 50px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    padding: 8px 10px;
    resize: vertical;
    outline: none;
    transition: border-color var(--transition);
}
.fc-reply-composer textarea:focus { border-color: var(--accent); }
.fc-reply-composer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    gap: 10px;
}
.fc-reply-composer .btn { font-size: 9px; padding: 8px 14px; }
.fc-reply-charcount {
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    color: var(--text-dim);
}
.fc-reply-charcount.over { color: #EF5350; }

/* Replies list (shown indented under parent) */
.fc-replies {
    margin-top: 10px;
    margin-left: 24px;
    padding-left: 12px;
    border-left: 2px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fc-reply {
    padding: 8px 10px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    animation: fcFadeIn 0.3s ease-out;
}
.fc-reply-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.fc-reply-avatar {
    width: 28px;
    height: 28px;
    border-radius: 2px;
    background: #1a1f2a;
    image-rendering: pixelated;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}
.fc-reply-name {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
}
.fc-reply-meta {
    font-family: 'Poppins', sans-serif;
    font-size: 9px;
    color: var(--text-muted);
    margin-left: auto;
    display: flex;
    gap: 6px;
    align-items: center;
}
.fc-reply-meta a { color: var(--text-dim); text-decoration: none; }
.fc-reply-meta a:hover { color: var(--accent); }
.fc-reply-body {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-main);
    white-space: pre-wrap;
    word-wrap: break-word;
    padding-left: 36px;
}

@media (max-width: 600px) {
    .fc-post-actions { padding-left: 0; }
    .fc-reply-composer { margin-left: 0; }
    .fc-replies { margin-left: 8px; padding-left: 8px; }
    .fc-reply-body { padding-left: 0; margin-top: 2px; font-size: 12px; }
}

/* File input styling - the inner browser button */
.pf-file-input {
    color: var(--text-main);
}
.pf-file-input::file-selector-button {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 8px 14px;
    margin-right: 12px;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.15s;
}
.pf-file-input::file-selector-button:hover {
    opacity: 0.85;
}
/* Webkit fallback for older browsers */
.pf-file-input::-webkit-file-upload-button {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 8px 14px;
    margin-right: 12px;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* ===================================================================
   FOX CHAT -- two-column layout (TradingView chart on left, chat on right)
   =================================================================== */
.fc-layout {
    /* 50/50 split -- chart on left, chat on right. The Symbol Info widget
       (different from Symbol Overview) renders WIDE and fills the column. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
    margin-top: 24px;
}
.fc-chart-col {
    /* Plain block element with no width constraint. Block elements stretch
       to fill the grid column horizontally. The chart card inside has a
       definite height so the autosize widget knows how tall to be. */
    min-width: 0;
}
.fc-chat-col {
    min-width: 0;
}
.foxchat-wrap {
    /* Span the full width on desktop; small page padding only */
    max-width: 1600px;
    width: 100%;
    padding: 24px 24px 80px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Wordmark + tagline header */
.foxchat-wordmark {
    display: block;
    height: 48px;
    width: auto;
    margin: 0 auto;
    image-rendering: pixelated;
}
.foxchat-tagline {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Chart card -- holds Symbol Info panel on top (auto-heights itself) and
   Mini chart line below (needs definite height for autosize to work). */
.fc-chart-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.tradingview-widget-container,
.tradingview-widget-container__widget {
    background: transparent;
}
/* Symbol Info widget renders header + price + stats row inside its iframe.
   We can't reach inside (cross-origin), so clip the wrapper to height-of-header-
   plus-price-line and use overflow:hidden to lop off the stats row below. */
.fc-info-clip {
    max-height: 140px;
    overflow: hidden;
}
/* Chart line wrapper -- Mini widget autosizes into this. Definite pixel
   height per TradingView's docs. */
.fc-chart-line-wrap {
    height: 320px;
    margin-top: 8px;
}
.fc-chart-line-wrap .tradingview-widget-container__widget {
    height: 100%;
}

/* Stack vertically on smaller screens */
@media (max-width: 1100px) {
    .fc-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}
@media (max-width: 600px) {
    .foxchat-wrap { padding: 16px 12px 60px; }
    .foxchat-wordmark { height: 36px; }
    .foxchat-tagline { font-size: 10px; }
    /* On mobile the TradingView Symbol Info widget reflows its layout --
       title and price wrap onto separate stacked rows instead of one wide row.
       Give the clip enough room for symbol + price + change line, but stop
       short of the stats grid (market cap, supply, etc) that renders below. */
    .fc-chart-card { padding: 12px 12px; }
    .fc-info-clip { max-height: 175px; }
    .fc-chart-line-wrap { height: 240px; margin-top: 4px; }
}

/* ===================================================================
   FOX CHAT -- Thread view
   =================================================================== */
.fc-thread {
    animation: fcFadeIn 0.25s ease-out;
}
.fc-thread-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.fc-back-btn {
    background: transparent;
    border: 1px solid var(--border-hover);
    color: var(--text-main);
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--transition);
}
.fc-back-btn:hover {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
}
.fc-back-arrow { font-size: 14px; line-height: 1; }
.fc-thread-title {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.fc-thread-root .fc-post {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-dim);
}

/* Nested replies -- each level indents a bit and gets a left border accent.
   We cap the visual depth at level 6 so deep threads don't push content off screen
   on mobile. */
.fc-nest {
    margin-top: 10px;
    padding-left: 16px;
    border-left: 2px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fc-nest .fc-post {
    /* Slightly de-emphasized vs root */
    background: var(--bg-input);
}
.fc-nest-1 { padding-left: 16px; border-left-color: rgba(234,179,0,0.45); }
.fc-nest-2 { padding-left: 14px; border-left-color: rgba(234,179,0,0.36); }
.fc-nest-3 { padding-left: 12px; border-left-color: rgba(234,179,0,0.28); }
.fc-nest-4 { padding-left: 10px; border-left-color: rgba(234,179,0,0.22); }
.fc-nest-5 { padding-left: 8px;  border-left-color: rgba(234,179,0,0.18); }
.fc-nest-6 { padding-left: 8px;  border-left-color: rgba(234,179,0,0.15); }

/* Make post hover show clickability when in feed mode (it's clickable to open thread). */
.fc-post[onclick] { transition: border-color var(--transition), background var(--transition); }
.fc-post[onclick]:hover { border-color: var(--accent-dim); background: var(--bg-input); }

/* On mobile, drop the indent slightly so deeper nests don't squeeze content too tight */
@media (max-width: 600px) {
    .fc-nest { padding-left: 10px; }
    .fc-nest-1 { padding-left: 10px; }
    .fc-nest-2 { padding-left: 9px; }
    .fc-nest-3 { padding-left: 8px; }
    .fc-nest-4 { padding-left: 7px; }
    .fc-nest-5 { padding-left: 6px; }
    .fc-nest-6 { padding-left: 6px; }
    .fc-thread-title { font-size: 13px; }
}

/* Chart range selector tabs */
.fc-chart-ranges {
    display: flex;
    gap: 4px;
    margin: 12px 0;
    padding: 4px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    scrollbar-width: none;
}
.fc-chart-ranges::-webkit-scrollbar { display: none; }
.fc-range-btn {
    flex: 1;
    min-width: 44px;
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}
.fc-range-btn:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.04);
}
.fc-range-btn.active {
    background: var(--accent);
    color: #000;
}

@media (max-width: 600px) {
    .fc-range-btn { font-size: 9px; padding: 5px 6px; min-width: 36px; }
}

/* ===================================================================
   FOX CHAT -- Toast & collapse controls
   =================================================================== */

/* Bottom-center toast for non-blocking success messages */
.fc-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-card);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 12px 18px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(234, 179, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: var(--text-main);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
    z-index: 9999;
    max-width: 90vw;
}
.fc-toast.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.fc-toast-msg {
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 0.3px;
}
.fc-toast-link {
    font-size: 11px;
    color: var(--text-dim);
    text-decoration: none;
    border-left: 1px solid var(--border);
    padding-left: 14px;
    transition: color var(--transition);
}
.fc-toast-link:hover { color: var(--accent); }

/* Collapse / expand button on threaded reply nodes */
.fc-collapse-btn {
    display: inline-block;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    margin: 6px 0 4px 48px;
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--transition);
}
.fc-collapse-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* Children wrap so toggling display works on a single element */
.fc-nest-children {
    /* Inherits indentation from .fc-nest containers */
}

@media (max-width: 600px) {
    .fc-collapse-btn { margin-left: 0; font-size: 9px; padding: 3px 8px; }
    .fc-toast { font-size: 12px; padding: 10px 14px; gap: 10px; bottom: 16px; }
    .fc-toast-link { font-size: 10px; padding-left: 10px; }
}

/* Optimistic post -- shown while the broadcast is in flight. Subtle pulse
   tells the user the post is still being processed but is otherwise visible. */
.fc-post-pending-card {
    opacity: 0.6;
    animation: fcPostPending 1.4s ease-in-out infinite;
}
@keyframes fcPostPending {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 0.85; }
}

/* =====================================================================
   SPINNING RARITY RINGS -- one definition for every PFP (chat + header)
   =====================================================================
   The fox, the black ring and the colour ring are ONE ELEMENT: the <img>.
     - the fox is the image itself; an image with rounded corners has its
       picture trimmed to a circle by the browser (CSS Backgrounds spec:
       replaced content is trimmed to the content-edge curve)
     - the black ring is a background disc just larger than that circle
     - the colour ring is a conic background filling the rest
   One element is snapped to the screen grid ONCE, so all three circles
   always share a centre.

   Why this matters: with the ring on a separate wrapper, the browser drew
   the wrapper's circle at its true position but snapped the picture to the
   pixel grid on its own. Whenever the avatar sat on a half pixel the fox was
   drawn a pixel right and a pixel down of centre -- measured from the raw
   pixels, 10 in from the left edge but only 8 in from the right -- and the
   ring came out 2 pixels thicker on two sides. Centred on paper, off on
   screen. Nothing here can drift apart, because nothing is separate.

   It spins by animating the gradient's ANGLE (--spin), not by rotating a
   layer, so nothing moves geometrically and nothing is lifted onto its own
   graphics layer (which is what used to soften the pixel art at 125% and
   150% screen scaling).

   Seamless: 0deg and 360deg are the same frame, timing is linear, and every
   colour list begins and ends on the same colour. Each ring starts at its
   own point in the turn (--spin-delay, set per fox).

   Every ring stays BRIGHT all the way round (darkest point >= ~70% of the
   brightest), so no side vanishes into the black page. */

@property --spin {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.rarity-common    { --tier-stops: #aeb4bb, #eef0f3 22%, #c6cbd1 45%, #b6bcc3 70%, #aeb4bb; }
.rarity-uncommon  { --tier-stops: #4db3f5, #bfe6ff 22%, #7cc8f8 45%, #5dbbf6 70%, #4db3f5; }
.rarity-rare      { --tier-stops: #3fd98f, #c9ffe4 22%, #7fe8b5 45%, #55df9d 70%, #3fd98f; }
.rarity-epic      { --tier-stops: #9d78ff, #d9c9ff 22%, #b394ff 45%, #a584ff 70%, #9d78ff; }
.rarity-legendary { --tier-stops: #f5b72a, #fff0bd 22%, #ffd166 45%, #f8c247 70%, #f5b72a; }
.rarity-exotic    { --tier-stops: #c9a6ff, #8fb8ff, #d6e6ff, #8fe8d0, #b59cfb, #f7b2ff, #c9a6ff; }

/* The wrapper is now just a holder: no padding, no background, nothing
   drawn. [class] lifts specificity over older .profile-avatar-btn .tier-ring
   and .rarity-exotic rules so they cannot add padding or a shimmer back. */
.tier-ring[class],
.chat-av-ring[class] {
    position: relative;
    display: inline-block;
    line-height: 0;
    flex: 0 0 auto;
    align-self: flex-start;      /* never let a flex row stretch it to an oval */
    padding: 0;
    background: none;
    box-shadow: none;
    animation: none;
    border-radius: 50%;
}
.tier-ring img,
.chat-av-ring img {
    display: block;
    border-radius: 50%;
    image-rendering: var(--pfp-render, pixelated);
}
.tier-ring[class*="rarity-"]:not(.rarity-none) img,
.chat-av-ring[class*="rarity-"]:not(.rarity-none) img {
    box-sizing: content-box;     /* the picture stays exactly --pfp; rings sit outside it */
    /* rings sized in app.js in WHOLE SCREEN PIXELS; proportions from the
       reference avatar -- black ring and colour ring about equal, each ~1/8
       of the picture's radius */
    padding: calc(var(--pfp-gap, 2px) + var(--pfp-ring, 2px));
    background:
        radial-gradient(circle,
            #000        calc(var(--pfp, 32px) / 2 + var(--pfp-gap, 2px) - var(--pfp-px, 1px) / 2),
            transparent calc(var(--pfp, 32px) / 2 + var(--pfp-gap, 2px) + var(--pfp-px, 1px) / 2)),
        conic-gradient(from var(--spin, 0deg), var(--tier-stops));
    animation: rarity-spin 8s linear infinite;
    animation-delay: var(--spin-delay, 0s);
    box-shadow: 0 0 7px var(--tier-glow, transparent);
}
@keyframes rarity-spin { to { --spin: 360deg; } }

/* People who ask their system to reduce motion get the ring, standing still. */
@media (prefers-reduced-motion: reduce) {
    .tier-ring[class*="rarity-"] img,
    .chat-av-ring[class*="rarity-"] img { animation: none; }
}