/* ==========================================================
   SIMANTEPOL - Lapisan tema terang/gelap global.
   Semua nilai didefinisikan sebagai token (--spt-*) lalu
   dipakai lewat var(); default terang mengikuti palet
   konsep-B, gelap memakai turunan hijau hutan Simantepol.
   Dimuat terakhir di setiap halaman.
   ========================================================== */

/* ---------- Token palet ---------- */
:root {
	color-scheme: light;

	--spt-bg: #F8FAF9;
	--spt-surface: #FFFFFF;
	--spt-surface-2: #E6F4F1;
	--spt-tint: #E6F4F1;
	--spt-ink: #1F2933;
	--spt-text-2: #52616B;
	--spt-muted: #66757F;
	--spt-line: #D9E2E0;
	--spt-line-2: #D9E2E0;
	--spt-rule-strong: #1F2933;
	--spt-header: #FFFFFF;
	--spt-footer: #F8FAF9;

	--spt-green: #0F7A6D;
	--spt-green-hover: #0B665C;
	--spt-link: #0B665C;
	--spt-green-tint: #E6F4F1;
	--spt-sage-active: #E6F4F1;

	--spt-terra: #A85F00;
	--spt-terra-2: #A85F00;

	/* Sistem warna semantik (primary/secondary/status).
	   Alias dari token palet di atas — satu sumber, dipakai halaman & widget. */
	--spt-primary: var(--spt-green);
	--spt-primary-hover: var(--spt-green-hover);
	--spt-primary-soft: var(--spt-green-tint);
	--spt-on-primary: #FFFFFF;
	--spt-primary-accent: #FFD9A8; /* aksen hangat di atas bidang primary */
	--spt-secondary: var(--spt-terra);
	--spt-secondary-hover: #8A4E00;
	--spt-secondary-soft: #FFF3E0;
	--spt-on-secondary: #FFFFFF;
	--spt-success: #16805A;
	--spt-warning: #C77A00;
	--spt-danger: #C94747;
	--spt-danger-text: #C94747;
	--spt-info: #287A8A;

	/* Override token design-tokens (PRD §3.4). Sumber paket tidak diedit. */
	--sp-brand-primary: #0F7A6D;
	--sp-brand-primary-hover: #0B665C;
	--sp-brand-primary-soft: #E6F4F1;
	--sp-background: #F8FAF9;
	--sp-surface: #FFFFFF;
	--sp-surface-muted: #E6F4F1;
	--sp-foreground: #1F2933;
	--sp-muted: #66757F;
	--sp-border: #D9E2E0;
	--sp-success: #16805A;
	--sp-warning: #C77A00;
	--sp-danger: #C94747;
	--sp-info: #287A8A;
}

:root[data-theme='dark'] {
	color-scheme: dark;

	--spt-bg: #0E1716;
	--spt-surface: #142321;
	--spt-surface-2: #1B302D;
	--spt-tint: #1B302D;
	--spt-ink: #F4F8F7;
	--spt-text-2: #B6C6C3;
	--spt-muted: #B6C6C3;
	--spt-line: #29413D;
	--spt-line-2: #29413D;
	--spt-rule-strong: #29413D;
	--spt-header: #142321;
	--spt-footer: #142321;

	--spt-green: #0F7A6D;
	--spt-green-hover: #0B665C;
	--spt-link: #5EC1B0;
	--spt-green-tint: #142321;
	--spt-sage-active: #1B302D;

	--spt-terra: #F59E3B;
	--spt-terra-2: #FFD9A8;

	/* Retint token design-tokens untuk mode gelap (PRD §3.4). */
	--sp-background: #0E1716;
	--sp-surface: #142321;
	--sp-surface-muted: #1B302D;
	--sp-foreground: #F4F8F7;
	--sp-muted: #B6C6C3;
	--sp-border: #29413D;
	--sp-success: #16805A;
	--sp-warning: #F59E3B;
	--sp-danger: #C94747;
	--sp-info: #287A8A;
	--bg-header: rgba(14, 23, 22, 0.85);

	--rb-muted: #B6C6C3;

	/* Sistem warna semantik (mode gelap). */
	--spt-primary: var(--spt-green);
	--spt-primary-hover: var(--spt-green-hover);
	--spt-primary-soft: var(--spt-surface-2);
	--spt-on-primary: #FFFFFF;
	--spt-primary-accent: #FFD9A8;
	--spt-secondary: var(--spt-terra); /* #F59E3B */
	--spt-secondary-hover: #E08A28;
	--spt-secondary-soft: #2B2413;
	--spt-on-secondary: #0E1716;
	--spt-success: #16805A;
	--spt-warning: #F59E3B;
	--spt-danger: #C94747;
	--spt-danger-text: #FF8B80;
	--spt-info: #287A8A;

	/* Variabel halaman chat diarahkan ke sistem (payload gelap). */
	--wa-bg: var(--spt-bg);
	--wa-panel: var(--spt-surface);
	--wa-out: var(--spt-surface-2);
	--wa-ink: var(--spt-ink);
	--wa-muted: var(--spt-text-2);
	--wa-line: var(--spt-line);
	--wa-green: var(--spt-primary);
	--wa-green-dark: var(--spt-primary-hover);
	--wa-accent: var(--spt-primary);
	--wa-accent-dark: var(--spt-primary-hover);
	--wa-green-text: var(--spt-link);
	--wa-danger: var(--spt-danger-text);
}

