/* RD-02H3 CRITICAL STATIC SHELL START */
/* The tile home exists in HTML. These rules do not depend on JavaScript. */
body.zuvo-rd02h3-active,
body:has(#resident-portal:not([hidden])) {
  background: #060711;
}

body.zuvo-rd02h3-active .site-header,
body:has(#resident-portal:not([hidden])) .site-header,
#resident-portal:not([hidden]) > .dashboard-heading,
#resident-portal:not([hidden]) > #home-context,
#resident-portal:not([hidden]) > .zuvo-panic-anchored,
#resident-portal:not([hidden]) > .rd02c-panic-wrap,
#resident-portal:not([hidden]) > .rd02d-panic-wrap,
#resident-portal:not([hidden]) > .rd02e-panic-wrap,
#resident-portal:not([hidden]) #resident-home-shell {
  display: none !important;
}

body.zuvo-rd02h3-active .page-shell,
body:has(#resident-portal:not([hidden])) .page-shell,
#resident-portal:not([hidden]) {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

#resident-portal:not([hidden]) > #resident-static-home {
  display: block !important;
}
/* RD-02H3 CRITICAL STATIC SHELL END */

:root {
  --zuvo-ink: #f7f8ff;
  --zuvo-muted: rgba(247, 248, 255, 0.68);
  --zuvo-bg: #060711;
}

body.zuvo-rd02h-active { background: var(--zuvo-bg); }

body.zuvo-rd02h-active .site-header,
body.zuvo-rd02h-active .dashboard-heading,
body.zuvo-rd02h-active #home-context > .community-card,
body.zuvo-rd02h-active #home-context > .apartment-card,
body.zuvo-rd02h-active .zuvo-panic-anchored,
body.zuvo-rd02h-active .rd02c-panic-wrap,
body.zuvo-rd02h-active .rd02d-panic-wrap,
body.zuvo-rd02h-active .rd02e-panic-wrap { display: none !important; }

body.zuvo-rd02h-active .page-shell,
body.zuvo-rd02h-active .portal,
body.zuvo-rd02h-active #home-context {
  width: 100%; max-width: none; margin: 0; padding: 0;
}

body.zuvo-rd02h-active #home-context { display: block; }

