/* 10 tema. Kosong = tampilan asli. Tombol tidak diwarnai di sini. */
html[data-theme] {
    --bg: #070b14;
    --wash: rgba(7, 11, 20, .72);
    --header: rgba(8, 12, 22, .94);
    --panel: #101826;
    --panel-2: #0c111a;
    --line: rgba(255, 255, 255, .08);
    --text: #e8edf5;
    --muted: #9fb0c8;
    --accent: #e8b923;
    --dock: rgba(8, 12, 20, .96);
}
html[data-theme="emas"] {
    --bg: #100e08; --wash: rgba(16, 14, 8, .78);
    --header: rgba(22, 16, 6, .94); --panel: #1c160c; --panel-2: #14110c;
    --accent: #f5c451; --dock: rgba(18, 14, 8, .96);
}
html[data-theme="emerald"] {
    --bg: #06110d; --wash: rgba(6, 17, 13, .78);
    --header: rgba(8, 28, 20, .94); --panel: #0d1f18; --panel-2: #091610;
    --accent: #34d399; --dock: rgba(6, 18, 14, .96);
}
html[data-theme="ruby"] {
    --bg: #14080c; --wash: rgba(20, 8, 12, .78);
    --header: rgba(36, 10, 16, .94); --panel: #241016; --panel-2: #160a0e;
    --accent: #fb7185; --dock: rgba(24, 8, 12, .96);
}
html[data-theme="royal"] {
    --bg: #0c0a18; --wash: rgba(12, 10, 24, .78);
    --header: rgba(22, 16, 42, .94); --panel: #16122a; --panel-2: #100e20;
    --accent: #c4b5fd; --dock: rgba(14, 10, 28, .96);
}
html[data-theme="ocean"] {
    --bg: #061018; --wash: rgba(6, 16, 24, .78);
    --header: rgba(8, 24, 42, .94); --panel: #0c1c2e; --panel-2: #081420;
    --accent: #38bdf8; --dock: rgba(6, 16, 28, .96);
}
html[data-theme="amber"] {
    --bg: #120e08; --wash: rgba(18, 14, 8, .78);
    --header: rgba(36, 22, 8, .94); --panel: #23180c; --panel-2: #160f08;
    --accent: #fb923c; --dock: rgba(22, 14, 8, .96);
}
html[data-theme="rose"] {
    --bg: #140910; --wash: rgba(20, 9, 16, .78);
    --header: rgba(40, 14, 28, .94); --panel: #26101a; --panel-2: #180c12;
    --accent: #f9a8d4; --dock: rgba(24, 8, 16, .96);
}
html[data-theme="silver"] {
    --bg: #0e1116; --wash: rgba(14, 17, 22, .8);
    --header: rgba(24, 28, 36, .94); --panel: #1a1f27; --panel-2: #12161c;
    --accent: #e5e7eb; --dock: rgba(14, 17, 22, .96);
}
html[data-theme="jade"] {
    --bg: #041316; --wash: rgba(4, 19, 22, .78);
    --header: rgba(8, 36, 38, .94); --panel: #0a2226; --panel-2: #061618;
    --accent: #2dd4bf; --dock: rgba(4, 20, 22, .96);
}
html[data-theme="violet"] {
    --bg: #100818; --wash: rgba(16, 8, 24, .78);
    --header: rgba(32, 12, 40, .94); --panel: #1c1028; --panel-2: #140a1c;
    --accent: #e879f9; --dock: rgba(18, 8, 26, .96);
}

html[data-theme] body {
    color: var(--text);
    background: linear-gradient(180deg, var(--wash), var(--wash)), url("/brand/bg.jpg") center top / cover no-repeat fixed;
}
html[data-theme] .topbar { background: var(--header); border-bottom-color: var(--line); }
html[data-theme] .ticker { background: var(--panel-2); border-color: var(--line); }
html[data-theme] .dock { background: var(--dock); border-top-color: var(--line); }
html[data-theme] .bottom,
html[data-theme] .sitefoot { background: transparent; color: var(--text); }
html[data-theme] .seo a,
html[data-theme] .artikel a,
html[data-theme] .baca { color: var(--accent); }
html[data-theme] .reg {
    background: var(--panel);
    color: var(--text);
    border-color: var(--line);
}
html[data-theme] .reg h2 { color: var(--accent); }
html[data-theme] .field input,
html[data-theme] .field.phone,
html[data-theme] .reg select,
html[data-theme] .prow input,
html[data-theme] .prow select,
html[data-theme] .caprow input {
    background: var(--bg);
    color: var(--text);
    border-color: var(--line);
}