/* =========================================================
   CONE THEME SYSTEM R4
   3 Themes: dark / middle-dark / light
   + category color direction
   ========================================================= */

:root,
:root:not([data-theme]),
:root[data-theme="dark"] {
  color-scheme: dark;
  --cone-radius-sm: 12px;
  --cone-radius-md: 18px;
  --cone-radius-lg: 28px;
  --cone-shadow-soft: 0 18px 50px rgba(0,0,0,.30);
  --cone-shadow-glow: 0 0 30px rgba(84, 146, 204, .24);
  --cone-font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --bg: #080f18;
  --bg-soft: #0b1420;
  --surface: rgba(15, 27, 43, .93);
  --surface-2: rgba(22, 38, 59, .90);
  --surface-3: rgba(32, 53, 78, .86);
  --border: rgba(141, 170, 198, .18);
  --border-strong: rgba(156, 188, 219, .34);
  --text: #edf6ff;
  --text-soft: #b8c7d8;
  --text-muted: #8394a8;
  --accent: #d9c295;
  --accent-2: #6fa8d8;
  --accent-text: #07111d;
  --danger: #ff6b77;
  --success: #42d48b;
  --warning: #f2c46d;
  --input-bg: rgba(7, 14, 25, .72);
  --input-border: rgba(157, 186, 215, .24);
  --header-bg: rgba(8, 15, 26, .88);
  --header-border: rgba(148, 177, 206, .22);
  --hero-overlay: linear-gradient(90deg, rgba(6,12,21,.88), rgba(6,12,21,.58), rgba(6,12,21,.20)), radial-gradient(circle at 70% 10%, rgba(81,137,184,.26), transparent 44%);
}

/* =========================================================
   2. MIDDLE DARK R4
   Deutlich heller als Dark: Premium-Nebelblau / Slate, aber noch nicht Hell.
   ========================================================= */

/* =========================================================
   2. MIDDLE DARK R5 - echte optische Mitte zwischen Dark und Hell
   Ziel: mindestens ca. 30% heller als Dark, aber klar dunkler als Hell.
   ========================================================= */

:root[data-theme="middle-dark"] {
  color-scheme: dark;
  --cone-radius-sm: 12px;
  --cone-radius-md: 18px;
  --cone-radius-lg: 28px;

  --cone-shadow-soft: 0 14px 36px rgba(21, 35, 49, .20);
  --cone-shadow-glow: 0 0 34px rgba(172, 204, 232, .22);
  --cone-font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* R5: sichtbare Mitte zwischen #080f18 und Light-Offwhite. */
  --bg: #33465a;
  --bg-soft: #40566b;
  --surface: rgba(73, 91, 110, .96);
  --surface-2: rgba(88, 108, 128, .95);
  --surface-3: rgba(106, 127, 148, .94);

  --border: rgba(222, 236, 248, .30);
  --border-strong: rgba(238, 247, 255, .48);

  --text: #f7fbff;
  --text-soft: #dbe8f3;
  --text-muted: #b8c9d9;

  --accent: #e6d0a1;
  --accent-2: #b8d4ec;
  --accent-text: #111c28;

  --danger: #ff8d98;
  --success: #80e1b1;
  --warning: #efd18b;

  --input-bg: rgba(55, 72, 90, .96);
  --input-border: rgba(230, 242, 252, .34);

  --header-bg: rgba(45, 60, 76, .96);
  --header-border: rgba(225, 240, 252, .28);

  --hero-overlay:
    linear-gradient(90deg, rgba(43,58,75,.52), rgba(43,58,75,.34), rgba(43,58,75,.10)),
    radial-gradient(circle at 68% 6%, rgba(194,218,238,.34), transparent 46%);
}


