/* Shared Peacehabit loading states and theme-aware controls. */
.peace-loader{display:inline-block;position:relative;width:42px;height:42px;flex:none;animation:peace-orbit 1.15s linear infinite}
.peace-loader::before,.peace-loader::after{content:'';position:absolute;width:29px;height:29px;border-radius:50%;top:6px;background:#9a88f5;opacity:.9}
.peace-loader::before{left:0}.peace-loader::after{right:0;background:#cbb5ff;opacity:.65}
@keyframes peace-orbit{to{transform:rotate(360deg)}}
#appLoader{display:none;position:fixed;inset:0;z-index:300;background:var(--bg);align-items:center;justify-content:center;flex-direction:column;gap:22px;color:var(--muted);font-size:14px}
#appLoader .peace-loader{width:66px;height:66px}#appLoader .peace-loader::before,#appLoader .peace-loader::after{width:46px;height:46px;top:10px}
body.auth-loading #appLoader{display:flex}body.auth-loading>:not(#appLoader){visibility:hidden!important}
.image-loader{position:absolute;inset:0;display:grid;place-items:center;background:var(--surface);pointer-events:none;color:var(--muted);font-size:12px}
.image-loading>img{opacity:0}.image-ready>img{opacity:1}.image-ready>.image-loader{display:none}
.image-error>.image-loader{background:var(--surface)}
.modal-art{position:relative;height:210px;margin:-36px -36px 25px;overflow:hidden}.modal-art>.modal-image{margin:0;width:100%;height:100%;object-fit:cover}
select,select option,select optgroup{color:var(--text)!important;background-color:var(--surface)!important;color-scheme:dark}
html[data-theme=light] select,html[data-theme=light] select option,html[data-theme=light] select optgroup{color-scheme:light}
select{border:1px solid var(--line);min-height:36px;max-width:100%}
#recommendations>.track-card:nth-child(n+4){display:none}
.modal-actions{align-items:stretch}.modal-actions>.primary,.modal-actions>.secondary{flex:1 1 180px;min-width:0;white-space:normal;text-align:center;line-height:1.4;margin:0}
#nowTimerStatus{font-size:11px;color:var(--lavender);font-variant-numeric:tabular-nums;white-space:nowrap}
.sleep-control{display:grid;gap:4px}.sleep-control label{font-size:11px;color:var(--muted)}
#nowPlay .peace-loader{width:23px;height:23px}#nowPlay .peace-loader::before,#nowPlay .peace-loader::after{width:16px;height:16px;top:3px}
.audio-dock .now-copy{min-width:0}.audio-dock .sleep-control{flex:none}
body.has-audio:not(.auth-open) .theme-toggle{bottom:calc(var(--audio-dock-offset,280px) + 12px)}
body.has-audio:not(.auth-open) .palette-toggle{bottom:calc(var(--audio-dock-offset,280px) + 64px)}
@media(max-width:640px){#recommendations>.track-card:nth-child(4){display:block}.audio-dock .sleep-control{max-width:100px}.audio-dock select{padding:6px}#nowTimerStatus{font-size:10px}.modal-actions{flex-direction:column}.modal-actions>.primary,.modal-actions>.secondary{flex:auto;width:100%}.modal-art{height:230px;margin:-27px -27px 24px}}
@media(prefers-reduced-motion:reduce){.peace-loader{animation:none}}
.library-access-filters{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:-7px 0 19px}.library-access-filters>span{font-size:12px;color:var(--muted);margin-right:4px}.library-access-filters .chip{min-width:70px}.step-finished{display:inline-flex;align-items:center;gap:5px;margin-left:auto;color:#a4d9bf;font-size:12px;white-space:nowrap}.step-finished svg{width:16px;height:16px}
.brand img{filter:none}
#libraryFilters.filter-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:9px}
#libraryFilters .library-icon-filter{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:82px;padding:12px 5px;border-radius:14px;background:#211932;color:#c5b1da;border:1px solid #d0a7f90a;white-space:normal;text-align:center;font-size:11px;line-height:1.2}
#libraryFilters .library-icon-filter svg{width:25px;height:25px;color:var(--library-accent,#b59ad2)}
#libraryFilters .library-icon-filter:nth-child(2){--library-accent:#96d9bd}
#libraryFilters .library-icon-filter:nth-child(3){--library-accent:#e6b3aa}
#libraryFilters .library-icon-filter:nth-child(4){--library-accent:#f1c76d}
#libraryFilters .library-icon-filter:nth-child(5){--library-accent:#80c9a1}
#libraryFilters .library-icon-filter:nth-child(6){--library-accent:#9bbcf5}
#libraryFilters .library-icon-filter:nth-child(7){--library-accent:#e9a8c7}
#libraryFilters .library-icon-filter:nth-child(8){--library-accent:#75c9df}
#libraryFilters .library-icon-filter.active{background:#c4a9ed;color:#2a1b40;border-color:#d6bcff}
#libraryFilters .library-icon-filter.active svg{color:#493363}
html[data-theme=light] #libraryFilters .library-icon-filter{background:#fffafd;color:#695b76;border-color:#7650a914}
html[data-theme=light] #libraryFilters .library-icon-filter svg{color:var(--library-accent,#8567a1)}
html[data-theme=light] #libraryFilters .library-icon-filter.active{background:#d9c2ef;color:#372245;border-color:#c0a0dd}
html[data-theme=light] #libraryFilters .library-icon-filter.active svg{color:#493363}
@media(max-width:800px){#libraryFilters.filter-row{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:420px){#libraryFilters.filter-row{gap:7px}#libraryFilters .library-icon-filter{min-height:72px;padding:8px 3px;font-size:10px}#libraryFilters .library-icon-filter svg{width:22px;height:22px}}