/* Opaque, low-light surfaces. Explicit colors also work on the LG's Chromium 38. */
dialog{background:#17231f;color:#dcd8ca;border:1px solid #526156;box-shadow:0 22px 90px rgba(0,0,0,.5)}
dialog::backdrop,.tv-app dialog::backdrop{background:rgba(4,8,7,.58)}
dialog+.backdrop,.tv-app dialog+.backdrop{background:rgba(4,8,7,.58)}
.panel{background:#17231f;color:#dcd8ca;border-color:#526156}
.panel-header .eyebrow{color:#b9bba4}
.panel h2{color:#ded8c7}
.panel-copy,.about-copy{color:#bcc1b2}
.setting-row{color:#d4d5c6}
.setting-row small,.panel-note,.keyboard-guide small{color:#abb5a5}
.setting-row>span:last-child{color:#c9c6ad}
.panel-note,.source-link{border-color:#435347}
.keyboard-guide,.keyboard-guide>span{color:#d0d0bc}
.panel-header .icon-button{background:#28392f;color:#d4d1ba;border:1px solid #6b7b68}
.panel-header .icon-button:hover{background:#34483b}
.panel>input[type=range]{color:#b3b99a;background-color:#3f5044;border:0}
.panel>input[type=range]::-webkit-slider-thumb{background:#c9c6a8}
.panel>input[type=range]::-moz-range-thumb{background:#c9c6a8}
input[role=switch]{background:#34433a;border-color:#75816e}
input[role=switch]::after{background:#b4b9a7}
input[role=switch]:checked{background:#6b7959;border-color:#a5ae8e}
input[role=switch]:checked::after{background:#d6cfb3}
.panel-action,.timer-options button{background:#293b30;color:#d5d3bc;border-color:#73826a}
.panel-action:hover,.timer-options button:hover{background:#354b3c}
.timer-options button.selected{background:#425a41;color:#e0dac1;border-color:#a3b28a}
.panel-action:disabled{opacity:.5;cursor:default}
.keyboard-navigation dialog button:focus,.keyboard-navigation dialog input:focus,
.keyboard-navigation dialog a:focus,.tv-app .keyboard-navigation dialog button:focus,
.tv-app .keyboard-navigation dialog input:focus,.tv-app .keyboard-navigation dialog a:focus{
  outline:3px solid #c0b48b;outline-offset:5px;box-shadow:0 0 0 6px rgba(6,12,8,.6)
}
#toast,#brightness-hud{background:#202d25;color:#d3d0b9;border:1px solid #6b7863;box-shadow:0 6px 28px rgba(0,0,0,.4)}

/* Before sleep: quiet blue-black, with soft pewter details. */
body[data-mode=sleep] dialog,body[data-mode=sleep] .panel{background:#141c28;border-color:#45556a}
body[data-mode=sleep] .panel-header .eyebrow{color:#aeb7c7}
body[data-mode=sleep] .panel-copy,body[data-mode=sleep] .about-copy{color:#b4bdc9}
body[data-mode=sleep] .setting-row small,body[data-mode=sleep] .panel-note,
body[data-mode=sleep] .keyboard-guide small{color:#a8b2c1}
body[data-mode=sleep] .panel-note,body[data-mode=sleep] .source-link{border-color:#3a4a60}
body[data-mode=sleep] .panel-header .icon-button,
body[data-mode=sleep] .panel-action,body[data-mode=sleep] .timer-options button{background:#263449;border-color:#6a7d97}
body[data-mode=sleep] .panel-header .icon-button:hover,
body[data-mode=sleep] .panel-action:hover,body[data-mode=sleep] .timer-options button:hover{background:#30435a}
body[data-mode=sleep] .timer-options button.selected{background:#3b506c;border-color:#a0afc2}
body[data-mode=sleep] .panel>input[type=range]{color:#a7b5c7;background-color:#394a62}
body[data-mode=sleep] input[role=switch]{background:#303e52;border-color:#6a7d97}
body[data-mode=sleep] input[role=switch]:checked{background:#5e7391;border-color:#9eadc2}
body[data-mode=sleep] #toast,body[data-mode=sleep] #brightness-hud{background:#1c2737;border-color:#61718b}

/* Shared moments: warm charcoal, brass and soft linen text. */
body[data-mode=together] dialog,body[data-mode=together] .panel{background:#26211d;border-color:#66574b}
body[data-mode=together] .panel-header .eyebrow{color:#c4b497}
body[data-mode=together] .panel-copy,body[data-mode=together] .about-copy{color:#c7bcb0}
body[data-mode=together] .setting-row small,body[data-mode=together] .panel-note,
body[data-mode=together] .keyboard-guide small{color:#bcae9d}
body[data-mode=together] .panel-note,body[data-mode=together] .source-link{border-color:#56483d}
body[data-mode=together] .panel-header .icon-button,
body[data-mode=together] .panel-action,body[data-mode=together] .timer-options button{background:#3c3027;border-color:#938067}
body[data-mode=together] .panel-header .icon-button:hover,
body[data-mode=together] .panel-action:hover,body[data-mode=together] .timer-options button:hover{background:#4b3c2f}
body[data-mode=together] .timer-options button.selected{background:#594732;border-color:#b49b77}
body[data-mode=together] .panel>input[type=range]{color:#bfa47e;background-color:#58493a}
body[data-mode=together] input[role=switch]{background:#483b30;border-color:#938067}
body[data-mode=together] input[role=switch]:checked{background:#8b7250;border-color:#bda37e}
body[data-mode=together] #toast,body[data-mode=together] #brightness-hud{background:#2d251f;border-color:#8c7861}

/* Intimate moments: near-black garnet and restrained copper, no bright panel. */
body[data-mode=intimate] dialog,body[data-mode=intimate] .panel{background:#251a20;border-color:#68505a}
body[data-mode=intimate] .panel-header .eyebrow{color:#c2a697}
body[data-mode=intimate] .panel-copy,body[data-mode=intimate] .about-copy{color:#c8b7b0}
body[data-mode=intimate] .setting-row small,body[data-mode=intimate] .panel-note,
body[data-mode=intimate] .keyboard-guide small{color:#bca6a2}
body[data-mode=intimate] .panel-note,body[data-mode=intimate] .source-link{border-color:#57404a}
body[data-mode=intimate] .panel-header .icon-button,
body[data-mode=intimate] .panel-action,body[data-mode=intimate] .timer-options button{background:#402a33;border-color:#94716d}
body[data-mode=intimate] .panel-header .icon-button:hover,
body[data-mode=intimate] .panel-action:hover,body[data-mode=intimate] .timer-options button:hover{background:#50333d}
body[data-mode=intimate] .timer-options button.selected{background:#613d47;border-color:#b89480}
body[data-mode=intimate] .panel>input[type=range]{color:#c2a18a;background-color:#5a3f49}
body[data-mode=intimate] input[role=switch]{background:#49333d;border-color:#94716d}
body[data-mode=intimate] input[role=switch]:checked{background:#91635f;border-color:#c09a87}
body[data-mode=intimate] #toast,body[data-mode=intimate] #brightness-hud{background:#2e2027;border-color:#896362}

/* Autonyms remain recognisable in either language; low-light surfaces match the panel. */
.language-row{align-items:center;flex-wrap:wrap;gap:16px}
.language-options{display:flex}
.language-options button+button{margin-left:12px}
.language-options button{font:inherit;font-size:16px;padding:12px 18px;border-radius:24px;border:1px solid #73826a;background:rgba(0,0,0,.15);color:#d5d3bc;cursor:pointer}
.language-options button[aria-pressed=true]{border-color:#c0b48b;background:rgba(192,180,139,.16);color:#ece5d0}
.tv-app .language-options button{font-size:22px;padding:14px 22px}
.exit-options{display:flex}
.exit-options .panel-action+.panel-action{margin-left:18px}
.exit-options .panel-action{flex:1;margin-top:0;width:auto}
#exit-cancel{border-color:#c0b48b;background:rgba(192,180,139,.16)}