:root { color-scheme: light; --navy:#13213a; --blue:#2366d1; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:#101b2f; }
.player-shell { width:100%; height:100%; display:grid; grid-template-rows:auto minmax(0,1fr); background:#edf2f8; }
.player-bar { min-height:58px; padding:max(.45rem,env(safe-area-inset-top)) max(.75rem,env(safe-area-inset-right)) .45rem max(.75rem,env(safe-area-inset-left)); display:flex; align-items:center; gap:.65rem; color:#fff; background:var(--navy); box-shadow:0 2px 12px rgba(0,0,0,.2); z-index:2; }
.player-title { display:flex; align-items:center; gap:.55rem; white-space:nowrap; }
.player-title span { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,#2366d1,#7456d8); font-weight:900; }
.player-status { margin-left:auto; color:#cbd8e9; font-size:.78rem; text-align:right; }
.player-bar button { min-height:40px; padding:.5rem .75rem; border:1px solid rgba(255,255,255,.25); border-radius:.65rem; color:#fff; background:rgba(255,255,255,.09); font:inherit; font-weight:750; cursor:pointer; }
.player-bar button:hover,.player-bar button:focus-visible { background:rgba(255,255,255,.18); }
.player-bar button:focus-visible { outline:3px solid #f5bf47; outline-offset:2px; }
#moduleFrame { display:block; width:100%; height:100%; min-height:0; border:0; background:#edf2f8; }
.player-shell.focus-fallback { position:fixed; inset:0; z-index:2147483647; }
@media (max-width:680px) {
  .player-bar { min-height:54px; gap:.4rem; }
  .player-title strong,.player-status { display:none; }
  .player-title { margin-right:auto; }
  .player-bar button { padding:.45rem .58rem; font-size:.78rem; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }