.royal-media { width:100%; margin:18px 0; border:1px solid var(--site-border,#e1e6ef); border-radius:14px; overflow:hidden; background:#0b1020; box-shadow:0 8px 24px #0b122014; text-align:left; }
.royal-media-header { display:flex; align-items:center; gap:16px; min-height:46px; padding:10px 16px; box-sizing:border-box; background:var(--site-surface,#fff); color:var(--site-text,#202838); }
.royal-media-brand { flex:none; font-size:14px; font-weight:800; letter-spacing:-.5px; }
.royal-media-brand > span { margin-left:7px; font-size:10px; letter-spacing:1.4px; color:var(--site-primary,#1a73fc); }
.royal-media-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; opacity:.7; }
.royal-media-stage { width:100%; aspect-ratio:16/9; position:relative; background:#080c17; }
.royal-media-stage > video { width:100%; height:100%; object-fit:contain; }
.royal-media-audio .royal-media-stage { aspect-ratio:auto; height:100px; }
.royal-media-stage > audio { width:100%; }
.royal-media .art-video-player { font-family:inherit; --art-theme:#1a73fc; --art-control-height:46px; --art-control-icon-size:22px; --art-border-radius:8px; --art-settings-background:rgba(15,23,42,.96); }
.royal-media .art-bottom { padding:0 14px; background:linear-gradient(transparent,rgba(5,10,24,.92)); }
.royal-media .art-control { border-radius:7px; }
.royal-media .art-control:hover { background:rgba(255,255,255,.1); }
.royal-media .art-state { width:72px; height:72px; filter:drop-shadow(0 6px 20px #0006); }
.royal-media .art-progress-played { background:#1a73fc; }
.royal-media .art-settings { border:1px solid #ffffff24; border-radius:12px; backdrop-filter:blur(12px); }
.royal-media-status { padding:12px 16px; background:#17213a; color:#e2e8f0; font-size:13px; }
.royal-media-status[hidden] { display:none; }
.royal-media-playlist { display:flex; align-items:center; gap:12px; margin:0; padding:12px 16px; font-size:13px; color:#e2e8f0; }
.royal-media-playlist select { flex:1; min-width:0; border:1px solid #334155; border-radius:7px; padding:8px; background:#17213a; color:#fff; }
@media(max-width:600px){.royal-media{border-radius:10px;margin:12px 0}.royal-media-header{padding:9px 12px;min-height:42px;gap:10px}.royal-media-brand{font-size:13px}.royal-media-title{font-size:11px}.royal-media .art-bottom{padding:0 8px}.royal-media .art-video-player{--art-control-height:40px;--art-control-icon-size:20px}.royal-media .art-state{width:56px;height:56px}}