/* ==========================================================================
   Dark Mode Toggle for SMF 2.1 - v1.5.5 (Chinertown)
   Modes: light (stock look) and dark.
   Dark rules use html[data-dmt-dark]; colors come from the palette block.
   ========================================================================== */

/* ---------- Toggle button (both modes) ---------- */
#dmt_toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	min-height: 0;
	margin: 4px 0 4px 10px;
	padding: 0;
	border: 1px solid #c5ccd3;
	border-radius: 50%;
	background: #fff;
	color: #335977;
	cursor: pointer;
	line-height: 1;
	box-shadow: none;
}
#dmt_toggle:hover, #dmt_toggle:focus {
	border-color: #335977;
	background: #f0f4f7;
}
#dmt_toggle svg {
	display: block;
	width: 16px;
	height: 16px;
}
/* Phones: SMF's top bar goes full-width, so keep the button off the screen edge */
@media (max-width: 720px) {
	#dmt_toggle {
		margin-right: 10px;
	}
}

/* ---------- Palette: Dark ---------- */
html[data-dmt-dark] {
	color-scheme: dark;
}
html[data-dmt="dark"] {
	/* Approved palette */
	--dm-bg: #171D24;          /* page background */
	--dm-surface-2: #222B35;   /* posts, cards, boxes */
	--dm-surface-3: #2D3945;   /* elevated: bars, buttons, menus */
	--dm-text: #D8DDE1;        /* primary text */
	--dm-secondary: #A8B2BB;   /* secondary text */
	--dm-muted: #8795A2;       /* muted text */
	--dm-link: #8FB5D4;
	--dm-gold: #C5A16A;
	--dm-orange: #D58C47;
	/* Derived from the palette */
	--dm-surface: #1B222A;     /* main panel, between page and cards */
	--dm-surface-alt: #26303B; /* alternating rows */
	--dm-hover: #36434F;
	--dm-border: #34404C;
	--dm-border-soft: #2A343E;
	--dm-strong: #EDF0F2;      /* headings */
	--dm-orange-dark: #A86A33;
	--dm-on-accent: #171D24;   /* text on orange */
	--dm-navy: #3A4F66;        /* active buttons and chips */
	--dm-navy-dark: #2C3D50;
	--dm-input: #1B222A;
	--dm-quote: #2A3440;
	--dm-quote-alt: #303C49;
	--dm-code: #151A20;
	--dm-footer: #12171D;
	--dm-cat-bg: #2D3945;
	--dm-body-bg: linear-gradient(to bottom, #1F2730 0, #1B222A 200px, #171D24 584px) no-repeat #171D24;
	background: var(--dm-bg);
}

/* ---------- Base ---------- */
html[data-dmt-dark] body {
	background: var(--dm-body-bg);
	color: var(--dm-text);
}
html[data-dmt-dark] ::selection {
	background: var(--dm-navy);
	color: #fff;
}
html[data-dmt-dark] a, html[data-dmt-dark] a:visited {
	color: var(--dm-link);
}
html[data-dmt-dark] a:hover {
	color: var(--dm-gold);
}
html[data-dmt-dark] h1, html[data-dmt-dark] h2, html[data-dmt-dark] h3,
html[data-dmt-dark] h4, html[data-dmt-dark] h5, html[data-dmt-dark] h6,
html[data-dmt-dark] strong, html[data-dmt-dark] .strong {
	color: var(--dm-strong);
}
html[data-dmt-dark] hr {
	background: var(--dm-border);
	border-color: var(--dm-border);
	box-shadow: none;
}
html[data-dmt-dark] fieldset {
	border-color: var(--dm-border);
}
html[data-dmt-dark] fieldset legend {
	color: var(--dm-muted);
}

/* ---------- Frame: top bar, header area, content, footer ---------- */
html[data-dmt-dark] #top_section {
	background: var(--dm-surface-2);
	border-bottom-color: var(--dm-border);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
html[data-dmt-dark] #wrapper {
	background: var(--dm-surface);
	border-color: var(--dm-border-soft);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
html[data-dmt-dark] #inner_section {
	background: var(--dm-surface-2);
}
html[data-dmt-dark] #inner_wrap {
	border-bottom-color: var(--dm-border);
}
html[data-dmt-dark] #inner_wrap .news, html[data-dmt-dark] #inner_wrap .news p {
	color: var(--dm-text);
}
html[data-dmt-dark] #content_section {
	background: var(--dm-surface);
}
html[data-dmt-dark] #footer {
	background: var(--dm-footer);
}
html[data-dmt-dark] #footer li, html[data-dmt-dark] #footer p {
	color: var(--dm-muted);
}
html[data-dmt-dark] #footer a {
	color: var(--dm-link);
}

