:root {
    --ui-brand: #0369a1;
    --ui-brand-dark: #075985;
    --ui-ink: #152233;
    --ui-muted: #607184;
    --ui-border: #dce5ee;
    --ui-canvas: #f5f8fb;
    --ui-radius: 12px;
    --ui-shadow: 0 8px 24px rgba(15, 35, 58, 0.055);
}

body.site-layout {
    background: var(--ui-canvas) !important;
    color: var(--ui-ink);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

html:not(.dark) body.site-layout,
html:not(.dark) body.dashboard-layout,
html:not(.dark) body.admin-layout {
    background-color: var(--ui-canvas) !important;
    background-image: none !important;
}

.site-header {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: var(--ui-border) !important;
    box-shadow: 0 1px 8px rgba(15, 35, 58, 0.035);
}

html:not(.dark) .site-header {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: var(--ui-border) !important;
}

.site-header .site-desktop-nav a,
.site-header .site-desktop-nav button {
    border-radius: 9px !important;
}

.site-header .site-header-create {
    border: 1px solid var(--ui-brand) !important;
    border-radius: 9px !important;
    background: var(--ui-brand) !important;
    box-shadow: none !important;
}

.site-header .site-header-create:hover {
    background: var(--ui-brand-dark) !important;
}

.site-layout main > .min-h-screen {
    background-color: var(--ui-canvas) !important;
    background-image: none !important;
}

.site-layout .mobile-bottom-nav {
    background: rgba(255, 255, 255, 0.97) !important;
    border-color: var(--ui-border) !important;
    box-shadow: 0 -4px 18px rgba(15, 35, 58, 0.06) !important;
    backdrop-filter: blur(16px);
}

.site-layout .mobile-bottom-nav a {
    border-radius: 9px;
}

.site-layout main .rounded-3xl,
.dashboard-layout main .rounded-3xl,
.admin-layout main .rounded-3xl {
    border-radius: 14px !important;
}

.site-layout main .rounded-2xl,
.dashboard-layout main .rounded-2xl,
.admin-layout main .rounded-2xl {
    border-radius: var(--ui-radius) !important;
}

.site-layout main .rounded-xl,
.dashboard-layout main .rounded-xl,
.admin-layout main .rounded-xl {
    border-radius: 9px !important;
}

.site-layout main .bg-white.rounded-3xl,
.site-layout main .bg-white.rounded-2xl,
.dashboard-layout main .bg-white.rounded-3xl,
.dashboard-layout main .bg-white.rounded-2xl,
.admin-layout main .bg-white.rounded-3xl,
.admin-layout main .bg-white.rounded-2xl {
    border-color: var(--ui-border);
    box-shadow: var(--ui-shadow);
}

.site-layout main input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']),
.site-layout main select,
.site-layout main textarea,
.dashboard-layout main input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']),
.dashboard-layout main select,
.dashboard-layout main textarea,
.admin-layout main input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']),
.admin-layout main select,
.admin-layout main textarea {
    border-color: #cbd8e5;
    border-radius: 9px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.site-layout main input:focus,
.site-layout main select:focus,
.site-layout main textarea:focus,
.dashboard-layout main input:focus,
.dashboard-layout main select:focus,
.dashboard-layout main textarea:focus,
.admin-layout main input:focus,
.admin-layout main select:focus,
.admin-layout main textarea:focus {
    border-color: #38a3d8;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.14);
    outline: none;
}

.site-layout main table,
.dashboard-layout main table,
.admin-layout main table {
    border-collapse: separate;
    border-spacing: 0;
}

.site-layout main thead,
.dashboard-layout main thead,
.admin-layout main thead {
    color: #58697a;
}

.site-layout main tbody tr:hover,
.dashboard-layout main tbody tr:hover,
.admin-layout main tbody tr:hover {
    background-color: rgba(224, 242, 254, 0.42);
}

.dashboard-layout {
    background: var(--ui-canvas) !important;
}

html:not(.dark) .dashboard-layout .dashboard-content-bg,
html:not(.dark) .admin-layout .admin-content-bg {
    background: var(--ui-canvas) !important;
}

.dashboard-sidebar,
.admin-sidebar {
    background: linear-gradient(180deg, #10263e 0%, #123453 58%, #0d233a 100%) !important;
}

.dash-nav-active,
.admin-nav-active {
    background: linear-gradient(110deg, #087cb5 0%, #05659b 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

.dashboard-topbar,
.admin-topbar {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: var(--ui-border) !important;
    box-shadow: 0 1px 8px rgba(15, 35, 58, 0.035) !important;
}

.dashboard-content-bg,
.admin-content-bg {
    background: var(--ui-canvas) !important;
}

html.dark body.site-layout,
html.dark .dashboard-layout {
    background: #0b1522 !important;
}

html.dark .site-header,
html.dark .dashboard-topbar,
html.dark .admin-topbar {
    background: rgba(10, 22, 37, 0.96) !important;
    border-color: #23374b !important;
}

html.dark .site-layout main > .min-h-screen {
    background-color: #0b1522 !important;
    background-image: none !important;
}

html.dark .site-layout .mobile-bottom-nav {
    background: rgba(10, 22, 37, 0.97) !important;
    border-color: #23374b !important;
}

html.dark .dashboard-content-bg,
html.dark .admin-content-bg {
    background: #0b1522 !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}