/* Final lightweight purple brand pass: keep inspection surfaces readable and accents vivid. */
.mai-pearl-app .mai-nav-item {
    border-color: rgba(150, 163, 210, 0.3) !important;
    background: linear-gradient(135deg, rgba(28, 34, 69, 0.94), rgba(43, 50, 92, 0.9)) !important;
    box-shadow: inset 0 1px 0 rgba(216, 224, 255, 0.14), 0 8px 24px rgba(7, 10, 28, 0.34) !important;
    color: #dbe2ff !important;
}

.mai-pearl-app .mai-nav-item:hover {
    border-color: rgba(173, 190, 255, 0.78) !important;
    background: linear-gradient(135deg, rgba(50, 63, 119, 0.98), rgba(73, 87, 160, 0.94)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 10px 28px rgba(58, 82, 164, 0.3) !important;
    color: #ffffff !important;
}

.mai-pearl-app .mai-nav-item-active {
    border-color: rgba(227, 216, 255, 0.9) !important;
    background: linear-gradient(135deg, #6040c4, #8b6de5 54%, #b8a5f0) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 2px rgba(139, 109, 229, 0.24), 0 12px 30px rgba(96, 64, 196, 0.4) !important;
    color: #ffffff !important;
}

html:not(.dark) .mai-pearl-app .mai-nav-item {
    border-color: rgba(102, 116, 171, 0.24) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(243, 246, 255, 0.96)) !important;
    color: #45527e !important;
}

html:not(.dark) .mai-pearl-app .mai-nav-item:hover,
html:not(.dark) .mai-pearl-app .mai-nav-item-active {
    border-color: rgba(85, 105, 174, 0.62) !important;
    background: linear-gradient(135deg, #e8edff, #cbd7ff) !important;
    color: #30406f !important;
}

.mai-sketch-design-modal .ant-modal-content,
.mai-template-selection-modal .ant-modal-content {
    border: 1px solid var(--mai-border-default) !important;
    background: linear-gradient(145deg, var(--mai-surface-default) 0%, var(--mai-surface-hover) 58%, var(--mai-surface-subtle) 100%) !important;
    box-shadow: 0 24px 70px rgba(9, 2, 24, 0.58), inset 0 1px 0 rgba(233, 213, 255, 0.14) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html:not(.dark) .mai-sketch-design-modal .ant-modal-content,
html:not(.dark) .mai-template-selection-modal .ant-modal-content {
    border-color: var(--mai-border-default) !important;
    background: linear-gradient(145deg, var(--mai-surface-default), var(--mai-surface-page) 58%, var(--mai-surface-subtle)) !important;
    color: var(--mai-text-primary);
}

.mai-sketch-design-modal .ant-modal-header,
.mai-sketch-design-modal .ant-modal-body,
.mai-template-selection-modal .ant-modal-header,
.mai-template-selection-modal .ant-modal-body {
    background: transparent !important;
}

.mai-sketch-design-modal .ant-modal-body .ant-btn-primary,
.mai-template-selection-modal .ant-modal-body .ant-btn-primary {
    border: 1px solid var(--mai-border-strong) !important;
    background: linear-gradient(120deg, var(--mai-brand-primary-active), var(--mai-brand-primary) 52%, var(--mai-brand-primary-hover)) !important;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--mai-brand-primary-active) 34%, transparent) !important;
    color: var(--mai-brand-on-primary) !important;
}

.mai-sketch-design-modal .ant-modal-body .ant-btn-primary:hover,
.mai-template-selection-modal .ant-modal-body .ant-btn-primary:hover {
    background: linear-gradient(120deg, var(--mai-brand-primary), var(--mai-brand-primary-hover) 52%, var(--mai-text-secondary)) !important;
}

.mai-sketch-design-modal .ant-modal-body .ant-btn:not(.ant-btn-primary),
.mai-template-selection-modal .ant-modal-body .ant-btn:not(.ant-btn-primary) {
    border-color: var(--mai-border-default);
    background: color-mix(in srgb, var(--mai-brand-primary) 8%, transparent);
    color: var(--mai-text-secondary);
}

html:not(.dark) .mai-sketch-design-modal .ant-modal-body .ant-btn:not(.ant-btn-primary),
html:not(.dark) .mai-template-selection-modal .ant-modal-body .ant-btn:not(.ant-btn-primary) {
    color: #4a3a9b;
    background: rgba(241, 232, 255, 0.72);
}

.mai-sketch-design-modal .ant-modal-body button[class*="rounded-full"],
.mai-template-selection-modal .ant-modal-body button[class*="rounded-full"] {
    border: 1px solid var(--mai-border-default);
    background: var(--mai-surface-subtle);
    color: var(--mai-text-secondary);
}

.mai-sketch-design-modal .ant-modal-body button[class*="rounded-full"]:hover,
.mai-sketch-design-modal .ant-modal-body button[class*="rounded-full"].bg-primary,
.mai-template-selection-modal .ant-modal-body button[class*="rounded-full"]:hover,
.mai-template-selection-modal .ant-modal-body button[class*="rounded-full"].bg-primary {
    border-color: rgba(233, 213, 255, 0.72) !important;
    background: linear-gradient(120deg, var(--mai-brand-primary-active), var(--mai-brand-primary-hover)) !important;
    color: var(--mai-brand-on-primary) !important;
}

.mai-sketch-design-modal .ant-modal-body div[class*="border-dashed"],
.mai-template-selection-modal .ant-modal-body div[class*="border-dashed"] {
    border-color: var(--mai-border-default) !important;
    background: color-mix(in srgb, var(--mai-brand-primary) 12%, transparent) !important;
}

.mai-sketch-design-modal .mai-sketch-canvas {
    background: #ffffff !important;
}

.mai-sketch-design-modal .ant-modal-close,
.mai-template-selection-modal .ant-modal-close {
    color: rgba(233, 213, 255, 0.72) !important;
}

html:not(.dark) .mai-sketch-design-modal .ant-modal-close,
html:not(.dark) .mai-template-selection-modal .ant-modal-close {
    color: rgba(76, 29, 149, 0.62) !important;
}