.watching-live #app{background:#686868;padding-bottom:0}.watching-live #app>header{background:#fff;color:#252629;height:79px}.watching-live .classroom{position:relative;min-height:calc(100dvh - 79px);background:linear-gradient(#555,#707070 28%,#686868 85%,#393939);display:flex;flex-direction:column;padding:120px 0 100px}.watching-live .class-status,.watching-live .player-buttons,.watching-live #playback-message,.watching-live .play-rule,.watching-live #nav{display:none!important}
.live-overlay{position:absolute;top:22px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;color:white;z-index:2}.live-badge{font-size:14px}.live-badge small{display:block;font-size:11px;margin-top:6px;color:#ddd}.live-overlay>div{display:flex;gap:18px;align-items:center}.live-overlay button{color:white;padding:5px;border:0;background:transparent}.live-overlay #live-fullscreen{font-size:32px;line-height:1}.live-overlay #live-sound{font-size:13px}.classroom:not(.live-overlay-visible)>.live-overlay{visibility:hidden;opacity:0;pointer-events:none}
.watching-live .screen{background:#000;flex-shrink:0}.watching-live .screen video{width:100%;aspect-ratio:16/9;object-fit:contain}.watching-live video[data-playback-mode="live"]::-webkit-media-controls{display:none!important}
#live-play-status{color:#ffe2e7;margin:0;padding:10px 18px;font-size:13px}#live-play-status:empty{display:none}.watching-live .live-comments{background:transparent;color:white;border:0;padding:20px 18px 0;display:flex;flex-direction:column;flex:1;min-height:260px}.watching-live .live-comments h3{font-size:16px;margin:0 0 8px;border:0;padding:0}.watching-live .comments-list{max-height:220px;min-height:100px;overflow:auto;margin:12px 0}.watching-live .comment-item{background:#29292966;border-radius:12px;padding:10px 13px}.watching-live .comment-item small{color:#ddd;font-size:11px}.watching-live .comment-item p{font-size:14px;color:white;line-height:1.5}.watching-live .reply-list{background:transparent;border-left:2px solid #ff97ae;padding-left:8px}.watching-live .reply-list p,.watching-live .staff-badge{color:#ffd5df}.watching-live .online-count{color:#eee;font-size:12px}
.watching-live .comment-form{position:absolute;bottom:24px;left:18px;right:18px;display:flex;align-items:center;gap:10px;background:transparent;padding:0}.watching-live .comment-form textarea{height:44px;resize:none;background:#3338;border:1px solid #aaa8;border-radius:24px;color:white;padding:10px 15px}.watching-live .comment-form textarea::placeholder{color:#ddd}.watching-live .comment-form button{border-radius:24px;padding:11px 17px}.watching-live .comment-feedback{color:#ffe0e6;font-size:12px;margin:5px 0}.watching-live .inbox-entry{bottom:105px}
.watching-live .classroom:fullscreen{width:100%;height:100%;min-height:0;padding:75px 0 90px;overflow:auto}.watching-live .classroom:fullscreen .screen{height:50%;display:flex;justify-content:center}.watching-live .classroom:fullscreen video{height:100%;object-fit:contain}.watching-live .classroom:fullscreen .live-comments{min-height:0}.watching-live .classroom:fullscreen .comments-list{max-height:150px}.watching-live .classroom:focus{outline:none}.watching-live .classroom:focus-visible{outline:2px solid #ff97ae;outline-offset:-2px}