/* Linktree */
html[data-dmt-dark] .navigate_section ul {
	background: var(--dm-surface-2);
	border-color: var(--dm-border);
}
html[data-dmt-dark] .navigate_section ul li {
	color: var(--dm-text);
	text-shadow: none;
}
html[data-dmt-dark] .generic_bar span, html[data-dmt-dark] .progress_bar span {
	text-shadow: none;
}
html[data-dmt-dark] .navigate_section ul li .dividers {
	color: var(--dm-muted);
}

/* ---------- Menus and dropdowns ---------- */
html[data-dmt-dark] .dropmenu li a, html[data-dmt-dark] #top_info > li > a {
	color: var(--dm-text);
}
html[data-dmt-dark] .dropmenu li strong {
	color: var(--dm-strong);
}
html[data-dmt-dark] .dropmenu > li > a:hover, html[data-dmt-dark] .dropmenu > li:hover > a,
html[data-dmt-dark] #top_info > li:hover > a, html[data-dmt-dark] #top_info > li > a:focus,
html[data-dmt-dark] #top_info > li > a.open {
	background: var(--dm-hover);
	border-color: var(--dm-border);
	color: var(--dm-strong);
}
/* Active tab stays orange like light mode */
html[data-dmt-dark] .dropmenu a.active, html[data-dmt-dark] #top_info a.active,
html[data-dmt-dark] .dropmenu > li > a.active, html[data-dmt-dark] .dropmenu > li > a.active:hover {
	background: var(--dm-gold);
	border-color: var(--dm-gold);
	box-shadow: none;
	color: var(--dm-on-accent);
	text-shadow: none;
}
html[data-dmt-dark] .dropmenu li a.active:hover, html[data-dmt-dark] .dropmenu li:hover a.active {
	background: #D2B27F;
	border-color: #D2B27F;
	color: var(--dm-on-accent);
}
html[data-dmt-dark] .dropmenu li ul, html[data-dmt-dark] .top_menu,
html[data-dmt-dark] .quickbuttons li ul, html[data-dmt-dark] .post_options ul,
html[data-dmt-dark] .popup_window {
	background: var(--dm-surface-2);
	border-color: var(--dm-border);
	box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.6);
	color: var(--dm-text);
}
html[data-dmt-dark] .dropmenu li li:hover, html[data-dmt-dark] .dropmenu li li:hover > a,
html[data-dmt-dark] .dropmenu li li a:focus, html[data-dmt-dark] .dropmenu li li a:hover,
html[data-dmt-dark] .quickbuttons li ul li a:hover, html[data-dmt-dark] .quickbuttons ul li a:focus,
html[data-dmt-dark] .post_options ul a:hover, html[data-dmt-dark] .post_options ul a:focus,
html[data-dmt-dark] .notify_dropdown a:hover, html[data-dmt-dark] .notify_dropdown a:focus {
	background: var(--dm-hover);
	border-color: var(--dm-border);
	color: var(--dm-strong);
}
html[data-dmt-dark] .dropmenu li:hover li a, html[data-dmt-dark] .dropmenu li li a {
	background: none;
	color: var(--dm-link);
}
html[data-dmt-dark] .amt {
	background: var(--dm-navy);
}
/* Alerts / PM dropdown items */
html[data-dmt-dark] .unread_notify:hover {
	background: var(--dm-hover);
}
html[data-dmt-dark] .unread_notify, html[data-dmt-dark] .unread_notify:last-child {
	border-color: var(--dm-border-soft);
}

