/* DontHurtUs dark mode — PURE BLACK surfaces only (no dark grey), high-contrast text. Applied when . Tokens cascade; hardcoded #fff surfaces are overridden explicitly below. */ html[data-theme="dark"]{ color-scheme:dark; --bg:#000;--bg-soft:#000;--bg-muted:#000; --text:#ffffff;--text-soft:#eef1f7; /* WHITE text — user wants no grey on black, ever */ --line:rgba(255,255,255,.16); /* faint WHITE hairline — never a grey fill */ --blue:#3ba0ff;--blue-dark:#1e90ff;--blue-soft:#0f2233; --red:#ff466e;--red-dark:#d10a3c;--red-soft:#2a0d16; --green:#2ed57e;--green-soft:#0c2418; --shadow:0 2px 16px rgba(0,0,0,.6); --shadow-lg:0 12px 40px rgba(0,0,0,.75); } html[data-theme="dark"] body{background:#000;color:var(--text)} /* All white card/surface backgrounds -> pure black, separated by borders */ html[data-theme="dark"] .topbar, html[data-theme="dark"] .foot, html[data-theme="dark"] .mob-nav, html[data-theme="dark"] .nav, html[data-theme="dark"] .nav-drawer-head, html[data-theme="dark"] .panel, html[data-theme="dark"] .card, html[data-theme="dark"] .tile, html[data-theme="dark"] .home-card, html[data-theme="dark"] .home-cat, html[data-theme="dark"] .home-hero-banner, html[data-theme="dark"] .home-why-card, html[data-theme="dark"] .feature-card, html[data-theme="dark"] .step-card, html[data-theme="dark"] .stat-card, html[data-theme="dark"] .stat-pill, html[data-theme="dark"] .market-action, html[data-theme="dark"] .cat-tile, html[data-theme="dark"] .cat-pill, html[data-theme="dark"] .promo-bar, html[data-theme="dark"] .buy-box, html[data-theme="dark"] .item-facts, html[data-theme="dark"] .fee-breakdown, html[data-theme="dark"] .action-box, html[data-theme="dark"] .browse-cats-side, html[data-theme="dark"] .search-ac, html[data-theme="dark"] .notif-card, html[data-theme="dark"] .dash-listing-card, html[data-theme="dark"] .dash-quick-card, html[data-theme="dark"] .dash-sales-list, html[data-theme="dark"] .account-sidebar, html[data-theme="dark"] .chat-sidebar, html[data-theme="dark"] .chat-conv-head, html[data-theme="dark"] .chat-compose, html[data-theme="dark"] .chat-mini, html[data-theme="dark"] .chat-quick-replies, html[data-theme="dark"] .mobile-bid-bar, html[data-theme="dark"] .fb-row, html[data-theme="dark"] .gallery-main, html[data-theme="dark"] .toast, html[data-theme="dark"] .menu-toggle, html[data-theme="dark"] .hero-copy, html[data-theme="dark"] .home-stats>div, html[data-theme="dark"] .step, html[data-theme="dark"] .home-steps-list li, html[data-theme="dark"] .home-step, html[data-theme="dark"] .review-card, html[data-theme="dark"] .qa-item, html[data-theme="dark"] .bid-row{ background:#000!important;border-color:var(--line);color:var(--text); } /* Wordmark logo: recolor the black lettering to white in dark mode everywhere it appears (header, footer, drawer, auth card). Those exact fills are unique to the wordmark, so this is safe; the red "Hurt" gradient is untouched. */ html[data-theme="dark"] svg tspan[fill="#12151c"], html[data-theme="dark"] svg tspan[fill="#2d3340"]{fill:#f4f6fb!important} html[data-theme="dark"] .home-hero-banner, html[data-theme="dark"] .promo-bar{border:1px solid var(--line)} /* Form fields — WHITE field, dark text (clean, zero grey) */ html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] .search, html[data-theme="dark"] .search input, html[data-theme="dark"] .bid-form input, html[data-theme="dark"] .cf-calc-input input{ background:#fff!important;color:#12151c!important;border-color:transparent!important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder{color:#5a6472} html[data-theme="dark"] select option{background:#fff;color:#12151c} /* Search bar: white pill, dark icon + text */ html[data-theme="dark"] .topbar .search{background:#fff!important;color:#12151c!important} html[data-theme="dark"] .topbar .search svg{stroke:#12151c} html[data-theme="dark"] .chip{background:#000;border-color:var(--line);color:var(--text)} html[data-theme="dark"] .chip-active{background:var(--blue);color:#fff!important;border-color:var(--blue)} /* Menu-toggle bars stay visible */ html[data-theme="dark"] .menu-toggle span{background:var(--text)} /* Outline buttons: light text, not black-on-black */ html[data-theme="dark"] .btn-outline{background:transparent!important;color:var(--text)!important;border-color:var(--line)!important} html[data-theme="dark"] .btn-outline:hover{border-color:var(--blue)!important;color:var(--blue)!important} /* Secondary buttons */ html[data-theme="dark"] .btn-secondary{background:#000;color:var(--text);border:1px solid var(--line)} /* Tables (order history) */ html[data-theme="dark"] .data-table th{background:#000;color:var(--text)} html[data-theme="dark"] .data-table td,html[data-theme="dark"] .data-table th{border-color:var(--line)} /* Anything that used the soft grey text token but was set literally */ html[data-theme="dark"] .foot-trust, html[data-theme="dark"] .foot-copy, html[data-theme="dark"] .lookup-hint, html[data-theme="dark"] .label-note, html[data-theme="dark"] .muted, html[data-theme="dark"] .bid-min, html[data-theme="dark"] .cat, html[data-theme="dark"] .fb-meta{color:var(--text-soft)!important} /* External brand logos (CF / Abdou Express) are drawn for light bg — give them a chip */ html[data-theme="dark"] .about-cf-logo, html[data-theme="dark"] .about-ae-logo, html[data-theme="dark"] .home-hero-logo{background:#fff;border-radius:10px;padding:10px} /* CF-brand wordmark is now theme-adaptive TEXT (var(--text)) — no chip needed */ /* Images shouldn't get a white flash box */ html[data-theme="dark"] .card-img, html[data-theme="dark"] .home-card-img, html[data-theme="dark"] .tile-img{background:#000} /* "Ready to sell?" CTA — its light blue→white gradient looked awful on black. Premium black panel with a soft blue glow + bright buttons. */ html[data-theme="dark"] .home-sell-inner{ background:radial-gradient(120% 140% at 50% 0%, rgba(30,144,255,.22), #000 62%)!important; border:1px solid rgba(59,160,255,.45)!important; box-shadow:0 0 40px rgba(30,144,255,.12) inset; } html[data-theme="dark"] .home-sell-inner h2{color:#fff} html[data-theme="dark"] .home-sell-inner p{color:var(--text-soft)} /* Any other light gradient hero panels -> pure black */ html[data-theme="dark"] .home-hero-panel, html[data-theme="dark"] .home-strip{background:#000!important} /* Login / Register pages — pure black card (red hero panel kept, it pops on black) */ html[data-theme="dark"] .auth-page{background:#000!important} html[data-theme="dark"] .auth-container{background:#000!important;border:1px solid rgba(255,255,255,.16);box-shadow:0 20px 60px rgba(209,10,60,.25)} html[data-theme="dark"] .auth-form-panel{color:var(--text)} html[data-theme="dark"] .auth-title{color:#fff} html[data-theme="dark"] .auth-subtitle, html[data-theme="dark"] .auth-foot, html[data-theme="dark"] .auth-alt, html[data-theme="dark"] .sf-label, html[data-theme="dark"] .auth-legal{color:var(--text-soft)!important} html[data-theme="dark"] .auth-divider{color:var(--text-soft)} html[data-theme="dark"] .auth-divider::before, html[data-theme="dark"] .auth-divider::after{border-color:var(--line)!important;background:var(--line)!important} /* NO grey text anywhere on black — force all secondary/muted text to near-white */ html[data-theme="dark"] .text-soft, html[data-theme="dark"] .muted, html[data-theme="dark"] .lookup-hint, html[data-theme="dark"] .label-note, html[data-theme="dark"] .fld-hint, html[data-theme="dark"] .sell-intro, html[data-theme="dark"] .sell-reassure, html[data-theme="dark"] .home-lead, html[data-theme="dark"] .home-card-meta, html[data-theme="dark"] .bid-meta, html[data-theme="dark"] .cat, html[data-theme="dark"] .offer-role, html[data-theme="dark"] .order-hint, html[data-theme="dark"] .seller-stats, html[data-theme="dark"] .user-handle, html[data-theme="dark"] .foot-trust, html[data-theme="dark"] .foot-copy, html[data-theme="dark"] .foot-links a, html[data-theme="dark"] .breadcrumb, html[data-theme="dark"] small, html[data-theme="dark"] dd, html[data-theme="dark"] .home-stats dd{color:var(--text-soft)!important} /* Offers inbox + account cards that were white -> pure black */ html[data-theme="dark"] .offer-card, html[data-theme="dark"] .account-form, html[data-theme="dark"] .account-sidebar, html[data-theme="dark"] .account-nav, html[data-theme="dark"] .dash-alerts, html[data-theme="dark"] .notice{background:#000!important;border-color:var(--line);color:var(--text)} /* Invite gate already black — leave it */ /* Notify banner already black — leave it */ /* Categories page dark */ html[data-theme="dark"] .cat-search-wrap, html[data-theme="dark"] .cat-jump-pill, html[data-theme="dark"] .cat-tile-ico, html[data-theme="dark"] .cat-toolbar{ background:#000!important;border-color:var(--line)!important;color:var(--text)!important } html[data-theme="dark"] .cat-search{color:#fff!important} html[data-theme="dark"] .cat-tile-name{color:#fff!important} html[data-theme="dark"] .cat-tile:hover{background:#0a1628!important} html[data-theme="dark"] .cat-group-head{border-bottom-color:var(--line)!important} /* === Dark continuous polish v80 === */ html[data-theme="dark"] .empty, html[data-theme="dark"] .home-empty, html[data-theme="dark"] .browse-bar, html[data-theme="dark"] .browse-inp, html[data-theme="dark"] .browse-quick-link, html[data-theme="dark"] .pagination a, html[data-theme="dark"] .cat-landing-ico, html[data-theme="dark"] .similar-grid .tile, html[data-theme="dark"] .similar-grid .listing-card{ background:#000!important;border-color:var(--line)!important;color:var(--text)!important } html[data-theme="dark"] .browse-quick-link.is-active, html[data-theme="dark"] .pagination .current, html[data-theme="dark"] .pagination a.is-active{ background:var(--blue)!important;color:#fff!important;border-color:var(--blue)!important } html[data-theme="dark"] .home-card-img, html[data-theme="dark"] .card-img, html[data-theme="dark"] .tile-img{ background:#000!important } html[data-theme="dark"] .price-label{color:var(--text-soft)!important} html[data-theme="dark"] .data-table th{background:#000!important} html[data-theme="dark"] .browse-toolbar{background:#000!important} html[data-theme="dark"] .empty p{color:#fff!important} html[data-theme="dark"] .cat-tile-count--zero{color:var(--text-soft)!important} html[data-theme="dark"] .bin-tag{background:#0c2418!important;color:#2ed57e!important} /* Ticker + red on dark — no pink strip */ html[data-theme="dark"]{ --red:#ef4444;--red-dark:#dc2626;--red-soft:#2a1014; } html[data-theme="dark"] .ticker-bar{ background:#0a0a0a!important;border-bottom:1px solid rgba(255,255,255,.12)!important;color:#fff!important } html[data-theme="dark"] .ticker-lead{display:none!important} html[data-theme="dark"] .ticker-bar a.ticker-item{color:#eef2f7!important} html[data-theme="dark"] .ticker-time{color:#fbbf24!important} /* === Dark theme v84 — home + shells === */ html[data-theme="dark"] .ebay-welcome{ background:linear-gradient(135deg,#000 0%,#0a1628 100%)!important; border-color:var(--line)!important } html[data-theme="dark"] .ebay-welcome h1, html[data-theme="dark"] .ebay-welcome-copy, html[data-theme="dark"] .ebay-brand-text{color:#fff!important} html[data-theme="dark"] .ebay-welcome-lead{color:var(--text-soft)!important} html[data-theme="dark"] .ebay-stats-line, html[data-theme="dark"] .ebay-promo-card, html[data-theme="dark"] .ebay-quicklinks, html[data-theme="dark"] .ebay-why-card, html[data-theme="dark"] .ebay-quick-grid a, html[data-theme="dark"] .listing-card, html[data-theme="dark"] .home-card{ background:#000!important;border-color:var(--line)!important;color:#fff!important } html[data-theme="dark"] .ebay-quicklinks .ebay-box-head, html[data-theme="dark"] .ebay-box-head{ background:#000!important;color:#fff!important;border-color:var(--line)!important } html[data-theme="dark"] .ebay-section-head h2{color:#fff!important} html[data-theme="dark"] .ebay-section-head{ border-bottom-color:var(--line)!important } html[data-theme="dark"] .ebay-section-head a{color:var(--blue)!important} html[data-theme="dark"] .ebay-quick-grid span{color:#fff!important} html[data-theme="dark"] .ebay-quick-grid small, html[data-theme="dark"] .ebay-promo-card p, html[data-theme="dark"] .ebay-why-card p{color:var(--text-soft)!important} html[data-theme="dark"] .ebay-promo-card strong, html[data-theme="dark"] .ebay-why-card h3{color:#fff!important} html[data-theme="dark"] .ebay-promo-card--green{ background:#000!important;border-color:#1a3a28!important } html[data-theme="dark"] .ebay-sell-banner{ background:linear-gradient(120deg,#000 0%,#0a1628 60%,#123 100%)!important; border-color:var(--line)!important } html[data-theme="dark"] .ebay-stats-line strong{color:#fff!important} html[data-theme="dark"] .topbar{background:#000!important} html[data-theme="dark"] .listing-card:hover, html[data-theme="dark"] .home-card:hover{border-color:var(--blue)!important} html[data-theme="dark"] .ebay-pill{background:#0c2418;color:#2ed57e} html[data-theme="dark"] .ebay-pill--red{background:#2a1014;color:#ef4444} html[data-theme="dark"] .home-card-img img, html[data-theme="dark"] .card-img img, html[data-theme="dark"] .listing-card img{background:#000!important} html[data-theme="dark"] .skip-link{background:var(--blue)!important;color:#fff!important} /* Dark product page v86 */ html[data-theme="dark"] .item-page .gallery-main, html[data-theme="dark"] .item-page .buy-box, html[data-theme="dark"] .item-page .buy-box--ebay, html[data-theme="dark"] .item-page .item-facts, html[data-theme="dark"] .item-page .seller-box, html[data-theme="dark"] .item-page .item-desc, html[data-theme="dark"] .item-page .qa-section, html[data-theme="dark"] .item-page .bid-history, html[data-theme="dark"] .item-page .fee-breakdown, html[data-theme="dark"] .item-page .live-panel, html[data-theme="dark"] .item-page .ebay-vi-panel{ background:#000!important;border-color:var(--line)!important;color:#fff!important } html[data-theme="dark"] .item-page .item-info > h1, html[data-theme="dark"] .item-page .current-price, html[data-theme="dark"] .item-page .ebay-vi-price{color:#fff!important} html[data-theme="dark"] .item-page .gallery-main img{background:#000!important} html[data-theme="dark"] .item-page .quick-bids button{background:#000!important;color:#fff!important;border-color:var(--line)!important} html[data-theme="dark"] .mobile-bid-bar{background:#000!important;border-color:var(--line)!important} /* Dark product dense v87 */ html[data-theme="dark"] .item-page .item-mod, html[data-theme="dark"] .item-page .item-desc, html[data-theme="dark"] .item-page .qa-section, html[data-theme="dark"] .item-page .bid-history, html[data-theme="dark"] .item-page .gallery-main, html[data-theme="dark"] .item-page .quick-bids .qb{ background:#000!important;border-color:var(--line)!important;color:#fff!important } html[data-theme="dark"] .item-page .item-mod--title{background:transparent!important;border:0!important} html[data-theme="dark"] .item-page .item-mod--price{background:#0a0a0a!important} html[data-theme="dark"] .item-page .current-price, html[data-theme="dark"] .item-page .item-mod--title h1{color:#fff!important} html[data-theme="dark"] .item-page .bid-form input, html[data-theme="dark"] .item-page .ask-seller-form textarea, html[data-theme="dark"] .item-page .price-alert-form input{ background:#000!important;color:#fff!important;border-color:var(--line)!important } /* Account dark v91 */ html[data-theme="dark"] .account-sidebar, html[data-theme="dark"] .acct-card, html[data-theme="dark"] .acct-field input, html[data-theme="dark"] .account-nav a{ background:#000!important;border-color:var(--line)!important;color:#fff!important } html[data-theme="dark"] .acct-card-head{background:#0a0a0a!important;border-color:var(--line)!important} html[data-theme="dark"] .acct-card-head h2, html[data-theme="dark"] .acct-head h1, html[data-theme="dark"] .acct-toggle-text strong{color:#fff!important} html[data-theme="dark"] .account-nav a:hover{background:#0a1628!important;color:var(--blue)!important} html[data-theme="dark"] .account-nav a.active{background:var(--blue)!important;color:#fff!important} html[data-theme="dark"] .acct-field input:disabled{background:#111!important} html[data-theme="dark"] .acct-card--muted{background:#0a0a0a!important} /* Account nav dark v92 */ html[data-theme="dark"] .account-nav-more{border-top-color:var(--line)} html[data-theme="dark"] .account-nav-more > summary{color:var(--text-soft)!important} html[data-theme="dark"] .account-nav-more a{color:var(--text-soft)!important} html[data-theme="dark"] .account-nav a.active .nav-badge{background:#fff!important;color:#000!important} /* Dashboard dark v93 */ html[data-theme="dark"] .dash-hero-stat, html[data-theme="dark"] .dash-stats .stat-card, html[data-theme="dark"] .dash-quick-card, html[data-theme="dark"] .dash-listing-card, html[data-theme="dark"] .dash-alerts{ background:#000!important;border-color:var(--line)!important;color:#fff!important } html[data-theme="dark"] .dash-hero-num{color:#2ed57e!important} html[data-theme="dark"] .dash-stats .stat-card strong, html[data-theme="dark"] .dash-listing-title{color:#fff!important} html[data-theme="dark"] .dash-quick-card:not(.dash-quick-card--primary){color:#fff!important} html[data-theme="dark"] a.dash-quick-card.dash-quick-card--primary{background:var(--blue)!important;color:#fff!important} /* Sell/checkout dark v94 */ html[data-theme="dark"] .sell-quick-steps li, html[data-theme="dark"] .sell-advanced, html[data-theme="dark"] .sell-actions-bar, html[data-theme="dark"] .checkout-summary, html[data-theme="dark"] .checkout-form, html[data-theme="dark"] .sell-page .big-field input, html[data-theme="dark"] .sell-page .big-field select, html[data-theme="dark"] .sell-page .big-field textarea, html[data-theme="dark"] .sell-advanced input, html[data-theme="dark"] .sell-advanced select, html[data-theme="dark"] .sell-advanced textarea, html[data-theme="dark"] .checkout-form select{ background:#000!important;border-color:var(--line)!important;color:#fff!important } html[data-theme="dark"] .seller-keeps{background:#0c2418!important;color:#fff!important} /* === dark item dense v101 === */ html[data-theme="dark"] .item-page .item-mod, html[data-theme="dark"] .item-page .item-desc, html[data-theme="dark"] .item-page .qa-section, html[data-theme="dark"] .item-page .bid-history, html[data-theme="dark"] .item-page .gallery-main{ background:#000!important;border-color:#333!important } html[data-theme="dark"] .item-page .item-mod--commerce{background:#111!important} html[data-theme="dark"] .item-page .item-mod--title{background:transparent!important;border:0!important} html[data-theme="dark"] .item-page .current-price, html[data-theme="dark"] .item-page .ebay-vi-price, html[data-theme="dark"] .item-page .item-mod--title h1{color:#fff!important} html[data-theme="dark"] .item-page .gallery-main img{background:#000!important} html[data-theme="dark"] .item-page .bin-tag{background:#052e16!important;color:#86efac!important} html[data-theme="dark"] .item-page .item-facts .fact-row{border-color:#333!important} html[data-theme="dark"] .item-page .item-util-link{background:#111!important;border-color:#333!important;color:#eee!important} html[data-theme="dark"] .item-page .gallery-main{aspect-ratio:auto!important} /* === dark shell v33 === */ html[data-theme="dark"] .ticker-bar{background:#0a0a0a!important;border-bottom:1px solid #333!important} html[data-theme="dark"] .ticker-label{color:#fbbf24!important} html[data-theme="dark"] .ticker-more{color:#93c5fd!important} html[data-theme="dark"] .ticker-bar a.ticker-item{color:#e5e5e5!important} html[data-theme="dark"] .ticker-time{color:#fbbf24!important} html[data-theme="dark"] a.btn-primary, html[data-theme="dark"] a.buy-now-btn, html[data-theme="dark"] a.bin-btn, html[data-theme="dark"] a.bid-btn{color:#fff!important} /* === dark readable greys v34 — never dark-grey on black === */ html[data-theme="dark"]{ --text:#f2f2f2!important; --text-soft:#c8c8c8!important; --line:#333!important; --bg:#000!important; --bg-soft:#111!important; } html[data-theme="dark"] body{color:#f2f2f2!important;background:#000!important} html[data-theme="dark"] a:not(.btn):not(.btn-primary):not(.btn-cherry):not(.buy-now-btn):not(.bin-btn):not(.bid-btn){ color:#8ec8ff!important; } /* product cards / listing titles on dark */ html[data-theme="dark"] .listing-card, html[data-theme="dark"] .home-card, html[data-theme="dark"] .home-card h3, html[data-theme="dark"] .listing-card h3{ color:#f2f2f2!important; } html[data-theme="dark"] .home-card-meta, html[data-theme="dark"] .price-label, html[data-theme="dark"] .item-meta-line, html[data-theme="dark"] .breadcrumb, html[data-theme="dark"] .lead{ color:#c8c8c8!important; } /* Fixed header dark */ html[data-theme="dark"] .site-header,html[data-theme="dark"] #site-header{background:#000!important;border-bottom:1px solid #333!important}