/* Midnight OS — Music */
.mus { --accent:#8eb0ff; --accent2:#c58bff; --bg:#0a0c12; --panel:rgba(255,255,255,0.06); --line:rgba(255,255,255,0.09); --muted:#8b94a9; --p:0%;
  position:relative; isolation:isolate; container-type:inline-size; height:100%; display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg); color:#eef1f8; font-family:inherit; }
.mus::before { content:""; position:absolute; inset:-25%; z-index:-2; background:var(--art, radial-gradient(circle at 25% 15%, #34479a, transparent 60%)) center/cover;
  filter:blur(70px) saturate(1.6); opacity:0.42; transition:opacity .6s; }
.mus::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(10,12,18,0.5), rgba(10,12,18,0.92) 75%); }
.mus [hidden] { display:none !important; }

/* header + search */
.mus-head { display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px; padding:20px 22px 10px; }
.mus-head h2 { font-size:28px; font-weight:750; letter-spacing:-0.03em; background:linear-gradient(90deg,#fff,var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mus-top { flex:1 1 260px; display:flex; gap:8px; max-width:480px; margin-left:auto; }
.mus-q { flex:1; min-width:0; height:44px; padding:0 18px 0 44px; border-radius:22px; border:1px solid var(--line); color:#fff; font:inherit; font-size:16px; outline:none;
  -webkit-appearance:none; appearance:none; backdrop-filter:blur(14px); transition:border-color .2s, box-shadow .2s, background-color .2s;
  background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b94a9' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 15px center / 18px; }
.mus-q::placeholder { color:var(--muted); }
.mus-q:focus { border-color:rgba(142,176,255,0.6); box-shadow:0 0 0 4px rgba(142,176,255,0.15); background-color:rgba(255,255,255,0.09); }
.mus-top button { height:44px; padding:0 20px; border:0; border-radius:22px; font:inherit; font-weight:650; color:#0a0c12; cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:0 6px 18px rgba(142,176,255,0.3); transition:transform .15s, filter .15s; }
.mus-top button:hover { filter:brightness(1.1); transform:translateY(-1px); }
.mus-top button:active { transform:scale(0.97); }

/* body */
.mus-body { flex:1; min-height:0; overflow:auto; padding:6px 12px 16px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.18) transparent; }
.mus-body::-webkit-scrollbar { width:8px; }
.mus-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.16); border-radius:8px; }
.mhome { padding:34px 12px 10px; animation:mrise .5s both; }
.mhome h3 { font-size:22px; font-weight:700; letter-spacing:-0.02em; margin-bottom:6px; }
.mhome p { color:var(--muted); font-size:14px; margin-bottom:20px; }
.mchips { display:flex; flex-wrap:wrap; gap:10px; }
.mchip { appearance:none; border:1px solid var(--line); background:var(--panel); color:#eef1f8; font:inherit; font-size:14px; font-weight:550; padding:10px 18px; border-radius:999px; cursor:pointer;
  backdrop-filter:blur(12px); transition:transform .15s, background .2s, border-color .2s, box-shadow .2s; }
.mchip:hover { transform:translateY(-2px); background:rgba(142,176,255,0.16); border-color:rgba(142,176,255,0.5); box-shadow:0 8px 20px rgba(0,0,0,0.35); }
.mchip:active { transform:scale(0.97); }
.mstat { display:flex; align-items:center; justify-content:center; gap:12px; text-align:center; color:var(--muted); font-size:14px; padding:44px 16px; }
.mstat.busy::before { content:""; width:20px; height:20px; border-radius:50%; border:2.5px solid rgba(255,255,255,0.15); border-top-color:var(--accent); animation:spin .8s linear infinite; }

/* results */
.mrow { appearance:none; width:100%; display:flex; align-items:center; gap:14px; padding:9px 12px; border:0; border-radius:14px; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer;
  animation:mrise .4s both; animation-delay:calc(min(var(--i,0), 12) * 28ms); transition:background .2s, transform .15s; }
.mrow:hover { background:rgba(255,255,255,0.07); }
.mrow:active { transform:scale(0.99); }
.mrow.on { background:linear-gradient(90deg, rgba(142,176,255,0.2), rgba(197,139,255,0.1)); }
.mrow img { width:58px; height:44px; border-radius:9px; object-fit:cover; flex:none; background:#171a24; box-shadow:0 4px 12px rgba(0,0,0,0.4); }
.mrow > div { flex:1; min-width:0; }
.mrow b, .mrow span:not(.eq) { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mrow b { font-size:14.5px; font-weight:620; }
.mrow.on b { color:var(--accent); }
.mrow span:not(.eq) { font-size:12.5px; color:var(--muted); margin-top:3px; }
.eq { display:none; align-items:flex-end; gap:3px; height:16px; flex:none; margin-right:4px; }
.mrow.on .eq { display:flex; }
.eq i { width:3px; height:30%; border-radius:2px; background:var(--accent); }
.mus.playing .mrow.on .eq i { animation:meq .9s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay:-.3s !important; }
.eq i:nth-child(3) { animation-delay:-.6s !important; }
@keyframes meq { 0%,100% { height:25%; } 50% { height:100%; } }
@keyframes mrise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* now playing bar */
.mus-bar { margin:0 14px 14px; padding:14px 18px; border-radius:22px; border:1px solid var(--line); backdrop-filter:blur(26px) saturate(1.5);
  background:rgba(20,24,36,0.62); box-shadow:0 14px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  display:grid; grid-template-columns:76px minmax(0,1fr) auto auto; grid-template-areas:"art meta btns vol" "art seek seek vol"; align-items:center; gap:8px 18px; }
.mus-art { grid-area:art; width:76px; height:76px; border-radius:16px; overflow:hidden; background:linear-gradient(135deg,#232a44,#161a28); box-shadow:0 10px 28px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06); transition:transform .3s; }
.mus.playing .mus-art { transform:scale(1.04); box-shadow:0 12px 34px rgba(142,176,255,0.28), 0 0 0 1px rgba(255,255,255,0.08); }
.mus-art img { width:100%; height:100%; object-fit:cover; display:block; }
.mus-meta { grid-area:meta; min-width:0; }
.mus-meta b, .mus-meta span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mus-meta b { font-size:15.5px; font-weight:680; letter-spacing:-0.01em; }
.mus-meta span { font-size:12.5px; color:var(--muted); margin-top:2px; }
.mus-btns { grid-area:btns; display:flex; align-items:center; gap:10px; }
.mus-btns button { appearance:none; border:0; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:transparent; color:#eef1f8; cursor:pointer; transition:background .2s, transform .15s; }
.mus-btns button:hover { background:rgba(255,255,255,0.1); }
.mus-btns button:active { transform:scale(0.92); }
.mus-btns svg { width:20px; height:20px; }
.mus-btns .mplay { width:52px; height:52px; color:#0a0c12; background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:0 8px 22px rgba(142,176,255,0.4); }
.mus-btns .mplay:hover { background:linear-gradient(135deg,var(--accent),var(--accent2)); filter:brightness(1.1); transform:scale(1.06); }
.mus-btns .mplay svg { width:24px; height:24px; }
.mplay .pause { display:none; } .mplay.on .pause { display:block; } .mplay.on .play { display:none; }
.mus-seek { grid-area:seek; display:flex; align-items:center; gap:10px; font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.mus-vol { grid-area:vol; display:flex; align-items:center; gap:8px; color:var(--muted); }
.mus-vol svg { width:18px; height:18px; flex:none; }
.mus-vol input { width:96px; }
.mus-seek input { flex:1; min-width:0; }
.mus input[type=range] { -webkit-appearance:none; appearance:none; height:5px; border-radius:5px; outline:none; cursor:pointer;
  background:linear-gradient(90deg, var(--accent) 0, var(--accent2) var(--p), rgba(255,255,255,0.16) var(--p)); }
.mus input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,0.5); transition:transform .15s; }
.mus input[type=range]:hover::-webkit-slider-thumb { transform:scale(1.25); }
.mus input[type=range]::-moz-range-thumb { width:14px; height:14px; border:0; border-radius:50%; background:#fff; }
.mus-hide { position:absolute; left:0; bottom:0; width:4px; height:4px; opacity:0.01; overflow:hidden; pointer-events:none; }

/* narrow windows */
@container (max-width: 560px) {
  .mus-bar { grid-template-columns:64px minmax(0,1fr); grid-template-areas:"art meta" "seek seek" "btns btns"; margin:0 10px 10px; padding:12px 14px; }
  .mus-art { width:64px; height:64px; border-radius:14px; }
  .mus-btns { justify-content:center; gap:18px; }
  .mus-vol { display:none; }
  .mus-head h2 { font-size:24px; }
  .mus-top { max-width:none; }
}
@media (prefers-reduced-motion: reduce) { .mus *, .mus::before { animation:none !important; transition:none !important; } }