/* ---------- Bars ---------- */
html[data-dmt-dark] div.cat_bar {
	background: var(--dm-cat-bg);
	border-bottom-color: var(--dm-border);
	box-shadow: none;
}
html[data-dmt-dark] .cat_bar, html[data-dmt-dark] .cat_bar a,
html[data-dmt-dark] h3.catbg, html[data-dmt-dark] h3.catbg a, html[data-dmt-dark] .cat_bar strong {
	color: var(--dm-strong);
	text-shadow: none;
}
html[data-dmt-dark] .title_bar {
	background: var(--dm-surface-3);
	border-color: var(--dm-border);
	border-top-color: var(--dm-gold);
	border-bottom-color: var(--dm-gold);
	color: var(--dm-text);
}
html[data-dmt-dark] h3.titlebg, html[data-dmt-dark] h4.titlebg, html[data-dmt-dark] .titlebg,
html[data-dmt-dark] h3.subbg, html[data-dmt-dark] h4.subbg, html[data-dmt-dark] .subbg,
html[data-dmt-dark] .titlebg a, html[data-dmt-dark] .subbg a {
	color: var(--dm-strong);
}
html[data-dmt-dark] .sub_bar {
	border-bottom-color: var(--dm-border);
	box-shadow: 0 -1px 0 var(--dm-border) inset;
}

/* ---------- Content boxes ---------- */
html[data-dmt-dark] .generic_list_wrapper, html[data-dmt-dark] .windowbg,
html[data-dmt-dark] .windowbg:nth-of-type(odd), html[data-dmt-dark] .bg.odd {
	background: var(--dm-surface-2);
	border-color: var(--dm-border);
	box-shadow: none;
	color: var(--dm-text);
}
html[data-dmt-dark] .windowbg:nth-of-type(even), html[data-dmt-dark] .bg.even {
	background: var(--dm-surface-alt);
}
html[data-dmt-dark] #topic_container .windowbg {
	border-color: var(--dm-border);
}
html[data-dmt-dark] tr.windowbg:hover {
	background: var(--dm-hover);
}
html[data-dmt-dark] .windowbg:target {
	background: #33382B;
}
html[data-dmt-dark] .windowbg.sticky {
	background: #283A4C;
}
html[data-dmt-dark] .windowbg.locked {
	background: #1E252D;
}
html[data-dmt-dark] .windowbg.sticky.locked {
	background: #2D2A28;
}
html[data-dmt-dark] .windowbg.approvetopic {
	background: #45301F;
}
html[data-dmt-dark] .windowbg.approvepost, html[data-dmt-dark] .approvebg,
html[data-dmt-dark] .approvebg2 {
	background: #3D2828;
	color: var(--dm-text);
}
html[data-dmt-dark] .roundframe, html[data-dmt-dark] .information, html[data-dmt-dark] .descbox {
	background: var(--dm-surface-2);
	border-color: var(--dm-border);
	box-shadow: none;
	color: var(--dm-text);
}
html[data-dmt-dark] .up_contain, html[data-dmt-dark] .popup_content {
	background: var(--dm-surface-2);
	border-color: var(--dm-border);
	box-shadow: none;
	color: var(--dm-text);
}
html[data-dmt-dark] .popup_container {
	background: rgba(0, 0, 0, 0.6);
}
html[data-dmt-dark] .popup_heading {
	color: var(--dm-gold);
}

/* Notice / error / success boxes */
html[data-dmt-dark] .noticebox {
	background: #3a3220;
	border-color: #8a6d2a;
	color: #f2dfb0;
}
html[data-dmt-dark] .errorbox {
	background: #3d1f1f;
	border-color: #8a3a3a;
	color: #f4c7c7;
}
html[data-dmt-dark] .infobox {
	background: #1f3a28;
	border-color: #3d7a52;
	color: #c9ecd4;
}

