* { margin: 0; padding: 0; box-sizing: border-box; }
  body { font-family: Poppins, system-ui, -apple-system, sans-serif; background: #f4f2ee; overflow: hidden; height: 100vh; width: 100vw; }
  .toolbar { position: fixed; top: 0; left: 0; right: 0; display: flex; gap: 4px; z-index: 100; background: white; padding: 6px 10px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); flex-wrap: wrap; align-items: center; }
  .toolbar.hidden { display: none; }
  .toolbar button, .toolbar select { padding: 5px 10px; border: 1px solid #ddd; border-radius: 7px; background: white; cursor: pointer; font-size: 11px; font-weight: 500; color: #333; transition: all 0.15s; white-space: nowrap; font-family: inherit; }
  .toolbar button:hover { background: #f0f0f0; }
  .toolbar button:disabled { opacity: 0.35; cursor: not-allowed; }
  .toolbar button.primary { background: #253d30; color: white; border-color: #253d30; }
  .toolbar button.primary:hover:not(:disabled) { background: #1c2d23; }
  .toolbar button.danger { color: #c0392b; }
  .toolbar button.danger:hover { background: #fdecea; }
  .toolbar button.save-btn { background: #253d30; color: white; border-color: #253d30; }
  .toolbar button.save-btn:hover { background: #1c2d23; }
  .toolbar button.small { padding: 5px 7px; font-size: 13px; font-weight: 700; min-width: 28px; }
  .toolbar .sep { width: 1px; height: 22px; background: #ddd; margin: 0 1px; }
  #mapSelect { min-width: 160px; max-width: 240px; padding: 5px 6px; font-size: 12px; font-weight: 600; color: #253d30; }
  .map-controls { display: flex; gap: 3px; align-items: center; }
  .search-bar { position: fixed; top: 50px; right: 12px; background: white; padding: 8px 12px; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); z-index: 110; display: none; align-items: center; gap: 8px; }
  .search-bar.show { display: flex; }
  .search-bar input { border: 1px solid #ddd; border-radius: 6px; padding: 5px 10px; font-size: 13px; width: 200px; font-family: inherit; outline: none; }
  .search-bar input:focus { border-color: #253d30; }
  .search-bar .count { font-size: 11px; color: #999; min-width: 40px; }
  .search-bar button { border: 1px solid #ddd; border-radius: 6px; background: white; padding: 4px 8px; cursor: pointer; font-size: 12px; }
  .search-bar button:hover { background: #f0f0f0; }
  .note-tooltip { position: fixed; background: #fffde7; border: 1px solid #f0e68c; border-radius: 8px; padding: 8px 12px; font-size: 12px; color: #333; max-width: 250px; z-index: 120; box-shadow: 0 2px 8px rgba(0,0,0,0.1); pointer-events: none; white-space: pre-wrap; display: none; }
  #canvas { width: 100%; height: 100%; cursor: grab; }
  #canvas:active { cursor: grabbing; }
  .node { cursor: pointer; user-select: none; }
  .node rect { transition: filter 0.15s; }
  .node:hover rect { filter: brightness(0.95); }
  .node.selected rect { stroke-width: 3; stroke: #253d30; stroke-dasharray: 6 3; }
  .node.search-hit rect { stroke-width: 3; stroke: #f39c12; }
  .node.reparent-target rect { stroke-width: 3; stroke: #e67e22; }
  .node text { pointer-events: none; }
  .edge { pointer-events: none; }
  .collapse-btn { cursor: pointer; }
  .collapse-btn:hover circle { fill: #ddd; }
  .instructions { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); background: white; padding: 6px 14px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); font-size: 11px; color: #666; z-index: 100; text-align: center; }
  .instructions.hidden { display: none; }
  .instructions kbd { background: #eee; padding: 1px 4px; border-radius: 3px; font-size: 10px; border: 1px solid #ccc; }
  .edit-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); z-index: 200; display: flex; align-items: center; justify-content: center; }
  .edit-box { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.2); min-width: 340px; }
  .edit-box input, .edit-box textarea { width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; margin-bottom: 8px; font-family: inherit; }
  .edit-box textarea { resize: vertical; min-height: 60px; }
  .edit-box label { font-size: 12px; color: #666; display: block; margin-bottom: 4px; margin-top: 8px; }
  .edit-box .actions { display: flex; gap: 8px; margin-top: 12px; justify-content: flex-end; }
  .edit-box .actions button { padding: 6px 16px; border: 1px solid #ddd; border-radius: 8px; cursor: pointer; font-size: 13px; }
  .edit-box .actions .save { background: #253d30; color: white; border-color: #253d30; }
  .context-menu { position: fixed; background: white; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); z-index: 150; padding: 6px 0; min-width: 200px; }
  .context-menu .item { padding: 7px 14px; cursor: pointer; font-size: 12px; color: #333; display: flex; align-items: center; gap: 7px; }
  .context-menu .item:hover { background: #f0f0f0; }
  .context-menu .item.danger { color: #c0392b; }
  .context-menu .separator { height: 1px; background: #eee; margin: 3px 0; }
  .context-menu .color-row { padding: 6px 14px; display: flex; gap: 5px; align-items: center; }
  .context-menu .color-row .label { font-size: 11px; color: #666; margin-right: 3px; }
  .color-swatch { width: 20px; height: 20px; border-radius: 5px; cursor: pointer; border: 2px solid transparent; transition: all 0.15s; }
  .color-swatch:hover { transform: scale(1.2); }
  .color-swatch.active { border-color: #333; }
  .context-menu .emoji-row { padding: 6px 14px; display: flex; gap: 4px; flex-wrap: wrap; max-width: 220px; }
  .emoji-pick { font-size: 16px; cursor: pointer; padding: 2px; border-radius: 4px; }
  .emoji-pick:hover { background: #e0e0e0; }
  .reparent-banner { position: fixed; top: 48px; left: 50%; transform: translateX(-50%); background: #e67e22; color: white; padding: 8px 18px; border-radius: 10px; font-size: 13px; font-weight: 600; z-index: 100; box-shadow: 0 4px 12px rgba(230,126,34,0.3); display: none; }
  .reparent-banner .cancel { margin-left: 10px; background: rgba(255,255,255,0.2); border: none; color: white; padding: 3px 8px; border-radius: 5px; cursor: pointer; font-size: 11px; }
  .toast { position: fixed; top: 48px; left: 50%; transform: translateX(-50%); background: #253d30; color: white; padding: 8px 18px; border-radius: 10px; font-size: 13px; font-weight: 500; z-index: 300; box-shadow: 0 4px 12px rgba(0,0,0,0.2); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
  .toast.show { opacity: 1; }
  .toast.error { background: #c0392b; }
  .loading-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.8); z-index: 400; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #253d30; font-weight: 600; }
  .spinner { width: 24px; height: 24px; border: 3px solid #ddd; border-top-color: #253d30; border-radius: 50%; animation: spin 0.8s linear infinite; margin-right: 12px; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .fs-exit { position: fixed; top: 12px; right: 12px; z-index: 110; background: rgba(0,0,0,0.5); color: white; border: none; padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; display: none; }
  .fs-exit:hover { background: rgba(0,0,0,0.7); }

  /* ===== HELP OVERLAY ===== */
  .help-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4); z-index: 500;
    display: none; align-items: center; justify-content: center;
    padding: 20px;
  }
  .help-overlay.show { display: flex; }
  .help-box {
    background: white; border-radius: 14px; padding: 24px 28px;
    max-width: 720px; width: 100%; max-height: 90vh; overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25); position: relative;
  }
  .help-box h1 { font-size: 18px; color: #253d30; margin-bottom: 14px; font-family: Poppins, sans-serif; }
  .help-box h2 { font-size: 13px; color: #253d30; margin-bottom: 6px; font-family: Poppins, sans-serif; text-transform: uppercase; letter-spacing: 0.5px; }
  .help-close { position: absolute; top: 14px; right: 16px; border: none; background: none; font-size: 18px; cursor: pointer; color: #999; }
  .help-close:hover { color: #333; }
  .help-section { margin-bottom: 14px; }
  .help-columns { display: flex; gap: 24px; }
  .help-columns .help-section { flex: 1; }
  .help-box table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: Poppins, sans-serif; }
  .help-box table td { padding: 3px 8px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
  .help-box table td:first-child { white-space: nowrap; width: 100px; color: #333; }
  .help-box table td:last-child { color: #666; }
  .help-box kbd { background: #f0f0f0; padding: 1px 5px; border-radius: 3px; font-size: 11px; border: 1px solid #ddd; font-family: Poppins, sans-serif; }
  .help-item { font-size: 12px; margin-bottom: 4px; font-family: Poppins, sans-serif; color: #666; }
  .help-item b { color: #333; }
  .help-box p { font-size: 11px; color: #888; line-height: 1.4; font-family: Poppins, sans-serif; }
  @media (max-width: 600px) { .help-columns { flex-direction: column; gap: 10px; } }

.toolbar .admin-link{font-size:12px;color:#253d30;border:1px solid #b6c1ac;border-radius:7px;padding:7px 9px;text-decoration:none}
.editor-brand{display:flex;align-items:center;gap:7px;text-decoration:none;color:#253d30;font-size:14px;font-weight:700;margin-right:8px}.editor-brand img{width:26px;height:26px}.editor-spacer{flex:1}#saveStatus,#accessMode{font-size:11px;color:#655e56;padding:3px 7px}#accessMode:empty{display:none}.toolbar{background:#f4f2ee;border-bottom:1px solid #d9d5cd}.toolbar button{font-size:12px}.toolbar button,.toolbar select{min-height:34px}#shareButton{background:#253d30;color:#f4f2ee}#accountButton{color:#253d30}.instructions{max-width:calc(100vw - 24px);text-align:center;font-size:10px}body.read-only .danger,body.read-only .save-btn,body.shared .map-controls{display:none}body.read-only .node{cursor:default}.loading-overlay{background:#f4f2eeeb}.edit-overlay .actions{margin:14px 0 0}#sharingDialog input,#sharingDialog select{font-size:13px}#sharingDialog .actions{margin:16px 0}.help-box p{font-size:13px;color:#655e56}.toolbar a{white-space:nowrap}.empty-actions{display:flex;gap:10px}
@media(max-width:700px){.toolbar{gap:4px;padding:6px}.toolbar button{padding:6px 8px}.editor-spacer{display:none}#mapSelect{min-width:110px;max-width:170px}.instructions{display:none}.help-box{padding:20px}.editor-brand{font-size:12px}.toolbar .sep{display:none}}