/* MediaPages ArtPlayer theme — engine-first reference theme */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; background: #0b0c0f; color: #e8e8ea; font-family: system-ui, sans-serif; overflow: hidden; }

.topbar { position: absolute; inset: 0 0 auto 0; height: 56px; display: flex; align-items: center; gap: 16px; padding: 0 18px; z-index: 30; background: linear-gradient(180deg, rgba(0,0,0,.65), transparent); }
.menu-toggle-btn { background: rgba(255,255,255,.08); color: inherit; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; padding: 8px 12px; cursor: pointer; }
.now-playing { font-size: 13px; color: #a9adb6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sidebar { position: absolute; top: 56px; left: 0; width: 320px; max-width: 86vw; height: calc(100% - 56px); background: rgba(17,18,22,.94); border-right: 1px solid #24262c; transform: translateX(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1); z-index: 40; display: flex; flex-direction: column; }
.sidebar.open { transform: translateX(0); }
.sidebar-header { padding: 18px; font-weight: 600; border-bottom: 1px solid #24262c; }
.tree-container { flex: 1; overflow-y: auto; }
.file-list { list-style: none; }
.file-list li { padding: 11px 18px; font-size: 14px; cursor: pointer; border-bottom: 1px solid #1b1d22; display: flex; gap: 8px; line-height: 1.4; word-break: break-all; }
.file-list li:hover { background: #1d1f25; }
.file-list li.active { background: rgba(241,139,72,.14); border-left: 3px solid #f18b48; color: #f7b083; }
.back-btn { padding: 11px 18px; cursor: pointer; color: #9aa0aa; border-bottom: 1px solid #24262c; }

.main-content { width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; }
.placeholder { color: #6c7078; }
.media-viewer { width: 100%; height: 100%; object-fit: contain; background: #000; }
.artplayer-container { width: 100%; height: 100%; }
.artplayer-container[hidden] { display: none; }
.artplayer-container .art-video-player { width: 100%; height: 100%; }
.subtitle-layer { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.subtitle-layer canvas { width: 100% !important; height: 100% !important; }

[hidden] { display: none !important; }

/* Eva libass canvas positioning: keep the renderer's own aspect-ratio sizing. */
.art-video-player .libassjs-canvas-parent { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: 19; pointer-events: none; }
.art-video-player .libassjs-canvas { pointer-events: none !important; }

.art-layer-mediapages-topbar .topbar { position: relative; opacity: 0; visibility: hidden; transition: opacity .2s; }
.art-control-show .art-layer-mediapages-topbar .topbar { opacity: 1; visibility: visible; }
.mp-controls-idle .art-layer-mediapages-topbar .topbar { opacity: 0; visibility: hidden; }
.mp-controls-idle .art-bottom { opacity: 0 !important; pointer-events: none; }
.mp-controls-idle .art-controls, .mp-controls-idle .art-progress { pointer-events: none !important; }
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #24262c; }
.sidebar-header { border: 0; min-width: 0; }
#library-close { color: #eee; background: transparent; border: 0; padding: 14px; font-size: 20px; cursor: pointer; }
#artplayer-container .art-setting-range { width: 88px !important; height: 28px !important; touch-action: none; }