html[data-nav-style="minimal"] {
    --ce-nav-bg: #ffffff;
    --ce-nav-fg: #111827;
    --ce-nav-muted: #6b7280;
    --ce-nav-border: #e5e7eb;
    --ce-nav-hover: #f3f4f6;
    --ce-nav-icon-bg: #f3f4f6;
    --ce-nav-icon-fg: #4b5563;
    --ce-nav-accent: var(--primary, #2563eb);
    --ce-nav-accent-2: var(--accent-purple, #06b6d4);
    --ce-nav-active-bg: color-mix(in srgb, var(--ce-nav-accent) 10%, transparent);
    --ce-nav-active-fg: var(--ce-nav-accent);
    --ce-nav-active-icon-bg: color-mix(in srgb, var(--ce-nav-accent) 16%, transparent);
    --ce-nav-group-bg: #f9fafb;
    --ce-nav-group-border: #e5e7eb;
    --ce-nav-quick-bg: var(--ce-nav-accent);
    --ce-nav-quick-fg: #ffffff;
    --ce-nav-profile-bg: var(--ce-nav-accent);
    --ce-nav-profile-fg: #ffffff;
    --ce-nav-menu-bg: rgba(255, 255, 255, .97);
    --ce-nav-menu-fg: #111827;
    --ce-nav-menu-muted: #6b7280;
    --ce-nav-menu-border: #e5e7eb;
    --ce-nav-menu-hover: #f3f4f6;
    --ce-nav-menu-active-bg: color-mix(in srgb, var(--ce-nav-accent) 12%, transparent);
    --ce-nav-menu-active-fg: var(--ce-nav-accent);
    --ce-nav-menu-shadow: 0 20px 50px -28px rgba(15, 23, 42, .35);
}

html[data-theme="dark"][data-nav-style="minimal"] {
    --ce-nav-bg: #0f172a;
    --ce-nav-fg: #f8fafc;
    --ce-nav-muted: #94a3b8;
    --ce-nav-border: rgba(255, 255, 255, .12);
    --ce-nav-hover: rgba(255, 255, 255, .08);
    --ce-nav-icon-bg: rgba(255, 255, 255, .08);
    --ce-nav-icon-fg: #cbd5e1;
    --ce-nav-accent: #60a5fa;
    --ce-nav-accent-2: #22d3ee;
    --ce-nav-active-bg: rgba(96, 165, 250, .18);
    --ce-nav-active-fg: #ffffff;
    --ce-nav-active-icon-bg: rgba(96, 165, 250, .24);
    --ce-nav-group-bg: rgba(255, 255, 255, .06);
    --ce-nav-group-border: rgba(255, 255, 255, .12);
    --ce-nav-quick-bg: linear-gradient(135deg, #60a5fa, #22d3ee);
    --ce-nav-quick-fg: #0f172a;
    --ce-nav-profile-bg: linear-gradient(135deg, #60a5fa, #22d3ee);
    --ce-nav-profile-fg: #0f172a;
    --ce-nav-menu-bg: rgba(15, 23, 42, .98);
    --ce-nav-menu-fg: #e2e8f0;
    --ce-nav-menu-muted: #94a3b8;
    --ce-nav-menu-border: rgba(255, 255, 255, .10);
    --ce-nav-menu-hover: rgba(255, 255, 255, .08);
    --ce-nav-menu-active-bg: rgba(96, 165, 250, .16);
    --ce-nav-menu-active-fg: #bfdbfe;
    --ce-nav-menu-shadow: 0 22px 60px -28px rgba(0, 0, 0, .70);
}

html[data-nav-style="outline"] {
    --ce-nav-bg: rgba(255, 255, 255, .94);
    --ce-nav-fg: #0f172a;
    --ce-nav-muted: #64748b;
    --ce-nav-border: color-mix(in srgb, var(--primary, #2563eb) 40%, #e2e8f0);
    --ce-nav-hover: rgba(15, 23, 42, .06);
    --ce-nav-icon-bg: rgba(15, 23, 42, .04);
    --ce-nav-icon-fg: #475569;
    --ce-nav-accent: var(--primary, #2563eb);
    --ce-nav-accent-2: var(--accent-purple, #06b6d4);
    --ce-nav-active-bg: color-mix(in srgb, var(--primary, #2563eb) 10%, transparent);
    --ce-nav-active-fg: var(--primary, #2563eb);
    --ce-nav-active-icon-bg: color-mix(in srgb, var(--primary, #2563eb) 16%, transparent);
    --ce-nav-group-bg: transparent;
    --ce-nav-group-border: color-mix(in srgb, var(--primary, #2563eb) 28%, #e2e8f0);
    --ce-nav-quick-bg: var(--primary, #2563eb);
    --ce-nav-quick-fg: #ffffff;
    --ce-nav-profile-bg: var(--primary, #2563eb);
    --ce-nav-profile-fg: #ffffff;
    --ce-nav-menu-bg: rgba(255, 255, 255, .97);
    --ce-nav-menu-fg: #0f172a;
    --ce-nav-menu-muted: #64748b;
    --ce-nav-menu-border: color-mix(in srgb, var(--primary, #2563eb) 24%, #e2e8f0);
    --ce-nav-menu-hover: rgba(15, 23, 42, .06);
    --ce-nav-menu-active-bg: color-mix(in srgb, var(--primary, #2563eb) 12%, transparent);
    --ce-nav-menu-active-fg: var(--primary, #2563eb);
    --ce-nav-menu-shadow: 0 20px 50px -28px rgba(15, 23, 42, .35);
}

html[data-theme="dark"][data-nav-style="outline"] {
    --ce-nav-bg: rgba(15, 23, 42, .94);
    --ce-nav-fg: #f8fafc;
    --ce-nav-muted: #94a3b8;
    --ce-nav-border: color-mix(in srgb, #7dd3fc 45%, rgba(255, 255, 255, .12));
    --ce-nav-hover: rgba(255, 255, 255, .08);
    --ce-nav-icon-bg: rgba(255, 255, 255, .08);
    --ce-nav-icon-fg: #cbd5e1;
    --ce-nav-accent: #7dd3fc;
    --ce-nav-accent-2: #a78bfa;
    --ce-nav-active-bg: rgba(125, 211, 252, .18);
    --ce-nav-active-fg: #ffffff;
    --ce-nav-active-icon-bg: rgba(125, 211, 252, .24);
    --ce-nav-group-bg: transparent;
    --ce-nav-group-border: rgba(125, 211, 252, .30);
    --ce-nav-quick-bg: linear-gradient(135deg, #38bdf8, #a78bfa);
    --ce-nav-quick-fg: #0f172a;
    --ce-nav-profile-bg: linear-gradient(135deg, #38bdf8, #a78bfa);
    --ce-nav-profile-fg: #0f172a;
    --ce-nav-menu-bg: rgba(15, 23, 42, .98);
    --ce-nav-menu-fg: #e2e8f0;
    --ce-nav-menu-muted: #94a3b8;
    --ce-nav-menu-border: rgba(125, 211, 252, .18);
    --ce-nav-menu-hover: rgba(255, 255, 255, .08);
    --ce-nav-menu-active-bg: rgba(125, 211, 252, .16);
    --ce-nav-menu-active-fg: #bfdbfe;
    --ce-nav-menu-shadow: 0 22px 60px -28px rgba(0, 0, 0, .70);
}

html[data-nav-style="outline"] .navbar-modern,
html[data-nav-style="outline"] #mainNav {
    border-bottom-width: 2px !important;
}

html[data-nav-pos="left"][data-nav-style="outline"] .navbar-modern,
html[data-nav-pos="left"][data-nav-style="outline"] #mainNav {
    border-right-width: 2px !important;
}

html[data-nav-pos="right"][data-nav-style="outline"] .navbar-modern,
html[data-nav-pos="right"][data-nav-style="outline"] #mainNav {
    border-left-width: 2px !important;
}

html[data-nav-pos="bottom"][data-nav-style="outline"] .navbar-modern,
html[data-nav-pos="bottom"][data-nav-style="outline"] #mainNav {
    border-top-width: 2px !important;
}

html[data-nav-style="aurora"] {
    --ce-nav-bg: linear-gradient(120deg, #06b6d4, #8b5cf6 55%, #ec4899);
    --ce-nav-fg: #ffffff;
    --ce-nav-muted: rgba(255, 255, 255, .76);
    --ce-nav-border: rgba(255, 255, 255, .22);
    --ce-nav-hover: rgba(255, 255, 255, .16);
    --ce-nav-icon-bg: rgba(255, 255, 255, .14);
    --ce-nav-icon-fg: #ffffff;
    --ce-nav-accent: #ffffff;
    --ce-nav-accent-2: rgba(255, 255, 255, .85);
    --ce-nav-active-bg: rgba(15, 23, 42, .28);
    --ce-nav-active-fg: #ffffff;
    --ce-nav-active-icon-bg: rgba(15, 23, 42, .34);
    --ce-nav-group-bg: rgba(255, 255, 255, .14);
    --ce-nav-group-border: rgba(255, 255, 255, .24);
    --ce-nav-quick-bg: rgba(255, 255, 255, .92);
    --ce-nav-quick-fg: #0f172a;
    --ce-nav-profile-bg: rgba(255, 255, 255, .94);
    --ce-nav-profile-fg: #0f172a;
    --ce-nav-menu-bg: rgba(255, 255, 255, .96);
    --ce-nav-menu-fg: #0f172a;
    --ce-nav-menu-muted: #52647a;
    --ce-nav-menu-border: rgba(15, 23, 42, .10);
    --ce-nav-menu-hover: rgba(15, 23, 42, .06);
    --ce-nav-menu-active-bg: rgba(139, 92, 246, .14);
    --ce-nav-menu-active-fg: #7c3aed;
    --ce-nav-menu-shadow: 0 22px 60px -28px rgba(15, 23, 42, .45);
}

html[data-theme="dark"][data-nav-style="aurora"] {
    --ce-nav-bg: linear-gradient(120deg, #0e7490, #4f46e5 55%, #9d174d);
    --ce-nav-fg: #f8fafc;
    --ce-nav-muted: rgba(248, 250, 252, .74);
    --ce-nav-border: rgba(255, 255, 255, .18);
    --ce-nav-hover: rgba(255, 255, 255, .16);
    --ce-nav-icon-bg: rgba(255, 255, 255, .14);
    --ce-nav-icon-fg: #ffffff;
    --ce-nav-accent: #7dd3fc;
    --ce-nav-accent-2: #f9a8d4;
    --ce-nav-active-bg: rgba(8, 15, 30, .34);
    --ce-nav-active-fg: #ffffff;
    --ce-nav-active-icon-bg: rgba(8, 15, 30, .42);
    --ce-nav-group-bg: rgba(255, 255, 255, .12);
    --ce-nav-group-border: rgba(255, 255, 255, .20);
    --ce-nav-quick-bg: linear-gradient(135deg, #7dd3fc, #f9a8d4);
    --ce-nav-quick-fg: #0f172a;
    --ce-nav-profile-bg: linear-gradient(135deg, #7dd3fc, #f9a8d4);
    --ce-nav-profile-fg: #0f172a;
    --ce-nav-menu-bg: rgba(15, 23, 42, .90);
    --ce-nav-menu-fg: #e8f4ff;
    --ce-nav-menu-muted: #a7c1d8;
    --ce-nav-menu-border: rgba(125, 211, 252, .18);
    --ce-nav-menu-hover: rgba(125, 211, 252, .12);
    --ce-nav-menu-active-bg: rgba(125, 211, 252, .20);
    --ce-nav-menu-active-fg: #ffffff;
    --ce-nav-menu-shadow: 0 22px 60px -28px rgba(0, 0, 0, .72);
}

html[data-nav-style="slate"] {
    --ce-nav-bg: linear-gradient(120deg, #1e293b, #334155);
    --ce-nav-fg: #f8fafc;
    --ce-nav-muted: #cbd5e1;
    --ce-nav-border: rgba(255, 255, 255, .14);
    --ce-nav-hover: rgba(255, 255, 255, .10);
    --ce-nav-icon-bg: rgba(255, 255, 255, .10);
    --ce-nav-icon-fg: #e2e8f0;
    --ce-nav-accent: #38bdf8;
    --ce-nav-accent-2: #a78bfa;
    --ce-nav-active-bg: rgba(56, 189, 248, .22);
    --ce-nav-active-fg: #ffffff;
    --ce-nav-active-icon-bg: rgba(56, 189, 248, .28);
    --ce-nav-group-bg: rgba(255, 255, 255, .08);
    --ce-nav-group-border: rgba(255, 255, 255, .14);
    --ce-nav-quick-bg: linear-gradient(135deg, #38bdf8, #a78bfa);
    --ce-nav-quick-fg: #0f172a;
    --ce-nav-profile-bg: linear-gradient(135deg, #38bdf8, #a78bfa);
    --ce-nav-profile-fg: #0f172a;
    --ce-nav-menu-bg: rgba(15, 23, 42, .96);
    --ce-nav-menu-fg: #e2e8f0;
    --ce-nav-menu-muted: #94a3b8;
    --ce-nav-menu-border: rgba(255, 255, 255, .12);
    --ce-nav-menu-hover: rgba(255, 255, 255, .08);
    --ce-nav-menu-active-bg: rgba(56, 189, 248, .20);
    --ce-nav-menu-active-fg: #ffffff;
    --ce-nav-menu-shadow: 0 22px 60px -28px rgba(0, 0, 0, .70);
}

html[data-theme="dark"][data-nav-style="slate"] {
    --ce-nav-bg: linear-gradient(120deg, #0f172a, #1e293b);
    --ce-nav-fg: #f8fafc;
    --ce-nav-muted: #94a3b8;
    --ce-nav-border: rgba(255, 255, 255, .12);
    --ce-nav-hover: rgba(255, 255, 255, .10);
    --ce-nav-icon-bg: rgba(255, 255, 255, .10);
    --ce-nav-icon-fg: #e2e8f0;
    --ce-nav-accent: #38bdf8;
    --ce-nav-accent-2: #a78bfa;
    --ce-nav-active-bg: rgba(56, 189, 248, .20);
    --ce-nav-active-fg: #ffffff;
    --ce-nav-active-icon-bg: rgba(56, 189, 248, .26);
    --ce-nav-group-bg: rgba(255, 255, 255, .06);
    --ce-nav-group-border: rgba(255, 255, 255, .12);
    --ce-nav-quick-bg: linear-gradient(135deg, #38bdf8, #a78bfa);
    --ce-nav-quick-fg: #0f172a;
    --ce-nav-profile-bg: linear-gradient(135deg, #38bdf8, #a78bfa);
    --ce-nav-profile-fg: #0f172a;
    --ce-nav-menu-bg: rgba(8, 15, 30, .97);
    --ce-nav-menu-fg: #e2e8f0;
    --ce-nav-menu-muted: #94a3b8;
    --ce-nav-menu-border: rgba(255, 255, 255, .10);
    --ce-nav-menu-hover: rgba(255, 255, 255, .08);
    --ce-nav-menu-active-bg: rgba(56, 189, 248, .18);
    --ce-nav-menu-active-fg: #ffffff;
    --ce-nav-menu-shadow: 0 22px 60px -28px rgba(0, 0, 0, .72);
}