/* Kazan Daily — Music mode (Apple-Music-style layout). Respects the person's theme. */
body.mu{display:grid;grid-template-rows:auto minmax(0,1fr);height:100svh;height:100dvh;overflow:hidden}
body.mu::before{display:none}
.mu-bg{position:fixed;inset:-10%;z-index:-1;background:var(--bg);transition:background-image .8s}
.mu-bg.art{background-size:cover;background-position:center;filter:blur(70px) saturate(1.4) brightness(.3)}
.mu-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),var(--bg) 85%)}
.ib{appearance:none;border:0;background:transparent;color:var(--ink-2);width:40px;height:40px;border-radius:50%;font-size:18px;cursor:pointer;display:grid;place-items:center;position:relative;text-decoration:none}
.ib:hover{background:var(--panel-2);color:var(--ink)}
.ib[aria-pressed="true"]{color:var(--accent)}
.ib svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ib svg [fill="currentColor"]{stroke:none}
.ib .i-pause{display:none}.ib.playing .i-play{display:none}.ib.playing .i-pause{display:block}
.ib.sm{width:34px;height:34px;font-size:16px}
.ib .badge{position:absolute;top:2px;right:2px;font:700 10px var(--mono);background:var(--accent);color:var(--on-accent);border-radius:8px;padding:0 5px;min-width:16px;text-align:center}
.ib .badge:empty{display:none}

/* ── top bar ── */
.mu-top{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,560px) minmax(220px,1fr);gap:16px;align-items:center;padding:8px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));
  background:var(--top-bg,rgba(12,10,18,.7));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line);z-index:5}