/* ---------- Tombol toggle ---------- */
.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	flex: none;
	border: 0;
	border-radius: 3px;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: color 0.15s ease;
}
.theme-toggle:hover {
	color: var(--spt-terra);
}
.theme-toggle svg {
	display: block;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.theme-toggle .icon-sun { display: none; }
[data-theme='dark'] .theme-toggle .icon-sun { display: block; }
[data-theme='dark'] .theme-toggle .icon-moon { display: none; }

/* ---------- Keluarga konsep (konsep.css) ---------- */
:root[data-theme='dark'] .concept {
	--ink: var(--spt-ink);
	--muted: var(--spt-muted);
	--line: var(--spt-line);
	--green: var(--spt-link);
	--green-deep: var(--spt-link);
	--paper: var(--spt-bg);
	--wash: var(--spt-surface-2);
}
:root[data-theme='dark'] .concept-switch {
	border-color: var(--spt-line);
	background: rgba(20, 35, 33, 0.96);
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.45);
}
:root[data-theme='dark'] .concept-switch > span { color: var(--spt-muted); }
:root[data-theme='dark'] .concept-switch > a { color: var(--spt-text-2); }
:root[data-theme='dark'] .concept-switch > a:hover,
:root[data-theme='dark'] .concept-switch > a.is-current {
	background: var(--spt-green);
	color: #fff;
}
:root[data-theme='dark'] .concept-header .concept-nav-cta {
	background: var(--spt-green);
}
:root[data-theme='dark'] .concept-header .concept-nav-cta:hover {
	background: var(--spt-green-hover);
	color: #fff;
}
:root[data-theme='dark'] .concept-button { background: var(--spt-green); }
:root[data-theme='dark'] .concept-button:hover { background: var(--spt-green-hover); }
:root[data-theme='dark'] .concept-footer { background: var(--spt-footer); }

/* A — editorial */
:root[data-theme='dark'] .concept-a .a-subtitle { color: var(--spt-link); }
:root[data-theme='dark'] .concept-a .a-index { border-color: var(--spt-line); }
:root[data-theme='dark'] .concept-a .a-index > span { color: var(--spt-muted); }
:root[data-theme='dark'] .concept-a .a-index > i { background: var(--spt-line); }
:root[data-theme='dark'] .concept-a .a-table-wrap {
	border-top-color: var(--spt-line);
	border-bottom-color: var(--spt-line);
}
:root[data-theme='dark'] .concept-a th,
:root[data-theme='dark'] .concept-a td { border-bottom-color: var(--spt-line-2); }
:root[data-theme='dark'] .concept-a thead th { color: var(--spt-muted); }
:root[data-theme='dark'] .concept-a td { color: var(--spt-text-2); }
:root[data-theme='dark'] .concept-a tbody tr { border-bottom-color: var(--spt-line); }

