:root{--brand-bg: #02070E;--brand-bg-rgb: 2,7,14;--brand-navy: #06121F;--brand-navy-2: #0B1E33;--brand-navy-2-rgb: 11,30,51;--brand-navy-3: #122C49;--brand-primary: #34BDFF;--brand-primary-rgb: 52,189,255;--brand-primary-mid: #0A84E8;--brand-primary-dark: #0B63C4;--brand-light: #ABE2FD;--brand-light-rgb: 171,226,253;--brand-white: #EAF6FF;--brand-steel: #6C879F;--brand-slate: #9DB4CC;--brand-accent: #F5A623;--brand-accent-rgb: 245,166,35;--brand-accent-dark: #E8880A;--result-win: #2BD46A;--result-draw: #F5C542;--result-loss: #FF5A5F}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:var(--brand-bg);color:var(--brand-white);font-family:var(--brand-font-body);overflow:hidden}body{display:grid;grid-template-rows:54px 1fr;grid-template-columns:360px 1fr}.topbar{grid-column:1 / -1;display:flex;align-items:center;gap:14px;padding:0 22px;background:var(--brand-navy);border-bottom:1px solid rgba(var(--brand-light-rgb),.14);z-index:10}.topbar .logo{width:36px;height:36px}.topbar h1{font:400 19px var(--brand-font-display);text-transform:uppercase;color:var(--brand-white);line-height:1}.topbar .sub{font:500 10px var(--brand-font-head);text-transform:uppercase;letter-spacing:.2em;color:var(--brand-primary);margin-left:2px}.spacer{flex:1}.proj-box{display:flex;align-items:center;gap:8px}.proj-box label{font:500 10px var(--brand-font-head);text-transform:uppercase;letter-spacing:.18em;color:var(--brand-steel);white-space:nowrap}.proj-box select{background:var(--brand-navy-2);border:1px solid rgba(var(--brand-light-rgb),.3);border-radius:8px;color:var(--brand-white);font:600 11px var(--brand-font-head);text-transform:uppercase;letter-spacing:.1em;padding:6px 10px;cursor:pointer;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:border-color .15s}.proj-box select:focus{border-color:var(--brand-primary)}.btn-alpha{display:flex;align-items:center;gap:7px;padding:8px 15px;background:transparent;border:1px solid rgba(var(--brand-light-rgb),.3);border-radius:999px;font:600 11px var(--brand-font-head);text-transform:uppercase;letter-spacing:.12em;color:var(--brand-slate);cursor:pointer;transition:all .2s}.btn-alpha:hover{border-color:var(--brand-primary);color:var(--brand-primary)}.btn-alpha.on{background:rgba(var(--brand-primary-rgb),.12);border-color:var(--brand-primary);color:var(--brand-primary)}.btn-alpha svg{width:13px;height:13px}.btn-export{display:flex;align-items:center;gap:7px;padding:8px 18px;background:linear-gradient(160deg,var(--brand-primary) 0%,var(--brand-primary-mid) 55%,var(--brand-primary-dark) 100%);border:none;border-radius:999px;font:600 11px var(--brand-font-head);text-transform:uppercase;letter-spacing:.14em;color:var(--brand-bg);cursor:pointer;transition:transform .15s}.btn-export:hover{transform:translateY(-1px)}.btn-export svg{width:13px;height:13px}.sidebar{background:var(--brand-navy);border-right:1px solid rgba(var(--brand-light-rgb),.12);overflow-y:auto;padding:18px 16px 32px;display:flex;flex-direction:column;gap:18px}.tbox{background:var(--brand-navy-2);border:1px solid rgba(var(--brand-primary-rgb),.5);border-radius:14px;padding:14px}.tbox label{font:500 10px var(--brand-font-head);text-transform:uppercase;letter-spacing:.18em;color:var(--brand-primary);display:block;margin-bottom:6px}.fg label{font:500 10px var(--brand-font-head);text-transform:uppercase;letter-spacing:.18em;color:var(--brand-primary);display:block}.tbox select{width:100%;background:var(--brand-navy-3);border:1px solid rgba(var(--brand-light-rgb),.3);border-radius:8px;color:var(--brand-white);font:400 14px var(--brand-font-display);text-transform:uppercase;padding:9px 11px;cursor:pointer;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.tbox .meta{font:500 10px var(--brand-font-head);text-transform:uppercase;letter-spacing:.1em;color:var(--brand-steel)}.tbox-footer{display:flex;align-items:center;justify-content:space-between;margin-top:6px;gap:8px}.btn-clear{font:500 10px var(--brand-font-head);text-transform:uppercase;letter-spacing:.12em;color:var(--brand-steel);background:transparent;border:1px solid rgba(var(--brand-light-rgb),.18);border-radius:5px;padding:3px 8px;cursor:pointer;transition:color .15s,border-color .15s;flex-shrink:0}.btn-clear:hover{color:#ff5a5f;border-color:#ff5a5f66}.sec{font:600 10px var(--brand-font-head);text-transform:uppercase;letter-spacing:.2em;color:var(--brand-steel);border-bottom:1px solid rgba(var(--brand-light-rgb),.1);padding-bottom:6px}#fieldsArea{display:flex;flex-direction:column;gap:12px}.fg{display:flex;flex-direction:column;gap:5px}.fg input,.fg select,.fg textarea{background:var(--brand-navy-2);border:1px solid rgba(var(--brand-light-rgb),.22);border-radius:7px;color:var(--brand-white);font:500 13px var(--brand-font-head);padding:8px 10px;width:100%;outline:none;transition:border-color .15s,box-shadow .15s}.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--brand-primary);box-shadow:0 0 0 2px rgba(var(--brand-primary-rgb),.18)}.fg textarea{resize:vertical;min-height:68px}.fg input[type=file]{padding:6px 10px;cursor:pointer;font-size:11px}.player-row{display:grid;grid-template-columns:46px 1fr 52px;gap:5px}.player-rows{display:flex;flex-direction:column;gap:5px}.scorer-row{display:grid;grid-template-columns:1fr 50px 28px;gap:5px;align-items:end}.btn-add{width:100%;background:transparent;border:1px dashed rgba(var(--brand-light-rgb),.22);border-radius:7px;color:var(--brand-primary);font:500 11px var(--brand-font-head);text-transform:uppercase;letter-spacing:.1em;padding:7px;cursor:pointer;transition:border-color .15s,background .15s}.btn-add:hover{border-color:var(--brand-primary);background:rgba(var(--brand-primary-rgb),.06)}.btn-rm{background:transparent;border:1px solid rgba(255,90,95,.3);border-radius:5px;color:#ff5a5f;font:700 14px/1 sans-serif;width:28px;height:36px;cursor:pointer;align-self:flex-end}.btn-rm:hover{background:#ff5a5f1f}.rpills{display:flex;gap:5px}.rpill{font:600 11px var(--brand-font-head);text-transform:uppercase;letter-spacing:.1em;padding:6px 12px;border-radius:999px;cursor:pointer;border:1px solid transparent;transition:all .15s}.rpill[data-v=W]{background:#2bd46a1f;color:var(--result-win);border-color:#2bd46a4d}.rpill[data-v=D]{background:#f5c5421f;color:var(--result-draw);border-color:#f5c5424d}.rpill[data-v=L]{background:#ff5a5f1f;color:var(--result-loss);border-color:#ff5a5f4d}.rpill.active[data-v=W]{background:var(--result-win);color:#000}.rpill.active[data-v=D]{background:var(--result-draw);color:#000}.rpill.active[data-v=L]{background:var(--result-loss);color:#000}.preview-area{position:relative;background:#000;display:flex;align-items:center;justify-content:center;overflow:auto}#checkerboard{display:none;position:absolute;top:0;right:0;bottom:0;left:0;background-image:repeating-conic-gradient(#1a1a2e,#1a1a2e 25%,#0d0d1a 0%,#0d0d1a 50%);background-size:20px 20px;pointer-events:none;z-index:0}#alphaBadge{display:none;position:absolute;top:14px;left:50%;transform:translate(-50%);z-index:10;background:rgba(var(--brand-primary-rgb),.15);border:1px solid rgba(var(--brand-primary-rgb),.4);border-radius:999px;padding:5px 14px;font:600 10px var(--brand-font-head);text-transform:uppercase;letter-spacing:.16em;color:var(--brand-primary);pointer-events:none;white-space:nowrap}#previewSizer{flex-shrink:0;margin:auto;position:relative;box-shadow:0 20px 60px #000c}#previewFrame{position:absolute;top:0;left:0;border:none;display:block;transform-origin:top left}#videoCanvas{position:absolute;top:0;left:0;display:none;transform-origin:top left}.exp-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;background:rgba(var(--brand-bg-rgb),.88);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);align-items:center;justify-content:center;flex-direction:column;gap:16px}.exp-overlay.on{display:flex}.spin{width:40px;height:40px;border:3px solid rgba(var(--brand-light-rgb),.15);border-top-color:var(--brand-primary);border-radius:50%;animation:spin .8s linear infinite}.exp-overlay p{font:500 12px var(--brand-font-head);text-transform:uppercase;letter-spacing:.14em;color:var(--brand-slate)}@keyframes spin{to{transform:rotate(360deg)}}.mobile-tabs,.mobile-actions{display:none}@media (max-width: 900px){html{height:100%}body{display:flex;flex-direction:column;height:100dvh;min-height:-webkit-fill-available;overflow:hidden}.topbar{padding:0 14px;gap:10px;flex-shrink:0}.topbar .sub,.topbar .btn-alpha,.topbar .btn-export,.proj-box label{display:none}.sidebar{flex:1;width:100%;border-right:none;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:24px}#previewArea,#mobileActions,body.mobile-preview .sidebar{display:none}body.mobile-preview #previewArea{display:flex;flex:1;width:100%}body.mobile-preview #mobileActions{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--brand-navy);border-top:1px solid rgba(var(--brand-light-rgb),.12);flex-shrink:0}body.mobile-preview #mobileActions .btn-export{flex-shrink:0}.zoom-ctrl{flex:1;display:flex;align-items:center;justify-content:center;background:var(--brand-navy-2);border:1px solid rgba(var(--brand-light-rgb),.22);border-radius:999px;overflow:hidden;height:38px}.zoom-btn{width:40px;height:38px;background:transparent;border:none;color:var(--brand-primary);font:700 22px/1 sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}.zoom-btn:active{background:rgba(var(--brand-primary-rgb),.15)}.zoom-reset{flex:1;background:transparent;border:none;border-left:1px solid rgba(var(--brand-light-rgb),.14);border-right:1px solid rgba(var(--brand-light-rgb),.14);color:var(--brand-white);font:600 11px var(--brand-font-head);text-transform:uppercase;letter-spacing:.1em;text-align:center;cursor:pointer;height:100%;padding:0 4px}.zoom-reset:active{background:rgba(var(--brand-primary-rgb),.1)}.mobile-tabs{display:flex;flex-shrink:0;background:var(--brand-navy);border-top:1px solid rgba(var(--brand-light-rgb),.14);padding-bottom:env(safe-area-inset-bottom,0px)}.mtab{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:52px;background:transparent;border:none;border-top:2px solid transparent;color:var(--brand-steel);font:600 11px var(--brand-font-head);text-transform:uppercase;letter-spacing:.12em;cursor:pointer;transition:color .15s,background .15s,border-color .15s}.mtab.active{color:var(--brand-primary);background:rgba(var(--brand-primary-rgb),.08);border-top-color:var(--brand-primary)}.fg input,.fg select,.fg textarea,.tbox select{min-height:44px;font-size:16px}.btn-add{min-height:44px}.btn-rm{width:36px;height:44px}.rpill{padding:10px 14px}.topbar .btn-signout{display:none}}body.not-ready>:not(#authGate){display:none!important}#authGate{position:fixed;top:0;right:0;bottom:0;left:0;display:none;flex-direction:column;align-items:center;justify-content:center;background:var(--brand-bg)}body.not-ready #authGate{display:flex}.auth-card{display:flex;flex-direction:column;align-items:center;gap:18px;position:relative;overflow:hidden;background:var(--brand-navy);border:1px solid rgba(var(--brand-light-rgb),.14);border-radius:14px;padding:44px 52px 40px;text-align:center;box-shadow:0 20px 60px #0009}.auth-card:before,.auth-card:after{content:"";position:absolute;pointer-events:none}.auth-card:before{top:-30px;right:-30px;width:90px;height:90px;border-radius:50%;border:1.5px solid rgba(var(--brand-primary-rgb),.22)}.auth-card:after{bottom:22px;left:-46px;width:130px;height:130px;background:rgba(var(--brand-primary-rgb),.1);transform:rotate(28deg) skew(-12deg)}.auth-card>*{position:relative;z-index:1}.auth-card h2{font:400 22px var(--brand-font-display);text-transform:uppercase;color:var(--brand-white);letter-spacing:.04em}.auth-card p{font:400 13px var(--brand-font-body);color:var(--brand-steel)}.btn-signin{display:flex;align-items:center;gap:8px;transform:skew(-12deg);background:linear-gradient(160deg,var(--brand-primary) 0%,#0A84E8 55%,#0B63C4 100%);border:none;cursor:pointer;transition:transform .15s}.btn-signin span{display:flex;align-items:center;gap:8px;padding:11px 24px;transform:skew(12deg);font:700 11px var(--brand-font-head);text-transform:uppercase;letter-spacing:.12em;color:#02070e}.btn-signin:hover{transform:skew(-12deg) translateY(-1px)}.btn-signin svg{width:13px;height:13px}.btn-signout{display:flex;align-items:center;gap:7px;transform:skew(-12deg);background:transparent;border:1px solid rgba(var(--brand-light-rgb),.2);cursor:pointer;transition:border-color .2s,color .2s}.btn-signout span{display:flex;align-items:center;gap:7px;padding:7px 14px;transform:skew(12deg);font:700 10px var(--brand-font-head);text-transform:uppercase;letter-spacing:.1em;color:var(--brand-steel)}.btn-signout:hover{border-color:rgba(var(--brand-light-rgb),.5)}.btn-signout:hover span{color:var(--brand-white)}.btn-signout svg{width:12px;height:12px}