/* Omera Music: user-selectable color scheme, dark by default. Single shared override. */
:root{color-scheme:dark;--navy:#0c1824;--navy2:#10283d;--mint:#173d37;--green:#74deb3;--green2:#72d6b5;--sand:#101419;--text:#e8edf5;--muted:#a6b6c5;--line:#354352;--white:#1c2630;--shadow:0 12px 32px rgba(0,0,0,.25)}
:root[data-theme="light"]{color-scheme:light;--navy:#162741;--navy2:#203a56;--mint:#d3f7e7;--green:#0a806b;--green2:#126955;--sand:#fbf9f4;--text:#1a293c;--muted:#617285;--line:#e0e8e5;--white:#fff;--shadow:0 18px 42px rgba(24,45,69,.06)}
html:not([data-theme="light"]){background:#101419;color:#e8edf5}
html:not([data-theme="light"]) body{background:#101419!important;color:#e8edf5}
html:not([data-theme="light"]) :is(.header,.menu-btn,.portal-top-tools,.portal-list-section,.portal-sidebar-card,.portal-lesson,.catalog-side,.chord-reader,.chord-reader-side,.studio-panel,.form-card,.request-row,.tool-article,.note,.stats-row>div,.song-table-row,.song-aside-head,.song-chord-pills,.chord-diagram-detail,.portal-empty,.tool-card,.practice-card,.step-card,.toolbox,.panel,.portal-search-form,.search-box,.page-hero .card,.omera-request-dialog,.chord-builder,.song-tools,.song-scroll-speed,.song-sheet-container,.song-chords-reference,.song-about,.song-sheet-intro,.song-page .chord-footnote){background:#19232e!important;color:#e8edf5!important;border-color:#354352!important}
html:not([data-theme="light"]) :is(.portal-subnav,.catalog-intro,.page-hero,.portal-search-band,.portal-search-hero,.portal-starter,.song-crumb,.portal-search-section,.footer,.portal-footer){background-color:#111e2a!important;color:#e7edf5!important;border-color:#344555!important}
html:not([data-theme="light"]) :is(h1,h2,h3,h4,strong,.song-details strong,.song-reader-header h1,.song-editor .song-lyric-row,.chord-reader-header h1,.portal-lesson h3,.portal-section-head h2,.song-chords-reference h2,.song-about h2,.portal-sidebar-card h2,.portal-search h1,.tool-title,.nav a){color:#f1f5f9}
html:not([data-theme="light"]) :is(p,small,.smallprint,.tool-message,.song-details small,.catalog-intro p,.portal-lesson p,.portal-sidebar-card p,.song-about p,.song-chords-reference p,.song-reader-header p,.song-artist,.song-sheet-intro,.song-aside-note,.song-crumb,.portal-loading,.song-scroll-speed,.note){color:#b5c2cf}
html:not([data-theme="light"]) :is(input,textarea,select,option){background:#111b26!important;color:#eef5fa!important;border-color:#46566a!important}
html:not([data-theme="light"]) :is(input,textarea)::placeholder{color:#9aa9b9}
html:not([data-theme="light"]) :is(button,.tool-btn,.btn.secondary,.song-tools button,.song-chord-pills button,.catalog-pages a,.letter-grid a,.portal-search-form button){background:#243341;color:#eaf3fa;border-color:#455766}
html:not([data-theme="light"]) :is(.btn,.portal-search-form button[type=submit]){color:#0e2320;background:#8fddba;border-color:#8fddba}
html:not([data-theme="light"]) :is(.nav a:hover,.nav a.active,.song-tools button:hover,.song-tools button[aria-pressed=true],.letter-grid a:hover){background:#23483e;color:#a3e7c8}
html:not([data-theme="light"]) :is(.song-editor,.chord-reader .song-editor,.song-lyric-row,.song-editor .song-lyric-row,.chord-editor-preview){background:transparent!important;color:#edf1f6!important}
html:not([data-theme="light"]) :is(.song-editor .chord-token,.song-editor .song-chord-row,.chord-diagram-name,.song-editor .song-section-title){color:#bbd866!important}
html:not([data-theme="light"]) a:not(.btn):hover{color:#b7e9c9}
html:not([data-theme="light"]) :is(.song-tools,.song-scroll-speed,.song-chords-reference,.song-about,.portal-sidebar-card,.tool-actions,.request-row,.song-table-row,.song-sheet-container,.footer,.chord-reader-header,.song-reader-header){border-color:#354352!important}
html:not([data-theme="light"]) .brand-icon{background:#253847;color:#a4e5c3}
html:not([data-theme="light"]) .fret-svg line{stroke:#9bb0c2}
html:not([data-theme="light"]) :is(.chord-editor-preview,pre,code){border-color:#344658}
html:not([data-theme="light"]) ::selection{background:#336558;color:#fff}
/* Any page can switch, including Studio. Button is keyboard accessible. */
.omera-theme-toggle{position:fixed;right:16px;bottom:15px;z-index:80;display:inline-flex;align-items:center;gap:7px;background:#172b3d;color:#effff8;border:1px solid #718899;border-radius:99px;padding:9px 15px;font:700 13px/1.35 system-ui,sans-serif;box-shadow:0 7px 24px #0005;cursor:pointer}
.omera-theme-toggle:hover,.omera-theme-toggle:focus-visible{outline:2px solid #68c6a5;outline-offset:2px}
html[data-theme="light"] .omera-theme-toggle{background:#fff;color:#203a50;border-color:#c2d5d6}
.omera-request-dialog{max-width:min(560px,calc(100% - 30px));width:100%;padding:24px;border-radius:14px;border:1px solid var(--line);background:var(--white);color:var(--text)}
.omera-request-dialog::backdrop{background:rgba(0,0,0,.72)}
.omera-request-dialog h2{overflow-wrap:anywhere}.omera-request-notes{white-space:pre-wrap;overflow-wrap:anywhere}.omera-request-dialog .tool-btn{display:inline-block;margin:8px 10px 4px 0}
@media(max-width:600px){.omera-theme-toggle{right:10px;bottom:10px;padding:8px 12px}.request-row .song-list-actions{display:flex;flex-wrap:wrap;gap:7px}.request-row .song-list-actions select{max-width:155px}}
/* Chord portal components use hard-coded light fills in their base stylesheet. */
html:not([data-theme="light"]) :is(.chord-portal,.portal-search,.portal-main,.portal-layout,.portal-feed,.portal-list-section,.portal-lessons,.song-table,.portal-empty,.portal-search-form,.song-meta>span,.song-tools .tool-group,.song-tools .tool-toggle,.song-scroll-speed,.song-aside-head,.catalog-intro,.chord-reader-header,.song-crumb,.chord-reader .song-editor,.portal-top-tools,.tools-heading,.mini-chords span,.song-avatar,.portal-starter .mini-chords span){background:#182430!important;color:#eaf1f7!important;border-color:#344658!important}
html:not([data-theme="light"]) .portal-search{background:#152333!important}
html:not([data-theme="light"]) :is(.portal-empty,.song-table,.portal-search-form,.portal-top-tools){background:#1c2c38!important;color:#eaf1f7!important}
html:not([data-theme="light"]) :is(.portal-search h1,.portal-search h1 span,.portal-section-head h2,.portal-lesson h3,.portal-starter h2,.song-table-row strong,.song-meta strong,.song-reader-header h1){color:#edf8fa!important}
html:not([data-theme="light"]) .portal-search h1 span{color:#95e2be!important}
html:not([data-theme="light"]) :is(.portal-search p,.search-note,.portal-empty p,.portal-section-head p,.portal-lesson p,.song-meta,.song-artist){color:#c1d1db!important}
html:not([data-theme="light"]) :is(.song-table-row,.portal-top-tools a,.portal-lesson,.song-about,.song-chords-reference){border-color:#344658!important}
html:not([data-theme="light"]) :is(.song-table-row:hover,.portal-top-tools a:hover,.portal-lesson:hover){background:#223a39!important}
html:not([data-theme="light"]) :is(.song-avatar,.tools-ico){background:#23463d!important;color:#b3e8c9!important}
html:not([data-theme="light"]) .portal-more-link{color:#91e1bb!important}
html:not([data-theme="light"]) :is(.song-tools .tool-group button,.song-tools .tool-toggle,.song-tools #resetChord){background:#283947!important;color:#eef8ff!important;border-color:#455b68!important}
html:not([data-theme="light"]) :is(.song-tools button,.song-tools .tool-group,.song-meta>span){background:#263747!important;color:#d4e0ea!important}
html:not([data-theme="light"]) :is(.portal-search-form input,.portal-search-form input::placeholder){color:#c3d5dc!important}


/* ===== Unified surface correction v3 — October 2026 =====
   Legacy educational pages used literal white surfaces and muted ink;
   those ignored the page theme variables. All ordinary reading surfaces
   now use a single contrast-conscious dark/light palette.
   Keep the song reader's dedicated theme colors intact. */
:root:not([data-theme="light"]){
  --surface-page:#101419;
  --surface-card:#1b2834;
  --surface-raised:#243442;
  --surface-field:#101d2a;
  --ink-main:#f1f6fa;
  --ink-soft:#c8d4e0;
  --ink-muted:#aebed0;
  --border-ui:#405363;
}
:root[data-theme="light"]{
  --surface-page:#fbf9f4;
  --surface-card:#ffffff;
  --surface-raised:#f1f8f4;
  --surface-field:#ffffff;
  --ink-main:#152638;
  --ink-soft:#3e5266;
  --ink-muted:#587185;
  --border-ui:#d5e3db;
}
/* Common cards in Belajar Gitar, article content and instrument pages. */
html:not([data-theme="light"]) :is(.cards .card,.article,.aboutbox,.reader,.empty,.toolpanel,.tool-article,.form-card,.studio-panel,.request-row,.filterbar,.listing .filterbar,.tool-card,.practice-card,.step-card,.panel,.toolbox,.search-box,.search-result,.guide-card,.lesson-card,.stats-row>div){
  background:var(--surface-card)!important;
  border-color:var(--border-ui)!important;
  color:var(--ink-main)!important;
}
html:not([data-theme="light"]) :is(.cards .card,.article,.aboutbox,.reader,.toolpanel,.tool-article,.form-card,.studio-panel,.request-row,.guide-card,.lesson-card) :is(h1,h2,h3,h4,strong,b){color:var(--ink-main)!important}
html:not([data-theme="light"]) :is(.cards .card,.article,.aboutbox,.reader,.toolpanel,.tool-article,.form-card,.studio-panel,.request-row,.guide-card,.lesson-card) :is(p,li,small,.muted,.smallprint){color:var(--ink-soft)!important}
html:not([data-theme="light"]) :is(.cards .card,.guide-card,.lesson-card) .more{color:#94e8c3!important}
html:not([data-theme="light"]) .card .cardicon{background:var(--surface-raised)!important;color:#90dfbc!important}
html:not([data-theme="light"]) .card small{color:var(--ink-muted)!important}
html:not([data-theme="light"]) :is(.filterbar input,.search-box input,.toolpanel input,.form-card input,.toolpanel textarea,.form-card textarea,.toolpanel select,.form-card select){background:var(--surface-field)!important;color:var(--ink-main)!important;border-color:var(--border-ui)!important}
html:not([data-theme="light"]) :is(.article .reader-section,.reader-section,.fingering,.chord-pill,.toolbar,.filterbar,.tool-message,.editor-explainer,.chord-builder){border-color:var(--border-ui)!important}
html:not([data-theme="light"]) :is(.fingering,.chord-pill,.toolbar,.reader-section,.editor-explainer,.chord-builder){background:var(--surface-raised)!important;color:var(--ink-soft)!important}
html:not([data-theme="light"]) :is(.fingering b,.chord-pill,.tool-title,.reader-section h2){color:var(--ink-main)!important}
html:not([data-theme="light"]) :is(.nav,.nav.open,.menu-btn){background:var(--surface-card)!important;border-color:var(--border-ui)!important;color:var(--ink-main)!important}
html:not([data-theme="light"]) :is(.nav a,.menu-btn){color:var(--ink-main)!important}
html:not([data-theme="light"]) :is(.search-box button,.toolbar button,.tool-btn,.btn.secondary){border-color:var(--border-ui)!important}
html:not([data-theme="light"]) :is(.article code,.article pre,.chord-editor-preview,.song-editor,.reader pre){background:var(--surface-raised);color:var(--ink-main);border-color:var(--border-ui)}
html:not([data-theme="light"]) :is(.page-hero,.listing,.section){color:var(--ink-main)}
html:not([data-theme="light"]) :is(.page-hero p,.sectionhead p,.article p,.article li){color:var(--ink-soft)!important}
html:not([data-theme="light"]) .footer,.footer-line{border-color:var(--border-ui)}
/* Light palette must not inherit dark surface ink from previous overrides. */
html[data-theme="light"] :is(.cards .card,.article,.reader,.aboutbox,.toolpanel,.tool-article,.form-card,.studio-panel,.filterbar input,.request-row,.empty){background:var(--surface-card);color:var(--ink-main);border-color:var(--border-ui)}
html[data-theme="light"] :is(.cards .card h3,.article h2,.article h3,.reader h2,.aboutbox h2){color:var(--ink-main)}
html[data-theme="light"] :is(.article p,.article li,.cards .card p,.reader-help,.aboutbox p){color:var(--ink-soft)}
html[data-theme="light"] :is(.toolbar,.reader-section,.chord-pill,.fingering,.chord-builder,.editor-explainer){background:var(--surface-raised);color:var(--ink-soft);border-color:var(--border-ui)}
html[data-theme="light"] :is(.nav,.nav.open,.menu-btn){background:var(--surface-card);color:var(--ink-main);border-color:var(--border-ui)}
html[data-theme="light"] .nav a{color:var(--ink-soft)}
@media(max-width:680px){html:not([data-theme="light"]) .nav.open{box-shadow:0 15px 30px #0008}}

/* A true light footer for non-song pages, and readable foreground links. */
html[data-theme="light"] .footer{background:#edf5f1!important;color:#172e38!important;border-color:#cddbd5!important}
html[data-theme="light"] .footer :is(.footbrand,.footlinks a,.footer-line){color:#264255!important;border-color:#cad9d5!important}
html[data-theme="light"] .footer :is(.footer p,.footbrand span){color:#496c68!important}
html[data-theme="light"] .footer a:hover{color:#05664f!important}

/* Single shared theme control next to header navigation (desktop and mobile). */
.portal-header .omera-theme-toggle.omera-theme-in-header,.header .omera-theme-toggle.omera-theme-in-header{
 position:static!important;inset:auto!important;transform:none;flex:0 0 40px;
 width:40px;height:40px;min-width:40px;padding:0!important;display:grid;place-items:center;
 margin:0;border-radius:11px;background:var(--white,#1c2833);color:var(--text,#edf3f8);
 border:1px solid var(--line,#425565);box-shadow:none;font-size:22px;line-height:1;
}
html:not([data-theme="light"]) .portal-header .omera-theme-toggle.omera-theme-in-header{background:#1f2c39;color:#e6efd7;border-color:#445666}
html[data-theme="light"] .portal-header .omera-theme-toggle.omera-theme-in-header{background:#f3f8f4;color:#385c4e;border-color:#cbded3}
.portal-header .omera-theme-toggle.omera-theme-in-header:hover{border-color:#74deb3;background:#284638;color:#e5fff4}
@media(max-width:390px){.portal-header .omera-theme-toggle.omera-theme-in-header{flex-basis:34px;min-width:34px;width:34px;height:38px;font-size:20px}}