/* B — katalog (halaman utama) */
:root[data-theme='dark'] .concept-b .concept-header { background: var(--spt-header); }
:root[data-theme='dark'] .concept-b .b-hero { background: var(--spt-tint); }
:root[data-theme='dark'] .concept-b .b-title-block p { color: var(--spt-link); }
:root[data-theme='dark'] .concept-b .b-bottom-line {
	border-top-color: var(--spt-rule-strong);
	color: var(--spt-muted);
}
:root[data-theme='dark'] .concept-b .b-bottom-line a { color: var(--spt-link); }
:root[data-theme='dark'] .concept-b .b-table-wrap {
	border-top-color: var(--spt-rule-strong);
	border-bottom-color: var(--spt-rule-strong);
}
:root[data-theme='dark'] .concept-b .b-table-wrap thead th {
	border-bottom-color: var(--spt-line);
	color: var(--spt-muted);
}
:root[data-theme='dark'] .concept-b .b-table-wrap tbody td,
:root[data-theme='dark'] .concept-b .b-table-wrap tbody th {
	border-bottom-color: var(--spt-line-2);
}
:root[data-theme='dark'] .concept-b tbody tr { border-bottom-color: var(--spt-line); }
:root[data-theme='dark'] .concept-b .b-cell-index { color: var(--spt-muted); }
:root[data-theme='dark'] .concept-b .b-talk,
:root[data-theme='dark'] .concept-b tbody th > a span { color: var(--spt-terra); }
:root[data-theme='dark'] .concept-b .b-table-wrap tbody td:nth-child(3) {
	color: var(--spt-text-2);
}
:root[data-theme='dark'] .concept-b .b-detail { color: var(--spt-link); }
:root[data-theme='dark'] .concept-b .b-detail-sub { color: var(--spt-muted); }
:root[data-theme='dark'] .concept-b .b-detail-sub:hover { color: var(--spt-link); }
:root[data-theme='dark'] .concept-b .b-catalog-foot { color: var(--spt-muted); }
:root[data-theme='dark'] .concept-b .b-catalog-cta {
	border-bottom-color: var(--spt-terra);
	color: var(--spt-terra);
}
:root[data-theme='dark'] .concept-b .b-title-block p.b-hero-support { color: var(--spt-muted); }
:root[data-theme='dark'] .concept-b .b-solusi p { color: var(--spt-text-2); }

/* Dokumen legal + halaman blog memakai grammar yang sama */
:root[data-theme='dark'] .legal-hero { background: var(--spt-tint); }
:root[data-theme='dark'] .legal-doc-label { color: var(--spt-muted); }
:root[data-theme='dark'] .legal-lede { color: var(--spt-link); }
:root[data-theme='dark'] .legal-updated { color: var(--spt-muted); }
:root[data-theme='dark'] .legal-toc { background: var(--spt-surface); }
:root[data-theme='dark'] .legal-toc a {
	color: var(--spt-text-2);
	border-color: var(--spt-line);
}
:root[data-theme='dark'] .legal-toc a:hover {
	background: var(--spt-surface-2);
	color: var(--spt-link);
}
:root[data-theme='dark'] .legal-article p,
:root[data-theme='dark'] .legal-article li { color: var(--spt-text-2); }
:root[data-theme='dark'] .legal-article a { color: var(--spt-link); }

/* C — peta layanan */
:root[data-theme='dark'] .concept-c .concept-header {
	background: var(--spt-header);
	border-bottom-color: var(--spt-line);
}
:root[data-theme='dark'] .concept-c .c-hero { background: var(--spt-tint); }
:root[data-theme='dark'] .concept-c .c-location { color: var(--spt-muted); }
:root[data-theme='dark'] .concept-c .c-tagline { color: var(--spt-link); }
:root[data-theme='dark'] .concept-c .c-hero-link {
	border-bottom-color: var(--spt-line);
	color: var(--spt-link);
}
:root[data-theme='dark'] .concept-c .c-map {
	border-top-color: var(--spt-line);
	border-bottom-color: var(--spt-line);
	background: var(--spt-surface-2);
}
:root[data-theme='dark'] .concept-c .c-map-label { color: var(--spt-muted); }
:root[data-theme='dark'] .concept-c .c-route > b {
	border-color: var(--spt-line);
	background: var(--spt-surface-2);
	color: var(--spt-link);
}
:root[data-theme='dark'] .concept-c .c-route-line { background: var(--spt-line); }
:root[data-theme='dark'] .concept-c .c-station {
	border-bottom-color: var(--spt-line-2);
	background: var(--spt-surface);
}
:root[data-theme='dark'] .concept-c .c-station:before {
	border-color: var(--spt-link);
	background: var(--spt-surface);
}
:root[data-theme='dark'] .concept-c .c-station a { color: var(--spt-link); }
:root[data-theme='dark'] .concept-c .c-station small { color: var(--spt-muted); }
:root[data-theme='dark'] .concept-c .c-map-foot { color: var(--spt-muted); }
:root[data-theme='dark'] .concept-c .c-section-intro > span { color: var(--spt-muted); }
:root[data-theme='dark'] .concept-c .c-data-table { border-top-color: var(--spt-line); }
:root[data-theme='dark'] .concept-c .c-data-table thead th { color: var(--spt-muted); }
:root[data-theme='dark'] .concept-c .c-data-row th,
:root[data-theme='dark'] .concept-c .c-data-row td {
	border-top-color: var(--spt-line-2);
}
:root[data-theme='dark'] .concept-c .c-product span { color: var(--spt-link); }
:root[data-theme='dark'] .concept-c .c-data-row td:nth-child(2) {
	color: var(--spt-text-2);
}
:root[data-theme='dark'] .concept-c .c-open { color: var(--spt-link); }
:root[data-theme='dark'] .concept-c .c-conversations { background: var(--spt-surface-2); }
:root[data-theme='dark'] .concept-c .c-rembuga-row {
	border-top-color: var(--spt-line);
	border-bottom-color: var(--spt-line);
}
:root[data-theme='dark'] .concept-c .c-availability { color: var(--spt-muted); }
:root[data-theme='dark'] .concept-c .c-end > a { background: var(--spt-green); }

