#cinema-preview[hidden] { display: none !important; }
.loult-local-sound {
    display: grid; grid-template-columns: minmax(0, 1fr) 3.5em; gap: 2px 6px;
    width: 100%; min-width: 0; padding: 5px 0; box-sizing: border-box;
    color: inherit; font: 12px/1.3 system-ui, sans-serif;
}
.loult-local-sound label { grid-column: 1 / -1; font-size: 11px; }
.loult-local-sound input[type="range"] { display: block; width: 100%; min-width: 0; margin: 0; height: 24px; cursor: pointer; accent-color: #63d8ff; }
.loult-local-sound output { align-self: center; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.loult-local-sound input:focus-visible { outline: 2px solid #63d8ff; outline-offset: 2px; }
#cinema-controls > #cinema-local-sound { flex: 1 0 100%; }
#cinema-preview {
    position: fixed;
    right: calc(var(--loult-rail-width, 0px) + 12px);
    bottom: calc(var(--loult-footer-height, 64px) + 12px + env(safe-area-inset-bottom, 0px));
    z-index: 25;
    width: min(320px, calc(100vw - 24px));
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #766491;
    border-radius: 12px;
    background: #181323;
    color: #f4efff;
    box-shadow: 0 8px 30px #0009;
    font: 12px/1.4 system-ui, sans-serif;
}
.cinema-preview-heading { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; }
.cinema-preview-heading span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#cinema-preview button, #cinema-now-playing button {
    border: 1px solid #88749f;
    border-radius: 7px;
    background: #30243f;
    color: #f4efff;
    font: inherit;
    cursor: pointer;
}
.cinema-preview-heading button { width: 30px; height: 30px; font-size: 22px !important; line-height: 1; }
.cinema-preview-stage { position: relative; width: 100%; height: 200px; background: #000; pointer-events: none; }
.cinema-preview-stage video, .cinema-preview-stage iframe { width: 100%; height: 100%; border: 0; object-fit: contain; }
#cinema-preview p { margin: 8px 12px; color: #c7b8d9; }
#cinema-preview .cinema-preview-join { display: block; width: calc(100% - 24px); margin: 0 12px 12px; padding: 7px 10px; }
#cinema-preview button:hover, #cinema-now-playing button:hover { background: #49345d; }
#cinema-preview button:focus-visible, #cinema-now-playing button:focus-visible { outline: 2px solid #63d8ff; outline-offset: 2px; }
#cinema-now-playing[hidden] { display: none !important; }
#cinema-now-playing {
    position: absolute; top: 8px; right: 12px; z-index: 2;
    display: flex; align-items: center; gap: 8px; pointer-events: auto;
    max-width: calc(100% - 24px); margin: 0; padding: 6px 10px; box-sizing: border-box;
    border: 1px solid #bea6ff73; border-radius: 12px; background: #140e22e0;
    color: #f4efff; font-size: 12px; line-height: 1.4; white-space: nowrap;
}
#cinema-now-playing::before { content: ''; flex: 0 0 7px; height: 7px; margin-right: 0; border-radius: 50%; background: #b8afc8; }
#cinema-now-playing.is-playing::before { background: #67e8a5; }
#cinema-now-playing span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#cinema-now-playing button { flex: none; padding: 3px 7px; }
@media (max-width: 600px) {
    #cinema-preview { right: 8px; width: min(288px, calc(100vw - 16px)); }
    #cinema-now-playing { right: 6px; max-width: calc(100% - 12px); padding: 4px 6px; }
}