/* A spacious cinematic replacement for the previous mosaic theme. */
html[data-theme="mosaique"]{
  color-scheme:dark;--bg:#091219;--panel:#101d25;--panel2:#152630;
  --line:#273b45;--text:#f1f8f8;--muted:#a6bbc0;--accent:#45cbd0;
  --accent-strong:#24adb4;--accent-text:#061a20;--active:#1a3b42;--soft:#172a32;
  --title-font:system-ui,-apple-system,"Segoe UI",sans-serif;
}
html[data-theme="mosaique"] body{background:radial-gradient(ellipse at 60% -20%,#18343a 0,#0a151b 46%,#071016 100%)}
html[data-theme="mosaique"] .shell{max-width:none;min-height:100vh;margin:0;padding:0 clamp(18px,2.7vw,44px) 12px;overflow:hidden}
html[data-theme="mosaique"] .shell:before{display:none}
html[data-theme="mosaique"] .top{height:82px;border-bottom:1px solid #28404a;gap:24px;background:transparent}
html[data-theme="mosaique"] .headnav{gap:6px}
html[data-theme="mosaique"] .head-button{font-size:14px;padding:11px 14px;color:#bed0d2}
html[data-theme="mosaique"] .head-button.selected,html[data-theme="mosaique"] .head-button:hover{background:#1c353c;border-color:#3d676b;color:#f4ffff}
html[data-theme="mosaique"] .header-open{background:#3dc3c7;border-color:#3dc3c7;color:#081c20;padding:12px 18px;border-radius:9px}
html[data-theme="mosaique"] .theme-switch{background:#12232b;border-color:#304c55}
html[data-theme="mosaique"] .layout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,25%);
  grid-template-areas:"stage side" "controls side";grid-template-rows:minmax(0,1fr) auto;
  gap:16px;height:calc(100vh - 128px);min-height:510px;padding-top:16px;
}
html[data-theme="mosaique"] .stage{
  width:100%;height:100%;min-height:0;aspect-ratio:auto;border:1px solid #2b454e;
  border-radius:15px;background:#020607;box-shadow:0 14px 40px #0005;
}
html[data-theme="mosaique"] .empty{
  background:radial-gradient(ellipse at 50% 40%,#203c43 0,#11252b 38%,#09171c 100%);
}
html[data-theme="mosaique"] .empty-content{background:none;box-shadow:none;padding:30px;max-width:90%}
html[data-theme="mosaique"] .play-icon{width:78px;height:78px;border:1px solid #7ad8db;background:#54d3d615;color:#9cf2ef}
html[data-theme="mosaique"] .empty h2{font-family:var(--title-font);font-weight:700;font-size:clamp(24px,2.2vw,36px);letter-spacing:-.025em}
html[data-theme="mosaique"] .empty p{font-size:14px;color:#bdd0d0;margin-bottom:20px}
html[data-theme="mosaique"] .empty button{background:#4bcdd0;color:#071e20;border:0;padding:12px 18px}
html[data-theme="mosaique"] .controls{
  background:#12212a;border:1px solid #2a4149;border-radius:13px;padding:16px 22px 13px;
  box-shadow:0 10px 28px #0004;
}
html[data-theme="mosaique"] .track-title strong{font-size:14px}
html[data-theme="mosaique"] .track-title small{color:#a4b7ba}
html[data-theme="mosaique"] .controlrow{gap:12px;margin-top:12px}
html[data-theme="mosaique"] .transport{gap:10px}
html[data-theme="mosaique"] .primary{width:58px;height:58px;background:#45cbd0;color:#071b1e;border:0;box-shadow:0 0 0 5px #45cbd01d}
html[data-theme="mosaique"] .open-control{order:0;background:#1c343d;border:1px solid #3a5961;color:#ecfafa}
html[data-theme="mosaique"] .media-toggle{background:#0e1c23}
html[data-theme="mosaique"] .side{
  min-width:0;min-height:0;background:#101d25;border:1px solid #2a4149;border-radius:15px;
  box-shadow:0 10px 28px #0003;
}
html[data-theme="mosaique"] .side-head{padding:22px 19px 19px;border-bottom:1px solid #273d46}
html[data-theme="mosaique"] .side-head h2{font-size:19px;font-weight:700;letter-spacing:-.015em}
html[data-theme="mosaique"] .side-head p{color:#9cb3b5;font-size:11px}
html[data-theme="mosaique"] .count{background:#1c333a;color:#b7d0d0}
html[data-theme="mosaique"] .playlist{flex:1;min-height:0;max-height:none;padding:12px}
html[data-theme="mosaique"] .item{gap:8px;margin:0 0 9px;padding:9px;border-radius:10px;border:1px solid transparent}
html[data-theme="mosaique"] .item.active{background:#19363c;border:1px solid #3d7779}
html[data-theme="mosaique"] .item .pick{gap:11px}
html[data-theme="mosaique"] .item .preview{width:clamp(90px,8vw,128px);flex-basis:clamp(90px,8vw,128px);aspect-ratio:16/9;background:#1a3038;border-color:#32515a;border-radius:7px}
html[data-theme="mosaique"] .item .pick .details strong{font-size:13px;margin-bottom:7px}
html[data-theme="mosaique"] .item .pick .details span{font-size:11px;color:#9eb3b6}
html[data-theme="mosaique"] .item .remove{color:#9ab0b2}
html[data-theme="mosaique"] .side-actions{padding:13px;border-top:1px solid #273d46}
html[data-theme="mosaique"] .side-actions button{background:#182d35;border-color:#355059;color:#e3f1f1}
html[data-theme="mosaique"] .footer{color:#8da5a8;padding:11px 3px 3px}
html[data-theme="mosaique"] .footer strong{color:#c2d6d7}
@media(max-width:1050px){
  html[data-theme="mosaique"] .top{gap:12px}
  html[data-theme="mosaique"] .head-button{padding:9px;font-size:12px}
  html[data-theme="mosaique"] .layout{grid-template-columns:minmax(0,1fr) minmax(250px,28%)}
  html[data-theme="mosaique"] .controlrow{gap:6px}
  html[data-theme="mosaique"] .transport{gap:4px}
}
@media(max-width:850px){
  html[data-theme="mosaique"] .shell{padding:0 12px 12px}
  html[data-theme="mosaique"] .top{height:auto;min-height:68px;gap:10px;padding:8px 0}
  html[data-theme="mosaique"] .layout{height:auto;min-height:0;grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "controls" "side";grid-template-rows:auto;gap:10px;padding-top:10px}
  html[data-theme="mosaique"] .stage{height:auto;min-height:220px;aspect-ratio:16/9}
  html[data-theme="mosaique"] .side{min-height:220px}
  html[data-theme="mosaique"] .playlist{max-height:300px}
  html[data-theme="mosaique"] .controlrow{flex-wrap:wrap}
  html[data-theme="mosaique"] .open-control{order:3}
}
@media(max-width:520px){
  html[data-theme="mosaique"] .topright{width:100%}
  html[data-theme="mosaique"] .controls{padding:12px}
  html[data-theme="mosaique"] .transport{width:100%;flex:auto;justify-content:space-around}
  html[data-theme="mosaique"] .empty p{font-size:12px}
}