:root {
  --rp-bg: #f6f6f6;
  --rp-surface: #ffffff;
  --rp-text: #1a1a1a;
  --rp-muted: #6f6a67;
  --rp-border: #e4dfda;
  --rp-accent: #e60000;
  --rp-accent-hover: #b10000;
  --rp-warm: #e6dad7;
  --rp-grey: #bfbfbf;
  --rp-dark: #2a2a2a;
  --rp-radius: 0;
  --rp-radius-sm: 0;
  --rp-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 20px rgba(16, 24, 40, 0.06);
  --rp-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
}

html { scroll-behavior: smooth; }
body.resident-portal { min-height: 100vh; color: var(--rp-text); background: var(--rp-bg); font-family: var(--rp-font); font-size: 16px; -webkit-font-smoothing: antialiased; }

.resident-skip-link { position: fixed; z-index: 1100; top: .75rem; left: .75rem; padding: .75rem 1rem; color: #fff; background: var(--rp-accent); border-radius: var(--rp-radius-sm); transform: translateY(-160%); }
.resident-skip-link:focus { color: #fff; transform: translateY(0); }
.resident-nav { min-height: 82px; padding: .65rem 0; background: var(--rp-dark); border-bottom: 5px solid var(--rp-accent); }
.resident-brand { display: inline-flex; align-items: center; gap: 1rem; color: #fff; text-decoration: none; }
.resident-brand:hover { color: #fff; }
.resident-brand-logo { display: block; width: 150px; height: auto; }
.resident-brand-divider { width: 1px; height: 2rem; background: rgba(255, 255, 255, .28); }
.resident-brand-label { color: #fff; font-size: 1rem; font-weight: 500; letter-spacing: .03em; }
.resident-user-name { color: #fff; font-size: 1rem; }
.resident-notification-count { min-width: 1.75rem; border: 2px solid var(--rp-dark); border-radius: 0; }
.resident-main { min-height: calc(100vh - 13rem); }
.resident-footer { padding: 1.4rem 0; color: var(--rp-muted); background: var(--rp-bg); border-top: 1px solid var(--rp-border); font-size: 1rem; }

.resident-portal h1, .resident-portal h2, .resident-portal h3 { color: var(--rp-text); font-weight: 700; letter-spacing: -.015em; }
.resident-portal a { color: var(--rp-text); }
.resident-portal a:hover { color: var(--rp-accent-hover); }
.resident-portal a.btn-primary, .resident-portal a.btn-success { color: #fff; }
.resident-portal a.btn-primary:hover, .resident-portal a.btn-success:hover { color: #fff; }
.resident-portal .text-muted { color: var(--rp-muted) !important; }
.resident-portal .card, .resident-choice { background: var(--rp-surface); border: 1px solid var(--rp-border); border-radius: var(--rp-radius); box-shadow: var(--rp-shadow); }
.resident-portal .card-header { padding: 1rem 1.25rem; background: #f1efed; border-bottom-color: var(--rp-border); }
.resident-portal .btn { padding: .7rem 1.25rem; border-radius: var(--rp-radius-sm); font-weight: 600; transition: background .14s, color .14s, border-color .14s, box-shadow .14s; }
.resident-portal .btn-primary, .resident-portal .btn-success { --bs-btn-color: #fff; --bs-btn-bg: var(--rp-text); --bs-btn-border-color: var(--rp-text); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #000; --bs-btn-hover-border-color: #000; --bs-btn-active-bg: #000; --bs-btn-active-border-color: #000; }
.resident-portal .btn-primary, .resident-portal .btn-success { color: #fff !important; background-color: var(--rp-text) !important; border-color: var(--rp-text) !important; }
.resident-portal .btn-primary:hover, .resident-portal .btn-primary:focus-visible, .resident-portal .btn-success:hover, .resident-portal .btn-success:focus-visible { color: #fff !important; background-color: #000 !important; border-color: #000 !important; }
.resident-nav .btn-primary { --bs-btn-color: var(--rp-text); --bs-btn-bg: #f2efec; --bs-btn-border-color: #f2efec; --bs-btn-hover-color: var(--rp-text); --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff; }
.resident-nav .btn-primary { color: var(--rp-text) !important; background-color: #f2efec !important; border-color: #f2efec !important; }
.resident-nav .btn-primary:hover, .resident-nav .btn-primary:focus-visible { color: var(--rp-text) !important; background-color: #fff !important; border-color: #fff !important; }
.resident-portal .btn-outline-primary { --bs-btn-color: var(--rp-text); --bs-btn-border-color: var(--rp-text); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--rp-text); --bs-btn-hover-border-color: var(--rp-text); }
.resident-portal .btn-outline-primary { color: var(--rp-text) !important; background-color: transparent !important; border-color: var(--rp-text) !important; }
.resident-portal .btn-outline-primary:hover, .resident-portal .btn-outline-primary:focus-visible { color: #fff !important; background-color: var(--rp-text) !important; border-color: var(--rp-text) !important; }
.resident-portal .btn-outline-secondary { color: #343a40 !important; background-color: transparent !important; border-color: #596168 !important; }
.resident-portal .btn-outline-secondary:hover, .resident-portal .btn-outline-secondary:focus-visible { color: #fff !important; background-color: #343a40 !important; border-color: #343a40 !important; }
.resident-portal .btn-danger { --bs-btn-color: #fff; --bs-btn-bg: #b42318; --bs-btn-border-color: #b42318; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #8f1c13; --bs-btn-hover-border-color: #8f1c13; }
.resident-portal .btn-danger { color: #fff !important; background-color: #b42318 !important; border-color: #b42318 !important; }
.resident-portal .btn-danger:hover, .resident-portal .btn-danger:focus-visible { color: #fff !important; background-color: #8f1c13 !important; border-color: #8f1c13 !important; }
.resident-portal .btn-warning { color: #1a1a1a !important; background-color: #ffca2c !important; border-color: #c99700 !important; }
.resident-portal .btn-warning:hover, .resident-portal .btn-warning:focus-visible { color: #1a1a1a !important; background-color: #ffda6a !important; border-color: #b68900 !important; }
.resident-nav .btn-outline-primary { color: #fff !important; background-color: transparent !important; border-color: #fff !important; }
.resident-nav .btn-outline-primary:hover, .resident-nav .btn-outline-primary:focus-visible { color: var(--rp-text) !important; background-color: #fff !important; border-color: #fff !important; }
.resident-portal .badge.bg-primary, .resident-portal .badge.bg-success { color: var(--rp-text) !important; background: var(--rp-warm) !important; }
.resident-portal .badge.bg-danger, .resident-portal .badge.bg-secondary { color: #fff !important; }
.resident-portal .badge.bg-warning, .resident-portal .badge.bg-light { color: var(--rp-text) !important; }
.resident-portal .form-control, .resident-portal .form-select { min-height: 3rem; padding: .7rem .85rem; background: #fff; border-color: var(--rp-grey); border-radius: var(--rp-radius-sm); }
.resident-portal :is(a, button, input, select, textarea):focus-visible { outline: 3px solid #000; outline-offset: 3px; box-shadow: 0 0 0 6px #fff; }
.resident-nav :is(a, button):focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px #000; }
.resident-portal .alert { border-radius: var(--rp-radius-sm); }
.resident-portal :is(.badge, .list-group, .list-group-item) { border-radius: 0 !important; }
.resident-portal .alert-info { color: #463e3a; background: #eee5e2; border-color: #d8c7c1; }
.resident-portal .breadcrumb { padding-top: 1.5rem; font-size: 1rem; }
.resident-portal :is(.small, small, .btn-sm, .badge, .form-text) { font-size: 1rem !important; }
.resident-portal .list-group-item { background: transparent; border-color: var(--rp-border); }
.resident-portal .table > :not(caption) > * > * { padding: .9rem .75rem; border-bottom-color: var(--rp-border); }

.resident-page-heading { max-width: 760px; margin-bottom: 2rem; }
.resident-page-heading h1 { font-size: clamp(2.25rem, 4vw, 3.25rem); }
.resident-page-heading .lead { color: var(--rp-muted); font-size: 1.125rem; line-height: 1.6; }
.resident-security-note { display: flex; gap: .65rem; color: var(--rp-muted); font-size: 1rem; line-height: 1.5; }
.resident-security-note span:first-child { color: var(--rp-accent); }

.resident-auth { padding: clamp(64px, 8vw, 104px) 0; }
.resident-auth-card { box-shadow: var(--rp-shadow) !important; }
.resident-choice { display: flex; height: 100%; padding: 1.5rem 1.35rem; flex-direction: column; transition: border-color .16s, box-shadow .16s; }
.resident-choice:hover { border-color: rgba(230, 0, 0, .45); }
.resident-choice-icon { margin-bottom: 1rem; color: var(--rp-accent); font-size: 1rem; font-weight: 600; letter-spacing: .1em; }
.resident-choice h2 { font-size: 1.1rem; font-weight: 400; }

@media (max-width: 767.98px) {
  .resident-nav { min-height: 70px; }
  .resident-brand-logo { width: 112px; }
  .resident-brand-divider, .resident-brand-label, .resident-user-name { display: none; }
  .resident-main.container { padding-right: 1rem; padding-left: 1rem; }
  .resident-portal .table { min-width: 42rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .resident-choice, .resident-portal .btn { transition: none; }
}