/* 3.12.5: charcoal and champagne evenings; sage and cream daytime.
   Deliberately leaves card geometry, rating rows and dock anchoring intact. */
html{--shadow:rgba(35,47,37,.07)}
html[data-lighting="evening"]{
 color-scheme:dark;
 --bg:#191B1D;--surface:#292C2F;--surface2:#34373A;--panel-bg:#292C2F;
 --edge:#414549;--text:#F2F0EB;--muted:#B8B7B1;
 --thyme:#C6B58E;--thyme-strong:#D8C8A4;--blue:#C6B58E;
 --green:#BFD0B6;--red:#F0A5A8;--gold:#D8C8A4;--field-bg:#34373A;
 --chip-bg:#292C2F;--chip-active:#C6B58E;--chip-selected-text:#211E18;
 --soft-bg:#242629;--poster-blank:#34373A;--item-bg:#292C2F;--item-hover:#3B3D40;
 --shadow:rgba(0,0,0,.28);--lounge-header:#0D1215;--header-bg:#0D1215;--ll-safe-header:#0D1215;
 --hero-left:#292C2F;--hero-mid:#242629;--hero-right:#191B1D;--sunlight:transparent;
}
html[data-lighting="evening"] body{background:var(--bg)!important;background-image:none!important}
html[data-lighting="evening"] :is(.startup-screen,.auth-screen){background:var(--bg)!important;color:var(--text)!important}
html[data-lighting="evening"] header :is(.home-logo b,.home-logo .logo-amp),
html[data-lighting="evening"] .startup-wordmark span,
html[data-lighting="evening"] .auth-wordmark .brand-wordmark .logo-amp{color:var(--thyme)!important}
html[data-lighting="evening"] :is(.content-rating-badge,.card-content-rating){color:var(--text)!important;border-color:var(--edge)!important}
html[data-lighting="evening"] :is(.rating,.star-fill){color:#e3c580!important}
html[data-lighting="evening"] .star-outline{color:var(--muted)!important}
html[data-lighting="evening"] .btn.primary,
html[data-lighting="evening"] .btn.primary:hover:where(html.ll-mouse-input *){background:var(--chip-active)!important;border-color:var(--thyme)!important;color:var(--chip-selected-text)!important}
html[data-lighting="evening"] :is(.tag,.watched-segments button.active,.option.selected,.chip.active,.card-icon-action.saved,.layout-toggle button[aria-pressed="true"],.watch-again-filter[aria-pressed="true"],.origin-chips button){background:var(--chip-active)!important;color:var(--chip-selected-text)!important}
html[data-lighting="evening"] header .nav-groups nav button.active,
html[data-lighting="evening"] .mobile-dock button.active,
html[data-lighting="evening"] .mobile-dock button.dock-preview,
html[data-lighting="evening"] :is(.ll-select-item[aria-selected="true"],.ll-select-item:hover:where(html.ll-mouse-input *),.search-suggestion.keyboard-active,.search-suggestion:hover:where(html.ll-mouse-input *)){color:var(--chip-selected-text)!important}
html[data-lighting="evening"] :is(.mobile-discover-shortcuts button.active,.shared-done-button,.card-watched-action,.detail-shared-complete){background:var(--chip-active)!important;color:var(--chip-selected-text)!important}
html[data-lighting="evening"] .utility-menu button:hover:where(html.ll-mouse-input *){color:var(--chip-selected-text)!important}
html[data-lighting="evening"] header .search-suggestion:is(.keyboard-active,:hover:where(html.ll-mouse-input *)),html[data-lighting="evening"] header .search-suggestion:is(.keyboard-active,:hover:where(html.ll-mouse-input *)) small{color:var(--chip-selected-text)!important}
html[data-lighting="evening"] .detail-shared-complete.is-undo{color:#e7b9cb!important}
html[data-lighting="evening"] .mobile-dock{background:rgba(41,44,47,.70)!important;border-color:var(--edge)!important;box-shadow:0 6px 24px #0005!important}
html[data-lighting="evening"] .mobile-dock::before{background:var(--chip-active)!important;box-shadow:none!important;border-color:transparent!important}
html[data-lighting="evening"] .art{background:var(--poster-blank)}
html[data-lighting="evening"] :is(.close,.modal>.close){background:var(--surface2)!important;color:var(--text)!important;border-color:var(--edge)!important}

/* Let poster art carry the catalog; preserve the existing compact layouts. */
html body .tile{box-shadow:0 2px 8px var(--shadow)!important;border-color:color-mix(in srgb,var(--edge) 72%,var(--surface))!important}
html body .tile:hover:where(html.ll-mouse-input *){box-shadow:0 5px 16px var(--shadow)!important;transform:none!important}
html body :is(.btn,.field,.ll-select-trigger,.card-quick-actions button,.tile-actions button,.tile-actions a,.layout-toggle){box-shadow:none!important}
html body :is(.btn,.field,.ll-select-trigger){border-radius:12px}
html body .card-quick-actions button{border-radius:10px}
html body .modal{box-shadow:0 16px 48px #0003!important}
html body .modal-footer{gap:10px;margin-top:20px}
html body .modal label{margin-top:16px;margin-bottom:8px}
html body .modal .row{gap:10px}
html body .layout-toggle button[aria-pressed="true"]{box-shadow:none}
html body header{box-shadow:0 1px 8px var(--shadow)!important}
@media(prefers-reduced-motion:reduce){html body .tile{transition:none!important}}

/* Keep transient feedback and navigation states on the evening palette too. */
html[data-lighting="evening"]{--interaction-hover:#3B3730}
html[data-lighting="evening"] #toast.toast{
 background:var(--surface)!important;color:var(--text)!important;
 border-color:var(--thyme)!important;box-shadow:0 8px 24px #0005!important;
}
html[data-lighting="evening"] header .nav-groups nav button:not(.active):is(:hover:where(html.ll-mouse-input *),:focus-visible),
html[data-lighting="evening"] .mobile-discover-shortcuts button:not(.active):is(:hover:where(html.ll-mouse-input *),:focus-visible){
 background:var(--interaction-hover)!important;color:var(--text)!important;border-color:var(--thyme)!important;
}
html[data-lighting="evening"] header .nav-groups nav button.active:is(:hover:where(html.ll-mouse-input *),:focus-visible){
 background:var(--chip-active)!important;color:var(--chip-selected-text)!important;
}
html[data-lighting="evening"] :is(.btn,.chip,.option,.card-quick-actions button,.tile-actions button,.tile-actions a):not(.primary):not(.active):not(.selected):not(.saved):not(:disabled):hover:where(html.ll-mouse-input *){
 background:var(--interaction-hover)!important;color:var(--text)!important;border-color:var(--thyme)!important;
}
html[data-lighting="evening"] :is(.chip.active,.option.selected){border-color:var(--thyme)!important}
html[data-lighting="evening"] .modal-shade{background:rgba(14,19,22,.6)}
/* My List and Together use the same selected treatment as Watched. */
html[data-lighting="evening"] .watched-toggle.collection-segments button:is(.active,[aria-pressed="true"]){
 background:var(--chip-active)!important;color:var(--chip-selected-text)!important;
}