.media-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:28px}.media-heading h1{margin:0;font-size:clamp(2.5rem,6vw,4.8rem);line-height:1;letter-spacing:-.055em}.media-heading .intro{margin-top:18px}.back-link{flex:none;color:#5e46c7;text-decoration:none;font-weight:700;padding:10px 14px;border-radius:10px;background:rgba(101,72,216,.08)}.media-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);gap:18px;align-items:start}.player-panel,.library-panel{border:1px solid var(--border);border-radius:20px;background:rgba(255,254,251,.88);box-shadow:0 15px 42px rgba(38,40,46,.065);overflow:hidden}.player-frame{position:relative;aspect-ratio:16/9;background:#12141a;display:grid;place-items:center}.player-frame video{display:block;width:100%;height:100%;object-fit:contain}.player-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#fff;background:radial-gradient(circle at 50% 30%,#323644,#111319 65%)}.player-empty[hidden]{display:none}.player-empty>span{width:58px;height:58px;display:grid;place-items:center;padding-left:4px;border-radius:50%;background:#7258dc;box-shadow:0 12px 32px rgba(0,0,0,.25);margin-bottom:18px}.player-empty strong{font-size:1.1rem}.player-empty small{margin-top:6px;color:#aeb3be}.now-playing{padding:20px 22px}.now-playing p{margin:0 0 5px;color:#7258dc;font-size:.69rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.now-playing h2{margin:0;font-size:1.25rem;letter-spacing:-.025em}.now-playing>span{display:block;margin-top:5px;color:var(--muted);font-size:.8rem}.library-toolbar{padding:18px;border-bottom:1px solid var(--border)}.library-toolbar label{display:flex;justify-content:space-between;margin-bottom:10px;font-size:.88rem;font-weight:800}.library-toolbar label span{color:var(--muted);font-weight:500}.library-toolbar input{width:100%;border:1px solid var(--border);border-radius:11px;background:#fff;padding:11px 13px;color:var(--text);font:inherit;outline:none}.library-toolbar input:focus{border-color:#8068df;box-shadow:0 0 0 3px rgba(101,72,216,.12)}.media-list{max-height:550px;overflow:auto}.media-item{width:100%;display:flex;align-items:center;gap:11px;border:0;border-bottom:1px solid rgba(35,39,47,.075);background:transparent;padding:13px 16px;color:inherit;text-align:left;cursor:pointer}.media-item:hover,.media-item.active{background:rgba(101,72,216,.065)}.media-item.active{box-shadow:inset 3px 0 #7258dc}.media-play{flex:0 0 31px;width:31px;height:31px;display:grid;place-items:center;padding-left:2px;border-radius:9px;background:#ebe7fa;color:#6548d8;font-size:.68rem}.media-details{display:flex;min-width:0;flex:1;flex-direction:column;gap:3px}.media-details strong,.media-details small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.media-details strong{font-size:.84rem}.media-details small,.media-size{color:var(--muted);font-size:.69rem}.media-size{flex:none}.empty-library,.no-results{padding:35px 20px;text-align:center;color:var(--muted)}.empty-library{display:flex;flex-direction:column;gap:7px}.empty-library strong{color:var(--text)}.no-results{margin:0}@media(max-width:850px){.media-layout{grid-template-columns:1fr}.media-list{max-height:420px}}@media(max-width:620px){.media-heading{align-items:flex-start;flex-direction:column}.back-link{order:-1}.player-panel,.library-panel{border-radius:15px}.now-playing{padding:16px}.media-size{display:none}}

/* Media uses a wider canvas than the dashboard and places the library below the player. */
.media-heading,.media-layout{width:min(calc(100vw - 48px),1500px);position:relative;left:50%;transform:translateX(-50%)}
.media-layout{grid-template-columns:minmax(0,1fr);gap:24px}
.library-toolbar{padding:22px 24px}
.library-toolbar label{font-size:1rem}
.library-toolbar input{padding:13px 15px;font-size:.95rem}
.media-list{max-height:720px}
.media-item{gap:14px;padding:16px 22px}
.media-play{width:38px;height:38px;flex-basis:38px}
.media-details strong{font-size:.95rem}
.media-details small,.media-size{font-size:.78rem}
@media(max-width:620px){.media-heading,.media-layout{width:calc(100vw - 28px)}.media-list{max-height:560px}.media-item{padding:14px 13px}}