/* ---------- Board index & info center ---------- */
html[data-dmt-dark] .boardindex_table .board_stats p {
	border-color: var(--dm-border);
}
html[data-dmt-dark] .children, html[data-dmt-dark] #info_center .sub_bar,
html[data-dmt-dark] #ic_recentposts td, html[data-dmt-dark] #topic_icons .information,
html[data-dmt-dark] #messageindex .information {
	border-color: var(--dm-border);
}
html[data-dmt-dark] .up_contain .lastpost, html[data-dmt-dark] #mobile_action .notify_dropdown a {
	border-color: var(--dm-border);
}
html[data-dmt-dark] .info .subject {
	color: var(--dm-gold);
}
html[data-dmt-dark] .board_description, html[data-dmt-dark] #ic_recentposts .recenttime strong,
html[data-dmt-dark] #display_head p, html[data-dmt-dark] #inner_wrap .news p {
	color: var(--dm-secondary);
}

/* ---------- Topics & posts ---------- */
html[data-dmt-dark] .poster h4, html[data-dmt-dark] .poster h4 a,
html[data-dmt-dark] .poster li.poster_online a {
	color: var(--dm-orange);
}
html[data-dmt-dark] .poster h4 a:hover {
	color: var(--dm-gold);
}
html[data-dmt-dark] .keyinfo .postinfo a, html[data-dmt-dark] .keyinfo .postinfo a strong,
html[data-dmt-dark] .page_number {
	color: var(--dm-gold);
}
html[data-dmt-dark] .keyinfo .postinfo .modified, html[data-dmt-dark] .subject_title a {
	color: var(--dm-strong);
}
html[data-dmt-dark] .inner, html[data-dmt-dark] .signature, html[data-dmt-dark] .attachments,
html[data-dmt-dark] .under_message, html[data-dmt-dark] .custom_fields_above_signature,
html[data-dmt-dark] .custom_fields_below_signature, html[data-dmt-dark] .list_posts {
	border-top-color: var(--dm-border);
	box-shadow: none;
}
html[data-dmt-dark] .current_page {
	color: var(--dm-gold);
}

/* Quotes & code */
html[data-dmt-dark] blockquote, html[data-dmt-dark] .bbc_standard_quote {
	background-color: var(--dm-quote);
	border-color: var(--dm-border);
	color: var(--dm-text);
}
html[data-dmt-dark] .bbc_alternate_quote {
	background-color: var(--dm-quote-alt);
}
html[data-dmt-dark] blockquote cite::before {
	color: var(--dm-muted);
}
html[data-dmt-dark] .bbc_code, html[data-dmt-dark] .phpcode, html[data-dmt-dark] pre {
	background: var(--dm-code);
	border-color: var(--dm-border);
	color: var(--dm-text);
}
html[data-dmt-dark] .codeheader, html[data-dmt-dark] .quoteheader {
	color: var(--dm-muted);
}

/* ---------- Buttons ---------- */
html[data-dmt-dark] .button, html[data-dmt-dark] .quickbuttons > li,
html[data-dmt-dark] .quickbuttons > li > a, html[data-dmt-dark] .inline_mod_check {
	background: var(--dm-surface-3);
	border-color: var(--dm-border);
	box-shadow: none;
	color: var(--dm-text);
}
html[data-dmt-dark] .pagesection .button {
	color: var(--dm-link);
}
html[data-dmt-dark] .button:hover, html[data-dmt-dark] .button:focus,
html[data-dmt-dark] #search_form .button:hover, html[data-dmt-dark] .quickbuttons li:hover,
html[data-dmt-dark] .quickbuttons > li:hover > a, html[data-dmt-dark] .quickbuttons > li > a:focus {
	background: var(--dm-hover);
	border-color: #4A5B6C;
	color: var(--dm-gold);
}
html[data-dmt-dark] .button.active {
	background: var(--dm-navy);
	border-color: #4F6880;
	color: #fff;
}
html[data-dmt-dark] .button.active:hover, html[data-dmt-dark] .button.active:focus {
	background: #46607A;
	color: var(--dm-gold);
}
html[data-dmt-dark] .button.disabled, html[data-dmt-dark] .button[disabled]:hover,
html[data-dmt-dark] input[disabled], html[data-dmt-dark] textarea[disabled], html[data-dmt-dark] select[disabled] {
	background: var(--dm-surface);
	border-color: var(--dm-border-soft);
	color: #66727E;
}

