*{box-sizing:border-box;margin:0;padding:0}:root{--rail-w: 56px;--topbar-h: 40px;--panel-w: 220px;--bg: #f4f6fb;--panel: #ffffff;--panel-2: #eef1f7;--border: #d8dde8;--text: #1c2330;--muted: #6b7488;--accent: #e5484d;--accent-soft: #fdecec;--danger: #d83a3a;--danger-soft: #fdeaea;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}html,body,#root{height:100%;background:var(--bg);color:var(--text);overflow:hidden}.app{position:relative;height:100vh;width:100vw;overflow:hidden}@supports (height: 100dvh){.app{height:100dvh}}.topnav{position:fixed;top:0;left:0;right:0;z-index:300;height:var(--topbar-h);background:var(--panel);border-bottom:1px solid var(--border);display:flex;align-items:stretch;padding:0 4px;-webkit-user-select:none;user-select:none}.menu{position:relative;display:flex;align-items:center}.menu>button{height:100%;padding:0 14px;background:transparent;border:none;color:var(--text);font-size:13px;cursor:pointer;border-radius:6px}.menu>button:hover,.menu.open>button{background:var(--accent-soft)}.menu-items{position:absolute;top:38px;left:0;min-width:220px;background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 30px #141e3c29;padding:6px;z-index:100}.menu-items button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 12px;background:transparent;border:none;color:var(--text);font-size:13px;text-align:left;cursor:pointer;border-radius:7px}.menu-items button:hover:not(:disabled){background:var(--accent-soft)}.menu-items button:disabled{color:var(--muted);cursor:not-allowed}.menu-items .shortcut{color:var(--muted);font-size:11px}.menu-sep{height:1px;background:var(--border);margin:6px 4px}.menu-custom{border-top:1px solid var(--border);padding:8px}.menu-custom .page-custom{display:flex;flex-direction:column;gap:8px}.menu-custom .page-custom-row{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}.menu-custom .page-custom-row input{width:52px;padding:5px 8px;border:1px solid var(--border);border-radius:7px;background:var(--panel-2);color:var(--text);font-size:12px}.menu-custom .page-custom button{padding:7px;background:var(--accent);border:none;border-radius:8px;color:#fff;font-size:12px;font-weight:600;cursor:pointer}.menu-custom .page-custom button:hover{filter:brightness(1.05)}.topnav .brand{display:flex;align-items:center;gap:8px;padding:0 14px 0 8px;font-weight:700;font-size:14px;color:var(--accent)}.topnav .spacer{flex:1}.topnav .saved-tag{display:flex;align-items:center;gap:6px;padding:0 14px;font-size:12px;color:var(--muted)}.body{position:absolute;top:var(--topbar-h);left:0;right:0;bottom:0}.rail{position:fixed;top:var(--topbar-h);left:0;bottom:0;z-index:200;width:var(--rail-w);background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0;overflow-y:auto}.rail-item{width:44px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:transparent;border:1px solid transparent;border-radius:12px;color:var(--text);cursor:pointer;transition:all .12s ease}.rail-item span{display:none}.rail-item:hover{background:var(--panel-2);border-color:var(--border)}.rail-item.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.rail-divider{width:36px;height:1px;background:var(--border);margin:6px 0}.rail-item.danger{color:var(--danger)}.rail-item.danger:hover{background:var(--danger-soft)}.canvas-wrap{position:absolute;top:0;left:var(--rail-w);right:0;bottom:0;background:#e9edf5;overflow:hidden;cursor:grab;touch-action:none}@media (min-width: 901px){.canvas-wrap.panel-open{right:var(--panel-w)}}.canvas-wrap .konvajs-content{touch-action:none}.canvas-wrap.panning{cursor:grabbing}.leaflet-controls{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column;align-items:stretch;width:36px;background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:0 6px 18px #141e3c24;overflow:hidden;-webkit-user-select:none;user-select:none}.leaflet-controls button{height:34px;background:transparent;border:none;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center}.leaflet-controls button:hover{background:var(--accent-soft)}.leaflet-controls .zoom-label{font-size:11px;font-weight:600;text-align:center;padding:4px 0;color:var(--muted);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.leaflet-controls .ctl-sep{height:1px;background:var(--border)}.status-bar{position:absolute;bottom:12px;left:12px;font-size:12px;color:var(--muted);background:#ffffffb3;border:1px solid var(--border);padding:6px 10px;border-radius:8px;pointer-events:none}.properties{position:fixed;top:var(--topbar-h);right:0;bottom:0;z-index:250;width:var(--panel-w);background:var(--panel);border-left:1px solid var(--border);padding:14px;overflow-y:auto}.properties .section-title{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted)}.properties .properties-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.properties .panel-close{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:transparent;border:none;border-radius:6px;color:var(--muted);cursor:pointer}.properties .panel-close:hover{background:var(--panel-2);color:var(--text)}.properties .hint{font-size:12px;color:var(--muted);line-height:1.5}.properties .prop-type{font-size:13px;font-weight:600;margin-bottom:12px;color:var(--text)}.properties .prop-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:12px;color:var(--muted)}.properties .prop-row input[type=number],.properties .prop-row input[type=color]{width:72px;padding:5px 8px;border:1px solid var(--border);border-radius:7px;background:var(--panel-2);color:var(--text);font-size:12px}.properties .prop-row input[type=color]{width:40px;height:30px;padding:2px;cursor:pointer}.properties .prop-actions{display:flex;flex-direction:column;gap:8px;margin-top:16px}.properties .prop-check{display:flex;align-items:center;gap:8px;margin-top:12px;color:var(--muted);font-size:12px;cursor:pointer}.properties .prop-actions button{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px;background:var(--panel-2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:12px;font-weight:600;cursor:pointer}.properties .prop-actions button:hover{background:var(--accent-soft);border-color:var(--accent)}.properties .prop-actions button.danger{color:var(--danger);background:var(--danger-soft);border-color:transparent}.panel-toggle{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:260;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:0 6px 18px #141e3c24;color:var(--text);cursor:pointer}.panel-toggle:hover{background:var(--accent-soft);border-color:var(--accent)}.toast{position:fixed;left:50%;bottom:22px;z-index:500;transform:translate(-50%);padding:9px 14px;border:1px solid var(--border);border-radius:9px;background:var(--text);color:#fff;box-shadow:0 8px 24px #141e3c33;font-size:12px;font-weight:500}@media (max-width: 900px){.rail{width:52px;padding:8px 0}.rail-item{width:42px;height:42px}.topnav{overflow:visible;white-space:nowrap;padding:0 2px}.topnav .menu>button{padding:0 8px;font-size:11px}.topnav .saved-tag{display:none}.canvas-wrap{left:52px}.properties{top:var(--topbar-h);width:240px;max-width:80vw;box-shadow:-10px 0 30px #141e3c2e}.leaflet-controls{right:10px;bottom:10px}.status-bar{bottom:10px;left:10px;font-size:11px}}@media (max-width: 480px){.rail-item{width:44px;height:44px}.status-bar .mm-text{display:none}}