*{box-sizing:border-box;margin:0;padding:0}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}html{height:100%;overflow:hidden}body{color:#333;background-color:#f5f5f5;height:100%;margin:0;padding:0;font-family:Inter,Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow:hidden}#root{flex-direction:column;height:100%;display:flex}.container{flex-direction:column;width:100%;height:100%;display:flex}header{-webkit-backdrop-filter:blur(20px)saturate(180%);color:#1d1d1f;background:#ffffffbf;border-bottom:1px solid #00000014;flex-shrink:0;justify-content:space-between;align-items:center;gap:.5rem;min-height:50px;padding:.75rem clamp(.75rem,3vw,2rem);display:flex;box-shadow:0 1px 3px #0000000a}.header-left{flex-shrink:1;min-width:0}.header-left h1{margin:0;font-size:1.4rem}.header-right{flex-shrink:1;align-items:center;gap:clamp(.5rem,2vw,2rem);min-width:0;display:flex}.header-stats{-webkit-overflow-scrolling:touch;scrollbar-width:none;align-items:center;gap:clamp(.4rem,1vw,1rem);min-width:0;font-size:clamp(.7rem,1.2vw,.85rem);font-weight:500;display:flex;overflow:auto hidden}.header-stats::-webkit-scrollbar{display:none}.stat-separator{opacity:.2;color:#86868b}.header-stats-mobile,.stat-value-mobile,.header-title-mobile{display:none}.main-layout{flex:auto;min-height:0;display:flex;position:relative;overflow:hidden}.sidebar{display:none!important}.panel{margin-bottom:2rem}.panel h2{color:#185fa5;border-bottom:2px solid #185fa5;margin-bottom:1rem;padding-bottom:.5rem;font-size:1.1rem}.form-group{margin-bottom:1rem}.form-group label{margin-bottom:.3rem;font-size:.9rem;font-weight:500;display:block}.form-group input,.form-group select{border:1px solid #ddd;border-radius:4px;width:100%;padding:.5rem;font-size:.9rem}.form-group input:focus,.form-group select:focus{border-color:#185fa5;outline:none}.sidebar button{color:#fff;cursor:pointer;background-color:#185fa5;border:none;border-radius:4px;width:100%;padding:.7rem;font-size:.9rem;font-weight:500;transition:background-color .2s}.sidebar button:hover{background-color:#124a84}.sidebar button:active{transform:scale(.98)}.sidebar button#delete-mode{background-color:#c44}.sidebar button#delete-mode:hover{background-color:#a33}.sidebar button#delete-mode.active{background-color:#d55}.sidebar button#measure-mode{background-color:#ff5722}.sidebar button#measure-mode:hover{background-color:#e64a19}.sidebar button#measure-mode.active{background-color:#ff7043}.info-group{border-bottom:1px solid #eee;justify-content:space-between;padding:.5rem 0;display:flex}.info-group label{font-weight:500}.info-group span{color:#185fa5;font-weight:600}.info-text{background-color:#e1f5ee;border-left:3px solid #185fa5;border-radius:4px;margin-top:1rem;padding:.75rem}.info-text small{color:#555;line-height:1.4}.canvas-area{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;background-color:#fafafa;background-image:radial-gradient(#e5e7eb 1px,#0000 1px);background-size:24px 24px;flex:auto;width:100%;min-height:0;display:flex;position:relative;overflow:hidden}#course-canvas{cursor:crosshair;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;background-color:#fff;display:block;width:100%!important;height:100%!important}#course-canvas.delete-mode{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cline x1='4' y1='4' x2='20' y2='20' stroke='%23dc2626' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='20' y1='4' x2='4' y2='20' stroke='%23dc2626' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") 12 12,crosshair}#course-canvas.measure-mode,#course-canvas.drawing-path{cursor:crosshair}#course-canvas.rotate-mode{cursor:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8ZyBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMi41IiBzdHJva2UtbGluZWNhcD0icm91bmQiPgogICAgPHBhdGggZD0iTSA4IDE2IEEgOCA4IDAgMSAxIDI0IDE2IiAvPgogICAgPHBhdGggZD0iTSA4IDE2IEwgNiAxMyBNIDggMTYgTCAxMSAxNSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICA8cGF0aCBkPSJNIDI0IDE2IEwgMjYgMTMgTSAyNCAxNiBMIDIxIDE1IiBzdHJva2Utd2lkdGg9IjIiLz4KICA8L2c+Cjwvc3ZnPgo=) 16 16,grab}.floating-toolbar{-webkit-backdrop-filter:blur(20px)saturate(180%);z-index:1000;background:#ffffffbf;border:1px solid #fff6;border-radius:9999px;flex-wrap:nowrap;gap:clamp(.2rem,.5vw,.5rem);max-width:95vw;padding:clamp(.4rem,.8vw,.75rem);transition:all .3s;position:fixed;bottom:30px;left:50%;overflow-x:visible;transform:translate(-50%);box-shadow:0 25px 50px -12px #00000040;display:flex!important}.toolbar-grip{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;padding:.25rem;display:flex}.toolbar-grip:active{cursor:grabbing}.floating-toolbar.positioned{bottom:auto;left:auto;transform:none}.floating-toolbar.dragging{opacity:.85;box-shadow:0 12px 48px #00000040;transition:none!important}.floating-toolbar.vertical{flex-direction:column}.floating-toolbar.vertical .toolbar-separator{width:40px;height:1px;margin:.5rem 0}.floating-toolbar.vertical .toolbar-grip{transform:rotate(90deg)}.tool-btn{cursor:pointer;background:#f5f5f5;border:none;border-radius:12px;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;gap:.15rem;min-width:clamp(42px,6vw,70px);padding:clamp(.3rem,.5vw,.5rem) clamp(.4rem,.7vw,.75rem);transition:all .2s;position:relative;overflow:visible;display:flex!important}.tool-icon{font-variation-settings:"FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;font-size:clamp(1.2rem,2vw,1.8rem);transition:transform .2s;display:block}.material-symbols-outlined{letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;direction:ltr;font-family:Material Symbols Outlined;font-style:normal;font-weight:400;line-height:1;display:inline-block}.tool-label{color:#333;white-space:nowrap;font-size:clamp(.55rem,.8vw,.7rem);font-weight:500}.toolbar-separator{background:#e0e0e0;flex-shrink:0;width:1px;height:clamp(24px,4vw,40px);margin:0 clamp(.15rem,.4vw,.5rem)}.toolbar-toggle{display:none!important}.secondary-toolbar{display:contents}@media (width>=769px){.secondary-toolbar{display:contents!important}}.save-menu{z-index:1001;background:#fff;border-radius:8px;min-width:160px;margin-bottom:.5rem;position:absolute;bottom:100%;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 4px 12px #00000026}.save-menu-item{cursor:pointer;color:#333;padding:.75rem 1rem;font-size:.9rem;transition:background .2s}.save-menu-item:hover{background:#f0f0f0}.save-menu-item:not(:last-child){border-bottom:1px solid #e0e0e0}.element-menu{z-index:1001;background:#fff;border-radius:8px;min-width:160px;margin-bottom:.5rem;position:absolute;bottom:100%;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 4px 12px #00000026}.element-menu.menu-up{margin:0 0 .5rem;inset:auto auto 100% 50%;transform:translate(-50%)}.element-menu.menu-down{margin:.5rem 0 0;inset:100% auto auto 50%;transform:translate(-50%)}.element-menu.menu-left{margin:0 .5rem 0 0;inset:0 100% auto auto;transform:none}.element-menu.menu-right{margin:0 0 0 .5rem;inset:0 auto auto 100%;transform:none}.element-menu-item{cursor:pointer;color:#333;padding:.75rem 1rem;font-size:.9rem;transition:background .2s}.element-menu-item:hover{background:#f0f0f0}.element-menu-item:not(:last-child){border-bottom:1px solid #e0e0e0}.floating-toolbar>.tool-btn{visibility:visible;opacity:1;border:1px solid #0000001a}.tool-btn:hover{background:#185fa5;transform:translateY(-3px);box-shadow:0 6px 16px #185fa54d}.tool-btn:hover .tool-icon{transform:scale(1.1)}.tool-btn.active{color:#fff;background:#185fa5;box-shadow:0 4px 12px #185fa566}.tool-btn.active .tool-icon{filter:brightness(0)invert()}.tool-btn.active .tool-label{color:#fff}.tool-btn.has-submenu:after{content:"▾";color:#666;pointer-events:none;font-size:.7rem;line-height:1;position:absolute;bottom:4px;right:6px}.mode-indicator{bottom:calc(120px + env(safe-area-inset-bottom,0px));z-index:999;border-radius:12px;align-items:center;gap:.75rem;max-width:90vw;padding:.5rem 1rem;font-family:Inter,sans-serif;font-size:.85rem;animation:.2s modeSlideUp;display:flex;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 4px 16px #0000001a}.mode-indicator.delete{color:#991b1b;background:#fef2f2;border:1px solid #fecaca}.mode-indicator.measure{color:#1e40af;background:#eff6ff;border:1px solid #bfdbfe}.mode-indicator.trace{color:#9a3412;background:#fff7ed;border:1px solid #fed7aa}.mode-indicator .mode-icon{font-size:1.2rem}.mode-indicator .mode-text{font-weight:500}.mode-indicator .mode-hint{opacity:.8;font-weight:400}.mode-indicator .mode-exit{color:inherit;cursor:pointer;white-space:nowrap;background:0 0;border:1px solid;border-radius:6px;margin-left:.5rem;padding:.2rem .6rem;font-size:.8rem;font-weight:500}.mode-indicator .mode-exit:hover{background:#0000000d}@keyframes modeSlideUp{0%{opacity:0;transform:translate(-50%)translateY(10px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.tool-submenu{opacity:0;pointer-events:none;background:#fff;border-radius:12px;flex-direction:column;gap:.25rem;min-width:200px;padding:.5rem;transition:opacity .15s;display:none;position:absolute;bottom:65px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #00000026}.tool-btn:hover .tool-submenu{transition-delay:0s;opacity:1!important;pointer-events:all!important;display:flex!important}.tool-submenu:hover{opacity:1!important;pointer-events:all!important;display:flex!important}.tool-btn:before{content:"";height:20px;display:none;position:absolute;bottom:52px;left:0;right:0}.tool-btn:hover:before{display:block}@keyframes slideUp{0%{opacity:0;transform:translate(-50%)translateY(10px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.submenu-btn{text-align:left;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:8px;align-items:center;gap:.75rem;padding:.75rem 1rem;font-size:.95rem;transition:background .15s;display:flex}.submenu-btn:hover{background:#e1f5ee}.submenu-icon{font-size:1.2rem}.context-toolbar{-webkit-backdrop-filter:blur(20px)saturate(180%);z-index:999;background:#ffffffbf;border:1px solid #fff6;border-radius:9999px;align-items:center;gap:1rem;padding:.75rem 1.25rem;animation:.3s slideUp;display:flex;position:fixed;bottom:100px;left:50%;transform:translate(-50%);box-shadow:0 25px 50px -12px #00000040}.context-toolbar button{cursor:pointer;white-space:nowrap;background:#f5f5f5;border:none;border-radius:8px;padding:.5rem 1rem;font-size:.9rem;transition:all .2s}.context-toolbar button:hover{color:#fff;background:#185fa5;transform:translateY(-2px)}.settings-panel{z-index:1001;background:#fff;width:360px;height:100vh;padding:2rem;transition:right .3s;position:fixed;top:0;right:-360px;overflow-y:auto;box-shadow:-4px 0 16px #0000001a}.settings-panel.open{right:0}.panel-title{color:#185fa5;border-bottom:2px solid #185fa5;margin-bottom:1.5rem;padding-bottom:.75rem;font-size:1.3rem}.close-panel{cursor:pointer;background:#f5f5f5;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:1.3rem;transition:all .2s;display:flex;position:absolute;top:1.5rem;right:1.5rem}.close-panel:hover{color:#fff;background:#185fa5;transform:rotate(90deg)}.settings-section{border-bottom:1px solid #eee;margin-bottom:2rem;padding-bottom:1.5rem}.settings-section:last-child{border-bottom:none}.settings-section h3{color:#185fa5;margin-bottom:1rem;font-size:1rem}.settings-btn{color:#fff;cursor:pointer;background-color:#185fa5;border:none;border-radius:8px;width:100%;margin-top:.5rem;padding:.7rem;font-size:.9rem;font-weight:500;transition:all .2s}.settings-btn:hover{background-color:#124a84;transform:translateY(-1px)}.add-panel{z-index:1002;background:#fff;width:360px;height:100vh;padding:2rem;transition:right .3s;position:fixed;top:0;right:-360px;overflow-y:auto;box-shadow:-4px 0 16px #0000001a}.add-panel.open{right:0}@media (width<=768px){header{height:auto;min-height:auto;padding:.4rem .75rem;flex-wrap:wrap!important}.header-left{min-width:0;flex:100%!important}.header-left h1{text-overflow:ellipsis;white-space:nowrap;font-size:1rem;overflow:hidden}.header-right{display:none!important}.header-stats-mobile{flex:100%;padding:.15rem 0 0 1.6rem;display:block!important}.header-stats-mobile .header-stats{align-items:center;gap:.4rem;font-size:.7rem;display:flex!important}.header-stats-mobile .stat-separator{opacity:.15;font-size:.6rem}.stat-label,.stat-value-desktop{display:none!important}.stat-value-mobile{display:inline!important}.hide-mobile,.header-subtitle-desktop,.header-eventname-desktop{display:none!important}.header-title-mobile{display:block!important}.editor-back-label,.editor-logo{display:none}.floating-toolbar,.floating-toolbar.vertical{justify-content:flex-start;gap:.25rem;padding:.5rem;overflow:auto hidden;border-radius:16px!important;flex-direction:row!important;width:calc(100% - 20px)!important;inset:auto auto 10px 10px!important;transform:none!important}.toolbar-grip{display:none!important}.tool-btn{width:50px;min-width:50px;height:50px;padding:.5rem;position:static}.tool-label{display:none}.toolbar-toggle{background:#185fa5;display:flex!important}.toolbar-toggle .tool-icon{color:#fff;font-size:1.8rem}.secondary-toolbar{opacity:0;pointer-events:none;background:#fff;border-radius:16px;justify-content:flex-start;gap:.25rem;width:calc(100% - 20px);padding:.5rem;transition:bottom .3s,opacity .3s;position:fixed;bottom:-100px;left:10px;overflow:auto hidden;box-shadow:0 8px 32px #00000026;display:flex!important}.secondary-toolbar.active{opacity:1;pointer-events:auto;bottom:70px}.secondary-toolbar .tool-btn{width:50px;min-width:50px;height:50px;padding:.5rem}.secondary-toolbar .tool-label{display:none}.tool-icon{font-size:1.5rem}.element-menu-item .material-symbols-outlined{vertical-align:middle;margin-right:.5rem;font-size:1.2rem}.tool-btn{overflow:visible!important}.element-menu{z-index:10000!important;width:auto!important;max-width:80vw!important;margin:0!important;position:fixed!important;bottom:auto!important;right:auto!important}.tool-submenu{left:auto;right:0;transform:none}.context-toolbar{flex-wrap:wrap;justify-content:center;width:calc(100% - 20px);bottom:130px;left:10px;transform:none}.secondary-toolbar.active~.context-toolbar{bottom:130px}.settings-panel,.add-panel{width:100%;right:-100%}.settings-panel.open,.add-panel.open{right:0}.quick-actions{grid-template-columns:repeat(auto-fit,40px);justify-content:center;border-radius:12px!important;gap:.2rem!important;padding:.3rem!important;display:grid!important;bottom:75px!important;left:10px!important;right:10px!important}.quick-actions button{width:40px!important;min-width:40px!important;height:40px!important}.quick-actions button span:last-child:not(.material-symbols-outlined),.quick-actions .quick-actions-separator{display:none}}@media (width<=1024px) and (width>=769px){.tool-label{display:none}.tool-btn{min-width:52px;padding:.4rem}.tool-icon{font-size:1.5rem}.toolbar-separator{height:30px}}@media (width<=480px){.floating-toolbar{gap:.2rem;padding:.4rem}.tool-btn{width:42px;height:42px}.tool-icon{font-size:1.2rem}}.settings-modal-backdrop{z-index:2000;background:#00000080;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.settings-modal{-webkit-backdrop-filter:blur(20px)saturate(180%);background:#ffffffd9;border:1px solid #fff6;border-radius:1.5rem;flex-direction:column;width:90%;max-width:600px;max-height:85vh;display:flex;box-shadow:0 25px 50px -12px #00000040}.settings-modal-header{border-bottom:1px solid #eee;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;display:flex}.settings-modal-header h2{color:#185fa5;margin:0;font-size:1.2rem}.settings-modal-close{cursor:pointer;background:#f5f5f5;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:1.1rem;transition:all .2s;display:flex}.settings-modal-close:hover{color:#fff;background:#185fa5}.settings-modal-tabs{border-bottom:1px solid #eee;gap:0;padding:0 1rem;display:flex}.settings-modal-tab{cursor:pointer;color:#666;white-space:nowrap;background:0 0;border:none;border-bottom:2px solid #0000;padding:.75rem 1rem;font-size:.9rem;transition:all .2s}.settings-modal-tab:hover{color:#185fa5}.settings-modal-tab.active{color:#185fa5;border-bottom-color:#185fa5;font-weight:600}.settings-modal-content{flex:1;padding:1.5rem;overflow-y:auto}.settings-tab-content{flex-direction:column;gap:0;display:flex}.settings-btn.primary{background-color:#185fa5;font-weight:600}.settings-btn.primary:disabled{cursor:not-allowed;background-color:#999;transform:none}@media (width<=768px){.settings-modal{width:95%;max-height:90vh}.settings-modal-tabs{overflow-x:auto}.settings-modal-tab{padding:.6rem .75rem;font-size:.85rem}}