#systemMenuEditor {
 font-family: Inter, Arial, sans-serif;
 color: #1f2937;
 background: #f8fafc;
 border: 1px solid #e5e7eb;
 border-radius: 12px;
 padding: 14px;
 box-sizing: border-box;
 min-height: 320px;
}

#systemMenuEditor * {
 box-sizing: border-box;
}

#systemMenuEditor .mme-toolbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 margin-bottom: 12px;
 padding-bottom: 10px;
 border-bottom: 1px solid #e5e7eb;
}

#systemMenuEditor .mme-title {
 font-size: 17px;
 font-weight: 600;
 letter-spacing: 0.01em;
 display: flex;
 align-items: center;
 gap: 10px;
}

#systemMenuEditor .mme-title i {
 color: #2563eb;
}

#systemMenuEditor .mme-toolbar-actions {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
}

#systemMenuEditor .mme-btn {
 border: 1px solid #d1d5db;
 background: #ffffff;
 color: #111827;
 border-radius: 8px;
 padding: 7px 11px;
 font-size: 12px;
 font-weight: 500;
 cursor: pointer;
 transition: all 0.15s ease;
 display: inline-flex;
 align-items: center;
 gap: 7px;
 text-decoration: none;
 line-height: 1;
}

#systemMenuEditor .mme-btn:hover {
 background: #f3f4f6;
 border-color: #9ca3af;
}

#systemMenuEditor .mme-btn-primary {
 background: #2563eb;
 border-color: #2563eb;
 color: #ffffff;
}

#systemMenuEditor .mme-btn-primary:hover {
 background: #1d4ed8;
 border-color: #1d4ed8;
}

#systemMenuEditor .mme-help {
 font-size: 12px;
 color: #6b7280;
 margin-bottom: 12px;
}

#systemMenuEditor .mme-empty {
 padding: 24px 16px;
 text-align: center;
 color: #6b7280;
 background: #ffffff;
 border: 1px dashed #d1d5db;
 border-radius: 10px;
}

#systemMenuEditor .mme-empty i {
 font-size: 20px;
 color: #9ca3af;
}

#systemMenuEditor .mme-tree {
 display: flex;
 flex-direction: column;
 gap: 10px;
}

#systemMenuEditor .mme-menu-block {
 background: #ffffff;
 border: 1px solid #e5e7eb;
 border-radius: 12px;
 overflow: hidden;
 box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

#systemMenuEditor .mme-menu-header {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 10px 12px;
 background: linear-gradient(to bottom, #ffffff, #f9fafb);
 border-bottom: 1px solid #eef2f7;
}

#systemMenuEditor .mme-menu-header.mme-collapsed {
 border-bottom: none;
}

#systemMenuEditor .mme-expander {
 width: 24px;
 height: 24px;
 border-radius: 6px;
 border: 1px solid transparent;
 background: transparent;
 cursor: pointer;
 color: #6b7280;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 flex: 0 0 auto;
 padding: 0;
}

#systemMenuEditor .mme-expander:hover {
 background: #f3f4f6;
 border-color: #e5e7eb;
 color: #111827;
}

#systemMenuEditor .mme-expander-empty {
 cursor: default;
}

#systemMenuEditor .mme-menu-icon,
#systemMenuEditor .mme-item-icon {
 width: 16px;
 text-align: center;
 color: #2563eb;
 flex: 0 0 auto;
}

#systemMenuEditor .mme-item-icon.mme-item-icon-page {
 color: #059669;
}

#systemMenuEditor .mme-item-icon.mme-item-icon-wordpress {
 color: #7c3aed;
}

#systemMenuEditor .mme-item-icon.mme-item-icon-link {
 color: #ea580c;
}

#systemMenuEditor .mme-item-icon.mme-item-icon-disabled {
 color: #9ca3af;
}

#systemMenuEditor .mme-node-main {
 min-width: 0;
 flex: 1 1 auto;
 cursor: default;
}

#systemMenuEditor .mme-node-title {
 font-size: 13px;
 font-weight: 600;
 color: #111827;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 line-height: 1.2;
}