/* ---------- Form fields ---------- */
/* Plain form fields and buttons. Wrapped in :where() so these stay low-priority
   defaults: they beat SMF's bare input/button rules, but anything with its own
   class styling (slider pins, arrows, mod buttons) keeps its own look. */
:where(html[data-dmt-dark]) input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="image"])),
:where(html[data-dmt-dark]) button, :where(html[data-dmt-dark]) select, :where(html[data-dmt-dark]) textarea {
	background: var(--dm-input);
	border-color: var(--dm-border);
	color: var(--dm-text);
}
:where(html[data-dmt-dark]) input:hover, :where(html[data-dmt-dark]) select:hover,
:where(html[data-dmt-dark]) button:hover {
	border-color: #4F6880;
}
:where(html[data-dmt-dark]) textarea:hover {
	background: var(--dm-input);
	border-color: #4F6880;
}
:where(html[data-dmt-dark]) input:focus, :where(html[data-dmt-dark]) textarea:focus,
:where(html[data-dmt-dark]) select:focus, :where(html[data-dmt-dark]) button:focus {
	background: var(--dm-surface-2);
	border-color: var(--dm-link);
}
html[data-dmt-dark] ::placeholder {
	color: var(--dm-muted);
}
html[data-dmt-dark] .valid_input {
	background: #16301f;
}
html[data-dmt-dark] .invalid_input {
	background: #3a1d1d;
}
/* Member name autosuggest + @mentions */
html[data-dmt-dark] .auto_suggest_div, html[data-dmt-dark] .atwho-view {
	background: var(--dm-surface-2);
	border-color: var(--dm-border);
	color: var(--dm-text);
}
html[data-dmt-dark] .auto_suggest_item {
	background: var(--dm-surface-3);
	color: var(--dm-text);
}
html[data-dmt-dark] .auto_suggest_item_hover, html[data-dmt-dark] .atwho-view .cur {
	background: var(--dm-navy);
	color: #fff;
}
html[data-dmt-dark] .atwho-view ul li {
	border-bottom-color: var(--dm-border);
}

/* ---------- Editor (SCEditor) ---------- */
html[data-dmt-dark] .sceditor-container {
	background: var(--dm-input);
	border-color: var(--dm-border);
	color: var(--dm-text);
}
html[data-dmt-dark] .sceditor-container textarea, html[data-dmt-dark] .sceditor-container textarea:focus {
	background: var(--dm-input);
	color: var(--dm-text);
}
html[data-dmt-dark] .sceditor-container iframe {
	background: var(--dm-input);
}
/* Toolbar stays light-ish: the icon sprite is dark and would vanish on navy. */
html[data-dmt-dark] div.sceditor-toolbar {
	background: #b9c6d2;
	border-color: var(--dm-border);
}
html[data-dmt-dark] div.sceditor-group {
	background: #d3dce4;
	border-color: #9aabbb;
}
html[data-dmt-dark] .sceditor-button.active, html[data-dmt-dark] .sceditor-button:active,
html[data-dmt-dark] .sceditor-button:hover {
	background: #f0f4f7;
}
html[data-dmt-dark] div.sceditor-dropdown, html[data-dmt-dark] div.sceditor-smileyPopup {
	background: var(--dm-surface-2);
	border-color: var(--dm-border);
	color: var(--dm-text);
}
html[data-dmt-dark] div.sceditor-dropdown a:link, html[data-dmt-dark] div.sceditor-dropdown label,
html[data-dmt-dark] .sceditor-format a {
	color: var(--dm-text);
}
html[data-dmt-dark] .sceditor-dropdown a:hover {
	background: var(--dm-hover);
}
html[data-dmt-dark] #post_draft_options {
	background: var(--dm-surface-2);
	border-color: var(--dm-border);
}
html[data-dmt-dark] #post_draft_options .settings dd, html[data-dmt-dark] #post_draft_options .settings dt {
	border-top-color: var(--dm-border-soft);
}

