*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#f8fafc;color:#1e293b}#app{width:100%;height:100%;position:relative}.screen{position:absolute;top:0;left:0;width:100%;height:100%;display:none;flex-direction:column;align-items:center;justify-content:center}.screen.active{display:flex}#loading-screen{background:linear-gradient(135deg,#f8fafc,#e2e8f0)}.loading-content{text-align:center}.logo-img{height:80px;width:auto;margin:0 auto 24px;display:block}.logo-control{height:max(60px,12vh);margin-bottom:0}.spinner{width:60px;height:60px;border:4px solid rgba(80,47,143,.2);border-top-color:#502f8f;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 24px}@keyframes spin{to{transform:rotate(360deg)}}.loading-content h1{font-size:32px;margin-bottom:12px}.loading-content p{font-size:16px;color:#1e293bb3}#login-screen{background:linear-gradient(135deg,#f8fafc,#e2e8f0)}.login-container{width:100%;max-width:400px;padding:40px;background:#ffffffe6;border-radius:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 24px #0000001a}.login-container h1{text-align:center;margin-bottom:32px;font-size:28px}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-size:14px;color:#1e293bcc}.form-group input{width:100%;padding:14px 16px;font-size:16px;background:#f1f5f9cc;border:1px solid rgba(148,163,184,.4);border-radius:8px;color:#1e293b;outline:none;transition:border-color .2s,background .2s}.form-group input:focus{border-color:#502f8f;background:#fff}.form-group input::placeholder{color:#64748b99}#login-btn{width:100%;padding:14px;font-size:16px;font-weight:600;background:#502f8f;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:background .2s;margin-top:8px}#login-btn:hover{background:#3d2270}#login-btn:disabled{background:#6b7280;cursor:not-allowed}.error{color:#ef4444;font-size:14px;margin-top:16px;text-align:center}#control-screen{background:linear-gradient(135deg,#f8fafc,#e2e8f0,#f1f5f9);overflow:hidden;padding:0;align-items:center;justify-content:center}#control-screen.active{display:flex}.control-container{width:100%;height:100%;max-width:none;padding:3vh 4vw;text-align:center;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:max(16px,3vh);overflow-y:auto;overflow-x:hidden}@media (orientation: landscape){.control-container{padding:2vh 3vw;gap:max(8px,1vh)}.control-header{display:block;flex-shrink:0;margin-bottom:0}.control-header h1{font-size:max(18px,4vh);margin:0}.control-grid{display:flex!important;flex-direction:row!important;gap:max(12px,2vw);width:100%;max-width:none!important;flex:1;min-height:0;align-items:center;justify-content:center}.control-panel{aspect-ratio:1 / 1;height:min(88vh,30vw);width:auto;max-height:100%;display:flex;flex-direction:column;border-radius:max(12px,2vh);overflow:hidden}.control-hint{display:none}}@media (orientation: portrait){.control-container{flex-direction:column;justify-content:space-between;padding:1.5vh 4vw}.control-header{flex-shrink:0;margin-bottom:1vh}.control-header h1{font-size:max(16px,4vh)}.control-grid{display:flex!important;flex-direction:column!important;gap:max(6px,1vh);width:100%;max-width:none!important;flex:1;min-height:0;align-items:center;justify-content:center}.control-panel{aspect-ratio:1 / 1;width:min(92vw,26vh);height:auto;max-width:100%;display:flex;flex-direction:column;border-radius:max(8px,1.5vh);overflow:hidden}.control-hint{font-size:max(10px,1.5vh);margin-top:1vh;flex-shrink:0}.panel-play .control-icon{width:40%;height:40%}.panel-play .control-label{font-size:min(4vw,2.5vh,18px)}.panel-orientation{padding:max(4px,.8vh);gap:max(4px,.6vh)}.panel-orientation .section-title{font-size:max(10px,1.5vh)}.panel-orientation .orientation-grid{gap:max(4px,.6vh)}.panel-orientation .orientation-btn{padding:3%;gap:2%;border-radius:max(6px,1vh)}.panel-orientation .orientation-icon{font-size:min(6vw,2.5vh,24px)}.panel-orientation .orientation-label{font-size:min(2.5vw,1.2vh,10px)}.panel-orientation .rotation-value{font-size:min(2vw,1vh,9px)}.panel-actions{padding:max(4px,.8vh);gap:max(4px,.8vh)}.panel-actions .control-btn{gap:4%;padding:4%;border-radius:max(6px,1vh)}.panel-actions .control-icon{width:30%;height:30%}.panel-actions .control-label{font-size:min(3vw,1.5vh,12px)}}.control-panel{background:#f1f5f9cc;border:1px solid rgba(148,163,184,.2);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:max(8px,1vh)}.panel-play{padding:0}.panel-play .control-btn-primary{width:100%;height:100%;flex-direction:column;border-radius:max(12px,2vh);gap:8%;overflow:hidden}.panel-play .control-icon{width:45%;height:45%;flex-shrink:0}.panel-play .control-icon svg{width:100%;height:100%}.panel-play .control-label{font-size:min(5vw,5vh,24px);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:90%}.panel-orientation{gap:max(6px,1vh);padding:max(6px,1vh)}.panel-orientation .section-title{font-size:max(12px,2vh);margin:0;padding:0;flex-shrink:0;color:#475569cc;font-weight:600}.panel-orientation .orientation-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:max(6px,1vh);flex:1;width:100%}.panel-orientation .orientation-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;padding:5%;background:#ffffffe6;border:2px solid rgba(148,163,184,.3);border-radius:max(8px,1.5vh);color:#475569;cursor:pointer;transition:all .2s ease;overflow:hidden}.panel-orientation .orientation-btn:hover,.panel-orientation .orientation-btn:focus{background:#fff;border-color:#94a3b880}.panel-orientation .orientation-btn.active{background:linear-gradient(135deg,#502f8f,#7c3aed);border-color:#502f8f;color:#fff}.panel-orientation .orientation-icon{font-size:min(8vw,8vh,40px);line-height:1}.panel-orientation .orientation-label{font-size:min(3vw,3vh,14px);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.panel-orientation .rotation-value{font-size:min(2.5vw,2.5vh,11px);opacity:.7;font-weight:500}.panel-actions{gap:max(8px,1.5vh);padding:max(8px,1.5vh)}.panel-actions .control-btn{flex:1;width:100%;flex-direction:column;gap:8%;padding:8%;min-height:0;border-radius:max(8px,1.5vh);overflow:hidden}.panel-actions .control-icon{width:35%;height:35%;flex-shrink:0}.panel-actions .control-icon svg{width:100%;height:100%}.panel-actions .control-label{font-size:min(3.5vw,3.5vh,16px);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.control-right-panel,.control-section,.control-actions{display:none}.control-header{flex-shrink:0;margin-bottom:max(12px,2vh)}.control-header h1{font-size:max(20px,6vh);font-weight:700;margin-bottom:0;background:linear-gradient(135deg,#502f8f,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;white-space:nowrap}.control-grid{display:flex;flex-direction:column;gap:max(12px,2.5vh);flex:1;justify-content:center;align-items:center;width:100%;min-height:0;max-width:none}.control-btn{display:flex;align-items:center;justify-content:center;gap:max(10px,2vw);padding:max(14px,4vh) max(18px,4vw);font-size:max(14px,3.5vh);font-weight:600;border:none;border-radius:max(10px,2vh);cursor:pointer;transition:all .3s ease;min-height:max(50px,10vh);flex-shrink:0}.control-btn:focus{outline:4px solid #818cf8;outline-offset:4px;transform:scale(1.02)}.control-btn:hover{transform:scale(1.02)}.control-btn-primary{background:linear-gradient(135deg,#502f8f,#7c3aed);color:#fff;box-shadow:0 8px 32px #502f8f66}.control-btn-primary:hover,.control-btn-primary:focus{background:linear-gradient(135deg,#6b3fba,#8b5cf6);box-shadow:0 12px 40px #502f8f99}.control-btn-secondary{background:#94a3b826;color:#475569;border:2px solid rgba(148,163,184,.3)}.control-btn-secondary:hover,.control-btn-secondary:focus{background:#94a3b840;border-color:#94a3b880}.control-btn-danger{background:#ef44441a;color:#dc2626;border:2px solid rgba(239,68,68,.3)}.control-btn-danger:hover,.control-btn-danger:focus{background:#ef444433;border-color:#ef444480;color:#b91c1c}.control-icon{width:max(22px,5vh);height:max(22px,5vh);display:flex;align-items:center;justify-content:center;flex-shrink:0}.control-icon svg{width:100%;height:100%}.control-section{background:#f1f5f9cc;border-radius:max(10px,2vh);padding:max(12px,2.5vh);border:1px solid rgba(148,163,184,.2);flex-shrink:0;margin-top:max(8px,1.5vh)}.section-title{font-size:max(11px,2.5vh);font-weight:500;color:#475569cc;margin-bottom:max(8px,2vh);text-transform:uppercase;letter-spacing:1px}.orientation-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:max(6px,2vh)}.orientation-btn{display:flex;flex-direction:column;align-items:center;gap:max(4px,1vh);padding:max(10px,3vh) max(8px,2vw);background:#fffc;border:2px solid rgba(148,163,184,.3);border-radius:max(8px,1.5vh);color:#475569;cursor:pointer;transition:all .3s ease}.orientation-btn:hover{background:#fff;border-color:#94a3b880}.orientation-btn:focus{outline:4px solid #818cf8;outline-offset:2px;transform:scale(1.05)}.orientation-btn.active{background:linear-gradient(135deg,#502f8f,#7c3aed);border-color:#502f8f;box-shadow:0 4px 20px #502f8f66;color:#fff}.orientation-icon{font-size:max(18px,5vh);line-height:1}.orientation-label{font-size:max(10px,2.5vh);font-weight:500;opacity:.9;white-space:nowrap}.rotation-value{font-size:max(9px,2vh);opacity:.6}.control-actions{display:grid;grid-template-columns:1fr 1fr;gap:max(10px,2vh);margin-top:max(8px,1.5vh)}.control-hint{flex-shrink:0;font-size:max(11px,2vh);color:#47556999;margin-top:max(8px,1.5vh)}@media (max-height: 500px){.control-container{padding:4px 8px}.control-header h1{font-size:16px}.control-grid{gap:4px}.control-btn{min-height:36px;padding:8px 12px;font-size:11px}.control-section{padding:6px}.orientation-btn{padding:4px 2px}.orientation-icon{font-size:14px}.orientation-label{font-size:8px}.rotation-value{display:none}.control-hint{font-size:9px;margin-top:2px}}@media (max-width: 400px){.control-container{padding:6px}.orientation-grid{grid-template-columns:repeat(2,1fr);gap:4px}.control-actions{grid-template-columns:1fr;gap:4px}}.modal{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:1000}.modal.hidden{display:none}.modal-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.modal-content{position:relative;background:linear-gradient(135deg,#fff,#f8fafc);border:1px solid rgba(148,163,184,.2);border-radius:24px;padding:40px;max-width:500px;text-align:center;box-shadow:0 20px 60px #00000026}.modal-content h2{font-size:28px;margin-bottom:16px;color:#1e293b}.modal-content p{font-size:18px;color:#475569cc;margin-bottom:32px;line-height:1.5}.modal-actions{display:flex;gap:16px;justify-content:center}.modal-btn{padding:16px 32px;font-size:18px;font-weight:600;border:none;border-radius:12px;cursor:pointer;transition:all .3s ease;min-width:140px}.modal-btn:focus{outline:4px solid #818cf8;outline-offset:4px}.modal-btn-secondary{background:#94a3b826;color:#475569;border:2px solid rgba(148,163,184,.3)}.modal-btn-secondary:hover,.modal-btn-secondary:focus{background:#94a3b840}.modal-btn-danger{background:#ef4444;color:#fff}.modal-btn-danger:hover,.modal-btn-danger:focus{background:#dc2626}#player-wrapper{width:100%;height:100%;position:absolute;top:0;left:0;transition:transform .5s ease;display:flex;align-items:center;justify-content:center}#player-wrapper.rotate-90{transform:rotate(90deg);transform-origin:center center;width:100vh;height:100vw;top:50%;left:50%;margin-top:-50vw;margin-left:-50vh}#player-wrapper.rotate-180{transform:rotate(180deg)}#player-wrapper.rotate-270{transform:rotate(270deg);transform-origin:center center;width:100vh;height:100vw;top:50%;left:50%;margin-top:-50vw;margin-left:-50vh}#player-screen{background:#000}#video-player{width:100%;height:100%;object-fit:contain;background:#000}#player-overlay{position:absolute;bottom:0;left:0;right:0;padding:20px;background:linear-gradient(transparent,#000c);transition:opacity .3s}#player-overlay.hidden{opacity:0;pointer-events:none}.overlay-content{max-width:800px;margin:0 auto}.status-bar{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px;color:#fffc}.progress-bar{width:100%;height:4px;background:#94a3b84d;border-radius:2px;overflow:hidden}#progress-fill{height:100%;background:#502f8f;width:0%;transition:width .1s linear}#no-content{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#f8fafc,#e2e8f0)}#no-content.hidden{display:none}#no-content h2{font-size:32px;margin-bottom:16px;color:#1e293b}#no-content p{font-size:18px;color:#475569cc;margin-bottom:8px}#error-screen{background:linear-gradient(135deg,#f8fafc,#e2e8f0)}.error-content{text-align:center;padding:40px}.error-content h1{font-size:48px;margin-bottom:16px;color:#1e293b}.error-content p{font-size:18px;color:#475569cc;margin-bottom:32px}#retry-btn{padding:14px 32px;font-size:16px;font-weight:600;background:#502f8f;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:background .2s}#retry-btn:hover{background:#3d2270}#play-control-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#00000080;transition:opacity .3s,visibility .3s;z-index:10}#play-control-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}#play-pause-btn{width:100px;height:100px;border-radius:50%;background:#502f8fe6;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s;box-shadow:0 4px 20px #0006}#play-pause-btn:hover{transform:scale(1.1);background:#502f8f}#play-pause-btn:active{transform:scale(.95)}#play-pause-btn svg{width:50px;height:50px;color:#fff}#play-icon{margin-left:5px}#tap-to-play-hint{margin-top:20px;font-size:18px;color:#fffc;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:.8}50%{opacity:.4}}.mini-play-btn{width:40px;height:40px;border-radius:50%;background:#502f8fe6;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;margin-right:12px;transition:background .2s}.mini-play-btn:hover{background:#502f8f}.mini-play-btn svg{width:20px;height:20px;color:#fff}button:focus,input:focus{outline:3px solid #502f8f;outline-offset:2px}.control-btn:focus,.orientation-btn:focus,.modal-btn:focus,.back-btn:focus{outline:4px solid #818cf8;outline-offset:4px;box-shadow:0 0 0 8px #818cf84d}@media (min-width: 1280px){.control-container{max-width:1100px;padding:60px}.control-header h1{font-size:56px}.control-btn{padding:32px 56px;font-size:26px;min-height:100px}.orientation-btn{padding:28px 20px}.orientation-icon{font-size:42px}.orientation-label{font-size:16px}.modal-content{padding:50px}.modal-content h2{font-size:32px}.modal-btn{padding:20px 40px;font-size:20px}}@media (max-height: 600px){.control-container{padding:20px}.control-header{margin-bottom:20px}.control-header h1{font-size:32px}.control-grid{gap:16px}.control-btn{padding:16px 32px;font-size:18px;min-height:60px}.control-section{padding:16px}.section-title{font-size:14px;margin-bottom:12px}.orientation-grid{gap:10px}.orientation-btn{padding:12px 8px}.orientation-icon{font-size:24px}.orientation-label{font-size:11px}.rotation-value{font-size:10px}.control-hint{margin-top:16px;font-size:12px}}.hidden{display:none!important}