*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#111;color:#fff;font-family:Arial,Helvetica,sans-serif}body{padding:14px}button,input,select{font:inherit}#app{width:min(1320px,100%);margin:auto;overflow:hidden;border:1px solid #4b4b4b;border-radius:12px;background:#252525;box-shadow:0 18px 50px #0009}header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 18px;border-bottom:1px solid #4b4b4b;background:#303030}h1{margin:0;color:#ffd84a;font-size:1.45rem}header p{margin:4px 0 0;color:#aaa;font-size:.8rem}.headerButtons{display:flex;flex-wrap:wrap;gap:8px}button{padding:8px 13px;border:0;border-radius:6px;background:#555;color:#fff;cursor:pointer}button:hover{background:#ffd84a;color:#111}main{padding:14px}.stage{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:16/9;overflow:hidden;background:#050505;border:1px solid #555;border-radius:9px}.stage video,.advertisement,.advertisement img,.advertisement video{width:100%;height:100%}.stage video{object-fit:contain;background:#000}.advertisement{position:absolute;inset:0;display:grid;place-items:center;background:#000}.advertisement img,.advertisement video{object-fit:contain}.countdown{position:absolute;right:18px;bottom:18px;padding:8px 12px;border-radius:999px;background:#000b;color:#fff;font-weight:700}.welcome{position:absolute;display:grid;gap:8px;text-align:center;color:#aaa}.welcome strong{color:#ffd84a;font-size:1.3rem}.hidden{display:none!important}.controlPanel{display:grid;grid-template-columns:minmax(210px,1fr) minmax(210px,1fr) 160px auto auto minmax(150px,.7fr);align-items:end;gap:10px;margin-top:12px;padding:12px;border:1px solid #4b4b4b;border-radius:8px;background:#303030}.field{display:grid;gap:5px}.field label,.check{color:#ccc;font-size:.8rem}.field input[type=file],select{width:100%;min-height:36px;padding:6px;border:1px solid #666;border-radius:5px;background:#444;color:#fff}.check{display:flex;align-items:center;gap:6px;min-height:36px;white-space:nowrap}.check input{width:17px;height:17px}.volumeField input{width:100%}.statusPanel{display:flex;justify-content:space-between;gap:20px;margin-top:10px;padding:9px 12px;border:1px solid #397039;border-radius:6px;background:#1b2b1b;color:#a8ffa8;font-size:.82rem}footer{padding:10px;text-align:center;color:#888;border-top:1px solid #444;font-size:.75rem}@media(max-width:1050px){.controlPanel{grid-template-columns:1fr 1fr 1fr}.headerButtons{justify-content:flex-end}}@media(max-width:700px){body{padding:0}#app{border-radius:0}header{align-items:flex-start;flex-direction:column}.headerButtons{width:100%}.headerButtons button{flex:1}.controlPanel{grid-template-columns:1fr}.statusPanel{align-items:flex-start;flex-direction:column;gap:4px}}
.folderInfo{display:grid;gap:5px;min-height:36px;padding:6px 9px;border:1px solid #666;border-radius:5px;background:#444}.folderInfo span{color:#aaa;font-size:.72rem}.folderInfo strong{color:#ffd84a;font-size:.88rem}.videoFilename{position:absolute;z-index:4;left:16px;bottom:16px;max-width:calc(100% - 32px);padding:3px 5px;background:transparent;color:#fff;font-size:.9rem;font-weight:600;line-height:1.2;text-shadow:-1px -1px 0 #000,0 -1px 0 #000,1px -1px 0 #000,-1px 0 0 #000,1px 0 0 #000,-1px 1px 0 #000,0 1px 0 #000,1px 1px 0 #000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.videoClock{position:absolute;z-index:5;top:16px;right:16px;padding:3px 5px;background:transparent;color:#fff;font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2;text-shadow:-1px -1px 0 #000,0 -1px 0 #000,1px -1px 0 #000,-1px 0 0 #000,1px 0 0 #000,-1px 1px 0 #000,0 1px 0 #000,1px 1px 0 #000;pointer-events:none}.musicPlaylistField{min-width:180px}.musicMuteButton{position:absolute;z-index:5;right:16px;bottom:16px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #ffffff66;border-radius:50%;background:#000a;color:#fff;font-size:1.35rem;line-height:1;cursor:pointer}.musicMuteButton:hover{background:#ffd84a;color:#111}.musicMuteButton[aria-pressed="true"]{border-color:#ffd84a;background:#000c;color:#ffd84a}.headerVideoPlaylist{display:grid;gap:2px;min-width:180px}.headerVideoPlaylist label{color:#aaa;font-size:.7rem}.headerVideoPlaylist select{width:100%;min-height:36px;padding:6px;border:1px solid #666;border-radius:5px;background:#444;color:#fff}@media(max-width:700px){.headerVideoPlaylist{width:100%;min-width:0}.headerButtons{align-items:end}}.headerMusicPlaylist{display:grid;gap:2px;min-width:180px}.headerMusicPlaylist label{color:#aaa;font-size:.7rem}.headerMusicPlaylist select{width:100%;min-height:36px;padding:6px;border:1px solid #666;border-radius:5px;background:#444;color:#fff}@media(max-width:700px){.headerMusicPlaylist{width:100%;min-width:0}}.escapeHint{position:absolute;z-index:5;right:70px;bottom:25px;padding:3px 7px;border-radius:4px;background:#0005;color:#ffffffb8;font-size:.72rem;line-height:1;letter-spacing:.03em;pointer-events:none}.stage video{opacity:1}.stage video.videoFadeOut{opacity:0;transition:opacity 2s linear}#videoSoundButton.active,#clockButton.active{background:#ffd84a;color:#111}.videoSoundControl{align-self:end;min-height:36px}.videoSoundControl:disabled{border-color:#666;background:#444;color:#aaa;cursor:default;opacity:.75}
.field.compact{width:155px;max-width:100%}.field.compact select{width:155px;max-width:100%}@media(max-width:700px){.field.compact,.field.compact select{width:100%}}
.advertisementManager{margin-top:10px}.advertisementManager details{border:1px solid #4b4b4b;border-radius:8px;background:#303030}.advertisementManager summary{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;color:#ffd84a;font-weight:700;cursor:pointer}.advertisementManager summary span{display:inline-grid;place-items:center;min-width:25px;height:25px;padding:0 7px;border-radius:999px;background:#555;color:#fff;font-size:.75rem}.advertisementManagerBody{display:grid;gap:12px;padding:0 13px 13px}.advertisementUpload{display:flex;flex-wrap:wrap;gap:8px}.advertisementUpload input[type=file]{flex:1;min-width:240px;padding:7px;border:1px solid #666;border-radius:5px;background:#444;color:#fff}.advertisementFileList{display:grid;gap:6px;margin:0;padding:0;list-style:none}.advertisementFileList li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 9px;border-radius:5px;background:#242424}.advertisementFileList li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.advertisementFileList form{margin:0}.advertisementDelete{padding:6px 9px;background:#713737}.advertisementDelete:hover{background:#d9534f;color:#fff}.advertisementEmpty{color:#aaa}.advertisementMessage{margin:0;padding:8px 10px;border-radius:5px}.advertisementMessage.success{background:#1b4b2a;color:#b8ffc8}.advertisementMessage.error{background:#5a2929;color:#ffd0d0}@media(max-width:700px){.advertisementUpload{display:grid}.advertisementUpload input[type=file]{min-width:0;width:100%}.advertisementFileList li{align-items:flex-start}}
.controlPanel{grid-template-columns:auto 155px auto auto minmax(150px,1fr) minmax(190px,auto)}.videoSoundControl{min-width:0;padding:6px 9px;font-size:.78rem;white-space:nowrap}.advertisementManager{position:relative;align-self:end;margin:0}.advertisementManager details{position:relative}.advertisementManager summary{min-height:36px;gap:8px;padding:6px 9px;font-size:.78rem;white-space:nowrap}.advertisementManager summary span{min-width:21px;height:21px;padding:0 6px;font-size:.68rem}.advertisementManagerBody{position:absolute;z-index:20;right:0;bottom:calc(100% + 7px);width:min(520px,80vw);max-height:60vh;overflow:auto;padding:13px;border:1px solid #666;border-radius:8px;background:#303030;box-shadow:0 12px 35px #000b}@media(max-width:1050px){.controlPanel{grid-template-columns:auto 155px 1fr}.advertisementManagerBody{right:auto;left:0}}@media(max-width:700px){.controlPanel{grid-template-columns:1fr}.videoSoundControl{width:max-content}.advertisementManager{width:100%}.advertisementManagerBody{position:static;width:100%;max-height:none;margin-top:7px;box-shadow:none}}
.controlPanel{grid-template-columns:auto 145px 120px auto auto minmax(110px,.65fr) minmax(190px,auto)}.imageDurationField{width:120px}.imageDurationField input{width:100%;min-height:36px;padding:6px 8px;border:1px solid #666;border-radius:5px;background:#444;color:#fff}.volumeField{max-width:140px}@media(max-width:1050px){.controlPanel{grid-template-columns:auto 145px 120px 1fr}.volumeField{max-width:none}}@media(max-width:700px){.controlPanel{grid-template-columns:1fr}.imageDurationField,.volumeField{width:100%;max-width:none}}
.compact input{width:100%;min-height:36px;padding:6px 8px;border:1px solid #666;border-radius:5px;background:#444;color:#fff}
.controlPanel{grid-template-columns:max-content 145px 120px max-content max-content max-content minmax(90px,110px) minmax(190px,auto)}
.videoSoundControl{min-height:30px;padding:4px 7px;font-size:.7rem}
.volumeField{width:110px;max-width:110px}
@media(max-width:1050px){.controlPanel{grid-template-columns:max-content 145px 120px 1fr}.volumeField{width:100%;max-width:none}}
@media(max-width:700px){.controlPanel{grid-template-columns:1fr}.volumeField{width:100%;max-width:none}}
.stage video.videoFadeOut{opacity:1!important;transition:none!important}
.stage .playbackVideo{position:absolute;inset:0;z-index:1}
.stage .playbackVideo.activeVideo{visibility:visible;z-index:2}
.stage .playbackVideo.standbyVideo{visibility:hidden;z-index:1;pointer-events:none}
.advertisement{z-index:3;background:transparent}
.advertisement.ready{background:#000}
.clockSizeControl{display:flex;align-items:center;gap:4px;min-height:36px;padding:4px 7px;border:1px solid #666;border-radius:6px;background:#444;color:#fff}
.clockSizeControl span:first-child{font-size:.7rem}.clockSizeControl span:last-child{font-size:1.15rem}
.clockSizeControl input{width:74px;margin:0;accent-color:#ffd84a;cursor:pointer}
@media(max-width:700px){.clockSizeControl{flex:1}.clockSizeControl input{width:100%}}
@media(min-width:1051px){
  header{justify-content:flex-start;gap:8px}
  .headerButtons{flex:1;flex-wrap:nowrap;gap:5px}
  h1{font-size:1.05rem;white-space:nowrap}
  header p{font-size:.68rem;white-space:nowrap}
  .headerVideoPlaylist,.headerMusicPlaylist{width:145px;min-width:145px}
  .headerButtons button{padding:7px 9px;white-space:nowrap}
  .clockSizeControl{padding:4px 5px}
  .clockSizeControl input{width:62px}
}
.headerVolume{display:grid;flex:0 0 92px;gap:2px;width:92px;min-width:92px;align-content:end}
.headerVolume label{color:#aaa;font-size:.7rem;white-space:nowrap}
.headerVolume input{width:58px;min-width:0;min-height:20px;margin:0;accent-color:#ffd84a;cursor:pointer}
@media(max-width:1050px){.headerVolume{flex-basis:92px;width:92px;min-width:92px}}
@media(max-width:700px){.headerVolume{flex-basis:auto;width:100%;min-width:0}.headerVolume input{width:70px}}
.controlPanel{grid-template-columns:max-content 145px 120px max-content max-content max-content minmax(190px,auto)}
.advertisementManager details{border-color:#666;border-radius:6px;background:#444}
.advertisementShuffleGroup{display:flex;align-items:center;gap:6px;min-height:36px;white-space:nowrap}
.advertisementShuffleGroup .check{margin:0}
.advertisementFolderHint{color:#ffd84a;font-size:.72rem;white-space:nowrap}
@media(max-width:700px){.advertisementFolderHint{white-space:normal}}
.fullscreenExitHint{align-self:center;color:#ffd84a;font-size:.72rem;white-space:nowrap}
.stage .mediaImage{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:contain;background:#000}
.playbackImageDurationField{width:120px}
.playbackImageDurationField input{width:100%;min-height:36px;padding:6px 8px;border:1px solid #666;border-radius:5px;background:#444;color:#fff}
.controlPanel{grid-template-columns:max-content 145px 120px 120px max-content max-content max-content minmax(190px,auto)}
@media(max-width:1050px){.controlPanel{grid-template-columns:max-content 145px 120px 120px 1fr}}
@media(max-width:700px){.controlPanel{grid-template-columns:1fr}.playbackImageDurationField{width:100%}}
.waitingRoomLink{display:inline-flex;align-items:center;justify-content:center;align-self:end;justify-self:end;min-width:48px;min-height:26px;padding:3px 7px;border:1px solid #8c792d;border-radius:5px;background:#3a351f;color:#e8c94f;font-size:.64rem;font-weight:700;line-height:1.1;text-align:center;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}.waitingRoomLink:hover,.waitingRoomLink:focus-visible{border-color:#ffd84a;background:#514823;color:#ffe477;outline:none}@media(max-width:700px){.waitingRoomLink{width:auto;min-height:30px}}