@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root {
  --ink: #17221f;
  --muted: #71807b;
  --line: #e4ebe7;
  --surface: #ffffff;
  --canvas: #f6f8f6;
  --brand-main: #167c68;
  --brand-dark: #0e4038;
  --accent: #d8a85e;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --shadow-sm: 0 2px 12px rgba(20, 42, 35, .05);
  --shadow-md: 0 16px 40px rgba(20, 42, 35, .08);
  --ease-out: cubic-bezier(.23,1,.32,1);
}

html { scroll-behavior: smooth; }
body.portal-modern {
  background: var(--canvas) !important;
  color: var(--ink) !important;
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: -.01em;
}
body.portal-modern h1, body.portal-modern h2, body.portal-modern h3,
body.portal-modern h4, body.portal-modern strong, body.portal-modern button {
  font-family: 'Manrope', 'DM Sans', sans-serif;
}
body.portal-modern a, body.portal-modern button, body.portal-modern input,
body.portal-modern select, body.portal-modern textarea { transition: all .18s var(--ease-out); }
body.portal-modern a:focus-visible, body.portal-modern button:focus-visible,
body.portal-modern input:focus-visible, body.portal-modern select:focus-visible,
body.portal-modern textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-main) 28%, transparent); outline-offset: 3px; }
body.portal-modern button:active, body.portal-modern a:active { transform: scale(.98); }

/* Generic internal pages */
body.portal-modern main:not(.resident-main) { max-width: 980px; margin: 0 auto; padding: 30px 20px 110px; }
body.portal-modern .card, body.portal-modern .app-card {
  background: var(--surface) !important; border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm) !important;
}
body.portal-modern .card:hover, body.portal-modern .app-card:hover { box-shadow: var(--shadow-md) !important; }
body.portal-modern .field-input {
  background: #fbfcfb !important; border: 1px solid var(--line) !important;
  border-radius: 13px !important; color: var(--ink) !important;
}
body.portal-modern .field-input:focus { border-color: var(--brand-main) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-main) 11%, transparent); }
body.portal-modern .animate-enter { animation: portalFade .42s var(--ease-out) both; }
@keyframes portalFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Login / auth */
body.portal-login, body.portal-login.portal-modern { background: radial-gradient(circle at 15% 15%, #2a8e78 0, transparent 35%), linear-gradient(145deg, var(--brand-dark), #12352f 68%, #0a2924) !important; }
.portal-login > div { position: relative; }
.portal-login .bg-white { border: 1px solid rgba(255,255,255,.65); box-shadow: 0 24px 70px rgba(4, 28, 23, .25) !important; }
.portal-login input { background: #fbfcfb !important; border-color: var(--line) !important; border-width: 1px !important; }
.portal-login input:focus { box-shadow: 0 0 0 4px rgba(22,124,104,.12); }
.portal-login .text-white\/70 { color: rgba(255,255,255,.72) !important; }

/* Shared footer */
body.portal-modern .portal-footer, body.portal-modern .resident-footer { color: #8b9893; font-size: 12px; letter-spacing: .01em; }
body.portal-modern .portal-footer a { color: var(--brand-main); font-weight: 700; }

@media (max-width: 640px) {
  body.portal-modern main:not(.resident-main) { padding: 22px 16px 104px; }
  body.portal-modern .card, body.portal-modern .app-card { border-radius: 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}