/* ---------- Keluarga konten blog/studi kasus (blog.css) ---------- */
:root[data-theme='dark'] .blog-hero { background: var(--spt-tint); }
:root[data-theme='dark'] .blog-doc-label { color: var(--spt-muted); }
:root[data-theme='dark'] .blog-hero h1 { color: var(--spt-ink); }
:root[data-theme='dark'] .blog-lede { color: var(--spt-link); }
:root[data-theme='dark'] .blog-meta { color: var(--spt-muted); }
:root[data-theme='dark'] .blog-tag {
	border-color: var(--spt-line);
	color: var(--spt-text-2);
}
:root[data-theme='dark'] .blog-toc {
	border-color: var(--spt-line);
	background: var(--spt-surface);
}
:root[data-theme='dark'] .blog-toc > span { color: var(--spt-muted); }
:root[data-theme='dark'] .blog-toc a {
	color: var(--spt-text-2);
	border-color: var(--spt-line);
}
:root[data-theme='dark'] .blog-toc a:hover {
	background: var(--spt-surface-2);
	color: var(--spt-link);
}
:root[data-theme='dark'] .blog-article { color: var(--spt-text-2); }
:root[data-theme='dark'] .blog-article h2 { color: var(--spt-ink); }
:root[data-theme='dark'] .blog-article a,
:root[data-theme='dark'] .blog-article strong { color: var(--spt-link); }
:root[data-theme='dark'] .blog-article blockquote {
	background: var(--spt-surface-2);
	color: var(--spt-text-2);
}
:root[data-theme='dark'] .blog-related,
:root[data-theme='dark'] .blog-faq {
	border-color: var(--spt-line);
	background: var(--spt-surface);
}
:root[data-theme='dark'] .blog-related > span { color: var(--spt-muted); }
:root[data-theme='dark'] .blog-related a,
:root[data-theme='dark'] .blog-faq summary { color: var(--spt-link); }
:root[data-theme='dark'] .idx-table-wrap {
	border-top-color: var(--spt-rule-strong);
	border-bottom-color: var(--spt-rule-strong);
}
:root[data-theme='dark'] .idx-table-wrap thead th {
	border-bottom-color: var(--spt-line);
	color: var(--spt-muted);
}
:root[data-theme='dark'] .idx-table-wrap tbody th,
:root[data-theme='dark'] .idx-table-wrap tbody td {
	border-bottom-color: var(--spt-line-2);
}
:root[data-theme='dark'] .idx-table-wrap tbody tr { border-bottom-color: var(--spt-line); }
:root[data-theme='dark'] .idx-table-wrap tbody th a { color: var(--spt-ink); }
:root[data-theme='dark'] .idx-table-wrap tbody td { color: var(--spt-text-2); }
:root[data-theme='dark'] .idx-date { color: var(--spt-muted); }
:root[data-theme='dark'] .idx-empty { color: var(--spt-text-2); }
:root[data-theme='dark'] .idx-intro p { color: var(--spt-text-2); }
:root[data-theme='dark'] .idx-intro p strong { color: var(--spt-ink); }
:root[data-theme='dark'] .idx-intro p.idx-intro-sub { color: var(--spt-muted); }
:root[data-theme='dark'] .idx-intro a:not(.idx-cta) { color: var(--spt-link); }
:root[data-theme='dark'] .idx-structure { color: var(--spt-text-2); }
:root[data-theme='dark'] .idx-structure li::marker { color: var(--spt-link); }
:root[data-theme='dark'] .idx-cta { color: var(--spt-link); border-bottom-color: var(--spt-link); }
:root[data-theme='dark'] .idx-cta:hover { color: var(--spt-terra); border-bottom-color: var(--spt-terra); }

