html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: #000; overflow: hidden; font-family: Arial, Helvetica, sans-serif; color: #fff; }
        body { -webkit-user-select: none; user-select: none; }
        #stage { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: #000; overflow: hidden; }
        .slide { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none; background: #000; text-align: center; }
        .slide.active { display: block; }
        .slide.transition-none { animation: none; }
        .slide.transition-fade-fast { animation: mediaFadeIn 3s ease both; }
        .slide.transition-fade-slow { animation: mediaFadeIn 5s ease both; }
        .slide.transition-crossfade-fast { animation: mediaFadeIn 3s ease both; z-index: 3; }
        .slide.transition-crossfade-slow { animation: mediaFadeIn 5s ease both; z-index: 3; }
        .slide.transition-slide-fast { animation: mediaSlideIn 3s ease both; }
        .slide.transition-slide-slow { animation: mediaSlideIn 5s ease both; }
        .slide.transition-wipe-left { animation: mediaWipeLeft 3s ease both; }
        .slide.transition-wipe-right { animation: mediaWipeRight 3s ease both; }
        .slide.transition-zoom-soft { animation: mediaZoomSoft 3s ease both; }
        .slide.transition-slice-vertical { animation: mediaSliceVertical 3s ease both; transform-origin: center center; }
        .slide.transition-slice-horizontal { animation: mediaSliceHorizontal 3s ease both; transform-origin: center center; }
        .slide img, .slide iframe { border: 0; display: block; width: 100%; height: 100%; background: #000; }
        .cover-mode { object-fit: cover; font-family: 'object-fit: cover;'; }
        .contain-mode { object-fit: contain; font-family: 'object-fit: contain;'; }
        .video-shell, .iframe-shell { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; overflow: hidden; }
        .iframe-shell iframe { width: 100%; height: 100%; border: 0; background: #fff; }
        .video-poster { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background: #000 center center / cover no-repeat; }
        .video-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
        .video-poster.hidden { display: none; }
        .yt-frame { opacity: 0; transition: opacity 0.35s ease; }
        .yt-frame.ready { opacity: 1; }
        .video-loading-badge { position: absolute; right: 18px; bottom: 18px; z-index: 2; background: rgba(0,0,0,0.55); color: #fff; padding: 8px 12px; border-radius: 999px; font-size: 16px; line-height: 1; }
        .overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; box-sizing: border-box; pointer-events: none; }
        .overlay-box { position: absolute; max-width: 58%; padding: 24px 28px; border-radius: 14px; box-sizing: border-box; }
        .overlay h2 { margin: 0 0 10px; line-height: 1.1; text-shadow: #000 1px 2px 0; }
        .overlay p { margin: 0; line-height: 1.1; text-shadow: #000 1px 2px 0; }
        .progress-wrap { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: rgba(255,255,255,0.20); z-index: 20; }
        .progress-wrap.hidden { display: none; }
        .progress-bar { width: 0; height: 100%; background: rgba(255,255,255,0.95); }
        .overlay.pos-top-left .overlay-box { top: 42px; left: 42px; text-align: left; }
        .overlay.pos-top-center .overlay-box { top: 42px; left: 50%; transform: translateX(-50%); text-align: center; }
        .overlay.pos-top-right .overlay-box { top: 42px; right: 42px; text-align: right; }
        .overlay.pos-center-left .overlay-box { top: 50%; left: 42px; transform: translateY(-50%); text-align: left; }
        .overlay.pos-center-center .overlay-box { top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
        .overlay.pos-center-right .overlay-box { top: 50%; right: 42px; transform: translateY(-50%); text-align: right; }
        .overlay.pos-bottom-left .overlay-box { bottom: calc(10% + 20px); left: 42px; text-align: left; }
        .overlay.pos-bottom-center .overlay-box { bottom: calc(10% + 20px); left: 50%; transform: translateX(-50%); text-align: center; }
        .overlay.pos-bottom-right .overlay-box { bottom: calc(10% + 20px); right: 42px; text-align: right; }
        .empty { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: table; width: 100%; height: 100%; text-align: center; color: #ccc; background: #000; }
        .empty-inner { display: table-cell; vertical-align: middle; padding: 30px; font-size: 28px; line-height: 1.4; }
        .clock-box { position: absolute; top: 22px; right: 22px; z-index: 30; background: rgba(255,255,255,0.00); color: #fff; padding: 14px 18px; border-radius: 14px; min-width: 240px; text-align: right; box-sizing: border-box; text-shadow: #000 1px 1px; }
        .clock-time { font-size: 4em; line-height: 1; font-weight: bold; letter-spacing: 0.02em; }
        .clock-date { margin-top: 6px; font-size: 2.5em; line-height: 1; }
        #statusDot { position: absolute; right: 12px; bottom: 12px; width: 10px; height: 10px; border-radius: 10px; background: #666; opacity: 0.9; z-index: 99; }
        #statusDot.online { background: #35c759; }

        .news-enabled .progress-wrap { bottom: 10%; }
        .news-enabled #statusDot { bottom: calc(10% + 12px); }
        .news-ticker { position: absolute; left: 0; right: 0; bottom: 0; height: 10%; z-index: 60; display: table; width: 100%; table-layout: fixed; border-collapse: collapse; background: rgba(3, 7, 18, 0.88); color: #ffffff; border-top: 1px solid rgba(148, 163, 184, 0.35); backdrop-filter: blur(4px); }
        .news-ticker.hidden { display: none; }
        .news-ticker.is-empty { opacity: 0.8; }
        .news-ticker-label { display: table-cell; width: 170px; height: 100%; vertical-align: middle; text-align: center; padding: 0 22px; box-sizing: border-box; background: rgba(37, 99, 235, 0.92); font-size: 20px; line-height: 1.1; font-weight: bold; letter-spacing: 0.06em; white-space: nowrap; }
        .news-ticker-viewport { display: table-cell; height: 100%; vertical-align: middle; position: relative; overflow: hidden; }
        .news-ticker-track { position: absolute; left: 0; top: 50%; display: block; white-space: nowrap; transform: translate3d(var(--ticker-start, 40px), -50%, 0); will-change: transform; }
        .news-ticker-track.is-animating { animation-name: tickerScroll; animation-timing-function: linear; animation-iteration-count: infinite; }
        .news-ticker-text { display: inline-block; vertical-align: middle; line-height: 1; padding-right: 48px; font-size: 2.30em; font-weight: 700; letter-spacing: 0.01em; text-shadow: rgba(0,0,0,0.6) 0 2px 4px; }
        @keyframes tickerScroll { from { transform: translate3d(var(--ticker-start, 40px), -50%, 0); } to { transform: translate3d(calc(-100% - 40px), -50%, 0); } }
        @keyframes mediaFadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes mediaSlideIn { from { opacity: 0; transform: translate3d(12%, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
        @keyframes mediaWipeLeft { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
        @keyframes mediaWipeRight { from { opacity: 0; clip-path: inset(0 0 0 100%); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
        @keyframes mediaZoomSoft { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
        @keyframes mediaSliceVertical { from { opacity: 0; transform: scaleX(0.08); } to { opacity: 1; transform: scaleX(1); } }
        @keyframes mediaSliceHorizontal { from { opacity: 0; transform: scaleY(0.08); } to { opacity: 1; transform: scaleY(1); } }
        @media (max-width: 900px) {
            .overlay-box { max-width: 72%; padding: 18px 20px; }
            .overlay h2 { font-size: 28px; }
            .overlay p { font-size: 18px; }
            .clock-box { top: 16px; right: 16px; min-width: 210px; padding: 12px 14px; }
            .clock-time { font-size: 34px; }
            .clock-date { font-size: 20px; }
        }
        @media (max-width: 560px) {
            .overlay-box { max-width: calc(100% - 32px); padding: 14px 16px; border-radius: 10px; }
            .overlay.pos-top-left .overlay-box, .overlay.pos-top-center .overlay-box, .overlay.pos-top-right .overlay-box { top: 16px; }
            .overlay.pos-bottom-left .overlay-box, .overlay.pos-bottom-center .overlay-box, .overlay.pos-bottom-right .overlay-box { bottom: 16px; }
            .overlay.pos-top-left .overlay-box, .overlay.pos-center-left .overlay-box, .overlay.pos-bottom-left .overlay-box { left: 16px; }
            .overlay.pos-top-right .overlay-box, .overlay.pos-center-right .overlay-box, .overlay.pos-bottom-right .overlay-box { right: 16px; }
            .overlay h2 { font-size: 22px; margin-bottom: 6px; }
            .overlay p { font-size: 15px; }
            .progress-wrap { height: 6px; }
            .clock-box { top: 12px; right: 12px; min-width: 180px; padding: 10px 12px; border-radius: 10px; }
            .news-enabled .progress-wrap { bottom: 10%; }
            .news-enabled #statusDot { bottom: calc(10% + 8px); }
            .news-ticker { height: 10%; }
            .news-ticker-label { width: 120px; height: 100%; padding: 0 14px; font-size: 15px; }
            .news-ticker-viewport { height: 100%; }
            .news-ticker-text { font-size: 2.30em; }
            .clock-time { font-size: 28px; }
            .clock-date { font-size: 16px; }
        }