:root { --bg:#1e1e2e; --panel:#282840; --inner:#333355; --text:#e0e0f0; --sub:#a0a0c0; --accent:#5b9bd5; --danger:#e05570; --border:#3a3a5a; --radius:8px; }
    * { box-sizing: border-box; }
    html, body { margin:0; padding:0; height:100%; overflow:hidden; background:var(--bg); color:var(--text); font:14px "Segoe UI","Microsoft YaHei",sans-serif; }
    ::-webkit-scrollbar { width:7px; height:7px; }
    ::-webkit-scrollbar-track { background:var(--panel); }
    ::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
    .toolbar { display:flex; align-items:center; gap:4px; padding:8px 12px; background:var(--panel); border-bottom:1px solid var(--border); flex-shrink:0; overflow-x:auto; position:relative; z-index:2000; }
    .group { display:flex; gap:4px; padding-right:8px; margin-right:8px; border-right:1px solid var(--border); position:relative; z-index:2000; }
    .group:last-child { border:0; margin:0; padding:0; }
    .group.push-right { margin-left:auto; border-right:0; padding-right:0; margin-right:0; }
    /* 地名搜索框 */
    .search-group { border-right:0; }
    .searchbox { position:relative; display:flex; align-items:center; }
    .search-icon { position:absolute; left:8px; font-size:12px; opacity:.7; pointer-events:none; }
    #searchInput { width:170px; padding:6px 10px 6px 26px; border:1px solid var(--border); border-radius:var(--radius); background:var(--inner); color:var(--text); font-size:13px; outline:none; transition:border-color .15s, box-shadow .15s; }
    #searchInput:focus { border-color:#4a90d9; box-shadow:0 0 0 2px rgba(74,144,217,.2); }
    .search-dropdown { position:fixed; left:0; top:0; min-width:280px; max-width:420px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 8px 24px rgba(0,0,0,.45); max-height:340px; overflow-y:auto; display:none; z-index:10002; }
    .search-dropdown .s-item { padding:8px 12px; cursor:pointer; display:flex; flex-direction:column; gap:2px; }
    .search-dropdown .s-item:hover, .search-dropdown .s-item.active { background:var(--inner); }
    .s-item .s-name { font-size:13px; color:var(--text); }
    .s-item .s-addr { font-size:11px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .tool { display:flex; align-items:center; gap:4px; padding:6px 10px; background:transparent; color:var(--text); border:1px solid transparent; border-radius:var(--radius); cursor:pointer; transition:.15s; font-size:13px; position:relative; z-index:2000; }
    .tool:hover { background:var(--inner); border-color:var(--border); }
    .tool.active { background:var(--accent); color:#fff; border-color:var(--accent); }
    .tool .ic { font-size:16px; }
    .dropdown { position:relative; }
    .dpanel { position:fixed; min-width:150px; max-height:calc(100vh - 80px); overflow-y:auto; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 4px 16px rgba(0,0,0,.35); z-index:2001; padding:6px; display:none; }
    .dpanel.show { display:block; }
    .ditem { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:6px; cursor:pointer; }
    .ditem:hover { background:var(--inner); }
    .dsep { height:1px; background:var(--border); margin:6px 0; }
    /* 二级菜单：供应商 → 图层类型（垂直下展，避免溢出） */
    .ditem.submenu { position:relative; }
    .ditem.submenu > .dsub { position:absolute; left:0; top:100%; min-width:160px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 4px 16px rgba(0,0,0,.4); padding:6px; z-index:10002; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-4px); transition:opacity .12s, transform .12s; }
    .ditem.submenu:hover > .dsub, .ditem.submenu:focus-within > .dsub { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
    .dsub .ditem { padding:6px 10px; white-space:nowrap; }
    .app { display:flex; flex:1; min-height:0; }
    .canvas-area { flex:1; position:relative; background:#1a1a28; overflow:hidden; }
    .wrap { position:absolute; inset:0; }
    .wrap.pan, .wrap.pan canvas { cursor:grab !important; } .wrap.pan:active, .wrap.pan:active canvas { cursor:grabbing !important; }
    .wrap.cross, .wrap.cross canvas { cursor:crosshair !important; } .wrap.text, .wrap.text canvas { cursor:text !important; }
    canvas { position:absolute; top:0; left:0; }
    #mainCanvas { z-index:1; } #overlayCanvas { z-index:2; pointer-events:none; }
    #tileLayer { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
    #tileLayer img { position:absolute; user-select:none; -webkit-user-drag:none; }
    /* 搜索定位标记（红色圆点跳两下约1s后消失） */
    #searchMarker { position:absolute; left:50%; top:50%; z-index:4; width:0; height:0; pointer-events:none; }
    #searchMarker .sm-dot {
      position:absolute; left:0; top:0; width:26px; height:26px; margin:-13px 0 0 -13px;
      border-radius:50%; background:rgba(255,40,40,0.9); border:3px solid #fff;
      box-shadow:0 0 14px rgba(255,40,40,0.85), 0 0 0 4px rgba(255,40,40,0.25);
      animation:sm-jump 0.5s ease-in-out 2;
    }
    @keyframes sm-jump {
      0%,100% { transform:translateY(0) scale(1); }
      35% { transform:translateY(-26px) scale(1.12); }
      70% { transform:translateY(0) scale(0.96); }
    }

    .upper-canvas { z-index:3 !important; pointer-events:auto !important; }
    .coord { position:absolute; bottom:10px; left:10px; padding:6px 12px; background:rgba(40,40,64,.9); border:1px solid var(--border); border-radius:var(--radius); color:var(--sub); font-size:12px; z-index:10; pointer-events:none; }
    .zoombar { position:absolute; bottom:10px; right:10px; display:flex; gap:4px; z-index:10; }
    .zbtn { width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:rgba(40,40,64,.9); border:1px solid var(--border); color:var(--text); border-radius:6px; cursor:pointer; font-size:16px; }
    .zval { min-width:50px; display:flex; align-items:center; justify-content:center; background:rgba(40,40,64,.9); border:1px solid var(--border); border-radius:6px; font-size:12px; color:var(--sub); }
    .side { width:280px; min-width:200px; max-width:600px; background:var(--panel); border-left:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; z-index:100; position:relative; }
    .resize-handle { position:absolute; left:-4px; top:0; bottom:0; width:8px; cursor:col-resize; z-index:101; }
    .resize-handle:hover { background:rgba(91,155,213,.2); }
    .header { padding:12px 14px; font-weight:600; border-bottom:1px solid var(--border); }
    .body { flex:1; overflow-y:auto; padding:10px; }
    .layers { display:flex; flex-direction:column; gap:6px; }
    .row { display:flex; align-items:center; gap:6px; padding:8px 10px; background:var(--inner); border:1px solid transparent; border-radius:6px; cursor:pointer; transition:.15s; }
    .row:hover { border-color:var(--border); }
    .row.active { border-color:var(--accent); background:rgba(91,155,213,.12); }
    .row.off { opacity:.5; }
    .row.expanded { border-color:var(--accent); }
    .drag { color:var(--sub); font-size:12px; cursor:grab; }
    .eye { color:var(--sub); font-size:14px; cursor:pointer; flex-shrink:0; }
    .eye.off { color:var(--danger); }
    .lname { flex:1; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .fold { color:var(--sub); font-size:12px; cursor:pointer; flex-shrink:0; width:18px; text-align:center; transition:.15s; }
    .fold:hover { color:var(--text); }
    .fold-text { color:var(--sub); font-size:11px; cursor:pointer; flex-shrink:0; padding:0 4px; user-select:none; }
    .fold-text:hover { color:var(--text); }
    .edit { color:var(--sub); font-size:12px; cursor:pointer; flex-shrink:0; opacity:.7; }
    .edit:hover { color:var(--accent); opacity:1; }
    .ldel { color:var(--danger); opacity:.7; cursor:pointer; flex-shrink:0; }
    .ldel:hover { opacity:1; }
    .ldel.disabled { color:var(--sub); opacity:.3; cursor:not-allowed; }
    .children { margin-left:16px; padding:4px 0 4px 10px; border-left:1px solid var(--border); display:flex; flex-direction:column; gap:4px; }
    .children .child { display:flex; align-items:center; gap:6px; padding:5px 8px; border-radius:4px; font-size:12px; color:var(--sub); background:var(--panel); cursor:pointer; }
    .children .child:hover { background:var(--inner); color:var(--text); }
    .foot { padding:10px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:6px; }
    .btn { padding:8px; background:var(--inner); color:var(--text); border:1px solid var(--border); border-radius:6px; cursor:pointer; font-size:13px; }
    .btn:hover { background:var(--border); }
    .btn.primary { background:var(--accent); border-color:var(--accent); }
    .btn.primary:hover { filter:brightness(1.1); }
    .row2 { display:flex; gap:6px; } .row2 .btn { flex:1; }
    .toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); padding:10px 18px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); z-index:2000; opacity:0; transition:.25s; pointer-events:none; }
    .toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
    .modal { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1500; display:none; align-items:center; justify-content:center; }
    .modal.show { display:flex; }
    .mbox { width:340px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px; }
    .mtitle { font-size:16px; font-weight:600; margin-bottom:12px; }
    .mbody { margin-bottom:16px; }
    .minput { width:100%; padding:8px 12px; background:var(--inner); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:14px; }
    .minput:focus { outline:none; border-color:var(--accent); }
    .macts { display:flex; justify-content:flex-end; gap:10px; }
    .mbtn { padding:7px 14px; border-radius:6px; border:1px solid var(--border); cursor:pointer; font-size:13px; }
    .mbtn.cancel { background:var(--inner); color:var(--text); }
    .mbtn.ok { background:var(--accent); border-color:var(--accent); color:#fff; }
    .marker-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:4px; padding:4px 0; }
    .marker-item { display:flex; align-items:center; justify-content:center; font-size:20px; padding:3px; border-radius:4px; cursor:pointer; }
    .marker-item:hover { background:var(--inner); }
    .marker-cat { font-size:11px; color:var(--sub); padding:4px 0; }
    .srow { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
    .srow label { font-size:12px; color:var(--sub); }
    .srow .btn { width:auto; display:inline-block; margin-right:6px; }
    .srow .btn.active { background:var(--accent); border-color:var(--accent); }
    input[type="color"] { width:100%; height:32px; border:1px solid var(--border); border-radius:6px; background:var(--inner); cursor:pointer; }
    input[type="range"] { width:100%; }
    .tooltip { position:fixed; padding:6px 10px; background:var(--panel); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:12px; z-index:3000; pointer-events:none; opacity:0; transition:opacity .2s; white-space:nowrap; box-shadow:0 4px 12px rgba(0,0,0,.35); max-width:260px; }
    .tooltip.show { opacity:1; }
    .frame-table { width:100%; border-collapse:collapse; font-size:13px; }
    .frame-table th, .frame-table td { border:1px solid var(--border); padding:4px; text-align:left; }
    .frame-table .tcell { width:100%; border:none; background:transparent; color:var(--text); outline:none; }