:root {
     --ucm-primary: #0f4f8a;
     --ucm-primary-700: #0c3f6e;
     --ucm-accent: #1c7ea3;
     --ucm-accent-700: #166684;
     --ucm-bg: #f6f9fc;
     --ucm-panel: #ffffff;
     --ucm-muted: #6b7a8c;
     --ucm-border: #e6edf3;
     --radius: 16px;
     --shadow: 0 6px 18px rgba(15, 79, 138, .08);
}

/* Navbar theming */
.ucm-navbar {
     background: var(--ucm-primary) !important;
     box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

.ucm-navbar .nav-link {
     font-weight: 500;
}

.ucm-navbar .nav-link:hover {
     color: #fff;
     opacity: .85;
}

.ucm-brand-logo {
     display: block;
}

.ucm-brand {
     display: flex;
     align-items: center;
     gap: 14px;
     margin-bottom: 10px
}

.ucm-logo {
     width: 44px;
     height: 44px;
     border-radius: 12px;
     background: linear-gradient(145deg, var(--ucm-primary), var(--ucm-accent));
     display: grid;
     place-items: center;
     color: #fff;
     font-weight: 800
}

.ucm-brand-title {
     font-size: 20px;
     line-height: 1.2;
     margin: 0
}

.ucm-brand-sub {
     display: block;
     color: var(--ucm-muted);
     font-weight: 500
}

.ucm-auth-grid {
     display: grid;
     grid-template-columns: 1.1fr .9fr;
     gap: 22px;
     max-width: 1000px;
     margin: 0 auto;
}

@media (max-width: 992px) {
     .ucm-auth-grid {
          grid-template-columns: 1fr
     }
}

.ucm-auth-panel {
     background: var(--ucm-panel);
     border: 1px solid var(--ucm-border);
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     padding: 22px
}

.ucm-auth-heading {
     margin: 6px 0 6px
}

.ucm-auth-sub {
     margin-bottom: 16px
}

.ucm-auth-aside {
     background: linear-gradient(180deg, #f3f8ff, #ffffff);
     border: 1px solid var(--ucm-border);
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     padding: 22px
}

.ucm-feature-list {
     margin: 12px 0 0;
     padding-left: 18px
}

.ucm-feature-list li {
     margin: 6px 0
}

.ucm-primary-btn {
     background: var(--ucm-primary);
     border-color: var(--ucm-primary)
}

.ucm-primary-btn:hover {
     background: var(--ucm-primary-700);
     border-color: var(--ucm-primary-700)
}

/* Footer adjustments */
footer.bg-light {
     background: var(--ucm-bg) !important;
}

footer h5 {
     color: var(--ucm-primary);
}

footer a.text-dark:hover {
     color: var(--ucm-accent) !important;
}

.muted {
     color: var(--ucm-muted)
}

.ucm-link {
     color: var(--ucm-accent)
}

.ucm-link:hover {
     color: var(--ucm-accent-700)
}

/* Full-height centering for login page */
.ucm-auth-wrapper {
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--ucm-bg);
     padding: 32px 20px;
     box-sizing: border-box;
}

/* Login page specific refinements */
body.login-page {
     background: var(--ucm-bg);
     margin: 0;
     height: 100vh;
     overflow: hidden;
     overscroll-behavior: none;
     display: block;
}

body.login-page .navbar,
body.login-page footer {
     display: none !important;
}

body.login-page main {
     padding: 0;
     height: 100vh;
}

body.login-page .ucm-auth-wrapper {
     min-height: 100vh;
     height: 100vh;
}

@media (max-width: 768px) {
     body.login-page .ucm-auth-grid {
          grid-template-columns: 1fr;
     }

     body.login-page .ucm-auth-aside {
          display: none;
     }
}

.ucm-auth-wrapper .ucm-auth-grid {
     width: 100%;
}

@media (max-height: 680px) {
     .ucm-auth-wrapper {
          align-items: flex-start;
          padding-top: 40px;
     }
}

/* Keep sidebar visible on desktop but avoid full-page scroll */
@media (min-width: 992px) {

     .ucm-auth-panel,
     .ucm-auth-aside {
          max-height: calc(100vh - 96px);
          overflow: auto;
     }
}

/* Compact spacing to help fit */
.ucm-auth-heading {
     margin-top: 2px;
}

.ucm-auth-panel .mb-3 {
     margin-bottom: .85rem !important;
}

.ucm-auth-panel .mb-2 {
     margin-bottom: .65rem !important;
}