:root { --resident-max: 980px; }

.resident-home { min-height: 100vh; padding-bottom: 88px; }
.resident-topbar, .resident-main, .resident-footer { width: min(var(--resident-max), calc(100% - 40px)); margin-inline: auto; }
.resident-topbar { display:flex; align-items:center; justify-content:space-between; padding: 24px 0 18px; }
.resident-brand { display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; }
.resident-brand > div { display:grid; gap:2px; }
.resident-brand strong { font-size:14px; letter-spacing:-.03em; }
.resident-brand span { color:var(--muted); font-size:11px; }
.resident-logo, .resident-monogram { width:40px; height:40px; border-radius:14px; object-fit:cover; }
.resident-monogram { display:grid; place-items:center; background:var(--brand-dark); color:#fff; font:800 16px Manrope, sans-serif; box-shadow: 0 8px 18px rgba(14,64,56,.18); }
.resident-login { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:999px; padding:10px 15px; font:700 12px 'DM Sans',sans-serif; text-decoration:none; box-shadow:var(--shadow-sm); }
.resident-login:hover { border-color:var(--brand-main); color:var(--brand-main); transform:translateY(-1px); }
.resident-main { padding: 42px 0 28px; }
.resident-hero { max-width: 690px; margin-bottom: 34px; }
.resident-hero h1 { font-size:clamp(32px, 6vw, 48px); line-height:1.05; letter-spacing:-.065em; margin:0 0 10px; color:var(--ink); }
.resident-hero p { color:var(--muted); font-size:15px; margin:0; }
.resident-hero::after { content:''; display:block; width:46px; height:4px; border-radius:9px; background:var(--accent); margin-top:22px; }
.resident-delivery { display:flex; align-items:center; gap:16px; padding:19px 20px; border-radius:var(--radius-md); border:1px solid #d9e8e2; background:linear-gradient(120deg,#eef8f3,#fff); color:var(--ink); text-decoration:none; box-shadow:var(--shadow-sm); margin-bottom:34px; }
.resident-delivery:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.resident-delivery > span:first-child, .resident-icon { display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:13px; background:#d9efe7; color:var(--brand-main); }
.resident-delivery > span:nth-child(2) { display:grid; gap:4px; flex:1; }
.resident-delivery strong { font-size:13px; }
.resident-delivery small, .resident-action small { color:var(--muted); font-size:12px; }
.resident-delivery > span:last-child, .resident-action > span:last-child { font-size:24px; font-weight:300; color:#98a7a1; }
.resident-grid { display:grid; grid-template-columns: 1.15fr .85fr; gap:34px; align-items:start; }
.resident-section-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.resident-section-title h2 { font-size:14px; letter-spacing:-.02em; margin:0; }
.resident-empty { display:grid; place-items:center; min-height:150px; padding:24px; text-align:center; border:1px solid var(--line); border-radius:var(--radius-md); background:#fff; color:var(--muted); }
.resident-empty i { font-size:18px; color:#a8b7b1; margin-bottom:8px; }
.resident-empty h3 { color:var(--ink); font-size:13px; margin:0 0 4px; }
.resident-empty p { font-size:12px; margin:0; }
.resident-actions { display:grid; gap:9px; }
.resident-action { display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:var(--radius-md); background:#fff; padding:14px; color:var(--ink); text-decoration:none; box-shadow:var(--shadow-sm); }
.resident-action:hover { border-color:#c4ddd4; transform:translateX(3px); }
.resident-action > span:nth-child(2) { flex:1; display:grid; gap:3px; }
.resident-action strong { font-size:12px; }
.resident-follow { display:block; color:var(--brand-main); font-weight:700; font-size:12px; text-decoration:none; padding:6px 3px; }
.resident-services { margin-top:34px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.resident-services > summary { display:flex; justify-content:space-between; align-items:center; cursor:pointer; list-style:none; padding:19px 0; }
.resident-services > summary::-webkit-details-marker { display:none; }
.resident-services > summary span:first-child { display:grid; gap:3px; }
.resident-services strong { font-size:14px; }
.resident-services small { color:var(--muted); font-size:12px; }
.resident-services-links { display:grid; grid-template-columns:repeat(2,1fr); gap:0 28px; padding:0 0 14px; }
.resident-services-links a { display:flex; justify-content:space-between; padding:11px 0; border-top:1px solid #edf1ef; color:#43534d; text-decoration:none; font-size:12px; }
.resident-services-links a:hover { color:var(--brand-main); padding-left:4px; }
.resident-footer { text-align:center; padding:24px 0 96px; }
.resident-nav { position:fixed; z-index:20; left:50%; bottom:14px; transform:translateX(-50%); width:min(570px, calc(100% - 28px)); display:grid; grid-template-columns:repeat(4,1fr); gap:4px; padding:6px; background:rgba(255,255,255,.9); backdrop-filter:blur(16px); border:1px solid rgba(220,230,225,.9); border-radius:20px; box-shadow:0 14px 35px rgba(20,42,35,.13); }
.resident-nav a { display:grid; place-items:center; gap:4px; padding:9px 4px; border-radius:14px; color:#82918b; text-decoration:none; font-size:10px; }
.resident-nav a:hover, .resident-nav a[aria-current='page'] { background:#eaf5f0; color:var(--brand-main); }
.resident-nav i { font-size:14px; }
.resident-menu { width:min(520px, calc(100% - 28px)); max-height:min(700px, calc(100vh - 40px)); border:0; border-radius:24px; padding:0; box-shadow:0 25px 80px rgba(8,34,27,.2); color:var(--ink); }
.resident-menu::backdrop { background:rgba(8,28,22,.35); backdrop-filter:blur(4px); }
.menu-heading { display:flex; justify-content:space-between; align-items:center; padding:22px; border-bottom:1px solid var(--line); }
.menu-heading h2 { margin:0; font-size:17px; }
.menu-heading button { border:0; background:#eff4f1; width:32px; height:32px; border-radius:50%; color:var(--muted); cursor:pointer; }
.menu-links { padding:8px 12px 14px; overflow:auto; }
.menu-links a { display:flex; align-items:center; gap:13px; padding:13px 10px; color:var(--ink); text-decoration:none; border-radius:14px; }
.menu-links a:hover { background:#f0f7f3; }
.menu-links a > i { width:24px; text-align:center; color:var(--brand-main); }
.menu-links a span:nth-child(2) { flex:1; display:grid; gap:3px; }
.menu-links strong { font-size:13px; }
.menu-links small { color:var(--muted); font-size:11px; }

@media (max-width:720px) { .resident-topbar,.resident-main,.resident-footer { width:calc(100% - 32px); } .resident-main { padding-top:32px; } .resident-grid { grid-template-columns:1fr; gap:28px; } .resident-services-links { grid-template-columns:1fr; } .resident-hero h1 { font-size:36px; } }
@media (min-width:721px) { .resident-nav { bottom:22px; } }