body { margin: 0; min-height: 100vh; font-family: "Poppins", Arial, sans-serif; background: #171017 url('../images/background.png') no-repeat fixed center / cover; }
.portal-wrapper { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 32px 20px; }
.portal-card { width: 960px; max-width: 100%; margin: 0; background: rgba(255,255,255,.97); }
.portal-logo { width: 250px; max-width: 100%; }
.portal-welcome-title { color: #027a70; font-family: "Courier New", monospace; font-weight: 600; }
.portal-welcome-copy { width: 17rem; max-width: 100%; color: #027a70; font: 14px/1.6 "Courier New", monospace; }
.portal-form { padding: 40px 30px 40px 40px; min-height: 560px; }
.portal-form h1 { color: #027a70; font-weight: 600; }
.portal-form hr { color: #027a70; }
.portal-form input { padding: 12px; margin: 34px 0; }
.portal-form input:focus { border-color: #027a70; box-shadow: 0 0 0 .2rem rgba(2,122,112,.14); }
.portal-form .btn-primary { --bs-btn-bg: #027a70; --bs-btn-border-color: #027a70; --bs-btn-hover-bg: #02655d; --bs-btn-hover-border-color: #02655d; --bs-btn-active-bg: #02564f; --bs-btn-active-border-color: #02564f; padding: 14px; }
.portal-reset { padding: 10px 0 46px; }
.portal-reset a { color: #027a70; text-decoration: none; }
.portal-reset a:hover { text-decoration: underline; }
@media (max-width: 767.98px) { .portal-wrapper { padding: 20px 12px; } .portal-form { padding: 30px 20px; min-height: auto; } .portal-form input { margin: 24px 0; } .portal-reset { padding-bottom: 12px; } }

.portal-step { animation: portal-enter .36s ease-out both; }
.portal-step-title { color: #027a70; margin: 0 0 10px; font-weight: 600; }
.portal-step-title:focus { outline: none; }
.portal-hint { color: #687675; font-size: .9rem; line-height: 1.6; margin: 0; }
.portal-form input:not([type="hidden"]) { margin: 10px 0 22px; }
.portal-form .form-label { font-size: .9rem; color: #354a47; margin-bottom: 0; }
.portal-form .alert { font-size: .9rem; line-height: 1.6; }
.portal-form .portal-reset { padding: 24px 0 0; }
.portal-form form .btn { width: 100%; }
@keyframes portal-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .portal-step { animation: none; } }

.portal-form .portal-password-visibility .form-check-input { padding: 0; margin: .25em 0 0 -1.5em; width: 1em; height: 1em; }
.portal-password-visibility .form-check-input:checked { background-color: #027a70; border-color: #027a70; }
.portal-password-visibility .form-check-label { color: #354a47; font-size: .9rem; cursor: pointer; }