@keyframes ctxIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes modalIn{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes tutorialIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}*{margin:0;padding:0;box-sizing:border-box}#app,body{height:100vh;height:100dvh}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#141e30;color:#e0e0e0;overflow:hidden;touch-action:none}#app{display:flex;flex-direction:column}header{padding:5px 18px;background:linear-gradient(to right,#fff 0,#fff 12%,#e4edf6 20%,#a8c4de 30%,#4a7ab0 42%,#2a4a72 55%,#1a2940 70%);border-bottom:2px solid #3baa35}.header-logo{height:36px;width:auto;display:block}.header-nav,header{display:flex;align-items:center}.header-nav{gap:10px;margin-left:auto}.header-nav a{color:#e0e0e0;text-decoration:none;font-size:12px;padding:5px 12px;border-radius:6px;border:1px solid #2b5ea7;background:rgba(22,45,74,.8);transition:all .15s}.header-nav a:hover{background:#2b5ea7;color:#fff}.header-nav a.active{background:linear-gradient(135deg,#3baa35,#2b5ea7);border-color:#3baa35;color:#fff;font-weight:600}.panel-type-selector{margin:8px 0}.panel-type-select{width:100%;padding:8px 10px;background:#162d4a;border:1px solid #2b5ea7;border-radius:6px;color:#e0e0e0;font-size:12px;margin-top:4px;appearance:auto}.panel-type-select:focus{outline:0;border-color:#3baa35}.main-layout{display:flex;flex:1;overflow:hidden}aside.toolbar{width:220px;border-right:1px solid #1e3a5f}.toolbar-scroll{flex:1;overflow-y:auto;padding:8px 10px}.toolbar-fixed-bottom,aside.toolbar{display:flex;flex-direction:column;background:#1a2940;flex-shrink:0}.toolbar-fixed-bottom{padding:8px 10px;border-top:1px solid #1e3a5f;gap:5px}.sidebar-divider{height:1px;background:#1e3a5f;margin:6px 0}.tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}.tool-btn-compact{display:flex;align-items:center;justify-content:center;padding:8px;background:0 0;border:1px solid transparent;border-radius:6px;color:#9bb8d8;cursor:pointer;transition:all .15s}.tool-btn-compact:hover{background:rgba(59,170,53,.1);color:#e0e0e0}.tool-btn-compact.active{background:rgba(59,170,53,.2);border-color:#3baa35;color:#4cd946}.quick-actions{display:flex;gap:3px}.accordion summary,.qa-btn{cursor:pointer;display:flex;align-items:center}.qa-btn{flex:1;justify-content:center;padding:6px;background:#162d4a;border:1px solid #1e3a5f;border-radius:4px;color:#9bb8d8;transition:all .15s}.qa-btn:hover{background:#2b5ea7;color:#fff}.qa-btn.danger:hover{background:rgba(231,76,60,.2);color:#e74c3c;border-color:#c0392b}.accordion{border:0;margin:0}.accordion summary{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#7a9ec7;padding:8px 0 4px;list-style:none;gap:6px;user-select:none}.accordion summary::-webkit-details-marker{display:none}.accordion summary::before{content:"";display:inline-block;width:0;height:0;border-left:5px solid #7a9ec7;border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s}.accordion[open]>summary::before{transform:rotate(90deg)}.accordion summary:hover{color:#e0e0e0}.accordion-body{padding:6px 0 2px}.tool-btn,.tool-btn.active{display:none}.settings,.settings label{display:flex;flex-direction:column;gap:8px}.settings label{gap:3px;font-size:12px;color:#9bb8d8}.settings input[type=number],.settings input[type=text]{padding:6px 8px;background:#162d4a;border:1px solid #2b5ea7;border-radius:4px;color:#e0e0e0;font-size:13px;width:100%}.settings input[type=range]{width:100%;accent-color:#3baa35;height:6px;cursor:pointer}.settings input:focus{outline:0;border-color:#3baa35}.settings input:disabled{opacity:.6}#zoom-info,.opacity-val{color:#4cd946;font-weight:500}.checkbox-label{flex-direction:row!important;align-items:center;gap:6px!important}.checkbox-label input[type=checkbox]{accent-color:#3baa35;width:18px;height:18px}.undo-redo-row{display:flex;gap:6px}.undo-redo-row .action-btn{flex:1}.icon-btn{display:flex;align-items:center;justify-content:center;padding:6px}.icon-btn svg,canvas{display:block}.actions{display:flex;flex-direction:column;gap:6px}.action-btn{padding:8px 12px;background:#162d4a;border:1px solid #2b5ea7;border-radius:6px;color:#ccc;cursor:pointer;font-size:12px;transition:all .15s}.action-btn:hover{background:#2b5ea7}.action-btn.primary{background:linear-gradient(135deg,#3baa35,#2b5ea7);border-color:#3baa35;color:#fff;font-weight:600}.action-btn.primary:hover{background:linear-gradient(135deg,#2e8a2a,#1e4a8a)}.action-btn.danger{border-color:#c0392b;color:#e74c3c}.action-btn.danger:hover,.ctx-btn.ctx-danger:hover{background:rgba(231,76,60,.15)}.floor-tabs{display:flex;align-items:center;background:#1a2940;border-bottom:1px solid #1e3a5f;padding:0 8px;gap:2px;min-height:34px;overflow-x:auto}.floor-tab{padding:6px 14px;background:0 0;border:1px solid transparent;border-bottom:none;border-radius:6px 6px 0 0;color:#7a9ec7;cursor:pointer;font-size:12px;white-space:nowrap;transition:all .15s}.floor-tab:hover{background:rgba(59,170,53,.08);color:#ccc}.floor-tab.active{background:#141e30;border-color:#1e3a5f;color:#4cd946;font-weight:600}.floor-tab-add,.floor-tab-close{font-size:14px;cursor:pointer;line-height:1}.floor-tab-add{padding:4px 10px;background:0 0;border:1px dashed #2b5ea7;border-radius:6px;color:#7a9ec7;margin-left:4px;transition:all .15s}.floor-tab-add:hover{background:rgba(59,170,53,.12);border-color:#3baa35;color:#4cd946}.floor-tab-close{margin-left:6px;color:#4a6a8a}.floor-tab-close:hover{color:#e74c3c}.canvas-area{flex:1;display:flex;flex-direction:column;overflow:hidden}.canvas-container{flex:1;position:relative;overflow:hidden;cursor:crosshair}canvas{width:100%;height:100%}.canvas-info{display:flex;justify-content:space-between;padding:6px 12px;background:#1a2940;border-top:1px solid #1e3a5f;font-size:12px;color:#7a9ec7;gap:16px}aside.results-panel{width:280px;background:#1a2940;border-left:1px solid #1e3a5f;padding:12px;overflow-y:auto;flex-shrink:0}aside.results-panel h3{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#7a9ec7;margin:16px 0 8px}aside.results-panel h3:first-child{margin-top:4px}.context-menu{display:none;position:absolute;z-index:50;background:#1e3450;border:1px solid #2b5ea7;border-radius:10px;padding:4px 0;min-width:160px;box-shadow:0 8px 30px rgba(0,0,0,.5),0 0 20px rgba(43,94,167,.15);animation:ctxIn .15s ease}.context-menu.visible,.ctx-btn{display:block}.ctx-btn{width:100%;padding:10px 16px;background:0 0;border:0;color:#d0dde8;font-size:13px;text-align:left;cursor:pointer;transition:background .1s}.ctx-btn:hover{background:rgba(43,94,167,.3)}.ctx-btn:first-child{border-radius:10px 10px 0 0}.ctx-btn:last-child{border-radius:0 0 10px 10px}.ctx-btn.ctx-danger{color:#e74c3c}.ctx-btn:disabled{color:#3a5570;cursor:default}.ctx-btn:disabled:hover{background:0 0}.ctx-divider{height:1px;background:#2b5ea7;margin:3px 0}.placeholder{font-size:12px;color:#4a6a8a;font-style:italic}.result-card{background:#162d4a;border-radius:8px;padding:12px;margin-bottom:8px}.result-card h4{font-size:12px;color:#4cd946;margin-bottom:8px}.result-row{display:flex;justify-content:space-between;font-size:13px;padding:3px 0}.result-row .label{color:#9bb8d8}.result-row .value{color:#e0e0e0;font-weight:500}.result-total{background:linear-gradient(135deg,#3baa35,#2b5ea7);border-radius:8px;padding:14px;margin-top:10px;text-align:center}.result-total .label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.7)}.result-total .value{font-size:24px;font-weight:700;color:#fff;margin-top:4px}.element-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;background:#162d4a;border-radius:4px;margin-bottom:4px;font-size:12px;cursor:pointer;transition:all .15s}.element-item:hover{background:#2b5ea7}.element-item.selected{border:1px solid #3baa35}.element-item .el-type{color:#4cd946;font-weight:600;margin-right:6px}.element-item .el-size{color:#9bb8d8}.element-item .el-delete{background:0 0;border:0;color:#4a6a8a;font-size:18px;padding:2px 8px;min-width:32px;min-height:32px;justify-content:center}.element-item .el-delete:hover,.saved-plan-item .plan-delete:hover{color:#e74c3c}.saved-plans-list{display:flex;flex-direction:column;gap:3px;margin-top:4px}.element-item .el-delete,.saved-plan-item{display:flex;align-items:center;cursor:pointer}.saved-plan-item{justify-content:space-between;padding:6px 8px;background:#162d4a;border-radius:4px;font-size:12px;transition:all .15s}.saved-plan-item:hover{background:#2b5ea7}.saved-plan-item .plan-name{color:#9bc0e0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.saved-plan-item .plan-date{color:#4a6a8a;font-size:10px;margin:0 8px;white-space:nowrap}.saved-plan-item .plan-delete{background:0 0;border:0;color:#4a6a8a;cursor:pointer;font-size:16px;padding:0 4px;line-height:1}.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:200;justify-content:center;align-items:center}.modal-overlay.visible{display:flex}.modal,.modal input{border:1px solid #2b5ea7}.modal{background:linear-gradient(145deg,#1e3450,#162d4a);border-radius:14px;padding:28px 32px;width:90%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 40px rgba(43,94,167,.15);animation:modalIn .2s ease}.modal h3{font-size:16px;color:#e0e8f0;margin-bottom:4px}.modal p{font-size:13px;color:#7a9ec7;margin-bottom:16px}.modal input{width:100%;padding:12px 14px;background:#141e30;border-radius:8px;color:#e0e0e0;font-size:15px;outline:0;transition:border-color .15s}.modal input:focus{border-color:#3baa35;box-shadow:0 0 0 3px rgba(59,170,53,.15)}.modal-buttons{display:flex;gap:10px;margin-top:20px;justify-content:flex-end}.modal-btn{padding:10px 22px;border-radius:8px;border:1px solid #2b5ea7;background:0 0;color:#9bb8d8;cursor:pointer;font-size:13px;font-weight:500;transition:all .15s}.modal-btn:hover{background:rgba(43,94,167,.2)}.modal-btn-primary{background:linear-gradient(135deg,#3baa35,#2b5ea7);border-color:#3baa35;color:#fff;font-weight:600}.modal-btn-primary:hover{background:linear-gradient(135deg,#2e8a2a,#1e4a8a)}.modal-btn-danger{background:#c0392b;border-color:#c0392b;color:#fff;font-weight:600}.modal-btn-danger:hover{background:#a93226}.mobile-bar{display:none;background:#1a2940;border-top:2px solid #2b5ea7;padding:4px 0;padding-bottom:env(safe-area-inset-bottom,4px)}.m-tool-btn,.mobile-tools{display:flex;align-items:center}.mobile-tools{justify-content:space-around;flex-wrap:wrap;gap:2px 0}.m-tool-btn{flex-direction:column;gap:2px;padding:4px 6px;background:0 0;border:0;color:#7a9ec7;cursor:pointer;font-size:9px;border-radius:8px;transition:all .15s;min-width:48px}.m-tool-btn.active{color:#4cd946;background:linear-gradient(180deg,rgba(59,170,53,.15),rgba(43,94,167,.1))}.m-tool-btn span{white-space:nowrap}.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:90}.mobile-overlay.visible{display:block}.mobile-panel{display:none;position:fixed;bottom:0;left:0;right:0;max-height:75vh;background:#1a2940;border-radius:16px 16px 0 0;z-index:100;transform:translateY(100%);transition:transform .3s ease;overflow:hidden}.mobile-panel.visible{transform:translateY(0)}.mobile-panel-handle{width:40px;height:4px;background:#4a6a8a;border-radius:2px;margin:10px auto 6px}.mobile-panel>h3{font-size:14px;text-transform:uppercase;letter-spacing:1px;color:#4cd946;padding:0 16px 10px;border-bottom:2px solid #2b5ea7}.mobile-panel-content{padding:16px;overflow-y:auto;max-height:calc(75vh - 60px);-webkit-overflow-scrolling:touch}@media (max-width:768px){header{padding:6px 12px;background:linear-gradient(to right,#fff 0,#fff 30%,#e4edf6 42%,#a8c4de 55%,#4a7ab0 70%,#1a2940 90%)}aside.results-panel,aside.toolbar{display:none}.mobile-bar,.mobile-panel{display:block}.canvas-info{font-size:11px;padding:4px 10px}.settings label{font-size:13px}.action-btn,.settings input[type=number],.settings input[type=text]{padding:10px 12px;font-size:16px;border-radius:8px}.action-btn{padding:12px 16px;font-size:14px}.element-item{padding:10px 12px;font-size:13px}.result-row{font-size:14px;padding:5px 0}.result-card{padding:14px}.result-total .value{font-size:28px}.checkbox-label{padding:4px 0}}.tutorial-overlay{display:none;position:fixed;inset:0;z-index:9000}.tutorial-overlay.visible{display:block}.tutorial-overlay::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:1}.tutorial-highlight{position:fixed;z-index:2;border-radius:8px;box-shadow:0 0 0 9999px rgba(0,0,0,.7),0 0 0 3px #3baa35,0 0 30px 8px rgba(59,170,53,.35);transition:all .35s ease;pointer-events:none}.tutorial-box{position:fixed;z-index:3;background:linear-gradient(145deg,#1e3450,#162d4a);border:1px solid #3baa35;border-radius:14px;padding:22px 26px 18px;width:360px;max-width:90vw;box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 30px rgba(59,170,53,.1);animation:tutorialIn .3s ease;transition:top .35s ease,left .35s ease}.tutorial-box[data-arrow=down]::before,.tutorial-box[data-arrow=up]::before{content:"";position:absolute;left:30px;width:14px;height:14px;transform:rotate(45deg)}.tutorial-box[data-arrow=up]::before{top:-8px;background:#1e3450;border-left:1px solid #3baa35;border-top:1px solid #3baa35}.tutorial-box[data-arrow=down]::before{bottom:-8px;background:#162d4a;border-right:1px solid #3baa35;border-bottom:1px solid #3baa35}.tutorial-step-indicator{font-size:11px;color:#4cd946;font-weight:600;letter-spacing:1px;margin-bottom:8px}.tutorial-box h3{font-size:16px;color:#e0e8f0;margin-bottom:8px;line-height:1.3}.tutorial-box p{font-size:14px;color:#9bb8d8;line-height:1.6;margin-bottom:18px}.tutorial-buttons{display:flex;justify-content:space-between;align-items:center}.tutorial-btn{padding:8px 18px;border-radius:8px;border:1px solid #2b5ea7;background:0 0;color:#9bb8d8;cursor:pointer;font-size:13px;transition:all .15s}.tutorial-btn:hover{background:rgba(43,94,167,.2);color:#e0e0e0}.tutorial-btn-primary,.tutorial-help-btn{background:linear-gradient(135deg,#3baa35,#2b5ea7);color:#fff}.tutorial-btn-primary{border-color:#3baa35;font-weight:600}.tutorial-btn-primary:hover{background:linear-gradient(135deg,#2e8a2a,#1e4a8a)}.tutorial-help-btn{position:absolute;bottom:36px;right:12px;z-index:40;width:36px;height:36px;border-radius:50%;border:0;font-size:18px;font-weight:700;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.3);transition:transform .15s}.tutorial-help-btn:hover{transform:scale(1.1)}@media (max-width:768px){.tutorial-box{width:calc(100vw - 24px);left:12px!important;bottom:20px!important;top:auto!important}}