:root {
    --portal-primary: #0d6efd;
    --portal-secondary: #6c757d;
    --portal-accent: #013d74;
    --portal-object-hover: #6c757d;
    --portal-bg: #f8f9fa;
    --portal-text: #212529;
    --portal-col-class: 4;
}
body { background: var(--portal-bg); color: var(--portal-text); }
a { color: var(--portal-primary); }
a:hover { color: var(--portal-accent); }
.portal-navbar { background: linear-gradient(135deg, var(--portal-primary), var(--portal-secondary)); }
.btn-primary, .bg-primary { background-color: var(--portal-primary) !important; border-color: var(--portal-primary) !important; }
.btn-outline-primary { color: var(--portal-primary); border-color: var(--portal-primary); }
.btn-outline-primary:hover { background-color: var(--portal-primary); border-color: var(--portal-primary); }
.card.portal-card {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    border: 1px solid rgba(0,0,0,.08) !important;
}
.card.portal-card:hover,
.portal-card:hover,
a.portal-card:hover,
a:hover .portal-card {
    transform: translateY(-4px);
    border-color: var(--portal-object-hover) !important;
    box-shadow: 0 0 0 1px var(--portal-object-hover), 0 1rem 2rem rgba(0,0,0,.12) !important;
}
.portal-icon { font-size: 2rem; color: var(--object-accent, var(--portal-accent)); }
.portal-login-wrapper { min-height: 100vh; background: linear-gradient(135deg, var(--portal-primary), var(--portal-secondary)); }
.portal-login-card { max-width: 420px; width: 100%; border-radius: 1rem; }
.portal-notice { border-left: 4px solid var(--portal-accent); }
.portal-object-col { width: 100%; }
@media (min-width: 768px) {
    .portal-object-col { width: calc(100% / 3); }
}