.mu-transport{display:flex;gap:4px;align-items:center}
.ib.big{width:46px;height:46px;background:var(--ink);color:var(--bg)}
.ib.big:hover{background:var(--ink);filter:brightness(1.1)}
.mu-lcd{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;background:color-mix(in srgb,var(--panel) 75%,transparent);border:1px solid var(--line);border-radius:12px;padding:6px 8px 6px 6px;min-height:64px}
.mu-lcd img{width:52px;height:52px;border-radius:8px;object-fit:cover;background:var(--panel-3)}
.mu-lcd img[src=""]{visibility:hidden}
.mu-lcd-in{min-width:0;display:grid;gap:4px}
.mu-lcd-txt{text-align:center;min-width:0}
.mu-lcd-txt b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mu-lcd-txt span{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mu-prog{display:flex;align-items:center;gap:8px;width:100%}
.mu-prog .num{font-size:11px;color:var(--muted);min-width:34px}
.mu-prog .num:last-child{text-align:right}
input[type=range].seek,#seek,#np-seek{flex:1;appearance:none;-webkit-appearance:none;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--accent) var(--p,0%),var(--panel-3) 0);outline:none;margin:0;width:100%}
#seek::-webkit-slider-thumb,#np-seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.4)}
#seek::-moz-range-thumb,#np-seek::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--ink);border:0}
.mu-tools{display:flex;gap:4px;align-items:center;justify-content:flex-end}
.mu-search{position:relative;flex:1;max-width:320px}
.mu-search .in{border-radius:999px;padding:8px 14px;font-size:14px;background:color-mix(in srgb,var(--panel) 70%,transparent)}
.mu-sres{position:absolute;top:calc(100% + 6px);right:0;width:min(520px,calc(100vw - 32px));background:var(--panel);border:1px solid var(--line-2);border-radius:16px;box-shadow:var(--sh-3);padding:6px;display:grid;gap:4px;max-height:60vh;overflow:auto;z-index:20}
.mu-sres .res img{width:56px;height:42px;border-radius:6px;object-fit:cover}

/* ── body ── */
.mu-main{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:0}
.mu-side{border-right:1px solid var(--line);overflow:auto;padding:14px 10px;display:grid;gap:3px;align-content:start}
.mu-side h3{font:600 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:10px 8px 6px}
.pl{appearance:none;border:0;background:transparent;color:var(--ink-2);text-align:left;font:500 14px var(--ui);padding:9px 12px;border-radius:10px;cursor:pointer;display:flex;justify-content:space-between;gap:8px;align-items:center}
.pl:hover{background:var(--panel-2)}.pl[aria-current="true"]{background:var(--panel-3);color:var(--ink)}
.pl span{font:500 12px var(--mono);color:var(--muted)}
.mu-imp{margin:10px 8px;padding:12px;border-radius:14px;background:var(--panel-2);border:1px dashed var(--line-2);font-size:13px;color:var(--ink-2);display:grid;gap:8px}
.mu-imp b{font-size:13.5px;color:var(--ink)}.mu-imp .btn{justify-content:center}
.mu-list{overflow:auto;padding:20px max(18px,env(safe-area-inset-right)) 24px 22px;-webkit-overflow-scrolling:touch}
.mu-head{display:flex;align-items:end;gap:18px;margin-bottom:18px;flex-wrap:wrap}
.mu-cover{width:150px;height:150px;border-radius:16px;overflow:hidden;background:var(--panel-3);display:grid;grid-template-columns:1fr 1fr;flex:none;box-shadow:var(--sh-3)}
.mu-cover img{width:100%;height:100%;object-fit:cover;display:block}
.mu-head h1{font-size:clamp(28px,4vw,48px);letter-spacing:-.03em}
.mu-head .sub{color:var(--muted);font-size:13.5px;margin-top:4px}
.mu-head .acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.tr{display:grid;grid-template-columns:28px 46px minmax(0,1fr) auto;gap:12px;align-items:center;padding:7px 8px;border-radius:12px;cursor:pointer;color:var(--ink-2)}
.tr:hover{background:var(--panel-2)}
.tr.on{background:var(--panel-3);color:var(--ink)}
.tr .n{font:500 12px var(--mono);color:var(--faint);text-align:right}
.tr.on .n{color:var(--accent)}
.tr img{width:46px;height:34px;object-fit:cover;border-radius:6px;background:var(--panel-3)}
.tr .tt{min-width:0}.tr .tt b{display:block;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr .tt span{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.tr .ib{opacity:0}.tr:hover .ib,.tr.on .ib{opacity:1}
@media (hover:none){.tr .ib{opacity:1}}

/* ── video popover (desktop) ── */
.mu-frame{position:fixed;right:16px;top:84px;width:min(420px,calc(100vw - 32px));aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;box-shadow:var(--sh-3);z-index:40;display:none}
.mu-frame iframe{width:100%;height:100%;border:0;display:block}
body.mu.video .mu-frame{display:block}

/* ── queue ── */
.mu-queue{position:fixed;right:16px;top:84px;width:min(380px,calc(100vw - 32px));max-height:70vh;overflow:auto;background:var(--panel);border:1px solid var(--line-2);border-radius:18px;box-shadow:var(--sh-3);z-index:45;padding:10px}
.mu-qhead{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 8px}
.mu-queue .tr{grid-template-columns:46px minmax(0,1fr) auto}

/* ── phone: mini player + full Now Playing ── */
.mu-mini,.mu-np{display:none}
@media (max-width:860px){
  body.mu{grid-template-rows:auto minmax(0,1fr) auto}
  .mu-top{grid-template-columns:1fr;gap:8px;padding:10px 12px}
  .mu-transport,.mu-lcd,#b-video,#b-queue{display:none}
  .mu-tools{justify-content:stretch}.mu-search{max-width:none}
  .mu-main{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .mu-side{border-right:0;border-bottom:1px solid var(--line);display:flex;gap:6px;overflow-x:auto;padding:10px 12px;align-items:center;scrollbar-width:none}
  .mu-side::-webkit-scrollbar{display:none}
  .mu-side h3{display:none}.mu-side .pl{white-space:nowrap;flex:none;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 12px}
  .mu-imp{flex:none;margin:0;padding:7px 12px;border-radius:999px;display:flex;align-items:center;gap:8px}
  .mu-imp span{display:none}
  .mu-list{padding:16px 14px 90px}
  .mu-cover{width:96px;height:96px;border-radius:12px}
  .mu-head h1{font-size:26px}
  .tr{grid-template-columns:46px minmax(0,1fr) auto}.tr .n{display:none}
  .mu-mini{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;gap:10px;align-items:center;appearance:none;border:0;border-top:1px solid var(--line);text-align:left;color:var(--ink);font:inherit;width:100%;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:var(--top-bg,rgba(12,10,18,.85));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);position:relative;z-index:6}
  .mu-mini img{width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--panel-3)}
  .mu-mini-txt{min-width:0}.mu-mini-txt b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mu-mini-txt span{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mu-mini .ib{width:44px;height:44px}
  .mu-mini-bar{position:absolute;left:0;top:0;height:2px;width:var(--p,0%);background:var(--accent)}
  .mu-np{position:fixed;inset:0;z-index:50;display:grid;grid-template-rows:auto 1fr auto auto auto;gap:18px;padding:calc(10px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,color-mix(in srgb,var(--panel-3) 60%,transparent),var(--bg) 70%);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);animation:npin .28s var(--ease)}
  .mu-np[hidden]{display:none}
  @keyframes npin{from{transform:translateY(40px);opacity:0}}
  .mu-np-head{display:flex;justify-content:space-between;align-items:center}
  .mu-np-from{font:600 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .mu-np-art{width:min(82vw,420px);aspect-ratio:1;object-fit:cover;border-radius:18px;background:var(--panel-3);justify-self:center;align-self:center;box-shadow:0 30px 70px -20px rgba(0,0,0,.8);transition:transform .3s var(--ease)}
  body.mu.paused .mu-np-art{transform:scale(.88)}
  .mu-np-txt{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px}
  .mu-np-txt b{font-size:20px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mu-np-txt span{grid-column:1;font-size:15px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mu-np-txt .ib{grid-column:2;grid-row:1/3;width:40px;height:40px;font-size:22px}
  .mu-prog.big{display:grid;gap:6px}
  .mu-times{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
  .mu-np-ctl{display:flex;justify-content:space-between;align-items:center;padding:0 4px}
  .ib.xl{width:64px;height:64px}.ib.xl svg{width:32px;height:32px}
  .ib.xxl{width:78px;height:78px;background:var(--ink);color:var(--bg)}.ib.xxl svg{width:36px;height:36px}
  .mu-frame{top:auto;bottom:calc(76px + env(safe-area-inset-bottom));right:8px;left:8px;width:auto}
  .mu-queue{top:auto;bottom:calc(76px + env(safe-area-inset-bottom));right:8px;left:8px;width:auto;max-height:60vh;z-index:55}
}

/* volume + settings */
.mu-vol{display:flex;align-items:center;gap:4px}
.mu-vol input[type=range]{width:90px;appearance:none;-webkit-appearance:none;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--ink-2) var(--p,80%),var(--panel-3) 0);margin:0}
.mu-vol input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--ink)}
.mu-vol input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--ink);border:0}
.mu-vol.np{display:none}
.mu-set{position:fixed;right:16px;top:84px;width:min(420px,calc(100vw - 32px));max-height:calc(100vh - 100px);overflow:auto;background:var(--panel);border:1px solid var(--line-2);border-radius:18px;box-shadow:var(--sh-3);z-index:46;padding:12px 14px 16px}
.ms-body h4{margin:16px 0 6px;font:600 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ms-body h4:first-child{margin-top:4px}
.ms-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.ms-row input[type=checkbox]{appearance:none;width:38px;height:22px;border-radius:999px;background:var(--panel-3);position:relative;transition:background .2s;margin:0;cursor:pointer}
.ms-row input[type=checkbox]::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--ink);transition:left .2s}
.ms-row input[type=checkbox]:checked{background:var(--accent)}.ms-row input[type=checkbox]:checked::after{left:19px}
.ms-body textarea.in{resize:vertical;min-height:70px;font-size:14px}
.ms-body kbd{font:600 11px var(--mono);background:var(--panel-3);border:1px solid var(--line-2);border-radius:5px;padding:1px 6px}
.in.sel{width:auto;padding:6px 10px;border-radius:10px;font-size:13.5px}
@media (max-width:860px){.mu-vol{display:none}.mu-vol.np{display:flex;gap:10px;align-items:center}.mu-vol.np input{flex:1;width:auto}.mu-set{top:auto;bottom:calc(76px + env(safe-area-inset-bottom));right:8px;left:8px;width:auto;max-height:70vh}#b-set{display:grid}}
.mu-tools{flex-wrap:nowrap}.mu-search{flex:1 1 200px;min-width:150px}
@media (max-width:1180px){.mu-vol input[type=range]{width:60px}}
@media (max-width:1000px){.mu-top{grid-template-columns:auto minmax(0,1fr) auto}.mu-lcd{max-width:none}}

/* ═══════════ dashboard inside music mode + docked player ═══════════ */
.mu-home{position:fixed;inset:0 0 72px 0;z-index:60;background:var(--bg)}
.mu-home iframe{width:100%;height:100%;border:0;display:block;background:var(--bg)}
.mu-dock{position:fixed;left:0;right:0;bottom:0;height:72px;z-index:61;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;padding:0 18px calc(env(safe-area-inset-bottom) * .5);
  background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-top:1px solid var(--line-2);box-shadow:0 -10px 30px rgba(0,0,0,.35)}
.mu-dock[hidden],.mu-home[hidden]{display:none}
.mu-dock-now{appearance:none;border:0;background:none;color:var(--ink);font:inherit;text-align:left;display:flex;align-items:center;gap:12px;min-width:0;cursor:pointer;padding:6px;border-radius:12px}
.mu-dock-now:hover{background:var(--panel-2)}
.mu-dock-now img{width:48px;height:48px;border-radius:9px;object-fit:cover;background:var(--panel-3);flex:none;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.mu-dock-txt{min-width:0;display:flex;flex-direction:column}.mu-dock-txt b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mu-dock-txt span{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mu-dock-ctl{display:flex;align-items:center;gap:6px}
.mu-dock-ctl .ib .i-pause,.mu-dock-ctl .ib.playing .i-play{display:none}.mu-dock-ctl .ib.playing .i-pause{display:block}
.mu-dock-r{display:flex;align-items:center;gap:12px;justify-content:flex-end;min-width:0}
.mu-dock-r #dock-time{font:500 12px var(--mono);color:var(--muted);white-space:nowrap}
.mu-dock-r input[type=range]{width:110px}
.mu-dock-bar{position:absolute;left:0;right:0;top:-1px;height:2px;background:linear-gradient(90deg,var(--accent) var(--p,0%),transparent var(--p,0%))}
body.home-open .mu-top,body.home-open .mu-main,body.home-open .mu-mini{visibility:hidden}
@media (max-width:860px){
  .mu-home{bottom:64px}
  .mu-dock{height:64px;grid-template-columns:minmax(0,1fr) auto;padding:0 8px 0 6px;gap:6px}
  .mu-dock-r{display:none}.mu-dock-ctl #dock-prev{display:none}
  .mu-dock-now img{width:44px;height:44px}
}

.ms-more{display:block;margin-top:18px;padding:12px 14px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600;font-size:13.5px}
.ms-more:hover{border-color:var(--line-2)}
.mu-imp textarea{width:100%;margin:6px 0;font-size:14px;resize:vertical}
.mu-copy{position:fixed;left:16px;bottom:6px;margin:0;font-size:10.5px;color:var(--muted);opacity:.6;pointer-events:none;z-index:1}@media (max-width:860px){.mu-copy{display:none}}body.home-open .mu-copy{display:none}