/* ---------- Tables, settings lists, profile, PMs ---------- */
html[data-dmt-dark] table.table_grid td, html[data-dmt-dark] .generic_list_wrapper table.table_grid {
	border-color: var(--dm-border);
}
html[data-dmt-dark] #detailedinfo dl, html[data-dmt-dark] #tracking dl,
html[data-dmt-dark] .boardslist a, html[data-dmt-dark] .backtrace:not(:last-child) {
	border-color: var(--dm-border);
}
html[data-dmt-dark] #detailedinfo dt, html[data-dmt-dark] #tracking dt,
html[data-dmt-dark] dl.addrules dt.floatleft, html[data-dmt-dark] .counter {
	color: var(--dm-muted);
}
html[data-dmt-dark] .activity_stats li span {
	background: var(--dm-surface-3);
	border-color: var(--dm-border);
}
html[data-dmt-dark] #pick_theme .selected {
	background: var(--dm-hover);
}
html[data-dmt-dark] #personal_messages .capacity_bar {
	background: var(--dm-surface-3);
	border-color: var(--dm-border);
}
html[data-dmt-dark] .unread_pm {
	background: #1f3a28;
}
html[data-dmt-dark] .tooltip {
	background: var(--dm-surface-3);
	border-color: var(--dm-border);
	color: var(--dm-text);
}
html[data-dmt-dark] #helpmain {
	border-color: var(--dm-border);
}
/* Collapse/expand buttons: plain muted chevrons instead of shiny squares */
html[data-dmt-dark] .toggle_up::before, html[data-dmt-dark] .toggle_down::before {
	width: 7px;
	height: 7px;
	margin: 0 10px;
	background: none;
	border: solid var(--dm-muted);
	border-width: 0 2px 2px 0;
	border-radius: 0;
	box-shadow: none;
	transform: rotate(225deg) translate(-2px, -2px);
	transition: border-color 0.2s;
}
html[data-dmt-dark] .toggle_down::before {
	transform: rotate(45deg) translate(-2px, -2px);
}
html[data-dmt-dark] .toggle_up:hover::before, html[data-dmt-dark] .toggle_down:hover::before {
	background: none;
	border-color: var(--dm-gold);
	box-shadow: none;
}
html[data-dmt-dark] .tfacode {
	background: var(--dm-surface-3);
}
html[data-dmt-dark] #ajax_in_progress {
	background: var(--dm-surface-2);
	color: var(--dm-orange);
}

/* ---------- Dark toggle button ---------- */
html[data-dmt-dark] #dmt_toggle {
	background: var(--dm-surface-3);
	border-color: var(--dm-border);
	color: var(--dm-gold);
}
html[data-dmt-dark] #dmt_toggle:hover, html[data-dmt-dark] #dmt_toggle:focus {
	background: var(--dm-hover);
	border-color: var(--dm-gold);
}

/* ---------- Chinertown customizations (beat the ID-based rules in index.css) ---------- */
html[data-dmt-dark] #inner_section #siteslogan {
	color: var(--dm-secondary);
}
html[data-dmt-dark] body:has(#messageindex) #display_head h2,
html[data-dmt-dark] body:has(#forumposts) #display_head h2 {
	color: var(--dm-strong);
}
html[data-dmt-dark] .boardindex_table .info a.subject {
	color: var(--dm-gold);
}
html[data-dmt-dark] .boardindex_table .info a.subject:hover {
	color: var(--dm-strong);
}

/* ---------- Dark mode board index layout ---------- */
/* Board names in primary text, gold on hover: gold stays an accent */
html[data-dmt="dark"] .boardindex_table .info a.subject {
	color: var(--dm-text);
}
html[data-dmt="dark"] .boardindex_table .info a.subject:hover {
	color: var(--dm-gold);
}
/* Gold rule under each category bar */
html[data-dmt="dark"] #boardindex_table div.cat_bar {
	border-bottom: 2px solid var(--dm-gold);
	border-radius: 6px 6px 0 0;
}
/* One panel per category with thin dividers instead of separate boxes */
html[data-dmt="dark"] #boardindex_table .up_contain {
	margin: 0;
	border-width: 0 1px 1px 1px;
	border-color: var(--dm-border-soft);
	border-radius: 0;
}
html[data-dmt="dark"] #boardindex_table .up_contain:last-child {
	border-bottom-color: var(--dm-border);
	border-radius: 0 0 6px 6px;
}
html[data-dmt="dark"] #boardindex_table .up_contain:hover {
	background: var(--dm-surface-alt);
}