#systemMenuEditor .mme-node-subtitle {
 font-size: 10px;
 color: #6b7280;
 margin-top: 1px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 line-height: 1.2;
}

#systemMenuEditor .mme-node-actions {
 display: flex;
 align-items: center;
 gap: 4px;
 flex: 0 0 auto;
}

#systemMenuEditor .mme-icon-btn {
 width: 26px;
 height: 26px;
 border-radius: 7px;
 border: 1px solid transparent;
 background: transparent;
 cursor: pointer;
 color: #6b7280;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 transition: all 0.15s ease;
 padding: 0;
}

#systemMenuEditor .mme-icon-btn:hover {
 background: #f3f4f6;
 border-color: #e5e7eb;
 color: #111827;
}

#systemMenuEditor .mme-icon-btn.mme-delete:hover {
 background: #fef2f2;
 border-color: #fecaca;
 color: #b91c1c;
}

#systemMenuEditor .mme-flat-list {
 list-style: none;
 margin: 0;
 padding: 6px 8px 8px 8px;
 min-height: 40px;
}

#systemMenuEditor .mme-item {
 list-style: none;
 margin: 4px 0 0 0;
 padding: 0;
}

#systemMenuEditor .mme-item-row {
 position: relative;
 display: flex;
 align-items: center;
 gap: 7px;
 background: #ffffff;
 border: 1px solid #e5e7eb;
 border-radius: 9px;
 padding: 6px 10px;
 min-height: 34px;
 transition: box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

#systemMenuEditor .mme-item-row:hover {
 border-color: #cbd5e1;
 box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

#systemMenuEditor .mme-item-row.mme-disabled {
 opacity: 0.66;
 background: #f9fafb;
}

#systemMenuEditor .mme-item-row.mme-child-target {
 border-color: #60a5fa;
 background: #eff6ff;
 box-shadow: inset 0 0 0 1px #bfdbfe;
}

#systemMenuEditor .mme-item-row.mme-child-target::before {
 content: "";
 position: absolute;
 left: 0;
 top: 3px;
 bottom: 3px;
 width: 4px;
 border-radius: 6px 0 0 6px;
 background: #2563eb;
}

#systemMenuEditor .mme-drag-handle {
 width: 22px;
 height: 22px;
 border-radius: 6px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 color: #9ca3af;
 cursor: move;
 flex: 0 0 auto;
}

#systemMenuEditor .mme-drag-handle:hover {
 background: #f3f4f6;
 color: #4b5563;
}

#systemMenuEditor .mme-empty-list {
 list-style: none;
 padding: 10px 12px;
 border: 1px dashed #d1d5db;
 border-radius: 9px;
 background: #fcfdff;
 color: #6b7280;
 font-size: 12px;
}

#systemMenuEditor .ui-sortable-helper .mme-item-row {
 box-shadow: 0 10px 25px rgba(0,0,0,0.10);
 border-color: #93c5fd;
}

#systemMenuEditor .mme-sort-placeholder {
 height: 34px;
 border: 1px dashed #93c5fd;
 background: #eff6ff;
 border-radius: 9px;
 margin-top: 4px;
}

#systemMenuEditor .mme-edit-menu,
#systemMenuEditor .mme-edit-item {
 user-select: none;
}

#systemMenuEditor .mme-edit-menu:hover .mme-node-title,
#systemMenuEditor .mme-edit-item:hover .mme-node-title {
 color: #2563eb;
}

#systemMenuEditor .mme-btn.mme-btn-active {
 background: #eff6ff;
 border-color: #93c5fd;
 color: #1d4ed8;
}

#systemMenuEditor .mme-btn.mme-btn-active:hover {
 background: #dbeafe;
 border-color: #60a5fa;
 color: #1d4ed8;
}

@media (max-width: 900px) {
 #systemMenuEditor .mme-menu-header,
 #systemMenuEditor .mme-item-row {
  align-items: flex-start;
 }

 #systemMenuEditor .mme-node-actions {
  flex-wrap: wrap;
 }

 #systemMenuEditor .mme-toolbar {
  flex-direction: column;
  align-items: stretch;
 }

 #systemMenuEditor .mme-toolbar-actions {
  justify-content: flex-start;
 }
}