/* ---------- Keluarga style.css: home-page & service-page ---------- */
:root[data-theme='dark'] .home-page {
	--home-ink: var(--spt-ink);
	--home-muted: var(--spt-muted);
	--home-rule: var(--spt-line);
	--home-wash: var(--spt-surface-2);
}
:root[data-theme='dark'] .home-page .brand-text small { color: var(--spt-muted); }
:root[data-theme='dark'] .home-contact { text-decoration-color: var(--spt-line); }
:root[data-theme='dark'] .offering-table-wrap {
	border-top-color: var(--spt-line);
	border-bottom-color: var(--spt-line);
}
:root[data-theme='dark'] .offering-table tbody tr:hover { background: rgba(255, 255, 255, 0.045); }
:root[data-theme='dark'] .offering-table tr {
	border-top-color: var(--spt-line);
	border-bottom-color: var(--spt-line);
}
:root[data-theme='dark'] .offering-table td { color: var(--spt-text-2); }
:root[data-theme='dark'] .offering-kind {
	border-color: var(--spt-line);
	color: var(--spt-text-2);
}
:root[data-theme='dark'] .offering-kind-solution {
	border-color: var(--spt-green);
	background: var(--spt-green-tint);
	color: var(--spt-link);
}
:root[data-theme='dark'] .service-page {
	--sp-ink: var(--spt-ink);
	--sp-muted: var(--spt-muted);
	--sp-rule: var(--spt-line);
}
:root[data-theme='dark'] .service-page .service-back,
:root[data-theme='dark'] .service-page .service-more a { color: var(--spt-link); }