/* ==========================================================================
   POST A BUILD: spec cards, photo slider, Builds gallery
   The card mod uses its own color variables; here they're pointed at the
   dark palette, so the cards follow dark mode automatically.
   ========================================================================== */
html[data-dmt-dark] .pab_card, html[data-dmt-dark] #pab_gallery {
	--pab-navy: var(--dm-strong);
	--pab-orange: var(--dm-orange);
	--pab-orange-text: var(--dm-gold);
	--pab-gold: #E0BE86;   /* featured builds: brighter gold so they still stand out */
	--pab-blue: var(--dm-surface-2);
	--pab-blue-deep: var(--dm-bg);
	--pab-rule: var(--dm-border);
	--pab-rule-soft: var(--dm-border-soft);
	--pab-label: var(--dm-muted);
	--pab-muted: var(--dm-muted);
	--pab-ink: var(--dm-text);
}
html[data-dmt-dark] .pabs_wrap {
	--pabs-bg: var(--dm-bg);
	--pabs-muted: var(--dm-muted);
	--pabs-focus: var(--dm-orange);
	--pabs-pin: var(--dm-orange);
	--pabs-pin-on: var(--dm-navy);
	--pabs-pin-ring: var(--dm-gold);
	--pabs-rule: var(--dm-border);
	--pabs-note-on: var(--dm-hover);
	--pabs-text: var(--dm-text);
	--pabs-title: var(--dm-strong);
}
/* Full-screen slider stays pure black in every mode */
html[data-dmt-dark] .pabs_wrap.pabs_full {
	--pabs-bg: #000;
	--pabs-muted: #d6dde5;
}

/* Card edges and gallery lines in gold (spec icons and likes keep the orange) */
html[data-dmt-dark] .pab_card, html[data-dmt-dark] .pab_gcard, html[data-dmt-dark] .pab_guest_banner {
	border-top-color: var(--dm-gold);
}
html[data-dmt-dark] .pab_gheading {
	border-bottom-color: var(--dm-gold);
}
/* Featured cards keep their full brighter-gold frame */
html[data-dmt-dark] .pab_gcard.pab_gfeatured {
	border-color: var(--pab-gold);
}

/* Spots the card mod hardcodes white/navy */
html[data-dmt-dark] .pab_head .pab_type {
	background: var(--dm-surface-3);
}
html[data-dmt-dark] .pabs_notes_btn {
	border-color: var(--dm-border);
	background: var(--dm-surface-3);
}
html[data-dmt-dark] .pabs_notes_btn:hover, html[data-dmt-dark] .pabs_notes_btn:focus {
	background: var(--dm-hover);
}
html[data-dmt-dark] .pabs_notes_btn.pabs_notes_btn_on, html[data-dmt-dark] .pabs_notes_btn.pabs_notes_btn_on:hover {
	border-color: var(--dm-border);
	background: var(--dm-navy);
}

/* Gallery */
html[data-dmt-dark] .pab_search {
	border-color: var(--dm-border);
}
html[data-dmt-dark] #pab_gallery .pab_search input[type="search"] {
	background: transparent;
	border-color: transparent;
}
html[data-dmt-dark] .pab_chip {
	border-color: var(--dm-border);
	background: var(--dm-surface-3);
}
html[data-dmt-dark] .pab_chip:hover {
	background: var(--dm-hover);
}
html[data-dmt-dark] .pab_chip_on, html[data-dmt-dark] .pab_chip_on:hover {
	background: var(--dm-navy);
	border-color: #4F6880;
}
html[data-dmt-dark] .pab_blur_note {
	background: var(--dm-navy);
}
html[data-dmt-dark] .pab_gthumb .pab_type {
	background: rgba(23, 29, 36, 0.92);
}
html[data-dmt-dark] .pab_gcard.pab_gfeatured {
	background: #2B2A24;
}
html[data-dmt-dark] .pab_gfeatured .pab_gspec dt, html[data-dmt-dark] .pab_gfeatured .pab_gfoot {
	border-color: #5A4E36;
}
html[data-dmt-dark] .pab_gfeatured_badge {
	color: #1a1a1a;
}

