:root {
    --mantis-primary: #087dc1;
    --mantis-primary-dark: #286090;
    --mantis-primary-soft: #dcf6ff;
    --mantis-text: #262626;
    --mantis-text-secondary: #595959;
    --mantis-border: #d9d9d9;
    --mantis-divider: #f0f0f0;
    --mantis-surface: #ffffff;
    --mantis-background: #fafafb;
    --mantis-hover: #f5f5f5;
    --mantis-error: #d32f2f;
    --mantis-font: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.geEditor {
    background: var(--mantis-background);
    color: var(--mantis-text);
    font-family: var(--mantis-font);
    font-size: 14px;
    letter-spacing: 0;
}

.geMenubarContainer,
.geToolbarContainer,
.geSidebarContainer,
.geFooterContainer {
    font-family: var(--mantis-font);
}

.geMenubarContainer {
    background: var(--mantis-surface);
    border-bottom: 1px solid var(--mantis-divider);
}

.geMenubarContainer .geItem,
.geToolbar .geItem {
    border-radius: 4px;
    color: var(--mantis-text-secondary);
    font-size: 13px;
    font-weight: 500;
}

.geMenubarContainer .geItem:hover,
.geToolbarContainer .geItem:hover {
    background: var(--mantis-hover);
    color: var(--mantis-text);
}

.geToolbarContainer {
    background: var(--mantis-surface);
    border-bottom: 1px solid var(--mantis-divider);
}

.geToolbar {
    background: var(--mantis-surface);
    border-top: 0;
    box-shadow: none;
}

.geToolbarContainer .geSeparator {
    background: var(--mantis-divider);
}

.geToolbarContainer .geButton,
.geToolbarContainer .geLabel {
    border-radius: 4px;
    opacity: 0.72;
}

.geToolbarContainer .geButton:hover,
.geToolbarContainer .geLabel:hover {
    background: var(--mantis-hover);
    border-color: var(--mantis-border);
    opacity: 1;
}

.geToolbarContainer .geButton:active,
.geToolbarContainer .geLabel:active {
    background: var(--mantis-primary-soft);
    border-color: var(--mantis-primary);
}

.geDiagramContainer,
.geDiagramBackdrop {
    background-color: var(--mantis-background);
    border-color: var(--mantis-divider);
}

.geBackgroundPage {
    box-shadow: 0 1px 4px rgba(20, 20, 20, 0.08);
}

.geSidebarContainer {
    background: var(--mantis-surface);
    border-color: var(--mantis-divider);
}

.geSidebar {
    background: var(--mantis-surface);
    border-bottom-color: var(--mantis-divider);
}

.geSidebarContainer .geTitle {
    background: var(--mantis-surface);
    border-bottom-color: var(--mantis-divider);
    color: var(--mantis-text);
    font-family: var(--mantis-font);
    font-size: 13px;
    font-weight: 500;
}

.geSidebarContainer .geTitle:hover {
    background: var(--mantis-hover);
}

.geSidebar .geItem {
    border-radius: 4px;
}

.geSidebar .geItem:hover {
    background: var(--mantis-primary-soft);
    border-color: var(--mantis-primary) !important;
}

.geHsplit,
.geVsplit {
    background-color: var(--mantis-divider);
}

.geFooterContainer {
    background: var(--mantis-surface);
    border-top-color: var(--mantis-divider);
}

.geFooterContainer a {
    color: var(--mantis-primary);
    font-family: var(--mantis-font);
    font-size: 13px;
    font-weight: 500;
}

.geFooterContainer td {
    border-color: var(--mantis-divider);
}

.geFooterContainer td:hover {
    background: var(--mantis-hover);
}

.geBtn {
    min-width: 72px;
    height: 32px;
    padding: 0 12px;
    background: var(--mantis-surface);
    border: 1px solid var(--mantis-border);
    border-radius: 4px;
    box-shadow: none;
    color: var(--mantis-text);
    font-family: var(--mantis-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 30px;
    text-transform: none;
}

.geBtn:hover,
.geBlack:hover {
    background: var(--mantis-hover);
    border-color: #bfbfbf;
    box-shadow: none;
    color: var(--mantis-text);
}

.gePrimaryBtn,
.geBlueBtn {
    background: var(--mantis-primary);
    border-color: var(--mantis-primary);
    color: #ffffff !important;
}

.gePrimaryBtn:hover,
.geBlueBtn:hover {
    background: var(--mantis-primary-dark);
    border-color: var(--mantis-primary-dark);
    color: #ffffff !important;
}

.geDangerBtn {
    background: var(--mantis-error);
    border-color: var(--mantis-error);
    color: #ffffff;
}

.geBtn:focus-visible,
.geColorBtn:focus-visible {
    outline: 2px solid rgba(8, 125, 193, 0.25);
    outline-offset: 1px;
}

.geBtn:disabled,
.gePrimaryBtn:disabled,
.geDangerBtn:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.mxPopupMenu,
.geMenubarMenu,
.geToolbarMenu {
    background: var(--mantis-surface) !important;
    border: 1px solid var(--mantis-divider) !important;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(20, 20, 20, 0.12) !important;
    color: var(--mantis-text);
    font-family: var(--mantis-font);
}

.mxPopupMenuItem {
    color: var(--mantis-text-secondary);
    font-size: 13px;
}

.mxPopupMenuItemHover {
    background: var(--mantis-hover) !important;
    color: var(--mantis-text) !important;
}

.mxWindow {
    background: var(--mantis-surface) !important;
    border: 1px solid var(--mantis-divider) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(20, 20, 20, 0.14) !important;
    color: var(--mantis-text);
    font-family: var(--mantis-font);
}

.mxWindowTitle {
    background: var(--mantis-surface) !important;
    border-bottom: 1px solid var(--mantis-divider) !important;
    color: var(--mantis-text) !important;
    font-family: var(--mantis-font);
    font-size: 14px;
    font-weight: 600;
}

.geDialog,
.geDialog table,
.geDialog input,
.geDialog select,
.geDialog textarea {
    font-family: var(--mantis-font);
}

.geDialog input[type="text"],
.geDialog input[type="number"],
.geDialog select,
.geDialog textarea,
.mxWindow input[type="text"],
.mxWindow select,
.mxWindow textarea {
    border: 1px solid var(--mantis-border);
    border-radius: 4px;
    color: var(--mantis-text);
    font-size: 13px;
    outline: 0;
}

.geDialog input:focus,
.geDialog select:focus,
.geDialog textarea:focus,
.mxWindow input:focus,
.mxWindow select:focus,
.mxWindow textarea:focus {
    border-color: var(--mantis-primary);
    box-shadow: 0 0 0 2px rgba(8, 125, 193, 0.16);
}

.geSidebarContainer,
.geDiagramContainer,
.mxWindowPane {
    scrollbar-color: #bfbfbf transparent;
    scrollbar-width: thin;
}

.geSidebarContainer::-webkit-scrollbar,
.geDiagramContainer::-webkit-scrollbar,
.mxWindowPane::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.geSidebarContainer::-webkit-scrollbar-thumb,
.geDiagramContainer::-webkit-scrollbar-thumb,
.mxWindowPane::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border: 2px solid transparent;
    border-radius: 4px;
    background-clip: padding-box;
}