:root[data-theme="light"] {
  color-scheme: light;
  --cone-radius-sm: 12px;
  --cone-radius-md: 18px;
  --cone-radius-lg: 28px;
  --cone-shadow-soft: 0 18px 42px rgba(30, 50, 72, .14);
  --cone-shadow-glow: 0 0 22px rgba(96, 145, 190, .14);
  --cone-font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* R4: Hell ist augenschonend etwas dunkler, kein grelles Weiss. */
  --bg: #e4ebf3;
  --bg-soft: #d7e1eb;
  --surface: rgba(244, 248, 252, .94);
  --surface-2: rgba(234, 241, 248, .94);
  --surface-3: rgba(222, 232, 242, .92);
  --border: rgba(75, 96, 120, .20);
  --border-strong: rgba(75, 96, 120, .34);
  --text: #101b2b;
  --text-soft: #40546b;
  --text-muted: #65788f;
  --accent: #c6b184;
  --accent-2: #5f92bd;
  --accent-text: #0c1724;
  --danger: #bd4250;
  --success: #157d54;
  --warning: #a8781d;
  --input-bg: rgba(239, 245, 250, .92);
  --input-border: rgba(77, 98, 122, .26);
  --header-bg: rgba(232, 239, 247, .94);
  --header-border: rgba(75, 96, 120, .22);
  --hero-overlay: linear-gradient(90deg, rgba(228,235,243,.80), rgba(228,235,243,.58), rgba(228,235,243,.18)), radial-gradient(circle at 70% 10%, rgba(107,153,195,.22), transparent 42%);
}

:root {
  --category-accent: var(--accent);
  --category-accent-2: var(--accent-2);
  --category-glow: rgba(111, 168, 216, .24);
}

