:root{--bg-primary:#0a0e14;--bg-secondary:#151b24;--bg-tertiary:#1a2332;--bg-card:#1f2937;--border-color:#2d3748;--text-primary:#ffffff;--text-secondary:#a0aec0;--text-muted:#718096;--accent-primary:#00d4aa;--accent-secondary:#00a8ff;--accent-gradient:linear-gradient(135deg, #00d4aa 0%, #00a8ff 100%);--shadow-glow:0 0 20px rgba(0, 212, 170, 0.3);--toolbar-width:70px;--panel-width:300px;--record-red:#ff4757;--btn-font:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;--btn-radius:clamp(6px, 0.6vw + 4px, 12px);--btn-transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);--btn-xs-padding-y:clamp(4px, 0.4vw + 2px, 6px);--btn-xs-padding-x:clamp(8px, 0.8vw + 4px, 12px);--btn-xs-font:clamp(10px, 0.6vw + 8px, 12px);--btn-xs-gap:clamp(4px, 0.3vw + 2px, 6px);--btn-sm-padding-y:clamp(6px, 0.6vw + 3px, 10px);--btn-sm-padding-x:clamp(12px, 1vw + 6px, 18px);--btn-sm-font:clamp(11px, 0.7vw + 8px, 13px);--btn-sm-gap:clamp(5px, 0.4vw + 3px, 8px);--btn-md-padding-y:clamp(8px, 0.8vw + 4px, 14px);--btn-md-padding-x:clamp(16px, 1.5vw + 8px, 28px);--btn-md-font:clamp(13px, 0.8vw + 9px, 16px);--btn-md-gap:clamp(6px, 0.5vw + 4px, 10px);--btn-lg-padding-y:clamp(12px, 1vw + 6px, 18px);--btn-lg-padding-x:clamp(24px, 2vw + 12px, 40px);--btn-lg-font:clamp(14px, 0.9vw + 10px, 18px);--btn-lg-gap:clamp(8px, 0.6vw + 5px, 12px);--btn-xl-padding-y:clamp(14px, 1.2vw + 8px, 22px);--btn-xl-padding-x:clamp(28px, 2.5vw + 16px, 48px);--btn-xl-font:clamp(15px, 1vw + 11px, 20px);--btn-xl-gap:clamp(10px, 0.8vw + 6px, 14px);--btn-icon-xs:clamp(28px, 2vw + 20px, 36px);--btn-icon-sm:clamp(32px, 2.5vw + 22px, 42px);--btn-icon-md:clamp(40px, 3vw + 26px, 52px);--btn-icon-lg:clamp(48px, 3.5vw + 30px, 64px)}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;padding:0;font-family:Outfit,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow:hidden}body.board-page{display:flex;flex-direction:column;height:100vh}.hidden{display:none!important}.header{height:54px;flex-shrink:0;background:linear-gradient(135deg,#1a2332 0,#0d1117 50%,#1a2332 100%);border-bottom:2px solid var(--accent-primary);display:flex;align-items:center;justify-content:space-between;padding:0 12px;gap:8px;position:relative;z-index:100;box-shadow:0 4px 20px rgba(0,212,170,.15)}.header-left{display:flex;align-items:center;gap:8px;flex-shrink:0}.logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0}.logo-img{height:34px;width:auto;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0, 212, 170, .3))}.brand-text{display:flex;flex-direction:column;gap:1px}.brand-name{font-size:16px;font-weight:700;color:#fff;letter-spacing:.5px}.brand-slogan{font-size:7px;color:var(--accent-primary);font-weight:600;letter-spacing:1.5px;text-transform:uppercase}.header-center{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-width:0}.header .page-title{font-size:14px;font-weight:600;color:var(--text-primary);margin:0;white-space:nowrap}.header-controls{display:flex;align-items:center;gap:4px;background:var(--bg-tertiary);padding:3px;border-radius:8px;border:1px solid var(--border-color)}.header-select{background:0 0;border:none;color:var(--text-primary);padding:5px 8px;border-radius:5px;font-family:Outfit,sans-serif;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s}.header-select option{background:var(--bg-secondary);color:var(--text-primary);padding:8px}.header-select:hover{background:rgba(255,255,255,.05)}.header-select:focus{outline:0;background:rgba(0,212,170,.1)}.sport-select{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);padding:8px 12px;border-radius:8px;font-family:Outfit,sans-serif;font-size:13px;cursor:pointer}.sport-select option{background:var(--bg-secondary);color:var(--text-primary)}.sport-select:focus{outline:0;border-color:var(--accent-primary)}.plan-name-input{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);padding:8px 12px;border-radius:8px;font-family:Outfit,sans-serif;font-size:13px;width:140px}.plan-name-input:focus{outline:0;border-color:var(--accent-primary)}.mode-toggle{display:flex;background:var(--bg-tertiary);border-radius:8px;padding:3px;gap:2px;border:1px solid var(--border-color)}.mode-btn{display:flex;align-items:center;gap:4px;padding:5px 10px;border-radius:6px;font-family:var(--btn-font);font-weight:600;font-size:11px;cursor:pointer;background:0 0;border:none;color:var(--text-muted);transition:var(--btn-transition)}.mode-btn:hover{color:var(--text-primary);background:rgba(255,255,255,.05)}.mode-btn.active{background:var(--accent-gradient);color:var(--bg-primary);box-shadow:0 2px 8px rgba(0,212,170,.3)}.mode-btn.active .mode-lock{display:none}.mode-lock{font-size:10px;margin-left:2px;opacity:.7}.mode-btn.unlocked .mode-lock{display:none}.header-actions{display:flex;align-items:center;gap:6px;justify-content:flex-end;flex-shrink:0}.auth-loading-placeholder{display:flex;align-items:center;gap:8px;padding:8px 16px}.auth-loading-spinner{width:20px;height:20px;border:2px solid var(--border-color);border-top-color:var(--accent-primary);border-radius:50%;animation:auth-spin .8s linear infinite}@keyframes auth-spin{to{transform:rotate(360deg)}}.auth-loading-text{color:var(--text-muted);font-size:13px;padding:8px 16px}.header{flex-wrap:wrap;height:auto;padding:0}.header-left{padding:8px 12px}.header-center{flex:1;padding:8px 12px}.header-actions{padding:8px 12px}:root{--nav-icon-size:1.25rem;--nav-indicator-size:48px;--nav-item-padding:0.6rem;--nav-bg:var(--bg-secondary, #151b24);--nav-accent:var(--accent-primary, #00d4aa);--nav-accent-glow:rgba(0, 212, 170, 0.3)}.header-nav-bar{--nav-position:50;--nav-pill-width:70px;display:flex;flex-basis:100%;padding:8px 12px;background:var(--nav-bg);border-top:1px solid rgba(255,255,255,.06);justify-content:center;align-items:center;order:1;position:relative;gap:4px}.header-nav-bar::before{content:'';position:absolute;top:50%;left:calc(var(--nav-position) * 1px);width:var(--nav-pill-width);height:calc(100% - 12px);background:linear-gradient(135deg,var(--nav-accent) 0,#00a8ff 100%);border-radius:10px;transform:translate(-50%,-50%) scale(.8);transition:transform .3s cubic-bezier(.34, 1.56, .64, 1),opacity .2s ease,width .2s ease;box-shadow:0 2px 16px var(--nav-accent-glow),0 0 30px rgba(0,212,170,.15);z-index:0;opacity:0}.header-nav-bar.nav-ready::before{opacity:1;transform:translate(-50%,-50%) scale(1)}.header-nav-bar .nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:var(--nav-item-padding) calc(var(--nav-item-padding) * 1.2);min-width:55px;color:var(--text-secondary,#a0aec0);font-size:10px;font-weight:500;text-decoration:none;cursor:pointer;transition:all .3s ease;position:relative;z-index:1;border-radius:8px}.header-nav-bar .nav-item svg{width:var(--nav-icon-size);height:var(--nav-icon-size);flex-shrink:0;transition:all .3s ease}.header-nav-bar .nav-item span{transition:all .3s ease;opacity:.8}.header-nav-bar .nav-item:hover{color:var(--text-primary,#fff)}.header-nav-bar .nav-item:hover svg{transform:scale(1.1)}.header-nav-bar .nav-item.active{color:#fff}.header-nav-bar .nav-item.active svg{transform:scale(1.1);filter:drop-shadow(0 2px 4px rgba(0, 0, 0, .3));stroke:#fff}.header-nav-bar .nav-item.active span{opacity:1;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.3)}.header-nav-bar .nav-lock{font-size:7px;opacity:.7;position:absolute;top:2px;right:2px}.header-nav-bar .nav-item.unlocked .nav-lock{display:none}@media (min-width:769px){:root{--nav-icon-size:1rem}.header-left{order:0}.header-nav-bar{order:1;flex-basis:auto;flex:0 1 auto;border-top:none;background:var(--bg-tertiary,#1a2332);padding:4px 6px;justify-content:flex-start;border-radius:12px;gap:2px}.header-nav-bar::before{height:calc(100% - 8px);border-radius:10px}.header-nav-bar .nav-item{flex-direction:row;gap:6px;padding:8px 12px;font-size:12px;min-width:auto}.header-nav-bar .nav-item svg{width:16px;height:16px}.header-nav-bar .nav-item:hover svg{transform:scale(1.05)}.header-nav-bar .nav-item.active svg{transform:scale(1.05)}.header-actions{order:2;margin-left:auto}.header-center{order:3;flex-basis:100%;justify-content:center;padding:8px 16px;border-top:1px solid rgba(255,255,255,.06);background:var(--bg-secondary,#151b24)}}@media (max-width:768px){:root{--nav-icon-size:1.3rem}.header-nav-bar{padding:8px 6px;gap:2px;border-top:1px solid rgba(255,255,255,.06);background:var(--nav-bg)}.header-nav-bar::before{height:calc(100% - 12px)}.header-nav-bar .nav-item{flex:1;min-width:0;padding:8px 4px}.header-nav-bar .nav-item span{font-size:clamp(8px, 2.2vw, 10px);white-space:nowrap}.header-nav-bar .nav-item svg{width:20px;height:20px}}@media (max-width:400px){.header-nav-bar .nav-item{padding:6px 2px}.header-nav-bar .nav-item span{font-size:8px}.header-nav-bar .nav-item svg{width:18px;height:18px}}.btn{padding:var(--btn-md-padding-y) var(--btn-md-padding-x);border-radius:var(--btn-radius);font-family:var(--btn-font);font-weight:600;font-size:var(--btn-md-font);cursor:pointer;transition:var(--btn-transition);border:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--btn-md-gap);text-decoration:none;white-space:nowrap;user-select:none;-webkit-tap-highlight-color:transparent}.btn:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-xs{padding:var(--btn-xs-padding-y) var(--btn-xs-padding-x);font-size:var(--btn-xs-font);gap:var(--btn-xs-gap);border-radius:calc(var(--btn-radius) * .75)}.btn-sm{padding:var(--btn-sm-padding-y) var(--btn-sm-padding-x);font-size:var(--btn-sm-font);gap:var(--btn-sm-gap)}.btn-lg{padding:var(--btn-lg-padding-y) var(--btn-lg-padding-x);font-size:var(--btn-lg-font);gap:var(--btn-lg-gap)}.btn-xl{padding:var(--btn-xl-padding-y) var(--btn-xl-padding-x);font-size:var(--btn-xl-font);gap:var(--btn-xl-gap);border-radius:calc(var(--btn-radius) * 1.5)}.btn-block{width:100%}.btn-primary{background:var(--accent-gradient);color:var(--bg-primary);box-shadow:0 2px 8px rgba(0,212,170,.25)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,212,170,.4)}.btn-primary:active{transform:translateY(0);box-shadow:0 2px 8px rgba(0,212,170,.25)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:var(--bg-card);border-color:var(--accent-primary);transform:translateY(-1px)}.btn-secondary:active{transform:translateY(0)}.btn-accent{background:rgba(0,212,170,.12);color:var(--accent-primary);border:1px solid rgba(0,212,170,.4)}.btn-accent:hover{background:rgba(0,212,170,.22);border-color:var(--accent-primary);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,212,170,.25)}.btn-accent:active{transform:translateY(0)}.btn-ghost{background:0 0;color:var(--text-secondary);border:none}.btn-ghost:hover{background:rgba(255,255,255,.08);color:var(--text-primary)}.btn-outline{background:0 0;color:var(--text-primary);border:1px solid var(--border-color)}.btn-outline:hover{border-color:var(--accent-primary);color:var(--accent-primary);background:rgba(0,212,170,.08)}.btn-danger{background:rgba(255,71,87,.15);color:var(--record-red);border:1px solid rgba(255,71,87,.4)}.btn-danger:hover{background:rgba(255,71,87,.25);border-color:var(--record-red);transform:translateY(-1px)}.btn-icon-only{padding:0;aspect-ratio:1}.btn-icon-only.btn-xs{width:var(--btn-icon-xs);height:var(--btn-icon-xs)}.btn-icon-only.btn-sm{width:var(--btn-icon-sm);height:var(--btn-icon-sm)}.btn-icon-only,.btn-icon-only.btn-md{width:var(--btn-icon-md);height:var(--btn-icon-md)}.btn-icon-only.btn-lg{width:var(--btn-icon-lg);height:var(--btn-icon-lg)}.btn .btn-icon{font-size:1.15em;flex-shrink:0}.btn .btn-text{font-weight:600}.btn-group{display:inline-flex;gap:clamp(8px,1vw,16px);flex-wrap:wrap}.main-container{display:flex;flex:1;min-height:0;overflow:hidden;position:relative}.mobile-mode-row{display:none}.toolbar{width:var(--toolbar-width);background:var(--bg-secondary);border-right:1px solid var(--border-color);padding:12px 8px;display:flex;flex-direction:column;gap:8px;align-items:center;overflow-y:auto;flex-shrink:0}.tool-btn{width:clamp(38px,4vw + 26px,50px);height:clamp(38px,4vw + 26px,50px);background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:10px;color:var(--text-secondary);cursor:pointer;transition:all .2s ease;font-size:clamp(14px, 1.5vw + 10px, 20px);display:flex;align-items:center;justify-content:center;flex-shrink:0}.tool-btn svg{width:clamp(16px,1.2vw + 12px,22px);height:clamp(16px,1.2vw + 12px,22px);stroke:currentColor;transition:all .2s ease}.tool-btn:hover{background:rgba(0,212,170,.1);border-color:var(--accent-primary);color:var(--accent-primary);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,212,170,.2)}.tool-btn:active{transform:translateY(0)}.tool-btn.active{background:linear-gradient(135deg,rgba(0,212,170,.2),rgba(0,168,255,.15));border-color:var(--accent-primary);color:var(--accent-primary);box-shadow:0 0 15px rgba(0,212,170,.4),inset 0 0 10px rgba(0,212,170,.1)}.tool-btn.active svg{filter:drop-shadow(0 0 3px rgba(0, 212, 170, .5))}.tool-divider{width:clamp(28px,3vw + 20px,44px);height:1px;background:var(--border-color);margin:clamp(2px,.3vw,6px) 0}.header-drills-btn{display:none;align-items:center;gap:4px;padding:6px 10px;background:linear-gradient(135deg,rgba(0,212,170,.15),rgba(0,168,255,.15));border:1px solid var(--accent-primary);border-radius:8px;color:var(--text-primary);font-size:12px;font-weight:600;cursor:pointer;transition:var(--btn-transition);text-decoration:none;white-space:nowrap;flex-shrink:0}.header-drills-btn:hover{background:linear-gradient(135deg,rgba(0,212,170,.3),rgba(0,168,255,.3));transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,212,170,.3)}.header-drills-btn:active{transform:translateY(0)}.header-drills-btn .drills-icon{font-size:14px}.header-drills-btn .drills-text{font-family:var(--btn-font)}.header-drills-btn .drills-lock{font-size:10px;margin-left:2px;opacity:.8}.header-drills-btn.unlocked .drills-lock{display:none}.color-btn{width:clamp(26px,2.5vw + 18px,38px);height:clamp(26px,2.5vw + 18px,38px);border-radius:50%;border:2px solid var(--border-color);cursor:pointer;transition:var(--btn-transition)}.color-btn:hover{transform:scale(1.1)}.color-btn.active{border-color:var(--accent-primary);box-shadow:0 0 0 2px var(--bg-secondary),0 0 0 4px var(--accent-primary)}.canvas-area{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;background:var(--bg-primary);position:relative;overflow:hidden}.canvas-wrapper{position:relative;display:flex;align-items:center;justify-content:center;padding:20px;width:100%;height:100%}.canvas-area.animate-mode .canvas-wrapper{padding-bottom:66px}#mainCanvas{max-width:100%;max-height:100%;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.3)}.trash-zone{display:none;flex-direction:row;align-items:center;gap:6px;position:absolute;left:68px;top:50%;transform:translateY(-50%);padding:10px 14px;background:rgba(255,71,87,.3);border:2px solid rgba(255,71,87,.7);border-radius:10px;color:#ff4757;font-weight:600;transition:all .2s ease;opacity:0;z-index:200;box-shadow:0 4px 15px rgba(255,71,87,.3);backdrop-filter:blur(8px)}.trash-icon{font-size:22px;line-height:1}.trash-text{font-size:11px;white-space:nowrap;font-weight:700}.trash-zone.visible{display:flex;opacity:1}.trash-zone.drag-over{background:rgba(255,71,87,.5);border-color:#ff4757;transform:translateY(-50%) scale(1.08);box-shadow:0 0 25px rgba(255,71,87,.6)}.recording-indicator{position:absolute;top:20px;right:20px;padding:8px 16px;background:rgba(255,71,87,.9);border-radius:8px;display:none;align-items:center;gap:8px;color:#fff;font-weight:600;font-size:14px;animation:pulse 1.5s infinite}.recording-indicator.visible{display:flex}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}.bench-overlay{position:absolute;top:8px;right:8px;bottom:8px;display:flex;flex-direction:row;align-items:flex-start;z-index:10;pointer-events:none}.bench-overlay.collapsed .bench-tray{display:none}.bench-tab{pointer-events:auto;writing-mode:vertical-lr;text-orientation:mixed;background:rgba(15,20,30,.85);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12);border-right:none;border-radius:6px 0 0 6px;color:var(--text-secondary);font-size:10px;font-weight:700;letter-spacing:1px;padding:10px 5px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .2s,color .2s}.bench-tab:hover{background:rgba(25,35,50,.95);color:var(--text-primary)}.bench-tab-label{font-size:9px;letter-spacing:1.5px}.bench-tab-count{font-size:10px;font-weight:700;color:var(--accent-primary);background:rgba(0,212,170,.15);border-radius:8px;padding:2px 4px;min-width:16px;text-align:center;writing-mode:horizontal-tb}.bench-tab-count:empty{display:none}.bench-tray{pointer-events:auto;background:rgba(15,20,30,.85);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12);border-radius:0 0 0 6px;display:flex;flex-direction:column;max-height:100%;overflow-y:auto;overflow-x:hidden;min-width:56px}.bench-seats{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px}.bench-empty-msg{font-size:8px;color:var(--text-muted);text-align:center;padding:8px 4px;white-space:nowrap}.bench-player-chip{width:40px;height:40px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:grab;border:2px solid rgba(255,255,255,.35);box-shadow:0 2px 8px rgba(0,0,0,.4);transition:transform .15s,box-shadow .15s,border-color .15s;flex-shrink:0}.bench-player-chip:hover{transform:scale(1.12);box-shadow:0 3px 12px rgba(0,0,0,.5);border-color:rgba(255,255,255,.7)}.bench-player-chip:active{cursor:grabbing}.bench-player-chip .bench-chip-number{font-size:13px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);line-height:1}.bench-player-chip .bench-chip-pos{font-size:6px;font-weight:600;color:rgba(255,255,255,.8);text-transform:uppercase;line-height:1;margin-top:1px}.bench-player-name{font-size:7px;color:rgba(255,255,255,.7);text-align:center;margin-top:1px;max-width:54px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}.bench-chip-delete{position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:50%;background:#ff4757;border:1.5px solid rgba(0,0,0,.3);color:#fff;font-size:11px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0;z-index:2}.bench-player-chip{position:relative}.bench-player-chip:hover .bench-chip-delete{display:flex}.bench-chip-delete:hover{background:#f23;transform:scale(1.15)}.bench-chip-wrapper{display:flex;flex-direction:column;align-items:center}.bench-add-btn{width:32px;height:32px;border-radius:50%;border:2px dashed rgba(255,255,255,.25);background:rgba(255,255,255,.05);color:var(--text-muted);font-size:18px;font-weight:300;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px auto 6px;transition:all .2s;flex-shrink:0}.bench-add-btn:hover{border-color:var(--accent-primary);color:var(--accent-primary);background:rgba(0,212,170,.1)}.bench-tray.drag-over{outline:2px dashed var(--accent-primary);outline-offset:-2px;background:rgba(0,212,170,.08)}.right-panel{width:var(--panel-width);max-width:var(--panel-width);background:var(--bg-secondary);border-left:1px solid var(--border-color);padding:16px;padding-bottom:60px;overflow-y:auto;overflow-x:hidden;flex-shrink:0}.panel-section{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border-color)}.panel-section:last-child{border-bottom:none}.panel-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px}.panel-title-row .panel-title{margin-bottom:0}.team-size-select{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);padding:6px 10px;border-radius:6px;font-family:Outfit,sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}.team-size-select:hover{border-color:var(--accent-primary)}.team-size-select:focus{outline:0;border-color:var(--accent-primary);box-shadow:0 0 0 2px rgba(0,212,170,.2)}.team-size-select option{background:var(--bg-secondary);color:var(--text-primary)}.panel-title{font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;display:flex;align-items:center;gap:8px}.team-section{margin-bottom:16px}.team-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.team-dot{width:12px;height:12px;border-radius:50%}.team-dot.team-a{background:#ff4757}.team-dot.team-b{background:#3742fa}.team-label{font-size:12px;color:var(--text-secondary);font-weight:500}.player-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:6px}.player-chip{width:100%;aspect-ratio:1;max-width:44px;min-width:32px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;color:#fff;cursor:grab;transition:all .2s;border:2px solid rgba(255,255,255,.4);box-shadow:0 3px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.2);position:relative;gap:0;padding:2px}.player-chip:hover{transform:scale(1.12);box-shadow:0 4px 12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.3)}.player-chip .player-number{font-size:14px;line-height:1;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.3);display:block}.player-chip .player-position{font-size:8px;line-height:1;font-weight:600;opacity:.9;text-transform:uppercase;letter-spacing:.5px;display:block;margin-top:1px}.player-chip.team-a{background:linear-gradient(135deg,#ff6b7a,#ff4757,#c0392b)}.player-chip.team-b{background:linear-gradient(135deg,#5a68fa,#3742fa,#1e3799)}.team-colors-grid{display:flex;flex-direction:column;gap:12px}.team-color-row{display:flex;align-items:center;gap:10px}.team-color-label{font-size:11px;color:var(--text-muted);width:50px}.team-color-options{display:flex;gap:6px;align-items:center}.team-color-chip{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .2s}.team-color-chip:hover{transform:scale(1.1)}.team-color-chip.active{border-color:#fff;box-shadow:0 0 0 2px var(--bg-secondary)}.team-color-custom{width:24px;height:24px;border:none;border-radius:50%;cursor:pointer;background:0 0}.equipment-grid{display:flex;flex-wrap:wrap;gap:8px}.equipment-item{width:40px;height:40px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:grab;transition:all .2s}.equipment-item:hover{border-color:var(--accent-primary);transform:scale(1.05)}.formations-section{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border-color)}.formations-header{margin-bottom:12px}.formation-tabs{display:flex;gap:4px;margin-bottom:12px}.formation-tab{flex:1;padding:6px 8px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-muted);font-size:11px;font-family:Outfit,sans-serif;cursor:pointer;transition:all .2s}.formation-tab:hover{border-color:var(--accent-primary);color:var(--text-primary)}.formation-tab.active{background:rgba(0,212,170,.15);border-color:var(--accent-primary);color:var(--accent-primary)}.myplans-search{margin-bottom:10px}.myplans-search-input{width:100%;padding:8px 12px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-family:Outfit,sans-serif;font-size:12px;transition:all .2s}.myplans-search-input:focus{outline:0;border-color:var(--accent-primary);box-shadow:0 0 0 2px rgba(0,212,170,.1)}.myplans-search-input::placeholder{color:var(--text-muted)}.drill-badge{display:inline-block;padding:2px 6px;background:rgba(0,212,170,.2);color:var(--accent-primary);border-radius:4px;font-size:9px;font-weight:600;text-transform:uppercase;margin-right:4px}.drill-card .formation-desc{display:flex;align-items:center;flex-wrap:wrap;gap:2px}.mode-icon{font-size:14px}.mode-text{font-size:12px}.formations-grid{display:flex;flex-direction:column;gap:6px;max-height:180px;overflow-y:auto;margin-bottom:10px}.formation-card{padding:10px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;cursor:pointer;transition:all .2s}.formation-card:hover{border-color:var(--accent-primary)}.formation-name{font-size:13px;font-weight:600;color:var(--text-primary)}.formation-desc{font-size:11px;color:var(--text-muted);margin-top:2px}.formation-preview{width:100%;height:50px;background:var(--bg-primary);border-radius:4px;margin-bottom:6px;position:relative}.formation-dot{width:6px;height:6px;border-radius:50%;position:absolute}.formation-dot.team-a{background:#ff4757}.formation-dot.team-b{background:#3742fa}.formation-card.myplan{display:flex;align-items:center;gap:10px;padding:8px 10px}.formation-card.myplan .formation-preview{width:50px;height:35px;flex-shrink:0;margin-bottom:0}.myplan-info{flex:1;min-width:0}.myplan-info .formation-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.myplan-delete{background:0 0;border:none;color:var(--text-muted);cursor:pointer;padding:4px 6px;border-radius:4px;font-size:12px;opacity:0;transition:all .2s}.formation-card.myplan:hover .myplan-delete{opacity:1}.myplan-delete:hover{background:rgba(255,71,87,.15);color:#ff4757}.save-formation-btn{width:100%;padding:8px;background:var(--bg-tertiary);border:1px dashed var(--border-color);border-radius:8px;color:var(--text-muted);font-size:12px;font-family:Outfit,sans-serif;cursor:pointer;transition:all .2s}.save-formation-btn:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.formations-locked{text-align:center;padding:24px 16px;background:linear-gradient(135deg,rgba(255,71,87,.05),rgba(255,71,87,.1));border-radius:12px;border:1px dashed rgba(255,71,87,.3)}.formations-locked .locked-icon{font-size:36px;margin-bottom:12px;display:block}.formations-locked h3{font-size:15px;font-weight:700;color:var(--text-primary);margin-bottom:6px}.formations-locked p{font-size:12px;color:var(--text-muted);margin-bottom:14px}.btn-unlock{background:linear-gradient(135deg,#ff6b7a,#ff4757);color:#fff;border:none;padding:10px 20px;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer;transition:all .2s}.btn-unlock:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(255,71,87,.4)}.recording-section{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border-color)}.record-controls{display:flex;flex-direction:column;gap:10px}.record-status{display:flex;align-items:center;gap:10px;padding:10px;background:var(--bg-tertiary);border-radius:8px}.record-indicator{width:10px;height:10px;border-radius:50%;background:var(--text-muted)}.record-indicator.recording{background:var(--record-red);animation:pulse 1s infinite}.record-time{font-family:'Space Mono',monospace;font-size:14px;color:var(--accent-primary)}.record-resolution{font-size:11px;color:var(--text-muted)}.record-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.record-btn{padding:8px 12px;border-radius:8px;font-family:Outfit,sans-serif;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-primary)}.record-btn:hover:not(:disabled){border-color:var(--accent-primary)}.record-btn:disabled{opacity:.5;cursor:not-allowed}.record-btn.start{background:var(--record-red);border-color:var(--record-red);color:#fff}.record-btn.stop{background:var(--accent-gradient);border:none;color:var(--bg-primary)}.saved-plans{margin-bottom:20px}#plansList{display:flex;flex-direction:column;gap:8px}.saved-plan-item{display:flex;justify-content:space-between;align-items:center;padding:10px;background:var(--bg-tertiary);border-radius:8px}.plan-info{flex:1}.plan-info .plan-name{font-size:13px;font-weight:500}.plan-info .plan-meta{font-size:11px;color:var(--text-muted)}.clear-section{display:flex;flex-direction:column;gap:8px;margin-top:auto}.clear-btn,.export-btn,.screenshot-btn,.settings-btn,.share-btn{width:100%;padding:10px;border-radius:8px;font-family:Outfit,sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-primary)}.clear-btn:hover,.export-btn:hover,.screenshot-btn:hover,.settings-btn:hover,.share-btn:hover{border-color:var(--accent-primary)}.export-btn{border-color:var(--accent-secondary);color:var(--accent-secondary)}.export-btn:hover{background:rgba(0,168,255,.15)}.share-btn{border-color:var(--accent-primary);color:var(--accent-primary)}.share-btn:hover{background:rgba(0,212,170,.15)}.clear-btn{border-color:var(--record-red);color:var(--record-red)}.clear-btn:hover{background:rgba(255,71,87,.15)}.modal-overlay{position:fixed;inset:0;background:rgba(10,14,20,.9);display:none;align-items:center;justify-content:center;z-index:1000}.modal-overlay.active{display:flex}.modal{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;padding:24px;max-width:500px;width:90%;max-height:90vh;overflow-y:auto}.modal-title{font-size:18px;font-weight:600;margin-bottom:16px;color:var(--text-primary)}.modal-buttons{display:flex;gap:12px;margin-top:20px}.modal-buttons .btn{flex:1}.settings-section{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border-color)}.settings-subtitle{font-size:13px;font-weight:600;margin-bottom:12px;color:var(--text-secondary)}.settings-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.settings-row label{font-size:13px;color:var(--text-secondary)}.settings-select{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);padding:8px 12px;border-radius:8px;font-family:Outfit,sans-serif;font-size:13px}.slider-container{display:flex;align-items:center;gap:10px}.settings-slider{width:120px;accent-color:var(--accent-primary)}.settings-toggle{position:relative}.settings-toggle input{opacity:0;position:absolute}.toggle-label{display:block;width:44px;height:24px;background:var(--bg-tertiary);border-radius:12px;cursor:pointer;position:relative;transition:all .2s}.toggle-label::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;background:var(--text-muted);border-radius:50%;transition:all .2s}.settings-toggle input:checked+.toggle-label{background:var(--accent-primary)}.settings-toggle input:checked+.toggle-label::after{left:22px;background:#fff}.formation-input{width:100%;background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);padding:12px;border-radius:8px;font-family:Outfit,sans-serif;font-size:14px;margin-bottom:12px}.formation-input:focus{outline:0;border-color:var(--accent-primary)}.team-apply-btns{display:flex;gap:12px}.team-apply-btn{flex:1;padding:12px;border-radius:8px;font-family:Outfit,sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;border:none;color:#fff}.team-apply-btn.team-a{background:linear-gradient(135deg,#ff6b7a,#ff4757)}.team-apply-btn.team-b{background:linear-gradient(135deg,#5a68fa,#3742fa)}.team-apply-btn:hover{transform:translateY(-2px)}.player-edit-overlay{position:fixed;inset:0;background:rgba(10,14,20,.9);display:none;align-items:center;justify-content:center;z-index:1000}.player-edit-overlay.active{display:flex}.player-edit-modal{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;padding:24px;width:380px;max-height:90vh;overflow-y:auto}.player-edit-header{display:flex;align-items:center;gap:16px;margin-bottom:20px}.player-edit-preview{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#ff6b7a,#ff4757);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-weight:700;position:relative}.preview-number{font-size:18px;line-height:1}.preview-pos{font-size:9px;opacity:.8}.preview-name{position:absolute;bottom:-6px;font-size:8px;background:rgba(0,0,0,.6);padding:2px 6px;border-radius:4px}.player-edit-title{font-size:18px;font-weight:600}.player-edit-fields{display:flex;flex-direction:column;gap:16px}.edit-field-group{display:flex;flex-direction:column;gap:8px}.edit-label{font-size:12px;font-weight:600;color:var(--text-secondary);display:flex;align-items:center;gap:6px}.label-icon{font-size:14px}.optional-tag{font-weight:400;color:var(--text-muted)}.number-selector{display:flex;align-items:center;gap:8px}.num-btn{width:36px;height:36px;border-radius:8px;background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);font-size:18px;cursor:pointer;transition:all .2s}.num-btn:hover{border-color:var(--accent-primary)}.number-input{width:60px;height:36px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-family:Outfit,sans-serif;font-size:16px;text-align:center}.position-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.pos-chip,.position-chip{padding:6px 8px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-secondary);font-size:11px;font-weight:600;text-align:center;cursor:pointer;transition:all .2s}.pos-chip:hover,.position-chip:hover{border-color:var(--accent-primary)}.pos-chip.active,.position-chip.active{background:rgba(0,212,170,.15);border-color:var(--accent-primary);color:var(--accent-primary)}.custom-position-input{width:100%;background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);padding:8px 12px;border-radius:8px;font-family:Outfit,sans-serif;font-size:13px;margin-top:6px}.name-input{width:100%;background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);padding:10px 12px;border-radius:8px;font-family:Outfit,sans-serif;font-size:14px;text-transform:uppercase}.name-suggestions{display:flex;gap:6px;flex-wrap:wrap}.name-chip{padding:4px 10px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-muted);font-size:11px;cursor:pointer;transition:all .2s}.name-chip:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.color-presets{display:flex;flex-direction:column;gap:8px}.color-row{display:flex;align-items:center;gap:8px}.color-row-label{font-size:10px;color:var(--text-muted);width:45px}.color-options{display:flex;gap:6px}.color-chip{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .2s}.color-chip:hover{transform:scale(1.1)}.color-chip.active{border-color:#fff}.custom-color-row{display:flex;align-items:center;gap:8px;margin-top:8px}.custom-color-label{font-size:11px;color:var(--text-muted)}.custom-color-picker{width:32px;height:32px;border:none;border-radius:8px;cursor:pointer}.apply-custom-color{padding:6px 12px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-secondary);font-size:11px;cursor:pointer;transition:all .2s}.apply-custom-color:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.player-edit-actions{display:flex;gap:10px;margin-top:20px}.edit-btn{flex:1;padding:10px;border-radius:8px;font-family:Outfit,sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;border:none}.edit-btn.cancel{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-secondary)}.edit-btn.delete{background:rgba(255,71,87,.15);color:var(--record-red)}.edit-btn.save{background:var(--accent-gradient);color:var(--bg-primary)}.equipment-edit-header{display:flex;align-items:center;gap:16px;margin-bottom:20px}.equipment-preview{width:60px;height:60px;background:var(--bg-tertiary);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:32px}.size-slider-container{display:flex;align-items:center;gap:12px}.size-slider{flex:1;accent-color:var(--accent-primary)}.size-value{font-size:13px;color:var(--accent-primary);font-weight:600;min-width:40px}.size-presets{display:flex;gap:6px;margin-top:8px}.size-preset-btn{padding:6px 12px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-muted);font-size:11px;font-weight:600;cursor:pointer;transition:all .2s}.size-preset-btn:hover{border-color:var(--accent-primary)}.size-preset-btn.active{background:rgba(0,212,170,.15);border-color:var(--accent-primary);color:var(--accent-primary)}.rotation-preset-btn{padding:6px 12px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-muted);font-size:11px;font-weight:600;cursor:pointer;transition:all .2s}.rotation-preset-btn:hover{border-color:var(--accent-primary)}.rotation-preset-btn.active{background:rgba(0,212,170,.15);border-color:var(--accent-primary);color:var(--accent-primary)}.equipment-type-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.equip-type-chip{width:40px;height:40px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;transition:all .2s}.equip-type-chip:hover{border-color:var(--accent-primary)}.equip-type-chip.active{background:rgba(0,212,170,.15);border-color:var(--accent-primary)}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);padding:12px 24px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;color:var(--text-primary);font-size:14px;font-weight:500;opacity:0;transition:all .3s ease;z-index:2000;display:flex;align-items:center;gap:10px}.toast.show{transform:translateX(-50%) translateY(0);opacity:1}.toast.success{border-color:var(--accent-primary)}.toast.error{border-color:var(--record-red)}.pro-badge,.user-badge{background:linear-gradient(135deg,gold,#ff8c00,tomato,gold);background-size:300% 300%;animation:proGlow 3s ease infinite;color:#000;font-weight:800;font-size:10px;padding:3px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:1px;box-shadow:0 0 10px rgba(255,215,0,.5),0 0 20px rgba(255,140,0,.3),0 2px 8px rgba(0,0,0,.3);border:1px solid rgba(255,215,0,.6);text-shadow:0 1px 1px rgba(255,255,255,.3)}@keyframes proGlow{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}.upgrade-overlay{position:fixed;inset:0;background:rgba(10,14,20,.95);display:flex;align-items:center;justify-content:center;z-index:10000;backdrop-filter:blur(8px)}.upgrade-modal{background:linear-gradient(135deg,#1a2332 0,#151b24 100%);border:1px solid rgba(0,212,170,.3);border-radius:20px;padding:32px;max-width:420px;width:90%;text-align:center;position:relative;box-shadow:0 0 40px rgba(0,212,170,.15),0 20px 60px rgba(0,0,0,.5)}.upgrade-close{position:absolute;top:16px;right:16px;background:0 0;border:none;color:var(--text-muted);font-size:24px;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s}.upgrade-close:hover{background:rgba(255,71,87,.2);color:#ff4757}.upgrade-icon{font-size:48px;margin-bottom:16px}.upgrade-modal h2{font-size:24px;font-weight:700;margin-bottom:12px;background:linear-gradient(135deg,#00d4aa,#00a8ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.upgrade-features{list-style:none;padding:0;margin:20px 0;text-align:left}.upgrade-features li{padding:8px 0;color:var(--text-secondary);font-size:14px;display:flex;align-items:center;gap:8px}.upgrade-price{margin:20px 0;display:flex;align-items:baseline;justify-content:center;gap:8px}.price-was{text-decoration:line-through;color:var(--text-muted);font-size:16px}.price-now{font-size:36px;font-weight:800;background:linear-gradient(135deg,#00d4aa,#00a8ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.price-period{color:var(--text-muted);font-size:14px}.btn-upgrade{width:100%;padding:14px 24px;background:linear-gradient(135deg,#00d4aa 0,#00a8ff 100%);color:#0a0e14;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s;box-shadow:0 4px 20px rgba(0,212,170,.3)}.btn-upgrade:hover{transform:translateY(-2px);box-shadow:0 6px 30px rgba(0,212,170,.4)}.upgrade-note{margin-top:12px;font-size:12px;color:var(--text-muted)}.upgrade-banner{position:fixed;bottom:0;left:0;right:0;background:linear-gradient(90deg,#1a2332,#0d1117,#1a2332);border-top:1px solid rgba(0,212,170,.3);padding:12px 20px;z-index:1000;transition:transform .3s ease}.upgrade-banner.dismissed{transform:translateY(100%)}.banner-content{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:16px}.banner-icon{font-size:20px}.banner-text{font-size:13px;color:var(--text-secondary)}.banner-text strong{color:var(--text-primary)}.btn-banner{padding:8px 16px;background:linear-gradient(135deg,#00d4aa,#00a8ff);color:#0a0e14;border:none;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}.btn-banner:hover{transform:translateY(-1px)}.banner-close{background:0 0;border:none;color:var(--text-muted);font-size:18px;cursor:pointer;padding:4px 8px}.banner-close:hover{color:#ff4757}@media (max-width:1200px){:root{--panel-width:260px}}@media (max-width:900px){.header{flex-wrap:wrap;height:auto;min-height:54px;padding:8px 12px;gap:8px}.header-center{order:4;width:100%;justify-content:center;padding-top:8px;border-top:1px solid var(--border-color)}.right-panel{width:240px}}@media (min-width:769px) and (max-width:1024px){.bench-player-chip{width:32px;height:32px}.bench-player-chip .bench-chip-number{font-size:11px}.bench-player-chip .bench-chip-pos{font-size:5px}.bench-player-name{font-size:6px;max-width:40px}.bench-tray{min-width:44px}.bench-seats{gap:3px;padding:4px 3px}.bench-add-btn{width:26px;height:26px;font-size:14px}.bench-tab{padding:6px 3px;font-size:8px}.bench-tab-label{font-size:7px}.bench-tab-count{font-size:8px;padding:1px 3px;min-width:14px}}@media (max-width:768px){.toolbar{display:none}.right-panel{display:none;max-width:none}.bench-overlay{display:none;position:static;flex-direction:column;align-items:stretch;order:3;width:100%;pointer-events:auto;top:auto;right:auto;bottom:auto}.main-container>.bench-overlay{display:flex}.bench-tab{writing-mode:horizontal-tb;text-orientation:initial;border-radius:6px 6px 0 0;border:1px solid rgba(255,255,255,.12);border-bottom:none;padding:4px 10px;font-size:9px;width:100%;justify-content:center}.bench-tray{border-radius:0;width:100%;max-height:none;overflow-x:auto;overflow-y:hidden}.bench-seats{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;padding:4px 6px;gap:6px;-webkit-overflow-scrolling:touch}.bench-chip-wrapper{touch-action:none}.bench-player-chip{width:30px;height:30px;flex-shrink:0;touch-action:none;-webkit-user-drag:none}.bench-player-chip .bench-chip-number{font-size:10px}.bench-player-chip .bench-chip-pos{font-size:5px}.bench-player-name{font-size:6px;max-width:36px}.bench-add-btn{width:26px;height:26px;font-size:14px;flex-shrink:0}.bench-empty-msg{font-size:7px;white-space:nowrap}.canvas-wrapper{padding:10px;padding-bottom:80px}.main-container{padding-bottom:70px}.header-drills-btn{display:none}.mobile-toolbar{display:flex}.canvas-area{height:auto}}.plan-badge{font-weight:800;font-size:10px;padding:3px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:1px;margin-left:8px}.plan-badge.pro{background:linear-gradient(135deg,gold,#ff8c00,tomato,gold);background-size:300% 300%;animation:proGlow 3s ease infinite;color:#000;box-shadow:0 0 10px rgba(255,215,0,.5),0 0 20px rgba(255,140,0,.3),0 2px 8px rgba(0,0,0,.3);border:1px solid rgba(255,215,0,.6);text-shadow:0 1px 1px rgba(255,255,255,.3)}.plan-badge.trial{background:linear-gradient(135deg,#00d4aa,#00a8ff);color:#000}.user-info{display:flex;align-items:center;gap:6px;flex-shrink:0}.user-name{color:var(--text-primary);font-weight:500;font-size:clamp(12px, 1vw + 8px, 14px);white-space:nowrap;max-width:clamp(80px,10vw,150px);overflow:hidden;text-overflow:ellipsis}@keyframes proGlow{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}.auth-modal-overlay{position:fixed;inset:0;background:rgba(10,14,20,.95);display:none;align-items:center;justify-content:center;z-index:10000;backdrop-filter:blur(10px);opacity:0;transition:opacity .3s ease}.auth-modal-overlay.active{display:flex;opacity:1}.auth-modal{background:linear-gradient(135deg,#1a2332 0,#151b24 100%);border:1px solid rgba(0,212,170,.3);border-radius:20px;padding:32px;max-width:420px;width:90%;position:relative;box-shadow:0 0 60px rgba(0,212,170,.15),0 20px 60px rgba(0,0,0,.5);animation:modalSlideIn .3s ease}@keyframes modalSlideIn{from{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.auth-modal-close{position:absolute;top:16px;right:16px;background:0 0;border:none;color:var(--text-muted);font-size:28px;cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s;line-height:1}.auth-modal-close:hover{background:rgba(255,71,87,.2);color:#ff4757}.auth-modal-header{text-align:center;margin-bottom:24px}.auth-logo{width:60px;height:60px;margin-bottom:16px}.auth-modal-header h2{font-size:24px;font-weight:700;margin-bottom:8px;background:linear-gradient(135deg,#00d4aa,#00a8ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.auth-modal-header p{color:var(--text-muted);font-size:14px}.auth-modal-body{display:flex;flex-direction:column;gap:16px}.auth-btn{width:100%;padding:14px 20px;border-radius:10px;font-family:Outfit,sans-serif;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:10px;border:none}.auth-btn:disabled{opacity:.6;cursor:not-allowed}.auth-btn.google{background:#fff;color:#333;border:1px solid #ddd}.auth-btn.google:hover:not(:disabled){background:#f5f5f5;box-shadow:0 2px 8px rgba(0,0,0,.1)}.auth-btn.primary{background:linear-gradient(135deg,#00d4aa 0,#00a8ff 100%);color:#0a0e14}.auth-btn.primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 20px rgba(0,212,170,.4)}.auth-btn.secondary{background:0 0;color:var(--accent-primary);border:2px solid var(--accent-primary)}.auth-btn.secondary:hover:not(:disabled){background:rgba(0,212,170,.1)}.auth-divider{display:flex;align-items:center;gap:16px;color:var(--text-muted);font-size:12px}.auth-divider::after,.auth-divider::before{content:'';flex:1;height:1px;background:var(--border-color)}.auth-input-group{display:flex;flex-direction:column;gap:6px}.auth-input-group label{font-size:13px;font-weight:500;color:var(--text-secondary)}.auth-input-group input{width:100%;padding:12px 16px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-family:Outfit,sans-serif;font-size:14px;transition:all .2s}.auth-input-group input:focus{outline:0;border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(0,212,170,.1)}.auth-input-group input::placeholder{color:var(--text-muted)}.auth-link{background:0 0;border:none;color:var(--accent-primary);font-size:13px;cursor:pointer;padding:0;text-align:center;transition:all .2s}.auth-link:hover{text-decoration:underline;color:var(--accent-secondary)}.auth-error{padding:10px 14px;border-radius:8px;font-size:13px;text-align:center;display:none}.auth-error:not(:empty){display:block}.auth-error.error{background:rgba(255,71,87,.15);color:#ff4757;border:1px solid rgba(255,71,87,.3)}.auth-error.success{background:rgba(0,212,170,.15);color:#00d4aa;border:1px solid rgba(0,212,170,.3)}.auth-modal-footer{margin-top:24px;padding-top:24px;border-top:1px solid var(--border-color);text-align:center}.auth-modal-footer>p{color:var(--text-muted);font-size:14px;margin-bottom:12px}.auth-footer-note{margin-top:12px;font-size:12px;color:var(--text-muted)}.auth-spinner{width:18px;height:18px;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:authSpin .8s linear infinite;display:inline-block}@keyframes authSpin{to{transform:rotate(360deg)}}.plan-badge{font-weight:800;font-size:10px;padding:3px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:1px;margin-left:8px}.plan-badge.pro{background:linear-gradient(135deg,gold,#ff8c00,tomato,gold);background-size:300% 300%;animation:proGlow 3s ease infinite;color:#000;box-shadow:0 0 10px rgba(255,215,0,.5),0 0 20px rgba(255,140,0,.3),0 2px 8px rgba(0,0,0,.3);border:1px solid rgba(255,215,0,.6);text-shadow:0 1px 1px rgba(255,255,255,.3)}.plan-badge.trial{background:linear-gradient(135deg,#00d4aa,#00a8ff);color:#000;font-weight:700}.user-info{display:flex;align-items:center;gap:6px;flex-shrink:0}.user-name{color:var(--text-primary);font-weight:500;font-size:clamp(12px, 1vw + 8px, 14px);white-space:nowrap;max-width:clamp(80px,10vw,150px);overflow:hidden;text-overflow:ellipsis}@keyframes proGlow{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}.mic-toggle-row{display:flex;align-items:center;gap:12px;padding:10px;background:var(--bg-tertiary);border-radius:8px;margin-bottom:10px}.mic-toggle-btn{padding:8px 14px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-family:Outfit,sans-serif;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s}.mic-toggle-btn:hover:not(:disabled){border-color:var(--accent-primary)}.mic-toggle-btn.active{background:rgba(0,212,170,.2);border-color:var(--accent-primary);color:var(--accent-primary)}.mic-toggle-btn:disabled{opacity:.5;cursor:not-allowed}.mic-status{font-size:11px;color:var(--text-muted)}.trial-countdown,.trial-expired{display:flex;align-items:center;gap:12px;padding:12px 20px;background:linear-gradient(135deg,rgba(255,193,7,.1) 0,rgba(255,152,0,.1) 100%);border:1px solid rgba(255,193,7,.3);border-radius:8px;font-size:14px;margin:10px 20px}.trial-expired{background:linear-gradient(135deg,rgba(255,71,87,.1) 0,rgba(255,100,100,.1) 100%);border-color:rgba(255,71,87,.3)}.countdown-icon,.expired-icon{font-size:20px}.countdown-text,.expired-text{flex:1;color:var(--text-primary)}.countdown-upgrade,.expired-upgrade{padding:6px 16px;background:var(--accent-gradient);color:#fff;text-decoration:none;border-radius:6px;font-weight:600;transition:transform .2s}.countdown-upgrade:hover,.expired-upgrade:hover{transform:scale(1.05)}.trial-countdown-header{display:flex;align-items:center;gap:6px;padding:4px 10px;background:linear-gradient(135deg,rgba(0,212,170,.15) 0,rgba(0,168,255,.15) 100%);border:1px solid rgba(0,212,170,.3);border-radius:20px;font-size:12px;margin-left:8px}.countdown-days{font-weight:700;color:var(--accent-primary);font-size:14px}.countdown-label{color:var(--text-secondary);font-size:11px}.btn-cancel-trial{background:rgba(255,71,87,.15);border:1px solid rgba(255,71,87,.4);color:#ff4757;cursor:pointer;font-size:11px;font-weight:600;padding:4px 10px;margin-left:8px;border-radius:6px;transition:all .2s;white-space:nowrap}.btn-cancel-trial:hover{background:rgba(255,71,87,.25);border-color:#ff4757;box-shadow:0 0 12px rgba(255,71,87,.3)}.btn-profile{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--bg-tertiary) 0,var(--bg-secondary) 100%);border:2px solid var(--border-color);color:var(--text-primary);text-decoration:none;transition:all .2s ease;overflow:hidden}.btn-profile:hover{border-color:var(--accent-primary);box-shadow:0 0 15px rgba(0,212,170,.3);transform:scale(1.05)}.btn-profile svg{width:18px;height:18px;fill:currentColor}.user-info{display:flex;align-items:center;gap:6px;flex-shrink:0}.user-info .user-name{white-space:nowrap;max-width:clamp(80px,10vw,150px);overflow:hidden;text-overflow:ellipsis}.plan-badge.failed{background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff;padding:4px 10px;border-radius:6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;animation:pulse-error 2s ease-in-out infinite}@keyframes pulse-error{0%,100%{box-shadow:0 0 0 0 rgba(231,76,60,.4)}50%{box-shadow:0 0 0 8px rgba(231,76,60,0)}}.plan-badge.free{background:var(--bg-tertiary);color:var(--text-secondary);padding:4px 10px;border-radius:6px;font-size:10px;font-weight:700;text-transform:uppercase}.btn-subscribe-now{background:linear-gradient(135deg,var(--accent-primary) 0,#00a8ff 100%);border:none;color:#000;cursor:pointer;font-size:11px;font-weight:700;padding:5px 12px;margin-left:6px;border-radius:6px;transition:all .2s;white-space:nowrap}.btn-subscribe-now:hover{transform:scale(1.05);box-shadow:0 0 15px rgba(0,212,170,.5)}.btn-update-payment{background:linear-gradient(135deg,#e74c3c,#c0392b);border:none;color:#fff;cursor:pointer;font-size:11px;font-weight:700;padding:5px 12px;margin-left:6px;border-radius:6px;transition:all .2s;white-space:nowrap}.btn-update-payment:hover{transform:scale(1.05);box-shadow:0 0 15px rgba(231,76,60,.5)}.btn-resubscribe{background:linear-gradient(135deg,#f39c12,#e67e22);border:none;color:#000;cursor:pointer;font-size:11px;font-weight:700;padding:5px 12px;margin-left:6px;border-radius:6px;transition:all .2s;white-space:nowrap}.btn-resubscribe:hover{transform:scale(1.05);box-shadow:0 0 15px rgba(243,156,18,.5)}.subscription-notice{display:flex;align-items:center;gap:8px;padding:4px 12px;border-radius:20px;font-size:11px;margin-left:8px}.subscription-notice.warning{background:rgba(243,156,18,.15);border:1px solid rgba(243,156,18,.4);color:#f39c12}.subscription-notice.error{background:rgba(231,76,60,.15);border:1px solid rgba(231,76,60,.4);color:#e74c3c}.subscription-notice.canceling{background:rgba(243,156,18,.1);border:1px solid rgba(243,156,18,.3);color:#f5a623;padding:6px 10px 6px 14px}.subscription-notice .cancel-date{font-weight:600;font-size:12px;white-space:nowrap}.btn-resubscribe-glow{background:linear-gradient(135deg,#00d4aa,#00a8ff);color:#000;border:none;padding:6px 14px;border-radius:20px;font-size:11px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 0 15px rgba(0,212,170,.4),0 0 30px rgba(0,212,170,.2);animation:glowPulse 2s ease-in-out infinite;text-transform:uppercase;letter-spacing:.5px}.btn-resubscribe-glow:hover{transform:scale(1.05);box-shadow:0 0 20px rgba(0,212,170,.6),0 0 40px rgba(0,212,170,.3)}.btn-resubscribe-glow:disabled{opacity:.7;cursor:not-allowed;animation:none}@keyframes glowPulse{0%,100%{box-shadow:0 0 15px rgba(0,212,170,.4),0 0 30px rgba(0,212,170,.2)}50%{box-shadow:0 0 25px rgba(0,212,170,.6),0 0 50px rgba(0,212,170,.3)}}.btn.btn-small{padding:5px 12px;font-size:11px}.pro-upsell-modal{background:linear-gradient(135deg,#1a2332 0,#0d1117 100%);border-radius:20px;border:2px solid var(--accent-primary);max-width:450px;width:90%;padding:30px;position:relative;box-shadow:0 0 50px rgba(0,212,170,.3);animation:slideUp .3s ease}.pro-upsell-modal .modal-close{position:absolute;top:15px;right:15px;background:0 0;border:none;color:var(--text-secondary);font-size:24px;cursor:pointer;transition:color .2s}.pro-upsell-modal .modal-close:hover{color:var(--text-primary)}.upsell-header{text-align:center;margin-bottom:25px}.upsell-badge{display:inline-block;background:var(--accent-gradient);color:#000;padding:5px 15px;border-radius:20px;font-size:12px;font-weight:700;letter-spacing:1px;margin-bottom:15px}.upsell-header h2{font-size:24px;font-weight:700;color:var(--text-primary);margin-bottom:8px}.upsell-desc{color:var(--text-secondary);font-size:14px}.upsell-features{background:rgba(0,212,170,.05);border:1px solid rgba(0,212,170,.2);border-radius:12px;padding:20px;margin-bottom:25px}.upsell-features h3{font-size:14px;color:var(--text-secondary);margin-bottom:12px}.feature-list{list-style:none;padding:0;margin:0}.feature-list li{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:14px;color:var(--text-primary)}.feature-list .check{color:var(--accent-primary);font-weight:700}.upsell-pricing{display:flex;align-items:center;justify-content:center;gap:15px;margin-bottom:20px}.price-tag{display:flex;align-items:baseline;gap:8px}.original-price{color:var(--text-muted);text-decoration:line-through;font-size:16px}.current-price{color:var(--accent-primary);font-size:36px;font-weight:700}.price-period{color:var(--text-secondary);font-size:14px}.discount-badge{background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:#fff;padding:5px 10px;border-radius:6px;font-size:12px;font-weight:700}.upsell-actions{text-align:center}.btn-start-trial{display:inline-block;width:100%;padding:14px 30px;font-size:16px;font-weight:600}.trial-note{color:var(--text-muted);font-size:12px;margin-top:10px}.cloud-badge{background:var(--accent-gradient);color:#000;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600;margin-left:8px;vertical-align:middle}.btn-upsell-save{display:block;width:calc(100% - 20px);margin:0 10px 10px;padding:10px 15px;font-size:13px;background:var(--accent-gradient);color:#000;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease}.btn-upsell-save:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}.watermark-upsell{position:absolute;bottom:20px;right:20px;background:linear-gradient(135deg,rgba(26,35,50,.95) 0,rgba(13,17,23,.95) 100%);border:1px solid rgba(0,212,170,.4);color:var(--text-primary);padding:12px 20px;border-radius:12px;font-size:13px;font-weight:500;cursor:pointer;transition:all .3s ease;z-index:50;display:flex;align-items:center;gap:8px;backdrop-filter:blur(10px);box-shadow:0 4px 20px rgba(0,0,0,.4)}.watermark-upsell span{font-size:16px}.watermark-upsell:hover{background:linear-gradient(135deg,rgba(0,212,170,.2) 0,rgba(0,168,255,.2) 100%);border-color:var(--accent-primary);box-shadow:0 4px 25px rgba(0,212,170,.3),0 0 40px rgba(0,212,170,.1);transform:translateY(-2px)}.watermark-upsell:active{transform:translateY(0)}.trial-warning-banner{background:linear-gradient(135deg,rgba(255,193,7,.2) 0,rgba(255,152,0,.2) 100%);border:1px solid rgba(255,193,7,.5);border-radius:10px;padding:15px 20px;margin:10px;display:flex;align-items:center;gap:12px}.trial-warning-banner .warning-icon{font-size:24px}.trial-warning-banner .warning-text{flex:1}.trial-warning-banner .warning-title{font-weight:600;color:#ffc107;font-size:14px}.trial-warning-banner .warning-desc{font-size:12px;color:var(--text-secondary);margin-top:2px}.trial-warning-banner .btn-upgrade-now{background:linear-gradient(135deg,#ffc107,#ff9800);color:#000;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:600;border:none;cursor:pointer;transition:all .2s ease}.trial-warning-banner .btn-upgrade-now:hover{transform:scale(1.05);box-shadow:0 4px 15px rgba(255,193,7,.4)}.trial-warning-banner.urgent{background:linear-gradient(135deg,rgba(255,71,87,.3) 0,rgba(238,90,36,.3) 100%);border-color:rgba(255,71,87,.7);animation:pulse 2s ease-in-out infinite}.trial-warning-banner.urgent .warning-title{color:#ff6b6b}.trial-warning-banner.urgent .btn-upgrade-now{background:linear-gradient(135deg,#ff6b6b,#ee5a24)}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.85}}.mobile-toolbar{display:none;position:fixed;bottom:0;left:0;right:0;height:70px;background:linear-gradient(180deg,var(--bg-panel) 0,#0d1117 100%);border-top:1px solid var(--border-color);padding:8px 12px;padding-bottom:max(8px,env(safe-area-inset-bottom));justify-content:space-around;align-items:center;z-index:1000;box-shadow:0 -4px 20px rgba(0,0,0,.3)}.mobile-tool-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;background:0 0;border:none;color:var(--text-secondary);padding:8px 12px;border-radius:12px;cursor:pointer;transition:all .2s ease;min-width:56px;min-height:56px;-webkit-tap-highlight-color:transparent}.mobile-tool-btn:active{transform:scale(.95);background:rgba(0,212,170,.1)}.mobile-tool-btn.active{color:var(--accent-color);background:rgba(0,212,170,.15)}.mobile-tool-icon{font-size:24px;line-height:1;margin-bottom:4px}.mobile-tool-label{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.mobile-panel-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1100;opacity:0;transition:opacity .3s ease}.mobile-panel-overlay.active{display:block;opacity:1}.mobile-panel{position:fixed;top:0;right:-300px;width:300px;height:100%;background:var(--bg-panel);z-index:1200;transition:right .3s ease;display:flex;flex-direction:column;box-shadow:-5px 0 20px rgba(0,0,0,.3)}.mobile-panel.active{right:0}.mobile-panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border-color);background:var(--bg-dark)}.mobile-panel-title{font-size:18px;font-weight:600;color:var(--text-primary)}.mobile-panel-close{background:0 0;border:none;color:var(--text-secondary);font-size:24px;cursor:pointer;padding:8px;border-radius:8px;transition:all .2s;-webkit-tap-highlight-color:transparent}.mobile-panel-close:active{background:rgba(255,71,87,.2);color:#ff4757}.mobile-panel-content{flex:1;overflow-y:auto;padding:16px;-webkit-overflow-scrolling:touch}.mobile-section{margin-bottom:24px}.mobile-section-title{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:12px}.mobile-tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mobile-grid-btn{display:flex;align-items:center;justify-content:center;padding:12px 8px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;color:var(--text-primary);font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;min-height:48px;-webkit-tap-highlight-color:transparent}.mobile-grid-btn:active{background:var(--accent-color);color:var(--bg-dark);transform:scale(.98)}.mobile-grid-btn.active{background:var(--accent-color);color:var(--bg-dark);border-color:var(--accent-color)}.mobile-colors-grid{display:flex;gap:12px;flex-wrap:wrap}.mobile-color-btn{width:48px;height:48px;border-radius:50%;border:3px solid var(--border-color);cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent}.mobile-color-btn:active{transform:scale(.95)}.mobile-color-btn.active{border-color:var(--accent-color);box-shadow:0 0 0 3px rgba(0,212,170,.3)}.mobile-equipment-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.mobile-equipment-btn{display:flex;align-items:center;justify-content:center;padding:14px 12px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;color:var(--text-primary);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;min-height:48px;-webkit-tap-highlight-color:transparent}.mobile-equipment-btn:active{background:var(--accent-color);color:var(--bg-dark);transform:scale(.98)}.mobile-actions-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.mobile-action-btn{display:flex;align-items:center;justify-content:center;padding:14px 12px;background:linear-gradient(135deg,var(--bg-secondary),var(--bg-panel));border:1px solid var(--border-color);border-radius:10px;color:var(--text-primary);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;min-height:48px;-webkit-tap-highlight-color:transparent}.mobile-action-btn:active{transform:scale(.98);background:var(--bg-secondary)}.mobile-action-btn.danger{color:#ff6b6b;border-color:rgba(255,107,107,.3)}.mobile-action-btn.danger:active{background:rgba(255,107,107,.2)}@media (max-width:768px){.modal{width:95%;max-height:90vh;margin:20px auto}.modal-btn{min-height:48px;font-size:14px}.trash-zone{position:fixed;top:auto;bottom:90px;left:50%;transform:translateX(-50%);flex-direction:row;padding:10px 16px;font-size:14px}.trash-zone.drag-over{transform:translateX(-50%) scale(1.1)}.trash-icon{font-size:24px}#mainCanvas{touch-action:none}}body.mobile-panel-open{overflow:hidden;position:fixed;width:100%}.mobile-plans-modal{max-width:100%;width:100%;max-height:90vh;margin:20px;display:flex;flex-direction:column}.mobile-plans-modal .modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border-color);flex-shrink:0}.mobile-plans-modal .modal-title{margin:0;font-size:18px}.mobile-plans-modal .modal-close{background:0 0;border:none;color:var(--text-secondary);font-size:28px;cursor:pointer;padding:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .2s ease}.mobile-plans-modal .modal-close:hover{background:var(--bg-hover);color:var(--text-primary)}.mobile-plans-list{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}.mobile-plan-item{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:12px;padding:16px;cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent}.mobile-plan-item:active{transform:scale(.98);background:var(--bg-hover)}.mobile-plan-item-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}.mobile-plan-item-name{font-weight:600;font-size:16px;color:var(--text-primary)}.mobile-plan-item-date{font-size:12px;color:var(--text-muted)}.mobile-plan-item-desc{font-size:14px;color:var(--text-secondary);line-height:1.4}.mobile-plan-item-actions{display:flex;gap:8px;margin-top:12px}.mobile-plan-action-btn{flex:1;padding:12px;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent}.mobile-plan-action-btn.load{background:var(--accent-primary);color:#fff}.mobile-plan-action-btn.load:active{background:#00a884}.mobile-plan-action-btn.delete{background:rgba(255,107,107,.1);color:#ff6b6b;border:1px solid rgba(255,107,107,.3)}.mobile-plan-action-btn.delete:active{background:rgba(255,107,107,.2)}.mobile-plans-empty{text-align:center;padding:40px 20px;color:var(--text-muted)}.mobile-plans-empty-icon{font-size:48px;margin-bottom:16px}.mobile-plans-empty-text{font-size:16px}.export-options{display:flex;flex-direction:column;gap:12px}.export-option-btn{display:flex;align-items:center;gap:16px;padding:16px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:12px;cursor:pointer;transition:all .2s ease;text-align:left;position:relative}.export-option-btn:hover{border-color:var(--accent-primary);background:rgba(0,212,170,.05);transform:translateX(4px)}.export-icon{font-size:28px;width:40px;text-align:center}.export-label{font-size:15px;font-weight:600;color:var(--text-primary);display:block}.export-desc{font-size:12px;color:var(--text-muted);display:block;margin-top:2px}.export-badge{position:absolute;top:12px;right:12px;background:var(--accent-gradient);color:var(--bg-primary);font-size:10px;font-weight:700;padding:4px 8px;border-radius:4px;text-transform:uppercase}.onboarding-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9999;opacity:0;visibility:hidden;transition:all .3s ease}.onboarding-overlay.active{opacity:1;visibility:visible}.onboarding-spotlight{position:absolute;border-radius:12px;box-shadow:0 0 0 9999px rgba(0,0,0,.85);background:0 0;transition:all .3s ease;pointer-events:none}.onboarding-tooltip{position:fixed;background:var(--bg-secondary);border:1px solid var(--accent-primary);border-radius:16px;padding:20px;max-width:340px;z-index:10000;opacity:0;visibility:hidden;transform:translateY(10px);transition:all .3s ease;box-shadow:0 20px 50px rgba(0,212,170,.2)}.onboarding-tooltip.active{opacity:1;visibility:visible;transform:translateY(0)}.onboarding-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.onboarding-step-indicator{font-size:12px;color:var(--accent-primary);font-weight:600}.onboarding-skip{background:0 0;border:none;color:var(--text-muted);font-size:12px;cursor:pointer;transition:color .2s}.onboarding-skip:hover{color:var(--text-primary)}.onboarding-title{font-size:18px;font-weight:700;color:var(--text-primary);margin-bottom:8px}.onboarding-content{font-size:14px;color:var(--text-secondary);line-height:1.6;margin-bottom:20px}.onboarding-actions{display:flex;gap:12px;justify-content:flex-end}.onboarding-btn{padding:10px 20px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;border:none;font-family:inherit}.onboarding-btn.onboarding-prev{background:var(--bg-tertiary);color:var(--text-secondary)}.onboarding-btn.onboarding-prev:hover{background:var(--bg-card);color:var(--text-primary)}.onboarding-btn.primary{background:var(--accent-gradient);color:var(--bg-primary)}.onboarding-btn.primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,212,170,.3)}.page-loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;opacity:1;visibility:visible;transition:opacity .3s ease,visibility .3s ease}.page-loading-overlay.hide{opacity:0;visibility:hidden}.page-loading-spinner{width:50px;height:50px;position:relative}.page-loading-spinner::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;border:3px solid var(--bg-tertiary);border-top-color:var(--accent-primary);border-radius:50%;animation:page-spin .8s linear infinite}.page-loading-spinner::after{content:'';position:absolute;top:8px;left:8px;right:8px;bottom:8px;border:3px solid var(--bg-tertiary);border-bottom-color:var(--accent-secondary);border-radius:50%;animation:page-spin 1.2s linear infinite reverse}@keyframes page-spin{to{transform:rotate(360deg)}}.page-loading-text{margin-top:20px;color:var(--text-secondary);font-size:14px;letter-spacing:.5px}.page-loading-logo{width:60px;height:60px;margin-bottom:24px;animation:pulse-glow 2s ease-in-out infinite}@keyframes pulse-glow{0%,100%{filter:drop-shadow(0 0 10px rgba(0, 212, 170, .3));transform:scale(1)}50%{filter:drop-shadow(0 0 20px rgba(0, 212, 170, .6));transform:scale(1.05)}}.timeline-container{position:absolute;bottom:0;left:0;right:0;height:46px;background:linear-gradient(180deg,rgba(21,27,36,.98),rgba(10,14,20,.99));border-top:2px solid var(--accent-primary);display:flex;align-items:center;padding:0 10px;gap:10px;z-index:100;backdrop-filter:blur(12px);box-shadow:0 -4px 20px rgba(0,212,170,.15)}.timeline-controls{display:flex;gap:4px}.timeline-btn{width:28px;height:28px;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-tertiary);color:var(--text-primary);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;font-family:Outfit,sans-serif}.timeline-btn:hover{background:rgba(0,212,170,.15);border-color:var(--accent-primary);color:var(--accent-primary)}.timeline-btn.play{width:34px;background:var(--accent-gradient);border:none;color:var(--bg-primary);font-size:14px}.timeline-btn.play:hover{box-shadow:0 2px 8px rgba(0,212,170,.4)}.timeline-btn.play.playing{background:linear-gradient(135deg,#00a8ff 0,#07c 100%)}.timeline-btn.capture{width:auto;padding:0 10px;gap:4px;font-size:11px;font-weight:500}.timeline-btn.capture.active{background:var(--record-red);border-color:var(--record-red);color:#fff;animation:pulse-record 1s infinite}.timeline-btn.add-kf{width:auto;padding:0 10px;font-size:11px;font-weight:500;color:var(--accent-primary);border-color:var(--accent-primary)}.timeline-btn.add-kf:hover{background:var(--accent-primary);color:var(--bg-primary)}.capture-dot{width:8px;height:8px;border-radius:50%;background:currentColor}@keyframes pulse-record{0%,100%{opacity:1}50%{opacity:.6}}.timeline-track-wrapper{flex:1;display:flex;align-items:center;gap:8px}.timeline-track{flex:1;height:18px;background:var(--bg-secondary);border-radius:3px;position:relative;cursor:pointer;overflow:visible}.timeline-progress{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));border-radius:3px 0 0 3px;opacity:.3;pointer-events:none}.timeline-scrubber{position:absolute;top:-2px;width:3px;height:22px;background:var(--accent-primary);border-radius:2px;cursor:ew-resize;box-shadow:0 0 6px rgba(0,212,170,.5);z-index:10;transform:translateX(-50%)}.timeline-keyframes{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.keyframe-marker{position:absolute;top:2px;width:6px;height:14px;background:#f59e0b;border-radius:2px;transform:translateX(-50%);cursor:pointer;pointer-events:auto;transition:all .15s}.keyframe-marker.selected,.keyframe-marker:hover{background:#fbbf24;box-shadow:0 0 6px rgba(251,191,36,.6);transform:translateX(-50%) scale(1.15)}.timeline-time{font-size:10px;color:var(--text-muted);font-family:'Space Mono',monospace;min-width:42px}.timeline-actions{display:flex;align-items:center;gap:6px}.timeline-speed{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);padding:3px 6px;border-radius:4px;font-size:10px;cursor:pointer}.timeline-loop{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text-secondary);cursor:pointer}.timeline-loop input{cursor:pointer}.canvas-area.animate-mode .canvas-wrapper{padding-bottom:56px}.animation-section{padding:12px;border-top:1px solid var(--border-color)}.animation-mode-select{display:flex;gap:4px;margin-bottom:12px;background:var(--bg-primary);padding:3px;border-radius:8px}.anim-mode-btn{flex:1;padding:8px;border:none;border-radius:6px;background:0 0;color:var(--text-muted);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}.anim-mode-btn:hover{color:var(--text-primary)}.anim-mode-btn.active{background:var(--accent-primary);color:var(--bg-primary)}.keyframe-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.keyframe-count{font-size:11px;color:var(--text-muted)}.keyframe-add-btn{padding:4px 10px;border:1px solid var(--accent-primary);border-radius:4px;background:0 0;color:var(--accent-primary);font-size:11px;cursor:pointer;transition:all .2s}.keyframe-add-btn:hover{background:var(--accent-primary);color:var(--bg-primary)}.keyframe-list{max-height:180px;overflow-y:auto;background:var(--bg-primary);border-radius:6px;padding:4px;margin-bottom:12px}.keyframe-item{display:flex;align-items:center;gap:8px;padding:8px;background:var(--bg-secondary);border-radius:4px;margin-bottom:4px;cursor:pointer;transition:all .15s;border:1px solid transparent}.keyframe-item:hover{background:var(--bg-tertiary)}.keyframe-item.selected{background:rgba(0,212,170,.15);border:1px solid var(--accent-primary)}.keyframe-time{font-family:'Space Mono',monospace;font-size:11px;color:var(--accent-primary);min-width:50px}.keyframe-label{flex:1;font-size:12px;color:var(--text-secondary)}.keyframe-header-actions{display:flex;gap:6px;align-items:center}.keyframe-clear-btn{padding:4px 8px;border:1px solid var(--border-color);border-radius:4px;background:0 0;color:var(--text-muted);font-size:10px;cursor:pointer;transition:all .2s}.keyframe-clear-btn:hover{border-color:#e74c3c;color:#e74c3c;background:rgba(231,76,60,.1)}.keyframe-item-actions{display:flex;gap:4px;opacity:0;transition:opacity .15s}.keyframe-item:hover .keyframe-item-actions{opacity:1}.keyframe-action-btn{width:24px;height:24px;padding:0;border:none;border-radius:4px;background:var(--bg-tertiary);color:var(--text-muted);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}.keyframe-action-btn:hover{background:var(--accent-primary);color:var(--bg-primary)}.keyframe-action-btn.delete:hover{background:#e74c3c;color:#fff}.keyframe-action-btn.update:hover{background:#f59e0b;color:#fff}.keyframe-empty{padding:20px;text-align:center;color:var(--text-muted);font-size:12px}.keyframe-editor{background:var(--bg-primary);border-radius:6px;padding:12px;margin-bottom:12px}.editor-title{font-size:11px;font-weight:600;color:var(--text-secondary);margin-bottom:8px;text-transform:uppercase}.editor-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.editor-row label{font-size:11px;color:var(--text-muted);min-width:70px}.editor-row input,.editor-row select{flex:1;padding:6px 8px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);font-size:12px}.editor-actions{display:flex;gap:8px;margin-top:12px}.editor-btn{flex:1;padding:8px;border:none;border-radius:4px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s}.editor-btn.update{background:var(--accent-primary);color:var(--bg-primary)}.editor-btn.update:hover{background:var(--accent-secondary)}.editor-btn.delete{background:var(--record-red);color:#fff}.editor-btn.delete:hover{opacity:.9}.animation-presets{margin-bottom:12px}.preset-label{font-size:11px;color:var(--text-muted);margin-bottom:6px;text-transform:uppercase}.preset-select{width:100%;padding:8px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-size:12px;margin-bottom:8px;cursor:pointer}.preset-load-btn{width:100%;padding:10px 12px;background:linear-gradient(135deg,rgba(0,212,170,.15),rgba(0,168,255,.15));border:1px solid var(--accent-primary);border-radius:8px;color:var(--accent-primary);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease}.preset-load-btn:hover{background:var(--accent-primary);color:var(--bg-primary);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,212,170,.3)}.animation-export{margin-top:12px}.export-anim-btn{width:100%;padding:12px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));border:none;border-radius:8px;color:var(--bg-primary);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}.export-anim-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px rgba(0,212,170,.4)}.equipment-grid-expanded{display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:6px}.signup-prompt-modal{background:linear-gradient(145deg,var(--bg-secondary),var(--bg-primary));border-radius:20px;padding:32px;max-width:600px;width:95%;max-height:90vh;overflow-y:auto;position:relative;border:1px solid rgba(255,255,255,.1);box-shadow:0 25px 80px rgba(0,0,0,.5);animation:modalSlideIn .3s ease}@keyframes modalSlideIn{from{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.signup-prompt-modal .modal-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border:none;background:rgba(255,255,255,.1);border-radius:50%;color:var(--text-secondary);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.signup-prompt-modal .modal-close:hover{background:rgba(255,255,255,.2);color:var(--text-primary)}.signup-header{text-align:center;margin-bottom:28px}.signup-icon{font-size:48px;margin-bottom:16px}.signup-header h2{font-size:24px;font-weight:700;color:var(--text-primary);margin-bottom:8px}.signup-header p{color:var(--text-secondary);font-size:14px}.signup-options{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}.signup-option{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:24px;text-align:center;position:relative;transition:all .3s ease}.signup-option:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.05)}.pro-option{border-color:var(--accent-primary);background:rgba(0,212,170,.05)}.pro-option:hover{border-color:var(--accent-primary);background:rgba(0,212,170,.1);box-shadow:0 8px 32px rgba(0,212,170,.2)}.option-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:var(--bg-primary);font-size:10px;font-weight:700;padding:4px 12px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px}.option-icon{font-size:36px;margin-bottom:12px}.signup-option h3{font-size:18px;font-weight:600;color:var(--text-primary);margin-bottom:4px}.signup-option p{font-size:13px;color:var(--text-secondary);margin-bottom:16px}.option-features{list-style:none;padding:0;margin:0 0 20px 0;text-align:left}.option-features li{font-size:13px;color:var(--text-secondary);padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05)}.option-features li:last-child{border-bottom:none}.btn-start-pro{width:100%;padding:12px 20px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));border:none;border-radius:10px;color:var(--bg-primary);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.btn-start-pro:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,212,170,.4)}.btn-start-free{width:100%;padding:12px 20px;background:0 0;border:1px solid var(--text-tertiary);border-radius:10px;color:var(--text-primary);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.btn-start-free:hover{border-color:var(--text-secondary);background:rgba(255,255,255,.05)}.no-card-note{display:block;margin-top:10px;font-size:11px;color:var(--text-tertiary)}.login-prompt{text-align:center;font-size:13px;color:var(--text-secondary)}.login-prompt a{color:var(--accent-primary);text-decoration:none;font-weight:500}.login-prompt a:hover{text-decoration:underline}.plan-limit-modal{background:linear-gradient(145deg,var(--bg-secondary),var(--bg-primary));border-radius:20px;padding:32px;max-width:520px;width:95%;max-height:90vh;overflow-y:auto;position:relative;border:1px solid rgba(255,255,255,.1);box-shadow:0 25px 80px rgba(0,0,0,.5);animation:modalSlideIn .3s ease}.plan-limit-modal .modal-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border:none;background:rgba(255,255,255,.1);border-radius:50%;color:var(--text-secondary);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.plan-limit-modal .modal-close:hover{background:rgba(255,255,255,.2);color:var(--text-primary)}.limit-header{text-align:center;margin-bottom:28px}.limit-icon{font-size:48px;margin-bottom:16px}.limit-header h2{font-size:22px;font-weight:700;color:var(--text-primary);margin-bottom:8px}.limit-header p{color:var(--text-secondary);font-size:14px;line-height:1.5}.limit-comparison{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}.plan-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:20px;text-align:center}.current-plan{opacity:.7}.plan-card h3{font-size:15px;font-weight:600;color:var(--text-primary);margin-bottom:12px}.plan-limit{font-size:13px;color:#ff6b6b;font-weight:500;margin-bottom:12px}.progress-bar{height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#ff6b6b,#ff8f8f);border-radius:3px;transition:width .3s ease}.pro-plan{border-color:var(--accent-primary);background:rgba(0,212,170,.05);position:relative}.pro-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:var(--bg-primary);font-size:10px;font-weight:700;padding:4px 12px;border-radius:20px;letter-spacing:1px}.pro-price{margin-bottom:16px}.pro-price .price{font-size:28px;font-weight:700;color:var(--text-primary)}.pro-price .period{font-size:13px;color:var(--text-secondary)}.pro-features{list-style:none;padding:0;margin:0;text-align:left}.pro-features li{font-size:12px;color:var(--text-secondary);padding:5px 0}.limit-actions{text-align:center}.btn-upgrade{width:100%;padding:14px 24px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));border:none;border-radius:12px;color:var(--bg-primary);font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;margin-bottom:12px}.btn-upgrade:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,212,170,.4)}.trial-note{font-size:12px;color:var(--text-tertiary);margin-bottom:16px}.btn-delete-old{background:0 0;border:none;color:var(--text-secondary);font-size:13px;cursor:pointer;padding:8px 16px;transition:all .2s}.btn-delete-old:hover{color:var(--text-primary);text-decoration:underline}@media (max-width:600px){.plan-limit-modal,.signup-prompt-modal{padding:14px;margin:8px;border-radius:14px;max-height:90vh}.plan-limit-modal .modal-close,.signup-prompt-modal .modal-close{position:absolute;top:10px;right:10px;width:32px;height:32px;font-size:20px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2)}.limit-comparison,.signup-options{grid-template-columns:1fr;gap:12px}.limit-header,.signup-header{margin-bottom:16px}.limit-header h2,.signup-header h2{font-size:18px;margin-bottom:4px}.limit-header p,.signup-header p{font-size:12px}.limit-icon,.signup-icon{font-size:32px;margin-bottom:8px}.plan-card,.signup-option{padding:14px 12px;border-radius:12px}.signup-option h3{font-size:15px;margin-bottom:2px}.signup-option p{font-size:11px;margin-bottom:10px}.option-icon{font-size:28px;margin-bottom:8px}.option-badge{font-size:9px;padding:3px 10px;top:-8px}.option-features{margin-bottom:12px}.option-features li{font-size:11px;padding:4px 0}.btn-start-free,.btn-start-pro{padding:10px 16px;font-size:13px;border-radius:8px}.no-card-note{font-size:10px;margin-top:6px}.plan-card h3{font-size:14px;margin-bottom:8px}.plan-limit{font-size:12px;margin-bottom:8px}.pro-badge{font-size:9px;padding:3px 10px;top:-8px}.pro-price{margin-bottom:10px}.pro-price .price{font-size:22px}.pro-price .period{font-size:11px}.pro-features li{font-size:11px;padding:3px 0}.limit-actions{margin-top:4px}.btn-upgrade{padding:12px 20px;font-size:14px;border-radius:10px;margin-bottom:8px}.trial-note{font-size:11px;margin-bottom:10px}.btn-delete-old{font-size:12px;padding:6px 12px}.login-prompt{font-size:12px;margin-top:12px}.pro-option{order:-1}}.nav-user-info{display:flex;align-items:center;gap:10px;padding:6px 12px;background:var(--surface-secondary);border-radius:100px;border:1px solid var(--border-color);cursor:pointer;transition:all .2s ease;text-decoration:none}.nav-user-info:hover{border-color:var(--primary);background:rgba(0,212,170,.05)}.nav-user-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid var(--primary)}.nav-user-avatar-letter{display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.2)}.nav-user-name{font-size:13px;font-weight:600;color:var(--text-primary);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-actions .plan-badge{padding:2px 8px;border-radius:100px;font-size:10px;font-weight:700;letter-spacing:.5px}.header-actions .plan-badge.pro{background:linear-gradient(135deg,gold,#ffb300,#ff8c00,gold);background-size:300% 300%;animation:proGlow 3s ease infinite,proPulse 2s ease-in-out infinite;color:#1a1a1a;font-weight:800;box-shadow:0 0 8px rgba(255,215,0,.6),0 0 16px rgba(255,179,0,.4),0 0 24px rgba(255,140,0,.2),inset 0 1px 0 rgba(255,255,255,.3);border:1px solid rgba(255,215,0,.5);text-shadow:0 1px 1px rgba(255,255,255,.4)}@keyframes proPulse{0%,100%{box-shadow:0 0 8px rgba(255,215,0,.6),0 0 16px rgba(255,179,0,.4),0 0 24px rgba(255,140,0,.2),inset 0 1px 0 rgba(255,255,255,.3)}50%{box-shadow:0 0 12px rgba(255,215,0,.8),0 0 24px rgba(255,179,0,.5),0 0 36px rgba(255,140,0,.3),inset 0 1px 0 rgba(255,255,255,.4)}}.header-actions .plan-badge.trial{background:rgba(0,168,255,.2);color:#00a8ff}@media (max-width:768px){.nav-user-name{display:block;font-size:10px;max-width:60px}.nav-user-info{padding:3px 8px 3px 3px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;gap:5px}.nav-user-avatar{width:24px;height:24px}}.notification-container{position:relative;z-index:1001}.notification-bell{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary,#1a1a2e);border:1px solid var(--border-color,rgba(255,255,255,.1));border-radius:8px;color:var(--text-primary,#fff);cursor:pointer;position:relative;transition:all .2s ease}.notification-bell:hover{background:var(--bg-hover,#252542);border-color:var(--accent,#00d4aa)}.notification-bell svg{stroke:var(--text-secondary,rgba(255,255,255,0.7));transition:stroke .2s ease}.notification-bell:hover svg{stroke:var(--accent,#00d4aa)}.notification-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;background:#e74c3c;border-radius:9px;font-size:10px;font-weight:600;color:#fff;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--bg-secondary,#16213e)}.notification-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:320px;max-height:400px;background:var(--bg-secondary,#16213e);border:1px solid var(--border-color,rgba(255,255,255,.1));border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.4);overflow:hidden;z-index:1000}.notification-dropdown.hidden{display:none}.notification-dropdown .dropdown-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border-color,rgba(255,255,255,.1));background:var(--bg-tertiary,#1a1a2e)}.notification-dropdown .dropdown-close{display:none}.notification-dropdown .dropdown-header h4{margin:0;font-size:14px;font-weight:600;color:var(--text-primary,#fff)}.notification-dropdown .btn-link{background:0 0;border:none;color:var(--accent,#00d4aa);font-size:12px;cursor:pointer;padding:0}.notification-dropdown .btn-link:hover{text-decoration:underline}.notification-list{max-height:340px;overflow-y:auto}.notification-item{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border-color,rgba(255,255,255,.1));cursor:pointer;transition:background .2s ease}.notification-item:last-child{border-bottom:none}.notification-item:hover{background:var(--bg-hover,#252542)}.notification-item.unread{background:rgba(0,212,170,.05)}.notification-item .notif-icon{width:36px;height:36px;border-radius:8px;background:var(--bg-tertiary,#1a1a2e);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}.notification-item .notif-icon.event-icon{background:rgba(0,168,255,.15)}.notification-item .notif-icon.attention-icon{background:rgba(243,156,18,.15)}.notification-item .notif-content{flex:1;min-width:0}.notification-item .notif-title{font-size:13px;font-weight:600;color:var(--text-primary,#fff);margin-bottom:2px}.notification-item .notif-message{font-size:12px;color:var(--text-muted,rgba(255,255,255,.5));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notification-empty{text-align:center;padding:32px 16px;color:var(--text-muted,rgba(255,255,255,.5));font-size:13px}.notification-dropdown .dropdown-footer{padding:12px 16px;border-top:1px solid var(--border-color,rgba(255,255,255,.1));text-align:center}.notification-dropdown .btn-clear-all{color:var(--text-muted,rgba(255,255,255,.5))}.notification-dropdown .btn-clear-all:hover{color:#ff6b6b}.notif-dismiss{background:0 0;border:none;padding:4px;cursor:pointer;color:var(--text-muted,rgba(255,255,255,.3));border-radius:4px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease,color .2s ease,background .2s ease;flex-shrink:0}.notification-item:hover .notif-dismiss{opacity:1}.notif-dismiss:hover{color:#ff6b6b;background:rgba(255,107,107,.1)}@media (max-width:768px){.notif-dismiss{opacity:.6}.notification-container{z-index:1001;position:relative}.notification-bell{width:32px;height:32px;min-width:32px;min-height:32px;border-radius:8px;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:var(--bg-tertiary,#1a1a2e);border:1px solid var(--border-color,rgba(255,255,255,.1))}.notification-bell svg{width:20px;height:20px;pointer-events:none}.notification-badge{min-width:16px;height:16px;font-size:9px;top:-3px;right:-3px;padding:0 3px;pointer-events:none}.notification-dropdown{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;max-height:100%;border-radius:0;z-index:9999;display:flex;flex-direction:column;background:var(--bg-primary,#0d1117)}.notification-dropdown.hidden{display:none}.notification-dropdown .dropdown-header{display:flex;justify-content:space-between;align-items:center;padding:16px;background:var(--bg-secondary,#16213e);border-bottom:1px solid var(--border-color,rgba(255,255,255,.1));flex-shrink:0}.notification-dropdown .dropdown-header h4{font-size:18px;margin:0}.notification-dropdown .dropdown-close{display:flex;align-items:center;gap:6px;background:0 0;border:none;color:var(--accent,#00d4aa);font-size:14px;cursor:pointer;padding:8px 12px;border-radius:8px}.notification-dropdown .dropdown-close:active{background:var(--bg-hover,rgba(255,255,255,.1))}.notification-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}.notification-item{padding:16px;border-bottom:1px solid var(--border-color,rgba(255,255,255,.1))}.notification-item:active{background:var(--bg-hover,rgba(255,255,255,.05))}.notification-dropdown .dropdown-footer{padding:16px;background:var(--bg-secondary,#16213e);border-top:1px solid var(--border-color,rgba(255,255,255,.1));flex-shrink:0}.notification-dropdown .btn-clear-all{font-size:14px;padding:8px 16px}}.smart-upsell-modal{background:linear-gradient(145deg,#1a2332 0,#0f1923 50%,#0d1117 100%);border-radius:20px;border:1px solid rgba(0,212,170,.3);max-width:420px;width:90%;padding:36px 30px 28px;position:relative;box-shadow:0 0 60px rgba(0,212,170,.15),0 20px 60px rgba(0,0,0,.5);animation:smartUpsellIn .4s ease;text-align:center}@keyframes smartUpsellIn{from{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.smart-upsell-close{position:absolute;top:14px;right:14px;background:0 0;border:none;color:var(--text-muted,#6b7280);font-size:22px;cursor:pointer;transition:color .2s;padding:4px 8px;line-height:1}.smart-upsell-close:hover{color:var(--text-primary,#fff)}.smart-upsell-emoji{font-size:48px;margin-bottom:12px;line-height:1}.smart-upsell-headline{font-size:22px;font-weight:700;color:var(--text-primary,#fff);margin:0 0 10px 0}.smart-upsell-message{color:var(--text-secondary,#9ca3af);font-size:14px;line-height:1.6;margin:0 0 22px 0;padding:0 8px}.smart-upsell-features{list-style:none;margin:0 0 24px 0;padding:16px 20px;background:rgba(0,212,170,.05);border:1px solid rgba(0,212,170,.15);border-radius:12px;text-align:left}.smart-upsell-features li{padding:6px 0;color:var(--text-secondary,#d1d5db);font-size:14px;display:flex;align-items:center;gap:10px}.smart-upsell-icon{font-size:16px;flex-shrink:0}.smart-upsell-cta{display:block;width:100%;padding:14px 24px;background:var(--accent-gradient,linear-gradient(135deg,#00d4aa 0,#00b894 100%));color:#000;font-size:16px;font-weight:700;border:none;border-radius:12px;cursor:pointer;text-decoration:none;text-align:center;transition:transform .2s,box-shadow .2s;box-sizing:border-box}.smart-upsell-cta:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,212,170,.4)}.smart-upsell-dismiss{background:0 0;border:none;color:var(--text-muted,#6b7280);font-size:14px;cursor:pointer;padding:12px;margin-top:4px;transition:color .2s;width:100%}.smart-upsell-dismiss:hover{color:var(--text-secondary,#9ca3af)}.smart-upsell-social-proof{margin-top:16px;font-size:12px;color:var(--text-muted,#6b7280);letter-spacing:.5px;position:relative;display:flex;align-items:center;justify-content:center;gap:12px}.smart-upsell-social-proof::after,.smart-upsell-social-proof::before{content:'';flex:1;height:1px;background:rgba(255,255,255,.1);max-width:60px}@media (max-width:480px){.smart-upsell-modal{padding:28px 20px 22px;max-width:95%;border-radius:16px}.smart-upsell-emoji{font-size:40px}.smart-upsell-headline{font-size:20px}.smart-upsell-features{padding:12px 16px}}.session-wall-overlay{position:fixed;inset:0;background:rgba(10,14,20,.85);display:flex;align-items:center;justify-content:center;z-index:10001;backdrop-filter:blur(8px);animation:modalSlideIn .3s ease}.session-wall-modal{background:linear-gradient(135deg,#1a2332 0,#151b24 100%);border:1px solid rgba(0,212,170,.3);border-radius:20px;padding:32px;max-width:420px;width:90%;position:relative;box-shadow:0 0 60px rgba(0,212,170,.15),0 20px 60px rgba(0,0,0,.5)}.session-wall-header{text-align:center;margin-bottom:24px}.session-wall-header h2{font-size:22px;font-weight:700;margin-bottom:8px;background:linear-gradient(135deg,#00d4aa,#00a8ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.session-wall-header p{color:var(--text-muted);font-size:14px}.session-wall-body{display:flex;flex-direction:column;gap:16px}.session-wall-body form{display:flex;flex-direction:column;gap:12px}.session-wall-footer{margin-top:20px;text-align:center;font-size:12px;color:var(--text-muted);letter-spacing:.5px}.session-wall-warning{position:fixed;top:0;left:0;right:0;background:linear-gradient(90deg,rgba(255,140,0,.15),rgba(255,71,87,.15));border-bottom:1px solid rgba(255,140,0,.3);padding:10px 20px;z-index:9999;display:flex;align-items:center;justify-content:center;gap:16px;font-size:13px;color:var(--text-secondary);animation:slideDown .3s ease}@keyframes slideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}.session-wall-warning a{color:var(--accent-primary);font-weight:600;text-decoration:underline;cursor:pointer}.session-wall-warning-close{background:0 0;border:none;color:var(--text-muted);font-size:18px;cursor:pointer;padding:2px 6px;line-height:1}.session-wall-warning-close:hover{color:#ff4757}@media (max-width:480px){.session-wall-modal{padding:24px 20px;max-width:95%;border-radius:16px}.session-wall-header h2{font-size:20px}.session-wall-warning{font-size:12px;padding:8px 12px}}