*{box-sizing:border-box;margin:0;padding:0}html{background-color:#0f0f1a;height:100%}body{min-height:100vh;background-color:#0f0f1a;min-height:-webkit-fill-available;font-family:Arial,sans-serif}#root{min-height:100vh;background-color:#0f0f1a;min-height:-webkit-fill-available}.app{min-height:100vh;color:#fff;background-color:#0f0f1a;flex-direction:column;min-height:-webkit-fill-available;display:flex}.header{z-index:10000;background-color:#1a1a2e;align-items:center;padding:10px 24px;display:flex;position:relative}.header-spacer{justify-content:center;align-items:center;gap:4px;min-width:48px;display:flex}.dropdown-container{position:absolute;left:50%;transform:translate(-50%)}.header-left{align-items:center;display:flex}.header-right{align-items:center;gap:10px;margin-left:auto;display:flex}.dropdown-button{color:#fff;cursor:pointer;background-color:#e94560;border:none;border-radius:6px;padding:8px 20px;font-size:16px;font-weight:700}.dropdown-button:hover{background-color:#c73650}.dropdown{z-index:9999;background-color:#16213e;border-radius:8px;min-width:180px;max-height:80vh;margin-top:4px;padding:8px 0;list-style:none;position:absolute;top:100%;left:50%;overflow-y:auto;transform:translate(-50%)}.dropdown-item{cursor:pointer;text-align:center;padding:10px 20px;font-size:16px}.dropdown-item:hover{background-color:#1f3460}.edit-icon-btn{cursor:pointer;background-color:#0000;border:none;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;transition:background-color .2s;display:flex}.edit-icon-btn:hover{background-color:#ffffff1a}.edit-icon-btn.active{background-color:#e9456033}.edit-icon-img{object-fit:contain;width:24px;height:24px}.main{flex:1;justify-content:center;align-items:center;padding:20px;display:flex}.map-container{cursor:default;z-index:1;width:800px;position:relative}.map-wrapper{z-index:1;justify-content:center;display:flex;position:relative}.map-image{-webkit-user-select:none;user-select:none;border-radius:12px;width:100%;display:block}.marker{cursor:pointer;z-index:10;background-color:#000000b3;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;transition:transform .15s;display:flex;position:absolute;overflow:hidden;transform:translate(-50%,-50%);box-shadow:0 0 8px #0009}.marker:hover{transform:translate(-50%,-50%)scale(1.3)}.marker-icon-img{object-fit:contain;width:20px;height:20px}.granade-menu{pointer-events:auto;z-index:100;width:0;height:0;position:absolute;transform:translate(-50%,-50%)}.granade-option{cursor:pointer;background-color:#000000d9;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;transition:transform .15s,border-color .15s;display:flex;position:absolute;overflow:hidden}.granade-option:hover{border-color:#e94560;transform:scale(1.2)}.granade-option-img{object-fit:contain;width:24px;height:24px}.granade-pos-0{top:-52px;left:-20px}.granade-pos-1{top:-20px;left:32px}.granade-pos-2{top:12px;left:-20px}.granade-pos-3{top:-20px;left:-72px}.side-panel{background-color:#1a1a2e;border-radius:12px;width:400px;max-height:80vh;padding:24px 20px 20px;position:absolute;top:0;left:calc(100% + 20px);overflow-y:auto}.side-panel-close{color:#718096;cursor:pointer;background:0 0;border:none;font-size:18px;position:absolute;top:10px;right:14px}.side-panel-close:hover{color:#fff}.side-panel-type{color:#a0aec0;text-transform:capitalize;align-items:center;gap:10px;margin-bottom:6px;font-size:16px;display:flex}.side-panel-type-icon{width:28px;height:28px}.drop-zone{text-align:center;cursor:pointer;border:2px dashed #4a5568;border-radius:12px;justify-content:center;align-items:center;min-height:200px;padding:40px 20px;transition:all .2s;display:flex}.drop-zone:hover{background-color:#ffffff08;border-color:#718096}.drop-zone.drag-over{background-color:#e945601a;border-color:#e94560}.drop-zone-text{color:#718096;white-space:pre-line;font-size:14px;line-height:1.6}.edit-video-block{gap:.5rem;width:100%;display:flex}.video-container{background-color:#000;border-radius:8px;width:100%;overflow:hidden}.side-video{width:100%;display:block}.no-video{color:#718096;text-align:center;padding:40px 20px}.login-modal{text-align:center;background-color:#1a1a2e;border-radius:12px;width:360px;max-width:90%;padding:30px;position:relative}.login-close{color:#718096;cursor:pointer;background:0 0;border:none;font-size:22px;position:absolute;top:12px;right:16px}.login-close:hover{color:#fff}.login-title{color:#fff;margin-bottom:20px;font-size:20px}.login-input{color:#fff;background-color:#0f0f1a;border:2px solid #4a5568;border-radius:8px;outline:none;width:100%;margin-bottom:8px;padding:12px 16px;font-size:16px}.login-input:focus{border-color:#e94560}.login-error{color:#e94560;margin-bottom:8px;font-size:14px}.login-btn{color:#fff;cursor:pointer;background-color:#e94560;border:none;border-radius:8px;width:100%;margin-top:8px;padding:12px;font-size:16px;font-weight:700}.login-btn:hover{background-color:#c73650}.modal-overlay{z-index:1000;background-color:#000000d9;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.modal-content{width:80%;max-width:800px;position:relative}.modal-close{color:#fff;cursor:pointer;background:0 0;border:none;font-size:28px;position:absolute;top:-40px;right:0}.modal-video{border:none;border-radius:8px;width:100%;height:450px}.map-loader{color:#fff;z-index:20;background-color:#000c;border-radius:8px;padding:12px 24px;font-size:16px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lines-svg{pointer-events:none;z-index:5;width:100%;height:100%;position:absolute;top:0;left:0}.marker{z-index:10}.lines-svg circle,.lines-svg path{pointer-events:auto}.marker.drawing{border-color:#e94560;animation:1s infinite pulse}@keyframes pulse{0%,to{box-shadow:0 0 6px #e9456066}50%{box-shadow:0 0 16px #e94560cc}}.drawing-hint{color:#fff;z-index:30;pointer-events:none;background-color:#e94560e6;border-radius:6px;padding:6px 16px;font-size:13px;position:absolute;top:10px;left:50%;transform:translate(-50%)}.delete-line-btn{color:#fff;cursor:pointer;background-color:#4a5568;border:none;border-radius:6px;margin-top:8px;margin-bottom:12px;padding:8px 14px;font-size:13px}.delete-line-btn:hover{background-color:#e94560}.video-loaded-block{flex-direction:column;gap:10px;display:flex}.replace-video-btn{color:#fff;cursor:pointer;background-color:#4a5568;border:none;border-radius:8px;width:100%;padding:10px;font-size:14px;font-weight:700}.replace-video-btn:hover{background-color:#e94560}.throw-type-block{margin-top:16px}.throw-type-label{color:#a0aec0;margin-bottom:6px;font-size:14px}.throw-type-select{color:#fff;cursor:pointer;background-color:#0f0f1a;border:2px solid #4a5568;border-radius:8px;outline:none;width:100%;padding:10px 14px;font-size:14px}.throw-type-select:focus{border-color:#e94560}.throw-type-display{color:#a0aec0;background-color:#ffffff0d;border-radius:8px;margin-top:12px;padding:10px 14px;font-size:14px}.group-marker{color:#fff;background-color:#e94560e6;border-color:#fff;font-size:13px;font-weight:700}.group-count{line-height:1}.guide-container{position:relative}.guide-icon-btn{cursor:pointer;background-color:#0000;border:none;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;transition:background-color .2s;display:flex}.guide-icon-btn:hover{background-color:#ffffff1a}.guide-icon-img{object-fit:contain;width:22px;height:22px}.guide-dropdown{color:#a0aec0;z-index:200;background-color:#1a1a2e;border-radius:10px;width:250px;margin-top:6px;padding:14px 16px;font-size:12px;line-height:2;display:none;position:absolute;top:100%;left:auto;right:0}.guide-container:hover .guide-dropdown{display:block}.guide-title{color:#fff;margin-bottom:4px;font-size:13px;font-weight:700}.guide-item{white-space:nowrap}kbd{color:#fff;background-color:#4a5568;border-radius:4px;padding:1px 6px;font-family:inherit;font-size:11px}.group-close-marker{background-color:#000000b3;justify-content:center;align-items:center;display:flex}.group-close-marker .close-icon{font-size:14px;line-height:1}.side-btn{cursor:pointer;background-color:#0000;border:2px solid #4a5568;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;padding:0;transition:all .2s;display:flex;overflow:hidden}.side-btn:hover{border-color:#718096}.side-btn-text{color:#fff;font-size:13px}.side-buttons{gap:10px;display:flex}.side-btn{color:#fff;cursor:pointer;background-color:#0000;border:2px solid #4a5568;border-radius:8px;align-items:center;gap:8px;padding:10px 16px;font-size:14px;transition:all .2s;display:flex}.side-btn:hover{background-color:#ffffff0d;border-color:#718096}.side-btn.active{background-color:#e9456026;border-color:#e94560}.side-btn-icon{object-fit:contain;width:24px;height:24px}.side-display-icon{object-fit:contain;width:32px;height:32px}.side-display{background-color:#ffffff0d;border-radius:8px;align-items:center;gap:10px;margin-top:12px;padding:10px 14px;display:flex}.side-display-label{color:#a0aec0;font-size:14px}.video-url-block{margin-top:0}.video-url-input{color:#fff;background-color:#0f0f1a;border:2px solid #4a5568;border-radius:8px;outline:none;width:100%;padding:12px 16px;font-size:14px;transition:border-color .2s}.video-url-input::placeholder{color:#718096}.video-url-input:focus{border-color:#e94560}@media (width<=1024px){.map-container{width:100%;max-width:100%}.main{align-items:flex-start;padding:10px}.map-wrapper{flex-direction:column;align-items:center;width:100%}.map-image{object-fit:contain;border-radius:8px;max-height:calc(100vh - 76px)}.side-panel{width:100%;max-width:100%;max-height:none;box-shadow:none;border-radius:12px;margin-top:10px;padding:20px 16px;position:relative;inset:auto}}@media (width<=768px){.header{flex-wrap:wrap;gap:8px;padding:8px 12px}.header-spacer{display:none}.dropdown-container{flex:1;position:static;transform:none}.dropdown-button{width:100%;padding:10px;font-size:14px}.dropdown{min-width:unset;width:100%;left:0;right:0;transform:none}.header-right{gap:6px}.main{align-items:flex-start;padding:8px}.map-wrapper{flex-direction:column;align-items:center;width:100%}.map-container{border-radius:0;width:100%}.map-image{object-fit:contain;border-radius:8px;max-height:calc(100vh - 68px)}.side-panel{width:100%;max-width:100%;max-height:none;box-shadow:none;border-radius:12px;margin-top:10px;padding:16px 12px;position:relative;inset:auto}.marker{width:24px;height:24px}.marker-icon-img{width:16px;height:16px}.group-marker{width:24px;height:24px;font-size:11px}.granade-option{width:36px;height:36px}.granade-option-img{width:20px;height:20px}.granade-pos-0{top:-44px;left:-18px}.granade-pos-1{top:-18px;left:26px}.granade-pos-2{top:8px;left:-18px}.granade-pos-3{top:-18px;left:-62px}.side-panel-type{font-size:14px}.side-panel-type-icon{width:24px;height:24px}.video-url-input{padding:10px 12px;font-size:13px}.throw-type-select{padding:8px 12px;font-size:13px}.side-btn{width:38px;height:38px}.login-modal{width:95%;padding:20px}.login-title{font-size:18px}.login-input{padding:10px 14px;font-size:16px}.login-btn{padding:10px;font-size:14px}.drawing-hint{padding:4px 12px;font-size:11px;top:6px}.guide-dropdown{width:220px;font-size:11px;right:-10px}.guide-item{font-size:11px}kbd{padding:1px 4px;font-size:10px}}@media (width<=480px){.header{padding:6px 8px}.dropdown-button{padding:8px;font-size:13px}.edit-icon-btn{width:34px;height:34px}.edit-icon-img{width:20px;height:20px}.guide-icon-btn{width:34px;height:34px}.guide-icon-img{width:18px;height:18px}.main{padding:6px}.map-image{max-height:calc(100vh - 56px)}.marker{width:22px;height:22px}.marker-icon-img{width:14px;height:14px}.granade-option{width:32px;height:32px}.granade-option-img{width:18px;height:18px}.granade-pos-0{top:-38px;left:-16px}.granade-pos-1{top:-16px;left:22px}.granade-pos-2{top:6px;left:-16px}.granade-pos-3{top:-16px;left:-54px}.side-panel{padding:14px 10px}}@media (hover:none) and (pointer:coarse){.marker:hover{transform:translate(-50%,-50%)scale(1)}.granade-option:hover{transform:none}.guide-container:hover .guide-dropdown{display:none}.guide-container.active .guide-dropdown{display:block}}