/* ---------- Rembuga (rembuga.css) ---------- */
:root[data-theme='dark'] .rb-header { background: rgba(14, 23, 22, 0.94); }
:root[data-theme='dark'] .rb-links { color: var(--spt-muted); }
:root[data-theme='dark'] .rb-nav-cta { background: var(--spt-green); color: #fff; }
:root[data-theme='dark'] .rb-date-note { color: var(--spt-muted); }
:root[data-theme='dark'] .rb-date-note span { box-shadow: 0 0 0 4px rgba(245, 158, 59, 0.35); }
:root[data-theme='dark'] .rb-hero h1 em { color: var(--spt-terra); }
:root[data-theme='dark'] .rb-lead { color: var(--spt-muted); }
:root[data-theme='dark'] .rb-hero .rb-button-primary {
	background: var(--spt-green);
	color: #fff;
}
:root[data-theme='dark'] .rb-hero .rb-button-quiet {
	border-color: var(--spt-line);
	color: var(--spt-ink);
}
:root[data-theme='dark'] .rb-button-quiet { border-color: var(--spt-line); }
:root[data-theme='dark'] .rb-button-quiet:hover { background: var(--spt-surface-2); }
:root[data-theme='dark'] .rb-product {
	background: var(--spt-surface);
	border-color: var(--spt-line);
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
}
:root[data-theme='dark'] .rb-product-bar { border-bottom-color: var(--spt-line); }
:root[data-theme='dark'] .rb-demo-label,
:root[data-theme='dark'] .rb-thread-copy small,
:root[data-theme='dark'] .rb-chat-head small,
:root[data-theme='dark'] .rb-product-caption,
:root[data-theme='dark'] .rb-price-disclaimer,
:root[data-theme='dark'] .rb-thread time,
:root[data-theme='dark'] .rb-thread-channel,
:root[data-theme='dark'] .rb-search,
:root[data-theme='dark'] .rb-composer,
:root[data-theme='dark'] .rb-composer span,
:root[data-theme='dark'] .rb-flow-arrow,
:root[data-theme='dark'] .rb-plan-quota span,
:root[data-theme='dark'] .rb-plan li,
:root[data-theme='dark'] .rb-footer-inner > div,
:root[data-theme='dark'] .rb-footer-inner > small { color: var(--spt-muted); }
:root[data-theme='dark'] .rb-thread-list { border-right-color: var(--spt-line); }
:root[data-theme='dark'] .rb-search { background: var(--spt-surface-2); }
:root[data-theme='dark'] .rb-thread.is-active { background: var(--spt-sage-active); }
:root[data-theme='dark'] .rb-thread-channel { border-top-color: var(--spt-line); }
:root[data-theme='dark'] .rb-chat-head { border-bottom-color: var(--spt-line); }
:root[data-theme='dark'] .rb-chat-body { background: var(--spt-surface-2); }
:root[data-theme='dark'] .rb-bubble-in {
	background: var(--spt-surface);
	border-color: var(--spt-line);
}
:root[data-theme='dark'] .rb-handoff-note {
	background: var(--spt-sage-active);
	border-color: var(--spt-line);
}
:root[data-theme='dark'] .rb-flow-step { border-top-color: var(--spt-line); }
:root[data-theme='dark'] .rb-step-mark {
	background: var(--spt-surface-2);
	color: var(--spt-ink);
}
:root[data-theme='dark'] .rb-benefits { background: var(--spt-surface-2); }
:root[data-theme='dark'] .rb-benefit-list article { border-top-color: var(--spt-line); }
:root[data-theme='dark'] .rb-plan {
	background: var(--spt-surface);
	border-color: var(--spt-line);
}
:root[data-theme='dark'] .rb-plan-featured { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
:root[data-theme='dark'] .rb-plan-link { border-top-color: var(--spt-line); }
:root[data-theme='dark'] .rb-plan-agency { background: var(--spt-surface-2); }
:root[data-theme='dark'] .rb-faq,
:root[data-theme='dark'] .rb-footer { background: var(--spt-surface); }
@media (max-width: 700px) {
	:root[data-theme='dark'] .rb-links { background: var(--spt-surface); }
}

:root[data-theme='dark'] .wa-brandnote {
	color: var(--spt-muted);
	background: var(--spt-surface);
	border-bottom-color: var(--spt-line);
}
:root[data-theme='dark'] .wa-msg a { color: var(--spt-link); }
:root[data-theme='dark'] .wa-out .wa-menu-btn { color: var(--spt-muted); }
:root[data-theme='dark'] .wa-menu {
	background: var(--spt-surface);
	border-color: var(--spt-line);
	color: var(--spt-ink);
}
:root[data-theme='dark'] .wa-menu button { color: var(--spt-ink); }
:root[data-theme='dark'] .wa-menu button:hover { background: var(--spt-surface-2); }
:root[data-theme='dark'] #wa-reply { border-top-color: var(--spt-line); }
:root[data-theme='dark'] #wa-reply .h,
:root[data-theme='dark'] .wa-quote .qs { color: var(--spt-link); }
:root[data-theme='dark'] .wa-quote { background: rgba(255, 255, 255, 0.08); }
:root[data-theme='dark'] #wa-info .card {
	background: var(--spt-surface);
	color: var(--spt-ink);
}
:root[data-theme='dark'] #wa-info dt { color: var(--spt-muted); }
:root[data-theme='dark'] #wa-info button {
	border-color: var(--spt-line);
	background: var(--spt-surface);
	color: var(--spt-ink);
}
:root[data-theme='dark'] #wa-input { border-color: var(--spt-line); }
:root[data-theme='dark'] #wa-notice { color: var(--spt-danger-text); }
:root[data-theme='dark'] #wa-push {
	background: var(--spt-surface-2);
	border-color: var(--spt-line);
	color: var(--spt-link);
}
:root[data-theme='dark'] #wa-pushno {
	background: var(--spt-surface);
	color: var(--spt-link);
	border-color: var(--spt-line);
}
:root[data-theme='dark'] #wa-pushyes { background: var(--spt-green); color: #fff; }
:root[data-theme='dark'] #wa-prev .chip {
	background: var(--spt-surface);
	border-color: var(--spt-line);
}
:root[data-theme='dark'] #wa-prev .chip button {
	background: var(--spt-surface-2);
	color: var(--spt-ink);
}
:root[data-theme='dark'] #wa-emojipanel { border-color: var(--spt-line); }
:root[data-theme='dark'] .wa-msg img.wa-img { background: var(--spt-surface-2); }
:root[data-theme='dark'] .wa-cbtn:hover,
:root[data-theme='dark'] #wa-emojipanel .grid button:hover {
	background: rgba(255, 255, 255, 0.08);
}

/* ---------- Penempatan tombol di header ---------- */
@media (max-width: 768px) {
	.site-header .nav > .theme-toggle { margin-left: auto; }
	.site-header .nav:has(> .theme-toggle) > .nav-toggle { margin-left: 0; }
}
@media (max-width: 650px) {
	.theme-toggle { width: 30px; height: 30px; }
}