:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}*{box-sizing:border-box;padding:0;margin:0}html,body,#app{width:100%;height:100%;overflow:hidden}.app-container{height:100vh;height:100dvh;width:100%;display:flex;flex-direction:column;background:linear-gradient(135deg,#667eea,#764ba2);padding:clamp(.4rem,1.2vh,1rem) clamp(.5rem,1.2vw,1rem);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden}.app-header{text-align:center;margin-bottom:clamp(.25rem,.8vh,1rem);color:#fff;flex-shrink:0}.app-title{font-size:clamp(1.15rem,2.2vh + .4rem,2rem);font-weight:700;margin:0;text-shadow:0 4px 8px rgba(0,0,0,.3);background:linear-gradient(45deg,#fff,#e3f2fd);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.app-subtitle{font-size:1rem;opacity:.9;margin:0;font-weight:300}.main-content{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:clamp(.5rem,1vw,1rem);flex:1;min-height:0;max-width:1400px;margin:0 auto;width:100%;overflow:hidden}.config-section{background:#fffffff2;border-radius:16px;padding:clamp(.75rem,1.5vh,1.5rem);box-shadow:0 20px 40px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);overflow-y:auto;min-height:0}.section-title{font-size:clamp(.95rem,1.5vh + .4rem,1.2rem);font-weight:600;color:#333;margin:0 0 clamp(.5rem,1vh,1rem) 0;display:flex;align-items:center;gap:.5rem}.section-title:before{content:"⚙️";font-size:1.2rem}.video-section .section-title:before{content:"📺"}.form-grid{display:grid;gap:1rem;margin-bottom:1.5rem}.input-group{display:flex;flex-direction:column;gap:.5rem}.input-label{font-weight:500;color:#555;font-size:.9rem;text-transform:uppercase;letter-spacing:.5px}.input-field{padding:1rem 1.2rem;border:2px solid #e1e5e9;border-radius:12px;font-size:1rem;transition:all .3s ease;background:#f8f9fa;color:#333}.input-field:focus{outline:none;border-color:#667eea;background:#fff;box-shadow:0 0 0 4px #667eea1a;transform:translateY(-1px)}.input-field::placeholder{color:#adb5bd}.init-button{width:100%;padding:1.2rem 2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:.5rem;box-shadow:0 8px 20px #667eea4d}.init-button:hover{transform:translateY(-2px);box-shadow:0 12px 30px #667eea66}.init-button:active{transform:translateY(0)}.init-button:disabled{opacity:.7;cursor:not-allowed;transform:none;box-shadow:0 8px 20px #667eea33}.init-button:disabled:hover{transform:none}.button-spinner{width:1.1rem;height:1.1rem;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.button-icon{font-size:1.2rem}.support-section{margin-top:1rem;padding-top:.9rem;border-top:1px dashed rgba(0,0,0,.12)}.support-title{margin:0 0 .75rem;font-size:.85rem;color:#666;text-align:center}.support-qr-list{display:flex;justify-content:center;gap:.85rem}.support-qr-item{display:flex;flex-direction:column;align-items:center;gap:.4rem;flex:1;max-width:120px}.support-qr-img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:10px;background:#fff;border:1px solid rgba(0,0,0,.06);padding:4px}.support-qr-label{font-size:.78rem;color:#555}.video-section{background:#fffffff2;border-radius:16px;padding:clamp(.35rem,.8vh,.75rem);box-shadow:0 20px 40px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;overflow:hidden;min-width:0;min-height:0}.video-section .section-title{flex-shrink:0;justify-content:center}.video-viewport{flex:1;min-height:0;min-width:0;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.video-scale-slot{position:relative;flex-shrink:0}.video-and-toolbar{display:flex;align-items:flex-start;justify-content:center;overflow:visible;box-shadow:0 25px 50px #00000026;transform-origin:top left;will-change:transform}.video-toolbar{display:flex;flex-direction:column;align-items:center;width:60px;height:720px;box-sizing:border-box;background:linear-gradient(180deg,#ffffffe6,#ffffffb3);padding:8px 24px;gap:6px;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) rgba(255,255,255,.1)}.video-stage{position:relative;display:inline-block;line-height:0}.video-container{width:360px;height:720px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#111827}.connecting-overlay{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:#111827e0;color:#fff;pointer-events:all}.connecting-spinner{width:48px;height:48px;border:3px solid rgba(255,255,255,.2);border-top-color:#8b9cf7;border-radius:50%;animation:spin .85s linear infinite}.connecting-text{margin:0;font-size:.95rem;color:#ffffffe6;letter-spacing:.02em;text-align:center;padding:0 1.5rem;line-height:1.6}.idle-overlay{justify-content:flex-start;gap:0;padding:0;overflow:hidden;background:radial-gradient(ellipse at 50% 18%,rgba(99,122,255,.28),transparent 55%),linear-gradient(165deg,#0b1220,#151f33 45%,#0a0f1a)}.idle-wallpaper{position:absolute;inset:0;overflow:hidden;pointer-events:none}.idle-orb{position:absolute;border-radius:50%;filter:blur(28px);opacity:.55;animation:idle-float 10s ease-in-out infinite}.idle-orb-a{width:180px;height:180px;top:12%;left:-18%;background:#4f6ef7}.idle-orb-b{width:220px;height:220px;right:-24%;bottom:22%;background:#2dd4bf;animation-delay:-3s;animation-duration:12s}.idle-orb-c{width:140px;height:140px;left:28%;bottom:8%;background:#818cf8;animation-delay:-6s;animation-duration:9s}.idle-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:radial-gradient(circle at 50% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(circle at 50% 40%,#000 20%,transparent 75%);opacity:.5;animation:idle-grid-drift 18s linear infinite}.idle-statusbar{position:relative;z-index:1;width:100%;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:14px 18px 0;opacity:.85}.idle-signal{display:flex;align-items:flex-end;gap:2px;height:12px}.idle-signal i{display:block;width:3px;border-radius:1px;background:#ffffffe6;animation:idle-signal 2.4s ease-in-out infinite}.idle-signal i:nth-child(1){height:4px;animation-delay:0s}.idle-signal i:nth-child(2){height:6px;animation-delay:.15s}.idle-signal i:nth-child(3){height:9px;animation-delay:.3s}.idle-signal i:nth-child(4){height:12px;animation-delay:.45s}.idle-wifi{width:14px;height:14px;border:2px solid transparent;border-top-color:#ffffffe6;border-radius:50%;position:relative;transform:translateY(3px);animation:idle-blink 3s ease-in-out infinite}.idle-wifi:before,.idle-wifi:after{content:"";position:absolute;left:50%;border:2px solid transparent;border-top-color:#ffffffe6;border-radius:50%;transform:translate(-50%)}.idle-wifi:before{width:8px;height:8px;top:2px}.idle-wifi:after{width:2px;height:2px;top:7px;border:none;background:#ffffffe6;border-radius:50%}.idle-battery{width:22px;height:11px;border:1.5px solid rgba(255,255,255,.85);border-radius:3px;position:relative;padding:1px}.idle-battery:after{content:"";position:absolute;right:-4px;top:2.5px;width:2px;height:4px;border-radius:0 1px 1px 0;background:#ffffffd9}.idle-battery span{display:block;height:100%;width:68%;border-radius:1px;background:linear-gradient(90deg,#34d399,#6ee7b7);animation:idle-battery 4s ease-in-out infinite}.idle-lock{position:relative;z-index:1;margin-top:48px;text-align:center;animation:idle-breathe 4.5s ease-in-out infinite}.idle-clock{font-size:4.4rem;font-weight:300;letter-spacing:.04em;line-height:1;color:#fff;text-shadow:0 8px 28px rgba(0,0,0,.35);font-variant-numeric:tabular-nums}.idle-date{margin-top:.55rem;font-size:.95rem;color:#ffffffb8}.idle-phone{position:relative;z-index:1;margin:42px auto 0;animation:idle-phone-float 5s ease-in-out infinite}.idle-phone-body{width:92px;height:160px;border-radius:18px;border:2px solid rgba(255,255,255,.28);background:linear-gradient(160deg,#ffffff24,#ffffff0a);box-shadow:0 18px 40px #00000059,inset 0 0 0 1px #ffffff14;display:flex;flex-direction:column;align-items:center;padding:8px 7px 10px}.idle-phone-notch{width:34px;height:5px;border-radius:999px;background:#ffffff40;margin-bottom:8px}.idle-phone-screen{position:relative;flex:1;width:100%;border-radius:10px;background:linear-gradient(180deg,#1e293b,#0f172a);display:flex;align-items:center;justify-content:center;overflow:hidden}.idle-pulse-ring{position:absolute;width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(129,140,248,.7);animation:idle-pulse 2.4s ease-out infinite}.idle-pulse-ring.delay{animation-delay:1.2s}.idle-phone-icon{width:18px;height:28px;border:2px solid rgba(255,255,255,.85);border-radius:4px;position:relative;z-index:1}.idle-phone-icon:after{content:"";position:absolute;left:50%;bottom:3px;width:6px;height:2px;border-radius:1px;background:#ffffffbf;transform:translate(-50%)}.idle-phone-home{width:28px;height:3px;border-radius:999px;background:#ffffff59;margin-top:8px}.idle-hint{position:relative;z-index:1;margin-top:auto;margin-bottom:56px;width:calc(100% - 40px);padding:1rem 1.1rem;border-radius:16px;background:#0f172a8c;border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 12px 30px #00000040;display:flex;flex-direction:column;gap:.4rem;animation:idle-hint-in .8s ease both}.idle-title{margin:0;font-size:1.05rem;font-weight:600;color:#fff;text-align:center}.idle-home-bar{position:absolute;z-index:1;left:50%;bottom:14px;width:96px;height:4px;border-radius:999px;background:#ffffff59;transform:translate(-50%);animation:idle-blink 3.5s ease-in-out infinite}@keyframes idle-float{0%,to{transform:translateZ(0) scale(1)}50%{transform:translate3d(18px,-22px,0) scale(1.08)}}@keyframes idle-grid-drift{0%{transform:translateY(0)}to{transform:translateY(28px)}}@keyframes idle-signal{0%,to{opacity:.35}50%{opacity:1}}@keyframes idle-blink{0%,to{opacity:.55}50%{opacity:1}}@keyframes idle-battery{0%,to{width:62%}50%{width:82%}}@keyframes idle-breathe{0%,to{transform:translateY(0);opacity:.92}50%{transform:translateY(-4px);opacity:1}}@keyframes idle-phone-float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes idle-pulse{0%{transform:scale(.7);opacity:.8}to{transform:scale(2.2);opacity:0}}@keyframes idle-hint-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}.toolbar-section{background:linear-gradient(135deg,#ffffffd9,#ffffffa6);border-radius:8px;padding:6px 3px;border:1px solid rgba(255,255,255,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 15px #0000001a;transition:all .3s ease;position:relative}.toolbar-section:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.8) 50%,transparent 100%)}.toolbar-section:hover{transform:translateY(-2px);box-shadow:0 12px 35px #00000026;background:linear-gradient(135deg,#fffffff2,#ffffffbf)}.toolbar-title{font-size:1.1rem;font-weight:700;color:#2c3e50;margin:0 0 .5rem;display:flex;align-items:center;justify-content:center;text-shadow:0 1px 2px rgba(0,0,0,.1);border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:.3rem}.toolbar-buttons{display:flex;flex-direction:column;gap:.6rem;align-items:center}.tool-item{display:flex;flex-direction:column;align-items:center;gap:.2rem}.tool-label{font-size:.6rem;font-weight:600;color:#2c3e50;text-align:center;line-height:1.1;max-width:50px;word-wrap:break-word;text-shadow:0 1px 2px rgba(255,255,255,.8)}.tool-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background:linear-gradient(135deg,#ffffffe6,#ffffffb3);border:1.5px solid rgba(255,255,255,.6);border-radius:50%;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);color:#2c3e50;position:relative;overflow:hidden;box-shadow:0 2px 8px #0000001a}.tool-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s}.tool-btn:hover:before{left:100%}.tool-btn:hover{background:linear-gradient(135deg,#fff,#ffffffe6);transform:translateY(-1px) scale(1.05);box-shadow:0 4px 15px #0003;border-color:#fffc}.tool-btn.primary{background:linear-gradient(135deg,#28a745,#20c997,#17a2b8);color:#fff;border-color:#ffffff4d;text-shadow:0 1px 2px rgba(0,0,0,.2);box-shadow:0 6px 20px #28a7454d}.tool-btn.primary:hover{background:linear-gradient(135deg,#218838,#1ea885,#138496);box-shadow:0 6px 20px #28a74566;transform:translateY(-2px) scale(1.1)}.tool-btn.secondary{background:linear-gradient(135deg,#6c757d,#495057,#343a40);color:#fff;border-color:#ffffff4d;text-shadow:0 1px 2px rgba(0,0,0,.2);box-shadow:0 6px 20px #6c757d4d}.tool-btn.secondary:hover{background:linear-gradient(135deg,#5a6268,#3d4449,#23272b);box-shadow:0 6px 20px #6c757d66;transform:translateY(-2px) scale(1.1)}.tool-btn.danger{background:linear-gradient(135deg,#dc3545,#c82333,#bd2130);color:#fff;border-color:#ffffff4d;text-shadow:0 1px 2px rgba(0,0,0,.2);box-shadow:0 6px 20px #dc35454d}.tool-btn.danger:hover{background:linear-gradient(135deg,#c82333,#a71e2a,#9c1e28);box-shadow:0 6px 20px #dc354566;transform:translateY(-2px) scale(1.1)}.tool-icon{font-size:1.1rem;filter:drop-shadow(0 1px 2px rgba(0,0,0,.1));transition:transform .2s ease}.tool-btn:hover .tool-icon{transform:scale(1.2)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.video-container.loading{animation:pulse 2s infinite}.video-toolbar::-webkit-scrollbar{width:3px}.video-toolbar::-webkit-scrollbar-track{background:#ffffff1a;border-radius:2px;margin:5px 0}.video-toolbar::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#0003,#0000004d);border-radius:2px;transition:background .2s ease}.video-toolbar::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#0000004d,#0006)}@media(max-height:900px){.init-button{padding:.85rem 1.25rem;font-size:1rem}.idle-clock{font-size:3.6rem}.idle-lock{margin-top:36px}.idle-phone{margin-top:28px}}@media(max-height:760px){.app-title{font-size:1.15rem}.config-section{padding:.7rem .85rem}.init-button{padding:.7rem 1rem;font-size:.92rem}}@media(max-width:960px){.main-content{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.config-section{max-height:34vh}}@media(max-width:640px){.app-container{padding:.4rem}.config-section{max-height:30vh;border-radius:12px}.video-section{border-radius:12px}}