/* Post form (Post a Build fields and the photo-notes editor) */
html[data-dmt-dark] .pab_form_heading {
	color: var(--dm-strong);
}
html[data-dmt-dark] #pabs_option .pabs_hint, html[data-dmt-dark] .pabs_np p {
	color: var(--dm-muted);
}
html[data-dmt-dark] .pabs_np {
	border-color: var(--dm-border);
	background: var(--dm-surface-2);
}
html[data-dmt-dark] .pabs_np_thumb {
	border-color: var(--dm-border);
	background: var(--dm-surface-3);
}
html[data-dmt-dark] .pabs_np_thumb.pabs_np_thumb_on {
	border-color: var(--dm-orange);
}
html[data-dmt-dark] .pabs_np_del {
	border-color: var(--dm-border);
	background: var(--dm-surface-3);
	color: var(--dm-muted);
}

/* The hex icon is a navy image file: flip it light (keeps the gold dot) */
html[data-dmt-dark] img.pab_icon, html[data-dmt-dark] img.pab_gheading_icon,
html[data-dmt-dark] img.pab_gthumb_icon, html[data-dmt-dark] .main_icons.pab_builds::before {
	filter: invert(1) hue-rotate(180deg) brightness(1.05);
}

/* ==========================================================================
   PHOTO SLIDER mod (phs_): same treatment as the build-card slider
   ========================================================================== */
html[data-dmt-dark] .phs_wrap {
	--phs-bg: var(--dm-bg);
	--phs-muted: var(--dm-muted);
	--phs-focus: var(--dm-orange);
	--phs-pin: var(--dm-orange);
	--phs-pin-on: var(--dm-navy);
	--phs-pin-ring: var(--dm-gold);
	--phs-rule: var(--dm-border);
	--phs-note-on: var(--dm-hover);
	--phs-text: var(--dm-text);
	--phs-title: var(--dm-strong);
}
/* Full-screen view stays pure black */
html[data-dmt-dark] .phs_wrap.phs_full {
	--phs-bg: #000;
	--phs-muted: #d6dde5;
}
html[data-dmt-dark] .phs_notes_btn {
	border-color: var(--dm-border);
	background: var(--dm-surface-3);
}
html[data-dmt-dark] .phs_notes_btn:hover, html[data-dmt-dark] .phs_notes_btn:focus {
	background: var(--dm-hover);
}
html[data-dmt-dark] .phs_notes_btn.phs_notes_btn_on, html[data-dmt-dark] .phs_notes_btn.phs_notes_btn_on:hover {
	border-color: var(--dm-border);
	background: var(--dm-navy);
}
/* Post form: photo-notes editor */
html[data-dmt-dark] #phs_option .phs_hint, html[data-dmt-dark] .phs_np p {
	color: var(--dm-muted);
}
html[data-dmt-dark] .phs_np {
	border-color: var(--dm-border);
	background: var(--dm-surface-2);
}
html[data-dmt-dark] .phs_np_thumb {
	border-color: var(--dm-border);
	background: var(--dm-surface-3);
}
html[data-dmt-dark] .phs_np_thumb.phs_np_thumb_on {
	border-color: var(--dm-orange);
}
html[data-dmt-dark] .phs_np_del {
	border-color: var(--dm-border);
	background: var(--dm-surface-3);
	color: var(--dm-muted);
}

/* ==========================================================================
   PHONE MENU BUTTON (layout lives in index.css; dark mode only recolors it)
   Gold outline + gold icon. SMF's menu.svg is a dark image, so it's used as a
   mask and filled with gold.
   ========================================================================== */
html[data-dmt-dark] #inner_section a.mobile_user_menu {
	border-color: var(--dm-gold);
	color: var(--dm-gold);
}
html[data-dmt-dark] #inner_section a.mobile_user_menu .menu_icon {
	background: var(--dm-gold);
	-webkit-mask: url(../images/icons/menu.svg) no-repeat center / 24px 24px;
	mask: url(../images/icons/menu.svg) no-repeat center / 24px 24px;
}