:root[data-category="vehicles"] { --category-accent:#6fa8ff; --category-accent-2:#f0c26b; --category-glow:rgba(111,168,255,.26); }
:root[data-category="motorcycles"] { --category-accent:#7aa7ff; --category-accent-2:#d7b16c; --category-glow:rgba(122,167,255,.28); }
:root[data-category="boats"] { --category-accent:#56d6e8; --category-accent-2:#b9f3ff; --category-glow:rgba(86,214,232,.28); }
:root[data-category="realestate"], :root[data-category="real-estate"] { --category-accent:#74d6b0; --category-accent-2:#d5c08f; --category-glow:rgba(116,214,176,.24); }
:root[data-category="vacation"] { --category-accent:#69d8c8; --category-accent-2:#f0c178; --category-glow:rgba(105,216,200,.24); }
:root[data-category="machines-tools"], :root[data-category="machines"] { --category-accent:#d6aa68; --category-accent-2:#86a7bd; --category-glow:rgba(214,170,104,.22); }
:root[data-category="electronics"] { --category-accent:#8f7cff; --category-accent-2:#56c5ff; --category-glow:rgba(143,124,255,.26); }
:root[data-category="services"] { --category-accent:#69cfff; --category-accent-2:#9ce6c9; --category-glow:rgba(105,207,255,.24); }
:root[data-category="jobs"] { --category-accent:#7db7ff; --category-accent-2:#f0c26b; --category-glow:rgba(125,183,255,.24); }
:root[data-category="fashion"] { --category-accent:#f28bb8; --category-accent-2:#c69cff; --category-glow:rgba(242,139,184,.23); }
:root[data-category="food"], :root[data-category="food-drinks"] { --category-accent:#80d978; --category-accent-2:#f0b96e; --category-glow:rgba(128,217,120,.24); }
:root[data-category="animals"], :root[data-category="pets"], :root[data-category="livestock"] { --category-accent:#caa06a; --category-accent-2:#7ed0a7; --category-glow:rgba(202,160,106,.22); }
:root[data-category="crowdfunding"] { --category-accent:#ff8fb2; --category-accent-2:#80b7ff; --category-glow:rgba(255,143,178,.24); }
:root[data-category="humanitarian"], :root[data-category="humanitarian-aid"] { --category-accent:#ff7f8f; --category-accent-2:#ffd27a; --category-glow:rgba(255,127,143,.22); }

html, body {
  background: radial-gradient(circle at 72% -10%, var(--category-glow), transparent 36%), linear-gradient(180deg, var(--bg), var(--bg-soft)) !important;
  color: var(--text) !important;
  font-family: var(--cone-font-main);
}

.site-header,.header,.cone-header,.globalHeader,.topbar,.categoryHeader,.realestateChrome {
  background: var(--header-bg) !important;
  border-bottom-color: var(--header-border) !important;
  color: var(--text) !important;
  backdrop-filter: blur(18px);
}

.card,.panel,.section,.dashboard-card,.market-card,.category-card,.listing-card,.account-card,.form-card,.live-card,
.accountPanelCard,.categoryShell,.categoryHero,.realestatePanel,.realestateCard,.vacationPanel,.boatsCard,.boatPanel,
.friendsCard,.networkCard,.electronicsCard,.machinesCard {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.card:hover,.market-card:hover,.category-card:hover,.listing-card:hover,.account-card:hover,.realestateCard:hover,.boatsCard:hover {
  border-color: color-mix(in srgb, var(--category-accent) 42%, var(--border)) !important;
  box-shadow: 0 18px 58px var(--category-glow);
}

.hero,.categoryHero,.marketHero,.coneHero,.realestateHero,.vacationHero,.boatsHero {
  position: relative;
}
.hero::before,.categoryHero::before,.marketHero::before,.coneHero::before,.realestateHero::before,.vacationHero::before,.boatsHero::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: var(--hero-overlay);
  border-radius: inherit;
  z-index:0;
}
.hero > *,.categoryHero > *,.marketHero > *,.coneHero > *,.realestateHero > *,.vacationHero > *,.boatsHero > * { position:relative; z-index:1; }

h1,h2,h3,h4,.title,.heading { color: var(--text) !important; }
p,small,.meta,.muted,.subtitle,.helpText,.sectionText { color: var(--text-soft) !important; }

input,select,textarea,.input,.form-control,.headerSearch__input,.categoryHeader__searchInput {
  background-color: var(--input-bg) !important;
  color: var(--text) !important;
  border-color: var(--input-border) !important;
}
input::placeholder,textarea::placeholder { color: var(--text-muted) !important; }
select option { background: var(--surface-2); color: var(--text); }

.btn--primary,.button-primary,.primary,button[type="submit"],.headerSearch__submit,.categoryHeader__searchSubmit {
  background: linear-gradient(135deg, var(--category-accent), var(--accent)) !important;
  color: var(--accent-text) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 30px var(--category-glow);
}
.btn--secondary,.button-secondary,.btn--shortsCta {
  background: color-mix(in srgb, var(--category-accent) 20%, var(--surface-2)) !important;
  color: var(--text) !important;
  border-color: color-mix(in srgb, var(--category-accent) 35%, var(--border)) !important;
}
.btn--ghost,.button-ghost,.btn-outline,.iconCircle,.themeToggle,.langBtn {
  background: rgba(255,255,255,.04) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.badge,.chip,.pill,.tag,.categoryPill,.accountStatusBadge {
  background: color-mix(in srgb, var(--category-accent) 18%, var(--surface-2)) !important;
  color: var(--text) !important;
  border-color: color-mix(in srgb, var(--category-accent) 38%, var(--border)) !important;
}

.sidebar,.account-sidebar,.left-nav,.accountSidebar {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
.sidebar a.active,.account-sidebar a.active,.left-nav a.active,.accountSidebar a.active {
  background: color-mix(in srgb, var(--category-accent) 24%, var(--surface-2)) !important;
  border-color: color-mix(in srgb, var(--category-accent) 44%, var(--border)) !important;
}

.themeToggle,[data-theme-toggle],#themeToggle {
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
[data-theme-icon],.themeToggle__icon,.theme-icon { font-size:15px; }
[data-theme-label],.themeToggle__text,.theme-label { font-weight:900; }

:root[data-theme="light"] .btn--ghost,
:root[data-theme="light"] .button-ghost,
:root[data-theme="light"] .btn-outline,
:root[data-theme="light"] .iconCircle,
:root[data-theme="light"] .themeToggle,
:root[data-theme="light"] .langBtn {
  background: rgba(255,255,255,.74) !important;
  border-color: rgba(91,111,132,.18) !important;
}

/* =========================================================
   MIDDLE DARK R4 HARD-SEPARATION OVERRIDES
   Diese Regeln sorgen dafür, dass Middle wirklich heller wirkt,
   auch wenn einzelne alte Kategorie-CSS-Dateien noch dunkle Flächen setzen.
   ========================================================= */
:root[data-theme="middle-dark"] body {
  background-color: #586879 !important;
}

:root[data-theme="middle-dark"] .site-header,
:root[data-theme="middle-dark"] .header,
:root[data-theme="middle-dark"] .cone-header,
:root[data-theme="middle-dark"] .globalHeader,
:root[data-theme="middle-dark"] .topbar,
:root[data-theme="middle-dark"] .categoryHeader,
:root[data-theme="middle-dark"] .realestateChrome {
  background-color: rgba(82, 98, 116, .95) !important;
  border-color: rgba(255, 255, 255, .34) !important;
}

:root[data-theme="middle-dark"] .card,
:root[data-theme="middle-dark"] .panel,
:root[data-theme="middle-dark"] .section,
:root[data-theme="middle-dark"] .dashboard-card,
:root[data-theme="middle-dark"] .market-card,
:root[data-theme="middle-dark"] .category-card,
:root[data-theme="middle-dark"] .listing-card,
:root[data-theme="middle-dark"] .account-card,
:root[data-theme="middle-dark"] .form-card,
:root[data-theme="middle-dark"] .live-card,
:root[data-theme="middle-dark"] .accountPanelCard,
:root[data-theme="middle-dark"] .categoryShell,
:root[data-theme="middle-dark"] .realestatePanel,
:root[data-theme="middle-dark"] .realestateCard,
:root[data-theme="middle-dark"] .vacationPanel,
:root[data-theme="middle-dark"] .boatsCard,
:root[data-theme="middle-dark"] .boatPanel,
:root[data-theme="middle-dark"] .friendsCard,
:root[data-theme="middle-dark"] .networkCard,
:root[data-theme="middle-dark"] .electronicsCard,
:root[data-theme="middle-dark"] .machinesCard {
  background-color: rgba(115, 132, 150, .95) !important;
  border-color: rgba(240, 247, 253, .34) !important;
}

:root[data-theme="middle-dark"] input,
:root[data-theme="middle-dark"] select,
:root[data-theme="middle-dark"] textarea,
:root[data-theme="middle-dark"] .input,
:root[data-theme="middle-dark"] .form-control,
:root[data-theme="middle-dark"] .headerSearch__input,
:root[data-theme="middle-dark"] .categoryHeader__searchInput {
  background-color: rgba(94, 111, 130, .94) !important;
  border-color: rgba(255, 255, 255, .38) !important;
  color: #fbfdff !important;
}

:root[data-theme="middle-dark"] .btn--ghost,
:root[data-theme="middle-dark"] .button-ghost,
:root[data-theme="middle-dark"] .btn-outline,
:root[data-theme="middle-dark"] .iconCircle,
:root[data-theme="middle-dark"] .themeToggle,
:root[data-theme="middle-dark"] .langBtn {
  background: rgba(128, 145, 163, .78) !important;
  border-color: rgba(255, 255, 255, .36) !important;
}


/* R4 Light: Popovers und Account-Menüs nicht mehr grell weiss. */
:root[data-theme="light"] .dropdown,
:root[data-theme="light"] .dropdown-menu,
:root[data-theme="light"] .userMenu,
:root[data-theme="light"] .accountMenu,
:root[data-theme="light"] .profileMenu,
:root[data-theme="light"] .headerUserMenu,
:root[data-theme="light"] .headerDropdown {
  background: rgba(244, 248, 252, .96) !important;
  color: var(--text) !important;
  border-color: rgba(75, 96, 120, .20) !important;
  box-shadow: 0 24px 60px rgba(30, 50, 72, .16) !important;
}

:root[data-theme="light"] .dropdown a,
:root[data-theme="light"] .dropdown-menu a,
:root[data-theme="light"] .userMenu a,
:root[data-theme="light"] .accountMenu a,
:root[data-theme="light"] .profileMenu a,
:root[data-theme="light"] .headerUserMenu a,
:root[data-theme="light"] .headerDropdown a {
  color: var(--text) !important;
}

:root[data-theme="light"] .dropdown a:hover,
:root[data-theme="light"] .dropdown-menu a:hover,
:root[data-theme="light"] .userMenu a:hover,
:root[data-theme="light"] .accountMenu a:hover,
:root[data-theme="light"] .profileMenu a:hover,
:root[data-theme="light"] .headerUserMenu a:hover,
:root[data-theme="light"] .headerDropdown a:hover {
  background: rgba(222, 232, 242, .95) !important;
}


/* =========================================================
   MIDDLE DARK R5 VISUAL SEPARATION
   Das hebt auch ältere hart codierte Kategorieflächen sichtbar an.
   ========================================================= */
:root[data-theme="middle-dark"] body {
  background:
    radial-gradient(circle at 72% -10%, color-mix(in srgb, var(--category-accent) 20%, #b7d4ec), transparent 38%),
    linear-gradient(180deg, #33465a 0%, #2b3d50 46%, #243548 100%) !important;
}

:root[data-theme="middle-dark"] main,
:root[data-theme="middle-dark"] .page,
:root[data-theme="middle-dark"] .pageShell,
:root[data-theme="middle-dark"] .appShell,
:root[data-theme="middle-dark"] .content,
:root[data-theme="middle-dark"] .mainContent,
:root[data-theme="middle-dark"] .marketplace,
:root[data-theme="middle-dark"] .home,
:root[data-theme="middle-dark"] .dashboard {
  background-color: transparent !important;
}

:root[data-theme="middle-dark"] .site-header,
:root[data-theme="middle-dark"] .header,
:root[data-theme="middle-dark"] .cone-header,
:root[data-theme="middle-dark"] .globalHeader,
:root[data-theme="middle-dark"] .topbar,
:root[data-theme="middle-dark"] .categoryHeader,
:root[data-theme="middle-dark"] .realestateChrome {
  background: rgba(45, 60, 76, .96) !important;
  border-color: rgba(225, 240, 252, .28) !important;
  box-shadow: 0 10px 34px rgba(18, 30, 44, .20) !important;
}

:root[data-theme="middle-dark"] .card,
:root[data-theme="middle-dark"] .panel,
:root[data-theme="middle-dark"] .section,
:root[data-theme="middle-dark"] .dashboard-card,
:root[data-theme="middle-dark"] .market-card,
:root[data-theme="middle-dark"] .category-card,
:root[data-theme="middle-dark"] .listing-card,
:root[data-theme="middle-dark"] .account-card,
:root[data-theme="middle-dark"] .form-card,
:root[data-theme="middle-dark"] .live-card,
:root[data-theme="middle-dark"] .accountPanelCard,
:root[data-theme="middle-dark"] .categoryShell,
:root[data-theme="middle-dark"] .realestatePanel,
:root[data-theme="middle-dark"] .realestateCard,
:root[data-theme="middle-dark"] .vacationPanel,
:root[data-theme="middle-dark"] .boatsCard,
:root[data-theme="middle-dark"] .boatPanel,
:root[data-theme="middle-dark"] .friendsCard,
:root[data-theme="middle-dark"] .networkCard,
:root[data-theme="middle-dark"] .electronicsCard,
:root[data-theme="middle-dark"] .machinesCard,
:root[data-theme="middle-dark"] body:not([data-category="home"]) [class*="Card"],
:root[data-theme="middle-dark"] body:not([data-category="home"]) [class*="Panel"],
:root[data-theme="middle-dark"] body:not([data-category="home"]) [class*="Shell"],
:root[data-theme="middle-dark"] body:not([data-category="home"]) [class*="Section"],
:root[data-theme="middle-dark"] body:not([data-category="home"]) [class*="Tile"] {
  background-color: rgba(73, 91, 110, .94) !important;
  border-color: rgba(222, 236, 248, .30) !important;
  color: #f7fbff !important;
  box-shadow: 0 14px 34px rgba(18, 30, 44, .18) !important;
}

:root[data-theme="middle-dark"] .hero,
:root[data-theme="middle-dark"] .categoryHero,
:root[data-theme="middle-dark"] .marketHero,
:root[data-theme="middle-dark"] .coneHero,
:root[data-theme="middle-dark"] .realestateHero,
:root[data-theme="middle-dark"] .vacationHero,
:root[data-theme="middle-dark"] .boatsHero,
:root[data-theme="middle-dark"] body:not([data-category="home"]) [class$="Hero"] {
  background-color: #40566b !important;
  border-color: rgba(222, 236, 248, .30) !important;
}

:root[data-theme="middle-dark"] .hero::before,
:root[data-theme="middle-dark"] .categoryHero::before,
:root[data-theme="middle-dark"] .marketHero::before,
:root[data-theme="middle-dark"] .coneHero::before,
:root[data-theme="middle-dark"] .realestateHero::before,
:root[data-theme="middle-dark"] .vacationHero::before,
:root[data-theme="middle-dark"] .boatsHero::before,
:root[data-theme="middle-dark"] body:not([data-category="home"]) [class$="Hero"]::before {
  background:
    linear-gradient(90deg, rgba(43,58,75,.50), rgba(43,58,75,.30), rgba(43,58,75,.08)),
    radial-gradient(circle at 70% 8%, rgba(194,218,238,.32), transparent 45%) !important;
}

:root[data-theme="middle-dark"] input,
:root[data-theme="middle-dark"] select,
:root[data-theme="middle-dark"] textarea,
:root[data-theme="middle-dark"] .input,
:root[data-theme="middle-dark"] .form-control,
:root[data-theme="middle-dark"] .headerSearch__input,
:root[data-theme="middle-dark"] .categoryHeader__searchInput,
:root[data-theme="middle-dark"] body:not([data-category="home"]) [class*="Input"],
:root[data-theme="middle-dark"] body:not([data-category="home"]) [class*="Search"] input {
  background-color: rgba(55, 72, 90, .96) !important;
  border-color: rgba(230, 242, 252, .34) !important;
  color: #f7fbff !important;
}

:root[data-theme="middle-dark"] .btn--ghost,
:root[data-theme="middle-dark"] .button-ghost,
:root[data-theme="middle-dark"] .btn-outline,
:root[data-theme="middle-dark"] .iconCircle,
:root[data-theme="middle-dark"] .themeToggle,
:root[data-theme="middle-dark"] .langBtn,
:root[data-theme="middle-dark"] body:not([data-category="home"]) [class*="Ghost"],
:root[data-theme="middle-dark"] body:not([data-category="home"]) [class*="Chip"],
:root[data-theme="middle-dark"] body:not([data-category="home"]) [class*="Pill"] {
  background: rgba(88, 108, 128, .84) !important;
  border-color: rgba(235, 246, 255, .32) !important;
  color: #f7fbff !important;
}

:root[data-theme="middle-dark"] .dropdown,
:root[data-theme="middle-dark"] .dropdown-menu,
:root[data-theme="middle-dark"] .userMenu,
:root[data-theme="middle-dark"] .accountMenu,
:root[data-theme="middle-dark"] .profileMenu,
:root[data-theme="middle-dark"] .headerUserMenu,
:root[data-theme="middle-dark"] .headerDropdown {
  background: rgba(67, 84, 104, .98) !important;
  color: #f7fbff !important;
  border-color: rgba(222, 236, 248, .30) !important;
  box-shadow: 0 24px 60px rgba(18, 30, 44, .26) !important;
}

/* Fallback, falls einzelne alte Startseiten dunkle Vollflächen als Pseudo/Overlay setzen. */
:root[data-theme="middle-dark"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  background: rgba(98, 125, 150, .10);
  mix-blend-mode: screen;
}

/* =========================================================
   CONE THEME R6 - TRUE MIDDLE DARK SAFETY OVERRIDES
   Grund: Einige bestehende Seiten/Kategorien verwenden hart codierte
   Dunkelfarben oder später geladene CSS-Dateien. Diese Regeln sind bewusst
   stärker und wirken auch auf body[data-theme].
   ========================================================= */
:root[data-theme="middle-dark"],
html[data-theme="middle-dark"],
body[data-theme="middle-dark"] {
  --bg: #516579;
  --bg-soft: #617589;
  --surface: rgba(97, 115, 133, .94);
  --surface-2: rgba(111, 130, 148, .93);
  --surface-3: rgba(126, 145, 162, .91);
  --border: rgba(238, 246, 255, .34);
  --border-strong: rgba(255, 255, 255, .54);
  --text: #f9fcff;
  --text-soft: #e4edf6;
  --text-muted: #c5d2df;
  --input-bg: rgba(83, 101, 119, .93);
  --input-border: rgba(255, 255, 255, .38);
  --header-bg: rgba(54, 69, 84, .96);
  --header-border: rgba(255, 255, 255, .30);
  --hero-overlay: linear-gradient(90deg, rgba(66,82,99,.38), rgba(66,82,99,.22), rgba(66,82,99,.06)), radial-gradient(circle at 70% 8%, rgba(214,230,244,.36), transparent 46%);
}

html[data-theme="middle-dark"] body,
body[data-theme="middle-dark"] {
  background:
    radial-gradient(circle at 72% -10%, color-mix(in srgb, var(--category-accent) 18%, #d8e8f6), transparent 38%),
    linear-gradient(180deg, #516579 0%, #465b70 45%, #3f5368 100%) !important;
}

html[data-theme="middle-dark"] :is(main, .page, .pageShell, .appShell, .content, .mainContent, .marketplace, .home, .dashboard, .marketplace-shell, .homeShell, .homeV2, .marketHome),
body[data-theme="middle-dark"] :is(main, .page, .pageShell, .appShell, .content, .mainContent, .marketplace, .home, .dashboard, .marketplace-shell, .homeShell, .homeV2, .marketHome) {
  background: transparent !important;
}

html[data-theme="middle-dark"] :is(.site-header,.header,.cone-header,.globalHeader,.topbar,.categoryHeader,.realestateChrome),
body[data-theme="middle-dark"] :is(.site-header,.header,.cone-header,.globalHeader,.topbar,.categoryHeader,.realestateChrome) {
  background: rgba(54, 69, 84, .96) !important;
  border-color: rgba(255, 255, 255, .30) !important;
  box-shadow: 0 10px 34px rgba(22, 34, 48, .18) !important;
}

html[data-theme="middle-dark"] body:not([data-category="home"]) :is(.card,.panel,.section,.dashboard-card,.market-card,.category-card,.listing-card,.account-card,.form-card,.live-card,.accountPanelCard,.categoryShell,.realestatePanel,.realestateCard,.vacationPanel,.boatsCard,.boatPanel,.friendsCard,.networkCard,.electronicsCard,.machinesCard,[class*="Card"],[class*="Panel"],[class*="Shell"],[class*="Section"],[class*="Tile"]),
body[data-theme="middle-dark"]:not([data-category="home"]) :is(.card,.panel,.section,.dashboard-card,.market-card,.category-card,.listing-card,.account-card,.form-card,.live-card,.accountPanelCard,.categoryShell,.realestatePanel,.realestateCard,.vacationPanel,.boatsCard,.boatPanel,.friendsCard,.networkCard,.electronicsCard,.machinesCard,[class*="Card"],[class*="Panel"],[class*="Shell"],[class*="Section"],[class*="Tile"]) {
  background-color: rgba(49, 65, 82, .94) !important;
  border-color: rgba(238, 246, 255, .30) !important;
  color: #f9fcff !important;
  box-shadow: 0 12px 30px rgba(20, 34, 49, .16) !important;
}

html[data-theme="middle-dark"] body:not([data-category="home"]) :is(.hero,.categoryHero,.marketHero,.coneHero,.realestateHero,.vacationHero,.boatsHero,[class$="Hero"]),
body[data-theme="middle-dark"]:not([data-category="home"]) :is(.hero,.categoryHero,.marketHero,.coneHero,.realestateHero,.vacationHero,.boatsHero,[class$="Hero"]) {
  background-color: #42576b !important;
  border-color: rgba(238, 246, 255, .32) !important;
  filter: none;
}

html[data-theme="middle-dark"] body:not([data-category="home"]) :is(.hero,.categoryHero,.marketHero,.coneHero,.realestateHero,.vacationHero,.boatsHero,[class$="Hero"])::before,
body[data-theme="middle-dark"]:not([data-category="home"]) :is(.hero,.categoryHero,.marketHero,.coneHero,.realestateHero,.vacationHero,.boatsHero,[class$="Hero"])::before {
  background: var(--hero-overlay) !important;
}

html[data-theme="middle-dark"] body:not([data-category="home"]) :is(input,select,textarea,.input,.form-control,.headerSearch__input,.categoryHeader__searchInput,[class*="Input"],[class*="Search"] input),
body[data-theme="middle-dark"]:not([data-category="home"]) :is(input,select,textarea,.input,.form-control,.headerSearch__input,.categoryHeader__searchInput,[class*="Input"],[class*="Search"] input) {
  background-color: rgba(83, 101, 119, .94) !important;
  border-color: rgba(255, 255, 255, .38) !important;
  color: #f9fcff !important;
}

html[data-theme="middle-dark"] body:not([data-category="home"]) :is(.btn--ghost,.button-ghost,.btn-outline,.iconCircle,.themeToggle,.langBtn,[class*="ghost"],[class*="Ghost"]),
body[data-theme="middle-dark"]:not([data-category="home"]) :is(.btn--ghost,.button-ghost,.btn-outline,.iconCircle,.themeToggle,.langBtn,[class*="ghost"],[class*="Ghost"]) {
  background: rgba(111, 130, 148, .70) !important;
  border-color: rgba(255, 255, 255, .34) !important;
  color: #f9fcff !important;
}

/* Homepage owns its compact app-shell palette; avoid stacking legacy lift layers on it. */
:root[data-theme="middle-dark"] body[data-category="home"]::after,
html[data-theme="middle-dark"] body[data-category="home"] #coneThemeMiddleLift {
  display: none !important;
}