:root{--primary: #3b82f6;--primary-hover: #2563eb;--bg-dark: #0a0a0c;--sidebar-bg: rgba(15, 23, 42, .95);--sidebar-light-bg: rgba(30, 41, 59, .7);--border: rgba(255, 255, 255, .1);--text: #ffffff;--text-dim: #94a3b8;--accent: #60a5fa;--card-inner: rgba(255, 255, 255, .03);font-family:Inter,system-ui,-apple-system,sans-serif;color-scheme:dark}*,:before,:after{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;position:fixed;background-color:var(--bg-dark);-webkit-overflow-scrolling:touch;touch-action:none}#root{position:fixed;inset:0;width:100%;height:100%}.canvas-container{position:absolute;inset:0;width:100%;height:100%;background:radial-gradient(circle at center,#f0f9ff,#bae6fd)}.glow{position:absolute;top:50%;left:50%;width:600px;height:600px;background:radial-gradient(circle,#3b82f61a,#0000 70%);transform:translate(-50%,-50%);pointer-events:none;z-index:0}.unified-sidebar{position:absolute;top:20px;left:20px;bottom:20px;width:360px;background:var(--sidebar-bg);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border:1px solid var(--border);border-radius:32px;display:flex;flex-direction:column;box-shadow:0 20px 60px #0009;z-index:5000;transition:all .5s cubic-bezier(.19,1,.22,1);overflow:visible}.unified-sidebar.collapsed{transform:translate(-400px);opacity:.5}.sidebar-header{padding:32px 24px 20px}.sidebar-header h1{font-size:1.25rem;margin:0 0 24px;font-weight:800;background:linear-gradient(135deg,#fff,#94a3b8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.02em}.tab-nav{display:flex;background:#0003;padding:4px 4px 8px;border-radius:14px;gap:4px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;position:relative;touch-action:pan-x}.tab-nav{scrollbar-width:none}.tab-nav::-webkit-scrollbar{height:4px}.tab-nav::-webkit-scrollbar-track{background:transparent;border-radius:10px}.tab-nav::-webkit-scrollbar-thumb{background:transparent;border-radius:10px;transition:background .3s}@media(hover:hover){.tab-nav:hover::-webkit-scrollbar-thumb{background:#3b82f640}.tab-nav::-webkit-scrollbar-thumb:hover{background:#3b82f699!important}}.tab-item{flex:1;flex-shrink:0;min-width:max-content;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border:none;background:transparent;color:var(--text-dim);font-size:.75rem;font-weight:600;border-radius:10px;cursor:pointer;transition:all .3s}@media(hover:hover){.tab-item:hover{background:#ffffff0d;color:#fff}}.tab-item.active{background:var(--primary);color:#fff;box-shadow:0 4px 12px #3b82f64d}.sidebar-scrollable{flex:1;overflow-y:auto;padding:0 24px 32px;scrollbar-width:none;touch-action:pan-y}.sidebar-scrollable::-webkit-scrollbar{display:none}.tab-pane{display:flex;flex-direction:column;gap:24px;animation:fadeIn .4s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.section{display:flex;flex-direction:column;gap:12px}.section-title{font-size:.75rem;font-weight:800;text-transform:uppercase;color:var(--text-dim);letter-spacing:.1em;display:flex;align-items:center;gap:8px;margin-bottom:4px}.control-group{display:flex;flex-direction:column;gap:10px}.control-label{font-size:.8rem;font-weight:600;color:var(--text-dim);display:flex;justify-content:space-between}.control-label span{color:var(--accent);font-family:JetBrains Mono,monospace}input[type=range]{width:100%;height:4px;background:#ffffff1a;border-radius:2px;outline:none;appearance:none;accent-color:var(--primary)}.ui-select,.ui-number-input{width:100%;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px;color:#fff;font-size:.85rem;outline:none;transition:all .3s;cursor:pointer}.ui-select:focus,.ui-number-input:focus{border-color:var(--primary);background:#ffffff14}.ui-select.active{background:var(--primary)!important;border-color:var(--primary)!important;box-shadow:0 4px 12px #3b82f64d}.ui-toggle-btn{background:#ffffff0d;border:1px solid var(--border);color:#fff;padding:12px;border-radius:14px;font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:all .3s}@media(hover:hover){.ui-toggle-btn:hover{background:#ffffff1a}}.ui-toggle-btn.active{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 4px 12px #3b82f666}.color-picker{display:flex;gap:12px;flex-wrap:wrap}.color-swatch{width:34px;height:34px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.color-swatch.active{border-color:#fff;transform:scale(1.15);box-shadow:0 0 15px var(--primary)}.price-card{background:linear-gradient(135deg,#2563eb,#1e40af);padding:24px;border-radius:24px;display:flex;flex-direction:column;gap:8px;box-shadow:0 10px 25px #2563eb33}.price-label{font-size:.7rem;font-weight:700;color:#ffffffb3;text-transform:uppercase}.price-value{font-size:2.25rem;font-weight:900;color:#fff;letter-spacing:-.02em}.price-details{display:flex;justify-content:space-between;font-size:.7rem;font-weight:600;color:#fff9;border-top:1px solid rgba(255,255,255,.15);padding-top:12px}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.stat-card{background:var(--card-inner);border:1px solid var(--border);padding:16px;border-radius:18px}.stat-label{font-size:.65rem;color:var(--text-dim);margin-bottom:4px;font-weight:700;text-transform:uppercase}.stat-value{font-size:1.15rem;font-weight:800;color:#fff}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}.grid-2 .ui-number-input,.grid-2 .ui-select{width:100%;box-sizing:border-box}.ground-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.ground-btn{padding:10px 4px;border-radius:10px;background:#ffffff0d;border:1px solid var(--border);color:var(--text-dim);font-size:.7rem;font-weight:600;cursor:pointer;transition:all .3s}.ground-btn.active{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 4px 10px #3b82f633}.sidebar-collapse-btn{position:absolute;right:-52px;top:32px;width:40px;height:40px;background:var(--sidebar-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 16px #0003;transition:all .3s}@media(hover:hover){.sidebar-collapse-btn:hover{background:var(--primary)}}.top-right-bar{position:absolute;top:24px;right:24px;z-index:6000;display:flex;align-items:center;gap:8px;background:var(--sidebar-bg);padding:6px 12px;border-radius:20px;border:1px solid var(--border);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);box-shadow:0 8px 30px #0000004d}.lang-btn{padding:6px 8px;font-size:.6rem;font-weight:800;border:none;background:transparent;color:var(--text-dim);cursor:pointer;border-radius:8px;transition:all .3s}.lang-btn.active{background:#ffffff1a;color:#fff}.bar-divider{width:1px;height:16px;background:var(--border)}.action-btn{width:32px;height:32px;border-radius:10px;border:none;background:transparent;color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s}@media(hover:hover){.action-btn:hover{background:#ffffff1a;color:#fff}}.action-btn.active{background:#3b82f626;color:#60a5fa;box-shadow:0 0 15px #3b82f633}.action-btn.primary{color:#10b981}@media(hover:hover){.action-btn.primary:hover{background:#10b9811a}}.hint-text{font-size:.65rem;color:var(--text-dim);line-height:1.4;margin-top:8px;opacity:.7}.mt-4{margin-top:1rem}.mr-2{margin-right:.5rem}@media(max-width:768px){.unified-sidebar{width:100%;inset:auto 0 0;max-height:55vh;border-radius:32px 32px 0 0;border-left:none;border-right:none;border-bottom:none;transform:none;padding-bottom:env(safe-area-inset-bottom)}.unified-sidebar.collapsed{transform:translateY(calc(100% - 60px));opacity:1}.sidebar-header{padding:16px 20px 10px}.sidebar-header h1{font-size:1rem;margin-bottom:12px;text-align:center}.sidebar-scrollable{padding:0 20px 20px}.sidebar-collapse-btn{right:20px;top:-20px;left:auto;transform:rotate(-90deg)}.unified-sidebar.collapsed .sidebar-collapse-btn{transform:rotate(-90deg)}.top-right-bar{inset:16px 16px auto auto;transform:none;padding:4px 8px;background:#0f172ab3}.price-value{font-size:1.6rem}.tab-text{display:inline;font-size:.7rem}.tab-item{padding:8px 10px;min-width:unset;gap:4px}.section{gap:16px}}.version-tag{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:.55rem;color:var(--text-dim);opacity:.2;pointer-events:none;font-family:monospace}.add-btn-group{display:flex;background:var(--card-inner);border:1px dashed var(--border);border-radius:14px;overflow:hidden;margin-bottom:20px;transition:border-color .3s}.add-btn-group:hover{border-color:var(--primary)}.add-btn-sub{flex:1;background:transparent;border:none;border-right:1px dashed var(--border);color:var(--text-dim);padding:12px 4px;font-size:.75rem;font-weight:700;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}.add-btn-sub:last-child{border-right:none}@media(hover:hover){.add-btn-sub:hover{background:#3b82f61a;color:#fff}}.add-btn-sub.type-h1,.add-btn-sub.type-h1 .plus-icon{color:#3b82f6!important}.add-btn-sub.type-h2,.add-btn-sub.type-h2 .plus-icon{color:#06b6d4!important}.add-btn-sub.type-h3,.add-btn-sub.type-h3 .plus-icon{color:#34d399!important}.add-btn-sub.type-text,.add-btn-sub.type-text .plus-icon{color:#94a3b8!important}.add-btn-sub.type-image,.add-btn-sub.type-image .plus-icon{color:#a78bfa!important}.add-btn-sub.type-data,.add-btn-sub.type-data .plus-icon{color:#fb923c!important}.add-btn-sub:hover{background:#ffffff0d!important}.device-item{position:relative;z-index:1;background:#1e293b99!important;border:1px solid rgba(59,130,246,.25)!important;border-radius:16px!important;padding:14px!important;margin-bottom:20px!important;box-shadow:0 8px 32px #0000004d,inset 0 0 20px #ffffff05!important;animation:slideIn .3s ease-out;transition:border-color .3s,transform .3s,z-index 0s}.device-item:hover,.device-item:focus-within{z-index:50;border-color:#3b82f680!important;transform:translateY(-2px)}.type-container .plus-icon,.type-container .add-btn-text{color:#38bdf8!important}.device-item.type-container{border-color:#38bdf84d!important}.device-item.type-container .device-card-title{color:#38bdf8!important;opacity:.9}.add-btn-sub.type-container:hover{background:#38bdf81a}.type-pile .plus-icon,.type-pile .add-btn-text{color:#818cf8!important}.device-item.type-pile{border-color:#818cf84d!important}.device-item.type-pile .device-card-title{color:#818cf8!important;opacity:.9}.add-btn-sub.type-pile:hover{background:#818cf81a}.type-cable .plus-icon,.type-cable .add-btn-text{color:#2dd4bf!important}.device-item.type-h1{border-color:#3b82f666!important;box-shadow:0 0 15px #3b82f60d!important}.device-item.type-h1 .device-card-title{color:#3b82f6!important}.device-item.type-h2{border-color:#06b6d466!important;box-shadow:0 0 15px #06b6d40d!important}.device-item.type-h2 .device-card-title{color:#06b6d4!important}.device-item.type-h3{border-color:#34d39966!important;box-shadow:0 0 15px #34d3990d!important}.device-item.type-h3 .device-card-title{color:#34d399!important}.device-item.type-text{border-color:#94a3b833!important}.device-item.type-text .device-card-title{color:#94a3b8!important}.device-item.type-image{border-color:#a78bfa66!important;box-shadow:0 0 15px #a78bfa0d!important}.device-item.type-image .device-card-title{color:#a78bfa!important}.device-item.type-data{border-color:#fb923c66!important;box-shadow:0 0 15px #fb923c0d!important}.device-item.type-data .device-card-title{color:#fb923c!important}.report-block-card{transition:transform .25s cubic-bezier(.2,0,0,1),opacity .2s ease,box-shadow .2s ease;will-change:transform,opacity}.report-block-card.dragging{opacity:.2!important;transform:scale(.98);pointer-events:none}.type-cable .plus-icon,.type-pile .plus-icon{display:none}.device-list{display:flex;flex-direction:column;transition:all .3s ease}.report-block-card{transition:transform .2s cubic-bezier(.2,0,0,1),opacity .2s ease}.report-block-card.dragging{opacity:.1!important;transform:scale(.98)}.device-item.type-cable{border-color:#2dd4bf4d!important}.device-item.type-cable .device-card-title{color:#2dd4bf!important;opacity:.9}.add-btn-sub.type-cable:hover{background:#2dd4bf1a}@keyframes slideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.device-item .control-label{margin-top:2px;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}.tab-nav{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;white-space:nowrap;display:flex;padding:4px}.tab-nav::-webkit-scrollbar{display:none}.tab-item{flex:0 0 auto;min-width:80px;padding:10px 16px}.delete-device-btn{background:#ef44441a;border:1px solid rgba(239,68,68,.2);color:#ef4444;width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}.delete-device-btn:hover{background:#ef4444;color:#fff}.device-item input[type=range]{height:2px;margin:4px 0}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.device-card-header{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important;margin-bottom:16px!important;width:100%!important}.device-card-title{font-size:12px!important;font-weight:800!important;letter-spacing:.1em!important;text-transform:uppercase!important;margin:0!important}.device-controls-group{display:flex!important;flex-direction:row!important;align-items:center!important;gap:12px!important}.color-trigger-circle{width:20px!important;height:20px!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.2)!important;cursor:pointer!important;box-shadow:0 4px 10px #0000004d!important;transition:all .2s cubic-bezier(.4,0,.2,1)!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important}.color-btn-wrapper{width:32px!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important}.color-trigger-circle:hover{transform:scale(1.1)!important;border-color:#fff!important}.pillar-dropdown-container,.ui-details{position:relative;width:100%}.ui-details summary{list-style:none;outline:none;cursor:pointer}.ui-details summary::-webkit-details-marker{display:none}.pillar-dropdown-content{position:absolute;top:100%;right:0;z-index:100;background:#1e293b;border:1px solid var(--primary);border-radius:8px;padding:10px;margin-top:4px;box-shadow:0 10px 25px #00000080;max-height:200px;min-width:140px;overflow-y:auto;overflow-x:hidden}.pillar-dropdown-content::-webkit-scrollbar{width:4px}.pillar-dropdown-content::-webkit-scrollbar-track{background:transparent}.pillar-dropdown-content::-webkit-scrollbar-thumb{background:#3b82f64d;border-radius:2px}.pillar-badge-group{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.pillar-badge{padding:6px 0;background:#ffffff0d;border:1px solid var(--border);border-radius:6px;font-size:.7rem;color:var(--text-dim);cursor:pointer;transition:all .2s;text-align:center;white-space:nowrap}.pillar-badge:hover{background:#3b82f61a;border-color:var(--primary);color:#fff}.pillar-badge.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 0 10px #3b82f64d}.color-popover-panel{position:absolute!important;right:0!important;top:32px!important;z-index:1000!important;background:#1e293b!important;border:1px solid rgba(59,130,246,.5)!important;padding:10px!important;border-radius:12px!important;box-shadow:0 15px 50px #000000b3!important;display:flex!important;flex-direction:row!important;gap:10px!important;min-width:max-content!important;animation:popoverIn .2s cubic-bezier(.34,1.56,.64,1)}.popover-arrow{position:absolute!important;top:-5px!important;right:5px!important;width:10px!important;height:10px!important;background:#1e293b!important;border-top:1px solid rgba(59,130,246,.5)!important;border-left:1px solid rgba(59,130,246,.5)!important;transform:rotate(45deg)!important}.window-pill-dropdown{position:absolute;top:calc(100% + 4px);right:0;width:130px;background:#1e293b;border-radius:12px;border:1px solid var(--border);box-shadow:0 10px 30px #0009;padding:10px;z-index:1001;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.chip-btn{display:flex;align-items:center;justify-content:center;padding:8px 4px;background:#ffffff0d;border:1px solid var(--border);border-radius:8px;color:var(--text-dim);font-size:11px;cursor:pointer;transition:all .2s;font-weight:500}.chip-btn:hover:not(.disabled){background:#ffffff1a;border-color:#fff3}.chip-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 4px 12px #3b82f64d}.color-swatch-item{width:20px!important;height:20px!important;border-radius:50%!important;cursor:pointer!important;transition:all .2s!important;border:1px solid rgba(255,255,255,.1)!important}.color-swatch-item:hover{transform:scale(1.15)!important}.color-swatch-item.active{border:2px solid #fff!important;box-shadow:0 0 10px #3b82f680!important}.pos-relative{position:relative!important;display:inline-flex!important;z-index:100!important}.embedded-map-container{position:relative;height:280px;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:#000;margin-top:16px}.map-crosshair{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:10;pointer-events:none}.crosshair-icon{color:#ef4444;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));transform:translateY(-14px);display:flex;flex-direction:column;align-items:center;pointer-events:auto;cursor:pointer}.crosshair-icon .dot{width:4px;height:4px;background:#ef4444;border-radius:50%;margin:2px auto 0;box-shadow:0 0 10px #ef4444}.map-suggestions{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#1e293b;border-radius:16px;border:1px solid var(--border);box-shadow:0 20px 40px #00000080;max-height:280px;overflow-y:auto;z-index:1000}.map-suggestions::-webkit-scrollbar{width:4px}.map-suggestions::-webkit-scrollbar-track{background:transparent}.map-suggestions::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:2px}.map-suggestions::-webkit-scrollbar-thumb:hover{background:#fff3}.suggestion-item{padding:12px 14px;display:flex;gap:12px;align-items:center;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.05);transition:background .2s}.suggestion-item:hover{background:#ffffff0d}.suggestion-item .primary{color:#fff;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.suggestion-item .secondary{color:var(--text-dim);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ui-textarea{width:100%;background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px;color:#fff;font-size:.85rem;outline:none;transition:all .3s;resize:vertical;min-height:48px;line-height:1.5}.ui-textarea:focus{border-color:var(--primary);background:#ffffff0f}.report-block-card{transition:transform .2s,box-shadow .2s}.report-block-card:hover{transform:scale(1.01)}.image-placeholder{width:100%;aspect-ratio:16/9;background:#ffffff05;border:1px dashed rgba(255,255,255,.1);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--text-dim);cursor:pointer;transition:all .3s}.image-placeholder:hover{background:#ffffff0d;border-color:var(--primary);color:#fff}.captured-image{width:100%;border-radius:12px;border:1px solid rgba(255,255,255,.1);object-fit:cover}.template-btn{padding:8px;border-radius:10px;background:#ffffff0d;border:1px solid var(--border);color:var(--text-dim);display:flex;align-items:center;justify-content:center;transition:all .2s}.template-btn:hover{background:#ffffff1a;color:#fff}.template-btn.delete:hover{background:#ef44441a;color:#ef4444;border-color:#ef444433}.glow-btn{display:flex;align-items:center;justify-content:center;border-radius:14px;cursor:pointer;transition:all .3s}.glow-btn.blue{background:#3b82f61a;color:#60a5fa;border:1px solid rgba(59,130,246,.3)}@media(hover:hover){.glow-btn.blue:hover{background:#3b82f633;box-shadow:0 0 15px #3b82f666;border-color:#3b82f680}}.glow-btn.green{background:#10b9811a;color:#10b981;border:1px solid rgba(16,185,129,.3)}@media(hover:hover){.glow-btn.green:hover{background:#10b98133;box-shadow:0 0 15px #10b98166;border-color:#10b98180}}.glow-btn.purple{background:#8b5cf61a;color:#a78bfa;border:1px solid rgba(139,92,246,.3)}@media(hover:hover){.glow-btn.purple:hover{background:#8b5cf633;box-shadow:0 0 15px #8b5cf666;border-color:#8b5cf680}}