.resident-tile-home {
  min-height: 100vh;
  padding: clamp(18px, 4vw, 44px);
  color: var(--zuvo-ink);
  background:
    radial-gradient(circle at 86% 3%, rgba(111, 82, 255, 0.22), transparent 30%),
    radial-gradient(circle at 0% 45%, rgba(0, 207, 183, 0.1), transparent 28%),
    linear-gradient(160deg, #0c0c1a 0%, #05060b 65%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.resident-tile-home[hidden] { display: none !important; }

.resident-tile-topline {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 24px;
}

.resident-welcome { margin: 0; font-size: clamp(1.75rem, 5vw, 3rem); line-height: 1; letter-spacing: -0.05em; }

.resident-unit-pill {
  display: inline-flex; align-items: center; min-height: 42px; padding: 8px 16px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
  background: rgba(255,255,255,.08); color: #fff; font-size: .9rem; font-weight: 800;
  backdrop-filter: blur(10px);
  font-family: inherit;
  cursor: pointer;
}

.resident-service-heading {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  margin: 0 0 18px;
}

.resident-service-heading p { margin: 0; color: var(--zuvo-muted); font-size: .92rem; }

.resident-arrange-actions { display: flex; align-items: center; gap: 8px; }

.resident-arrange-button,
.resident-save-order-button,
.resident-cancel-order-button,
.resident-reset-button {
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 9px 14px;
  color: #fff; background: rgba(255,255,255,.08); font: inherit; font-size: .84rem;
  font-weight: 800; cursor: pointer;
}

.resident-reset-button[hidden] { display: none; }
.resident-save-order-button[hidden],
.resident-cancel-order-button[hidden] { display: none; }
.resident-save-order-button { color: #08130e; background: #72e49d; }
.resident-arrange-button[aria-pressed="true"] { color: #0b0c12; background: #fff; }

.resident-service-grid {
  display: grid; grid-template-columns: repeat(3, minmax(210px, 1fr)); gap: 16px;
  max-width: 1180px;
}

.resident-service-tile {
  --tile-a: #6b4bff; --tile-b: #2f1c7e;
  position: relative; isolation: isolate; min-height: 190px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.15); border-radius: 28px; padding: 22px;
  color: #fff; text-align: left; cursor: pointer; touch-action: manipulation;
  background: linear-gradient(145deg, var(--tile-a), var(--tile-b));
  box-shadow: 0 18px 42px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.15);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.resident-service-tile[hidden] { display: none !important; }

.resident-service-tile::before,
.resident-service-tile::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.resident-service-tile::before {
  width: 150px; height: 150px; top: -55px; right: -40px; border-radius: 50%;
  background: rgba(255,255,255,.13); filter: blur(1px);
}
.resident-service-tile::after {
  width: 90px; height: 90px; right: 18px; bottom: -48px; border: 18px solid rgba(255,255,255,.08); border-radius: 50%;
}

.resident-service-tile:hover { transform: translateY(-3px); box-shadow: 0 22px 50px rgba(0,0,0,.35); }
.resident-service-tile:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.resident-service-tile.is-dragging { opacity: .45; transform: scale(.97); }
.resident-service-tile.is-selected { outline: 4px solid #fff; outline-offset: -5px; }
.resident-service-grid.is-arranging .resident-service-tile { cursor: grab; touch-action: none; }
.resident-service-grid.is-arranging .resident-service-tile:active { cursor: grabbing; }

.resident-service-icon {
  display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 30px;
  border-radius: 19px; background: rgba(255,255,255,.16); box-shadow: inset 0 1px rgba(255,255,255,.2);
}
.resident-service-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.resident-service-title { display: block; margin-bottom: 5px; font-size: 1.3rem; font-weight: 900; letter-spacing: -.025em; }
.resident-service-subtitle { display: block; max-width: 24ch; color: rgba(255,255,255,.76); font-size: .88rem; line-height: 1.35; }

.resident-tile-grip {
  position: absolute; top: 18px; right: 18px; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 12px; color: rgba(255,255,255,.72);
  background: rgba(0,0,0,.14); opacity: 0; transform: scale(.8); transition: .18s ease;
}
.resident-service-grid.is-arranging .resident-tile-grip { opacity: 1; transform: scale(1); }

.tile-noticeboard { --tile-a: #ff8c42; --tile-b: #b54318; }
.tile-lounge { --tile-a: #7857ff; --tile-b: #3c2397; }
.tile-private-chat { --tile-a: #16b894; --tile-b: #087365; }
.tile-help { --tile-a: #3988ff; --tile-b: #174fa9; }
.tile-panic { --tile-a: #ff3c56; --tile-b: #a70f2b; }
.tile-panic {
  justify-self: center;
  width: min(100%, 190px);
  aspect-ratio: 1;
  border-radius: 50%;
  transition: transform .18s ease, box-shadow .18s ease;
}
.tile-panic-admin { --tile-a: #e94b35; --tile-b: #8f1f18; }
.tile-book-space { --tile-a: #07a8cb; --tile-b: #13629e; }
.tile-pulse { --tile-a: #cf45d4; --tile-b: #7b2ba8; }
.tile-say { --tile-a: #e84d91; --tile-b: #98205f; }
.tile-connect { --tile-a: #f1ab27; --tile-b: #a96309; }
.tile-my-zuvo { --tile-a: #55b86b; --tile-b: #23713d; }
.tile-residents { --tile-a: #27a889; --tile-b: #125e5f; }
.tile-admin { --tile-a: #8368ff; --tile-b: #34216f; }
.tile-games { --tile-a: #8c5cff; --tile-b: #4945b7; }

.resident-admin-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  min-width: 28px;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #58101b;
  background: #ffb5c0;
  font-size: .78rem;
  font-weight: 900;
  text-align: center;
}
.tile-panic::before { box-shadow: 0 0 0 16px rgba(255,255,255,.05), 0 0 0 34px rgba(255,255,255,.035); }
.tile-noticeboard::after { border-radius: 8px; transform: rotate(-12deg); }
.tile-games::after { border-radius: 28px; transform: rotate(20deg); }

.resident-arrange-status { min-height: 22px; margin: 12px 2px 0; color: var(--zuvo-muted); font-size: .82rem; }

@media (max-width: 900px) {
  .resident-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .resident-tile-home { padding: 18px 14px 30px; }
  .resident-tile-topline { align-items: flex-start; flex-direction: column; }
  .resident-service-heading { align-items: flex-start; flex-direction: column; }
  .resident-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .resident-service-tile { min-height: 166px; border-radius: 22px; padding: 16px; }
  .resident-service-tile.tile-panic { width: min(100%, 166px); min-height: auto; border-radius: 50%; }
  .resident-service-icon { width: 48px; height: 48px; margin-bottom: 22px; border-radius: 16px; }
  .resident-service-icon svg { width: 25px; height: 25px; }
  .resident-service-title { font-size: 1.05rem; }
  .resident-service-subtitle { font-size: .76rem; }
  .resident-tile-grip { top: 12px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .resident-service-tile, .resident-tile-grip { transition: none; }
}

/* RD-02H4 COMPACT TILE OVERRIDES START */
/* Compact the home without reducing the existing tile-name font sizes. */
.resident-tile-home {
  padding: clamp(14px, 3vw, 28px);
}

.resident-tile-topline {
  justify-content: space-between;
  margin-bottom: 12px;
}

.resident-home-heading {
  display: grid;
  gap: 5px;
}

.resident-property-name {
  margin: 0;
  color: #a99bff;
  font-size: clamp(1.18rem, 2.8vw, 1.7rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}

.resident-service-heading {
  justify-content: flex-end;
  margin-bottom: 10px;
}

.resident-service-tile {
  min-height: 164px;
  padding: 18px;
}

.resident-service-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 16px;
  border-radius: 16px;
}

.resident-service-icon svg {
  width: 27px;
  height: 27px;
}

@media (max-width: 900px) {
  .resident-service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
}

@media (max-width: 560px) {
  .resident-tile-home {
    padding: 12px 10px 18px;
  }

  .resident-tile-topline {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }

  .resident-welcome {
    font-size: clamp(1.75rem, 5vw, 3rem);
  }

  .resident-property-name {
    font-size: clamp(1rem, 4.8vw, 1.3rem);
  }

  .resident-unit-pill {
    min-height: 34px;
    padding: 6px 10px;
    font-size: .78rem;
  }

  .resident-service-heading {
    align-items: center;
    flex-direction: row;
    margin-bottom: 8px;
  }

  .resident-arrange-button,
  .resident-save-order-button,
  .resident-cancel-order-button,
  .resident-reset-button {
    padding: 7px 11px;
  }

  .resident-service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .resident-service-tile {
    display: flex;
    min-width: 0;
    min-height: 112px;
    padding: 10px 7px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    text-align: center;
  }

  .resident-service-icon {
    width: 38px;
    height: 38px;
    margin: 0 0 8px;
    border-radius: 12px;
  }

  .resident-service-icon svg {
    width: 22px;
    height: 22px;
  }

  .resident-service-title {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  .resident-service-subtitle {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .resident-tile-grip {
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
  }

  .resident-arrange-status {
    min-height: 16px;
    margin-top: 6px;
  }
}
/* RD-02H4 COMPACT TILE OVERRIDES END */

.resident-profile-dialog {
  width: min(620px, calc(100% - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 26px;
  padding: 0;
  color: #f7f8ff;
  background: #111321;
  box-shadow: 0 28px 90px rgba(0,0,0,.55);
}
.resident-profile-dialog::backdrop { background: rgba(3,4,10,.78); backdrop-filter: blur(5px); }
.resident-profile-form { display: grid; gap: 16px; padding: clamp(20px, 5vw, 34px); }
.resident-profile-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.resident-profile-heading h2 { margin: 5px 0 0; font-size: clamp(1.7rem, 5vw, 2.4rem); }
.resident-profile-close { border: 0; color: #fff; background: transparent; font-size: 2rem; cursor: pointer; }
.resident-profile-field, .resident-profile-phone { display: grid; gap: 8px; }
.resident-profile-field > span, .resident-profile-phone > span, .resident-profile-readonly-grid span {
  color: rgba(247,248,255,.7); font-size: .8rem; font-weight: 800;
}
.resident-profile-field input, .resident-profile-phone input, .resident-profile-phone select {
  width: 100%; min-height: 48px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px;
  padding: 0 13px; color: #fff; background: rgba(255,255,255,.08); font: inherit;
}
.resident-profile-field input[readonly] { color: rgba(247,248,255,.7); }
.resident-profile-readonly-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.resident-profile-readonly-grid div { display: grid; gap: 5px; padding: 13px; border-radius: 13px; background: rgba(255,255,255,.07); }
.resident-profile-phone p, .resident-profile-phone small { margin: 0; color: rgba(247,248,255,.75); }
.resident-profile-phone-grid { display: grid; grid-template-columns: minmax(180px,.9fr) minmax(0,1.1fr); gap: 10px; }
.resident-profile-message { margin: 0; padding: 10px 12px; border-radius: 10px; color: #ffd8de; background: rgba(255,60,86,.17); }
.resident-profile-actions { display: flex; justify-content: flex-end; gap: 10px; }
.resident-profile-actions button { min-height: 44px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 0 18px; color: #fff; background: rgba(255,255,255,.08); font: inherit; font-weight: 800; cursor: pointer; }
#resident-profile-save { color: #08130e; background: #72e49d; }
@media (max-width: 560px) {
  .resident-profile-phone-grid, .resident-profile-readonly-grid { grid-template-columns: 1fr; }
  .resident-arrange-actions { width: 100%; flex-wrap: wrap; }
}

.resident-unread-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  min-width: 28px;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #241241;
  background: #d9c7ff;
  font-size: .78rem;
  font-weight: 900;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}