/* Cenit resident shared shell. Extracted from Unidades - Home. */
header#top,
.o_header_standard,
.o_top_fixed_element,
footer,
#footer {
  display: none !important;
}

:root {
        --cenit-bg-deep: #020A14;
        --cenit-blue-900: #031226;
        --cenit-blue-800: #06213A;
        --cenit-blue-700: #0B355A;
        --cenit-blue-500: #0EA5E9;
        --cenit-blue-400: #38BDF8;
        --cenit-green: #00A66A;
        --cenit-green-2: #22C55E;
        --cenit-orange: #F97316;
        --cenit-purple: #8B5CF6;
        --cenit-text: #F8FAFC;
        --cenit-muted: #B9C6D6;
        --cenit-faint: rgba(248, 250, 252, 0.72);
        --cenit-border: rgba(255, 255, 255, 0.13);
        --cenit-border-strong: rgba(125, 211, 252, 0.52);
        --cenit-card: rgba(11, 35, 60, 0.62);
        --cenit-card-2: rgba(15, 50, 82, 0.70);
        --cenit-shadow: 0 20px 55px rgba(0, 0, 0, 0.34);
        --cenit-soft-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
        --cenit-radius-xl: 28px;
        --cenit-radius-lg: 22px;
        --cenit-radius-md: 16px;
        --cenit-bottom-nav-height: 86px;
      }

body,
      #wrapwrap {
        padding-top: 0 !important;
        margin-top: 0 !important;
        background: var(--cenit-bg-deep) !important;
      }

.resident-panel {
        min-height: 100vh;
        color: var(--cenit-text);
        font-family: inherit;
        background:
          radial-gradient(circle at top left, rgba(14, 165, 233, 0.36) 0%, rgba(2, 10, 20, 0.96) 52%, #020A14 100%);
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        overflow-x: hidden;
      }

.resident-panel * {
        box-sizing: border-box;
      }

.resident-panel a {
        color: inherit;
      }

.resident-shell {
        width: min(1220px, calc(100% - 36px));
        margin: 0 auto;
        padding: 0 0 46px;
      }

.resident-header {
        position: sticky;
        top: 0;
        z-index: 50;
        min-height: 78px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
        background: rgba(2, 10, 20, 0.72);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
      }

.resident-header-inner {
        width: min(1220px, calc(100% - 36px));
        margin: 0 auto;
        min-height: 78px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
      }

.resident-brand {
        display: inline-flex;
        align-items: center;
        min-width: 0;
        text-decoration: none !important;
      }

.resident-brand-mark {
        width: auto;
        height: 50px;
        min-width: 150px;
        max-width: 230px;
        border-radius: 0;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        color: #FFFFFF;
        background: transparent;
        border: 0;
        box-shadow: none;
        overflow: visible;
        flex: 0 0 auto;
      }

.resident-brand-logo {
        width: auto;
        max-width: 230px;
        height: 50px;
        object-fit: contain;
        object-position: left center;
        display: block;
      }

.resident-brand-mark svg {
        width: 36px;
        height: 36px;
        stroke: currentColor;
      }

.resident-brand-copy {
        display: none;
      }

.resident-brand-name,
      .resident-brand-sub {
        display: none;
      }

.resident-top-nav {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1 1 auto;
        padding-left: 20px;
      }

.resident-top-link {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 14px;
        border-radius: 12px;
        color: rgba(255, 255, 255, 0.78) !important;
        text-decoration: none !important;
        font-weight: 750;
        font-size: 0.92rem;
        border: 1px solid transparent;
      }

.resident-top-link.is-active {
        color: #FFFFFF !important;
        background: rgba(14, 165, 233, 0.14);
        border-color: rgba(56, 189, 248, 0.28);
        box-shadow: inset 0 -2px 0 rgba(56, 189, 248, 0.85);
      }

.resident-account {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 11px;
        min-width: 0;
      }

.resident-bell {
        width: 40px;
        height: 40px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.06);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
      }

.resident-bell svg {
        width: 19px;
        height: 19px;
        stroke: currentColor;
      }

.resident-theme-toggle {
        width: 40px;
        height: 40px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.06);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        cursor: pointer;
        padding: 0;
        box-shadow: none;
      }

.resident-theme-toggle:hover,
      .resident-theme-toggle:focus {
        background: rgba(255, 255, 255, 0.10);
        border-color: rgba(125, 211, 252, 0.34);
        outline: none;
      }

.resident-theme-toggle svg {
        width: 19px;
        height: 19px;
        fill: currentColor;
        stroke: currentColor;
      }

.resident-theme-icon {
        display: none;
        align-items: center;
        justify-content: center;
        line-height: 1;
      }

.resident-panel.theme-dark .resident-theme-icon-sun {
        display: inline-flex;
      }

.resident-panel.theme-light .resident-theme-icon-moon {
        display: inline-flex;
      }

.resident-notification-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

.resident-notification-wrap summary {
        list-style: none;
      }

.resident-notification-wrap summary::-webkit-details-marker {
        display: none;
      }

.resident-bell {
        position: relative;
        text-decoration: none !important;
        cursor: pointer;
      }

.resident-bell-badge {
        position: absolute;
        top: -6px;
        right: -6px;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #F97316;
        color: #FFFFFF;
        font-size: 0.72rem;
        font-weight: 950;
        line-height: 1;
        border: 2px solid #020A14;
        box-shadow: 0 8px 18px rgba(249, 115, 22, 0.24);
      }

.resident-notification-panel {
        position: absolute;
        top: calc(100% + 12px);
        right: 0;
        width: min(360px, calc(100vw - 28px));
        max-height: 430px;
        overflow: auto;
        padding: 12px;
        border-radius: 22px;
        background:
          radial-gradient(circle at top left, rgba(14, 165, 233, 0.18), transparent 46%),
          rgba(8, 30, 52, 0.96);
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        z-index: 240;
      }

.resident-notification-panel::before {
        content: "";
        position: absolute;
        top: -7px;
        right: 18px;
        width: 14px;
        height: 14px;
        transform: rotate(45deg);
        background: rgba(8, 30, 52, 0.96);
        border-left: 1px solid rgba(255, 255, 255, 0.14);
        border-top: 1px solid rgba(255, 255, 255, 0.14);
      }

.resident-notification-head {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 4px 4px 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
        margin-bottom: 8px;
      }

.resident-notification-title {
        color: #FFFFFF;
        font-size: 0.95rem;
        font-weight: 920;
        letter-spacing: -0.02em;
      }

.resident-notification-count {
        color: rgba(255, 255, 255, 0.68);
        font-size: 0.76rem;
        font-weight: 750;
        white-space: nowrap;
      }

.resident-notification-list {
        position: relative;
        z-index: 1;
        display: grid;
        gap: 8px;
      }

.resident-notification-item {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        padding: 11px 12px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.065);
        border: 1px solid rgba(255, 255, 255, 0.10);
        color: #FFFFFF;
      }

.resident-notification-icon {
        width: 38px;
        height: 38px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        background:
          radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.26), transparent 36%),
          linear-gradient(135deg, rgba(14, 165, 233, 0.86), rgba(2, 132, 199, 0.72));
        border: 1px solid rgba(255, 255, 255, 0.16);
        box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14);
        font-size: 1rem;
        font-weight: 950;
        line-height: 1;
        flex: 0 0 38px;
      }

.resident-notification-body {
        min-width: 0;
        display: grid;
        gap: 4px;
      }

.resident-notification-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        color: rgba(255, 255, 255, 0.62);
        font-size: 0.72rem;
        font-weight: 760;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

.resident-notification-priority {
        color: #FFFFFF;
        background: rgba(249, 115, 22, 0.18);
        border: 1px solid rgba(249, 115, 22, 0.26);
        border-radius: 999px;
        padding: 3px 7px;
        font-size: 0.66rem;
        font-weight: 900;
      }

.resident-notification-message {
        color: rgba(255, 255, 255, 0.88);
        font-size: 0.86rem;
        line-height: 1.35;
        font-weight: 620;
      }

.resident-notification-empty {
        position: relative;
        z-index: 1;
        padding: 14px 12px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.055);
        border: 1px solid rgba(255, 255, 255, 0.09);
        color: rgba(255, 255, 255, 0.70);
        font-size: 0.86rem;
        line-height: 1.35;
        font-weight: 620;
      }

.resident-notification-message {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

.resident-notification-time {
        color: #38BDF8;
        font-size: 0.72rem;
        line-height: 1;
        font-weight: 850;
      }

.resident-notification-footer {
        position: relative;
        z-index: 1;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.10);
      }

.resident-notification-more {
        min-height: 42px;
        width: 100%;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none !important;
        color: #FFFFFF !important;
        background: rgba(14, 165, 233, 0.16);
        border: 1px solid rgba(56, 189, 248, 0.26);
        font-size: 0.84rem;
        font-weight: 850;
      }

.resident-notification-more:hover {
        background: rgba(14, 165, 233, 0.22);
        border-color: rgba(56, 189, 248, 0.38);
      }

.resident-user {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
      }

.resident-avatar {
        width: 42px;
        height: 42px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #7F1D1D, #BE123C);
        color: #FFFFFF;
        font-weight: 900;
        border: 2px solid rgba(255, 255, 255, 0.18);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
        flex: 0 0 42px;
        overflow: hidden;
      }

.resident-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

.resident-user-copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        line-height: 1.12;
        min-width: 0;
      }

.resident-user-name {
        max-width: 170px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.93rem;
        font-weight: 850;
        color: #FFFFFF;
      }

.resident-user-unit {
        display: none;
      }

.resident-panel-button {
        margin-top: 16px;
        min-height: 58px;
        border-radius: 17px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        text-decoration: none !important;
        color: #FFFFFF !important;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.16);
        font-weight: 900;
        letter-spacing: -0.02em;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
        transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
      }

.resident-panel-button:hover,
      .resident-panel-button:focus {
        transform: translateY(-1px);
        border-color: rgba(125, 211, 252, 0.36);
        background: rgba(255, 255, 255, 0.10);
      }

.resident-panel-button svg {
        width: 21px;
        height: 21px;
        stroke: currentColor;
      }

.resident-centered-state {
        width: min(620px, calc(100% - 36px));
        margin: 0 auto;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 42px 0;
      }

.resident-state-card {
        width: 100%;
        border-radius: 28px;
        padding: 34px;
        background:
          radial-gradient(circle at 18% 0%, rgba(56, 189, 248, 0.16), transparent 50%),
          rgba(8, 30, 52, 0.78);
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow: var(--cenit-shadow);
        text-align: center;
      }

.resident-state-title {
        margin: 0;
        color: #FFFFFF;
        font-size: 1.75rem;
        line-height: 1.1;
        letter-spacing: -0.04em;
        font-weight: 950;
      }

.resident-state-text {
        margin: 13px auto 0;
        max-width: 440px;
        color: var(--cenit-muted);
        font-size: 1rem;
        line-height: 1.48;
      }

.resident-state-actions {
        margin-top: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
      }

.resident-state-btn {
        min-height: 48px;
        padding: 0 18px;
        border-radius: 15px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none !important;
        color: #FFFFFF !important;
        background: linear-gradient(135deg, #0EA5E9, #0B4F7A);
        border: 1px solid rgba(125, 211, 252, 0.38);
        font-weight: 900;
        box-shadow: 0 16px 30px rgba(14, 165, 233, 0.20);
      }

.resident-bottom-nav {
        display: none;
      }

@media (max-width: 780px) {
.resident-panel {
          background-attachment: scroll;
        }

.resident-header {
          min-height: 76px;
        }

.resident-header-inner {
          width: min(100% - 28px, 680px);
          min-height: 76px;
        }

.resident-top-nav {
          display: none;
        }

.resident-user-copy {
          display: none;
        }

.resident-bell,
        .resident-theme-toggle {
          width: 38px;
          height: 38px;
          border-radius: 13px;
        }

.resident-avatar {
          width: 38px;
          height: 38px;
          flex-basis: 38px;
        }

.resident-brand-mark {
          width: auto;
          height: 44px;
          min-width: 128px;
          max-width: 178px;
          flex-basis: auto;
        }

.resident-brand-logo {
          max-width: 178px;
          height: 44px;
        }

.resident-brand-name,
        .resident-brand-sub {
          display: none;
        }

.resident-shell {
          width: min(100% - 28px, 680px);
          padding-bottom: calc(var(--cenit-bottom-nav-height) + 28px);
        }

.resident-panel-button {
          min-height: 54px;
        }

.resident-bottom-nav {
          position: fixed;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 80;
          height: var(--cenit-bottom-nav-height);
          display: flex;
          justify-content: center;
          padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
          background: rgba(2, 10, 20, 0.80);
          border-top: 1px solid rgba(255, 255, 255, 0.11);
          backdrop-filter: blur(18px);
          -webkit-backdrop-filter: blur(18px);
        }

.resident-bottom-nav-inner {
          width: min(100%, 520px);
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: 7px;
        }

.resident-bottom-link {
          min-width: 0;
          height: 64px;
          border-radius: 18px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 5px;
          text-decoration: none !important;
          color: rgba(255, 255, 255, 0.68) !important;
          font-size: 0.72rem;
          line-height: 1;
          font-weight: 780;
          border: 1px solid transparent;
        }

.resident-bottom-link svg {
          width: 22px;
          height: 22px;
          display: block;
          fill: currentColor;
          stroke: none;
        }

.resident-bottom-link svg path,
        .resident-bottom-link svg rect,
        .resident-bottom-link svg g {
          fill: currentColor;
        }

.resident-bottom-link.is-active {
          color: #FFFFFF !important;
          background: rgba(14, 165, 233, 0.18);
          border-color: rgba(56, 189, 248, 0.24);
          box-shadow: 0 0 26px rgba(14, 165, 233, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.10);
        }

.resident-notification-wrap {
          position: static;
        }

.resident-notification-panel {
          position: fixed;
          top: 76px;
          left: 14px;
          right: 14px;
          width: auto;
          max-height: min(420px, calc(100vh - 170px));
          z-index: 260;
        }

.resident-notification-panel::before {
          top: -7px;
          right: 72px;
        }

.resident-notification-message {
          -webkit-line-clamp: 2;
        }

}

@media (max-width: 390px) {
.resident-shell,
        .resident-header-inner {
          width: min(100% - 22px, 680px);
        }

}

.resident-unit-title-line {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        min-width: 0;
      }

.resident-unit-inline-select-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
        max-width: min(100%, 390px);
      }

.resident-unit-inline-select {
        appearance: none;
        -webkit-appearance: none;
        width: 100%;
        min-height: 40px;
        padding: 0 40px 0 12px;
        border-radius: 14px;
        color: #FFFFFF;
        background: rgba(255, 255, 255, 0.075);
        border: 1px solid rgba(56, 189, 248, 0.34);
        font-size: 1.02rem;
        font-weight: 900;
        letter-spacing: -0.02em;
        outline: none;
        cursor: pointer;
      }

.resident-unit-inline-select option {
        color: #0B1220;
        background: #FFFFFF;
      }

.resident-unit-inline-select-arrow {
        position: absolute;
        right: 13px;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(255, 255, 255, 0.74);
        font-size: 0.78rem;
        pointer-events: none;
      }

@media (max-width: 720px) {
.resident-unit-inline-select-wrap {
          max-width: 100%;
          width: 100%;
        }

.resident-unit-inline-select {
          font-size: 0.92rem;
          min-height: 38px;
        }

}

.resident-unit-context-control {
        margin-top: 9px;
        width: min(100%, 420px);
        display: grid;
        gap: 6px;
      }

.resident-unit-context-meta {
        color: rgba(255, 255, 255, 0.62);
        font-size: 0.72rem;
        line-height: 1.2;
        font-weight: 760;
      }

.resident-unit-context-meta strong {
        color: rgba(255, 255, 255, 0.92);
        font-weight: 950;
      }

.resident-unit-inline-select-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
        width: 100%;
      }

.resident-unit-inline-select {
        appearance: none;
        -webkit-appearance: none;
        width: 100%;
        min-height: 40px;
        padding: 0 40px 0 12px;
        border-radius: 14px;
        color: #FFFFFF;
        background: rgba(255, 255, 255, 0.075);
        border: 1px solid rgba(56, 189, 248, 0.34);
        font-size: 0.9rem;
        font-weight: 850;
        outline: none;
        cursor: pointer;
      }

.resident-unit-inline-select option {
        color: #0B1220;
        background: #FFFFFF;
      }

.resident-unit-inline-select-arrow {
        position: absolute;
        right: 13px;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(255, 255, 255, 0.74);
        font-size: 0.78rem;
        pointer-events: none;
      }

@media (max-width: 720px) {
.resident-unit-context-control {
          width: 100%;
        }

}

.resident-unit-card-shell {
        display: block;
        padding: 18px;
      }

.resident-unit-selector-row {
        width: 100%;
        margin: 0 0 16px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
      }

.resident-unit-selector-copy {
        min-width: 0;
        display: grid;
        gap: 3px;
      }

.resident-unit-selector-label {
        color: #38BDF8;
        font-size: 0.72rem;
        font-weight: 950;
        letter-spacing: 0.055em;
        text-transform: uppercase;
      }

.resident-unit-selector-current {
        color: #FFFFFF;
        font-size: 0.94rem;
        font-weight: 900;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.resident-unit-select-wrap {
        position: relative;
        display: flex;
        width: min(100%, 430px);
      }

.resident-unit-select {
        appearance: none;
        -webkit-appearance: none;
        width: 100%;
        min-height: 42px;
        padding: 0 42px 0 13px;
        border-radius: 15px;
        color: #FFFFFF;
        background: rgba(255, 255, 255, 0.075);
        border: 1px solid rgba(56, 189, 248, 0.36);
        font-size: 0.88rem;
        font-weight: 850;
        outline: none;
        cursor: pointer;
      }

.resident-unit-select option {
        color: #0B1220;
        background: #FFFFFF;
      }

.resident-unit-select-arrow {
        position: absolute;
        right: 13px;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(255, 255, 255, 0.74);
        font-size: 0.78rem;
        pointer-events: none;
      }

.resident-unit-state {
        display: none;
        flex-flow: row nowrap;
        gap: 15px 22px;
        align-items: center;
        width: 100%;
      }

.resident-unit-state.is-active {
        display: flex;
      }

@media (max-width: 780px) {
.resident-unit-card-shell {
          padding: 15px;
        }

.resident-unit-selector-row {
          grid-template-columns: 1fr;
          align-items: stretch;
          gap: 10px;
        }

.resident-unit-select-wrap {
          width: 100%;
        }

.resident-unit-state {
          flex-wrap: wrap;
          gap: 13px;
        }

}

.resident-panel.theme-light {
        --cenit-bg-deep: #E5EBEF;
        --cenit-blue-900: #F4F7F9;
        --cenit-blue-800: #E9EFF3;
        --cenit-blue-700: #D7E0E7;
        --cenit-text: #071527;
        --cenit-muted: #526677;
        --cenit-faint: rgba(7, 21, 39, 0.72);
        --cenit-border: rgba(7, 21, 39, 0.075);
        --cenit-card: #E5EBEF;
        --cenit-card-2: #EDF2F5;
        color: var(--cenit-text);
        background: #E5EBEF;
      }

.resident-panel.theme-light .resident-header {
        background: linear-gradient(135deg, #02233A 0%, #020A14 100%);
        border-color: rgba(255, 255, 255, 0.07);
        box-shadow: 0 10px 24px rgba(2, 10, 20, 0.18);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
      }

.resident-panel.theme-light .resident-bottom-nav {
        background: rgba(229, 235, 239, 0.90);
        border-color: rgba(7, 21, 39, 0.045);
        box-shadow:
          -8px -8px 18px rgba(255, 255, 255, 0.58),
          8px 8px 20px rgba(13, 39, 58, 0.075);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
      }

.resident-panel.theme-light .resident-top-link,
      .resident-panel.theme-light .resident-user-name {
        color: rgba(255, 255, 255, 0.84) !important;
      }

.resident-panel.theme-light .resident-top-link {
        background: rgba(255, 255, 255, 0.035);
        border-color: rgba(255, 255, 255, 0.07);
        box-shadow:
          -3px -3px 8px rgba(255, 255, 255, 0.045),
          4px 4px 10px rgba(0, 0, 0, 0.18),
          inset 1px 1px 0 rgba(255, 255, 255, 0.06);
      }

.resident-panel.theme-light .resident-top-link.is-active {
        color: #FFFFFF !important;
        background: linear-gradient(135deg, #02233A 0%, #0792DB 100%);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow:
          -3px -3px 8px rgba(255, 255, 255, 0.05),
          5px 5px 12px rgba(0, 0, 0, 0.22),
          inset 1px 1px 0 rgba(255, 255, 255, 0.14),
          inset -1px -1px 0 rgba(0, 0, 0, 0.10);
      }

.resident-panel.theme-light .resident-bottom-link {
        color: rgba(7, 21, 39, 0.56) !important;
      }

.resident-panel.theme-light .resident-bottom-link.is-active {
        color: #FFFFFF !important;
        background: linear-gradient(135deg, #02233A 0%, #0792DB 100%);
        border-color: rgba(255, 255, 255, 0.32);
        box-shadow:
          -5px -5px 12px rgba(255, 255, 255, 0.52),
          6px 6px 14px rgba(13, 39, 58, 0.14),
          inset 1px 1px 0 rgba(255, 255, 255, 0.16),
          inset -1px -1px 0 rgba(0, 0, 0, 0.08);
      }

.resident-panel.theme-light .resident-theme-toggle,
      .resident-panel.theme-light .resident-bell {
        color: #FFFFFF;
        background: rgba(255, 255, 255, 0.055);
        border-color: rgba(255, 255, 255, 0.11);
        box-shadow:
          -3px -3px 8px rgba(255, 255, 255, 0.045),
          4px 4px 10px rgba(0, 0, 0, 0.20),
          inset 1px 1px 0 rgba(255, 255, 255, 0.07),
          inset -1px -1px 0 rgba(0, 0, 0, 0.10);
      }

.resident-panel.theme-light .resident-theme-toggle:hover,
      .resident-panel.theme-light .resident-theme-toggle:focus,
      .resident-panel.theme-light .resident-bell:hover,
      .resident-panel.theme-light .resident-bell:focus {
        background: rgba(255, 255, 255, 0.09);
        border-color: rgba(255, 255, 255, 0.18);
        box-shadow:
          -3px -3px 8px rgba(255, 255, 255, 0.055),
          4px 4px 10px rgba(0, 0, 0, 0.18),
          inset 1px 1px 0 rgba(255, 255, 255, 0.10),
          inset -1px -1px 0 rgba(0, 0, 0, 0.08);
      }

.resident-panel.theme-light .resident-unit-select,
      .resident-panel.theme-light .resident-unit-inline-select {
        color: #071527;
        background: #E8EEF2;
        border-color: rgba(14, 165, 233, 0.20);
        box-shadow:
          inset 2px 2px 5px rgba(13, 39, 58, 0.07),
          inset -2px -2px 5px rgba(255, 255, 255, 0.70);
      }

.resident-panel.theme-light .resident-unit-selector-label,
      .resident-panel.theme-light .resident-notification-time {
        color: #0284C7;
      }

.resident-panel.theme-light .resident-notification-panel {
        background: #E8EEF2;
        border-color: rgba(255, 255, 255, 0.58);
        box-shadow:
          -10px -10px 22px rgba(255, 255, 255, 0.58),
          10px 10px 24px rgba(13, 39, 58, 0.10),
          inset 1px 1px 0 rgba(255, 255, 255, 0.62);
      }

.resident-panel.theme-light .resident-notification-panel::before {
        background: #E8EEF2;
        border-color: rgba(255, 255, 255, 0.58);
      }

.resident-panel.theme-light .resident-notification-item,
      .resident-panel.theme-light .resident-notification-empty {
        background: #E5EBEF;
        border-color: rgba(255, 255, 255, 0.52);
        box-shadow:
          inset 2px 2px 5px rgba(13, 39, 58, 0.055),
          inset -2px -2px 5px rgba(255, 255, 255, 0.64);
      }

.resident-panel.theme-light .resident-notification-meta {
        color: rgba(7, 21, 39, 0.56);
      }

.resident-panel.theme-light .resident-notification-more {
        color: #075985 !important;
        background: #E8EEF2;
        border-color: rgba(14, 165, 233, 0.13);
        box-shadow:
          -5px -5px 12px rgba(255, 255, 255, 0.58),
          5px 5px 13px rgba(13, 39, 58, 0.075);
      }

.resident-panel.theme-light .resident-avatar {
        border-color: rgba(255, 255, 255, 0.16);
        box-shadow: 0 8px 18px rgba(2, 10, 20, 0.14);
      }

.resident-panel.theme-light .resident-bell-badge {
        border-color: #020A14;
      }

.resident-panel.theme-light {
        --cenit-bg-deep: #DDE7EC;
        --cenit-blue-900: #EEF3F6;
        --cenit-blue-800: #E5EDF1;
        --cenit-blue-700: #D3DEE5;
        --cenit-text: #071527;
        --cenit-muted: #506575;
        --cenit-faint: rgba(7, 21, 39, 0.70);
        --cenit-border: rgba(7, 21, 39, 0.065);
        --cenit-card: #E2EAEE;
        --cenit-card-2: #E8EFF2;
        color: var(--cenit-text);
        background: #DDE7EC !important;
      }

.resident-panel.theme-light .resident-header,
      .resident-panel.theme-dark .resident-header {
        background: linear-gradient(135deg, #02233A 0%, #020A14 100%) !important;
        border-color: rgba(255, 255, 255, 0.06) !important;
        box-shadow: 0 8px 18px rgba(2, 10, 20, 0.14) !important;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
      }

.resident-panel.theme-light .resident-top-link,
      .resident-panel.theme-dark .resident-top-link,
      .resident-panel.theme-light .resident-theme-toggle,
      .resident-panel.theme-light .resident-bell,
      .resident-panel.theme-dark .resident-theme-toggle,
      .resident-panel.theme-dark .resident-bell {
        background: rgba(255, 255, 255, 0.045) !important;
        border-color: rgba(255, 255, 255, 0.10) !important;
        box-shadow:
          inset 1px 1px 0 rgba(255, 255, 255, 0.06),
          inset -1px -1px 0 rgba(0, 0, 0, 0.16),
          2px 2px 6px rgba(0, 0, 0, 0.14) !important;
      }

.resident-panel.theme-light .resident-top-link:hover,
      .resident-panel.theme-light .resident-top-link:focus,
      .resident-panel.theme-dark .resident-top-link:hover,
      .resident-panel.theme-dark .resident-top-link:focus,
      .resident-panel.theme-light .resident-theme-toggle:hover,
      .resident-panel.theme-light .resident-theme-toggle:focus,
      .resident-panel.theme-light .resident-bell:hover,
      .resident-panel.theme-light .resident-bell:focus,
      .resident-panel.theme-dark .resident-theme-toggle:hover,
      .resident-panel.theme-dark .resident-theme-toggle:focus,
      .resident-panel.theme-dark .resident-bell:hover,
      .resident-panel.theme-dark .resident-bell:focus {
        background: rgba(255, 255, 255, 0.075) !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
        box-shadow:
          inset 1px 1px 0 rgba(255, 255, 255, 0.08),
          inset -1px -1px 0 rgba(0, 0, 0, 0.14),
          2px 2px 6px rgba(0, 0, 0, 0.12) !important;
      }

.resident-panel.theme-light .resident-top-link.is-active,
      .resident-panel.theme-dark .resident-top-link.is-active,
      .resident-panel.theme-light .resident-bottom-link.is-active,
      .resident-panel.theme-dark .resident-bottom-link.is-active {
        color: #FFFFFF !important;
        background: linear-gradient(135deg, #02233A 0%, #0792DB 100%) !important;
        border-color: rgba(255, 255, 255, 0.16) !important;
        box-shadow:
          inset 1px 1px 0 rgba(255, 255, 255, 0.16),
          inset -1px -1px 0 rgba(0, 0, 0, 0.12),
          3px 3px 8px rgba(2, 10, 20, 0.16) !important;
      }

.resident-panel.theme-light .resident-notification-panel {
        background: #E2EAEE !important;
        border-color: rgba(255, 255, 255, 0.50) !important;
        box-shadow:
          -5px -5px 12px rgba(255, 255, 255, 0.48),
          6px 6px 14px rgba(13, 39, 58, 0.075),
          inset 1px 1px 0 rgba(255, 255, 255, 0.50) !important;
      }

.resident-panel.theme-light .resident-notification-panel::before {
        background: #E2EAEE !important;
        border-color: rgba(255, 255, 255, 0.50) !important;
      }

.resident-panel.theme-light .resident-notification-item,
      .resident-panel.theme-light .resident-notification-empty {
        background: #DDE7EC !important;
        border-color: rgba(255, 255, 255, 0.42) !important;
        box-shadow:
          inset 1px 1px 4px rgba(13, 39, 58, 0.045),
          inset -1px -1px 4px rgba(255, 255, 255, 0.54) !important;
      }

.resident-panel.theme-light .resident-bottom-nav {
        background: rgba(221, 231, 236, 0.92) !important;
        border-color: rgba(7, 21, 39, 0.04) !important;
        box-shadow:
          -5px -5px 12px rgba(255, 255, 255, 0.48),
          6px 6px 14px rgba(13, 39, 58, 0.065) !important;
      }

.resident-panel.theme-dark {
        --cenit-bg-deep: #020A14;
        --cenit-card: #081B2E;
        --cenit-card-2: #0A2136;
        background:
          radial-gradient(circle at top left, rgba(7, 146, 219, 0.12) 0%, transparent 34%),
          #020A14 !important;
      }

.resident-panel.theme-dark .resident-notification-panel {
        background: #081B2E !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        box-shadow:
          -4px -4px 10px rgba(255, 255, 255, 0.025),
          7px 7px 18px rgba(0, 0, 0, 0.24),
          inset 1px 1px 0 rgba(255, 255, 255, 0.055) !important;
      }

.resident-panel.theme-dark .resident-notification-panel::before {
        background: #081B2E !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
      }

.resident-panel.theme-dark .resident-notification-item,
      .resident-panel.theme-dark .resident-notification-empty {
        background: #071827 !important;
        border-color: rgba(255, 255, 255, 0.07) !important;
        box-shadow:
          inset 1px 1px 4px rgba(0, 0, 0, 0.18),
          inset -1px -1px 4px rgba(255, 255, 255, 0.035) !important;
      }

:root {
        --cenit-shadow: 0 14px 34px rgba(0, 0, 0, 0.20);
        --cenit-soft-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
      }

.resident-notification-panel,
      .resident-panel.theme-light .resident-notification-panel {
        box-shadow:
          0 8px 20px rgba(0, 0, 0, 0.14),
          inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
        filter: none !important;
        -webkit-filter: none !important;
      }

.resident-notification-item,
      .resident-panel.theme-light .resident-notification-item,
      .resident-notification-empty,
      .resident-panel.theme-light .resident-notification-empty {
        box-shadow:
          3px 5px 12px rgba(0, 0, 0, 0.08),
          -2px -2px 7px rgba(255, 255, 255, 0.04),
          inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
      }

.resident-panel.theme-light {
        background:
          linear-gradient(180deg, #DDE8ED 0%, #E5EDF1 42%, #D8E4EA 100%) !important;
      }

.resident-panel.theme-light .resident-notification-panel {
        background: #E2EBEF !important;
        border-color: rgba(255, 255, 255, 0.68) !important;
        box-shadow:
          0 8px 18px rgba(68, 88, 102, 0.12),
          inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
      }

.resident-panel.theme-light .resident-notification-item,
      .resident-panel.theme-light .resident-notification-empty {
        background: #DCE7EC !important;
        border-color: rgba(255, 255, 255, 0.54) !important;
        box-shadow:
          4px 6px 12px rgba(68, 88, 102, 0.10),
          -4px -4px 11px rgba(255, 255, 255, 0.42),
          inset 0 1px 0 rgba(255, 255, 255, 0.40) !important;
      }

.resident-panel.theme-light .resident-header,
      .resident-panel.theme-dark .resident-header {
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18) !important;
      }

.resident-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 240 !important;
      }

.resident-unit-code {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        max-width: 100%;
        padding: 0 4px;
        color: #FFFFFF;
        font-size: 1.08rem;
        line-height: 1;
        font-weight: 950;
        letter-spacing: -0.045em;
        text-align: center;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
      }

@media (max-width: 780px) {
.resident-unit-code {
          font-size: 1rem;
        }

}

.resident-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 320 !important;
      }

.resident-shell {
        padding-top: 78px !important;
      }

@media (max-width: 780px) {
.resident-shell {
          padding-top: 76px !important;
        }

}

.resident-unit-state {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
      }

.resident-bottom-nav-inner {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        justify-items: stretch !important;
        align-items: stretch !important;
        gap: 7px !important;
      }

.resident-bottom-link {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
      }

.resident-bottom-nav-inner {
        width: 100% !important;
        max-width: none !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        justify-content: stretch !important;
        align-items: stretch !important;
        gap: 4px !important;
      }

.resident-bottom-link {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }

.resident-panel.theme-light {
        background: #D8E3EA !important;
        color: #071527 !important;
      }

.resident-panel.theme-light .resident-shell {
        background: transparent !important;
      }

.resident-unit-switch-card {
        margin: 0 0 18px;
        padding: 14px 16px;
        border-radius: 22px;
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.07) 32%, rgba(0, 0, 0, 0.08) 100%),
          linear-gradient(135deg, #F8D96A 0%, #D89A1F 47%, #8A540A 100%);
        border: 1px solid rgba(255, 239, 184, 0.55);
        box-shadow:
          -5px -5px 12px rgba(255, 255, 255, 0.10),
          7px 8px 18px rgba(0, 0, 0, 0.18),
          inset 1px 1px 0 rgba(255, 255, 255, 0.32),
          inset -1px -1px 0 rgba(0, 0, 0, 0.12);
      }

.resident-unit-switch-card .resident-unit-selector-row {
        margin: 0;
        display: grid;
        grid-template-columns: minmax(150px, 0.55fr) minmax(220px, 1fr) auto;
        align-items: center;
        gap: 14px;
      }

.resident-unit-switch-card .resident-unit-selector-label {
        color: rgba(23, 17, 7, 0.78);
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
      }

.resident-unit-switch-card .resident-unit-select {
        color: #171107;
        background: rgba(255, 248, 221, 0.68);
        border-color: rgba(255, 255, 255, 0.44);
        box-shadow:
          inset 2px 2px 5px rgba(94, 61, 8, 0.12),
          inset -2px -2px 5px rgba(255, 255, 255, 0.50);
      }

.resident-unit-switch-card .resident-unit-select-arrow {
        color: rgba(23, 17, 7, 0.62);
      }

.resident-unit-star {
        width: 38px;
        height: 38px;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        font-size: 1.1rem;
        line-height: 1;
        text-shadow: 0 2px 5px rgba(94, 61, 8, 0.28);
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.08));
        border: 1px solid rgba(255, 255, 255, 0.30);
        box-shadow:
          inset 1px 1px 0 rgba(255, 255, 255, 0.24),
          4px 5px 10px rgba(94, 61, 8, 0.16);
      }

.resident-panel.theme-dark .resident-unit-switch-card {
        border-color: rgba(255, 219, 99, 0.46);
        box-shadow:
          -5px -5px 12px rgba(255, 236, 168, 0.05),
          8px 9px 18px rgba(0, 0, 0, 0.26),
          inset 1px 1px 0 rgba(255, 255, 255, 0.18),
          inset -1px -1px 0 rgba(0, 0, 0, 0.18);
      }

.resident-panel.theme-light .resident-unit-switch-card {
        box-shadow:
          -8px -8px 18px rgba(255, 255, 255, 0.42),
          9px 10px 20px rgba(100, 74, 24, 0.14),
          inset 1px 1px 0 rgba(255, 255, 255, 0.36),
          inset -1px -1px 0 rgba(0, 0, 0, 0.10);
      }

@media (max-width: 780px) {
.resident-unit-switch-card {
          padding: 13px;
          border-radius: 20px;
          margin-bottom: 16px;
        }

.resident-unit-switch-card .resident-unit-selector-row {
          grid-template-columns: 1fr auto;
          gap: 10px;
        }

.resident-unit-switch-card .resident-unit-selector-copy,
        .resident-unit-switch-card .resident-unit-select-wrap {
          grid-column: 1 / -1;
        }

.resident-unit-star {
          position: absolute;
          right: 26px;
          margin-top: 0;
        }

}

.resident-panel.theme-light {
        background: #CEDBE3 !important;
      }

.resident-panel.theme-light .resident-header,
      .resident-panel.theme-dark .resident-header {
        background: linear-gradient(135deg, #02233A 0%, #020A14 100%) !important;
      }

.resident-unit-switch-card .resident-unit-selector-row {
        grid-template-columns: minmax(180px, auto) minmax(240px, 430px) !important;
        justify-content: space-between !important;
      }

.resident-unit-switch-card .resident-unit-selector-label {
        font-size: 0.72rem !important;
        line-height: 1.05 !important;
        font-weight: 920 !important;
        letter-spacing: 0.035em !important;
        text-transform: uppercase !important;
      }

.resident-unit-switch-card .resident-unit-select-wrap {
        justify-self: end !important;
        width: min(100%, 430px) !important;
      }

.resident-unit-switch-card .resident-unit-select {
        color: #071527 !important;
        background: #FFFFFF !important;
        border-color: rgba(255, 255, 255, 0.78) !important;
        box-shadow:
          inset 1px 1px 2px rgba(15, 23, 42, 0.035),
          2px 3px 7px rgba(0, 0, 0, 0.08) !important;
      }

.resident-unit-switch-card .resident-unit-select-arrow {
        color: rgba(7, 21, 39, 0.62) !important;
      }

.resident-unit-star {
        display: none !important;
      }

.resident-panel.theme-dark .resident-unit-switch-card {
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.045) 34%, rgba(0, 0, 0, 0.08) 100%),
          linear-gradient(135deg, #8A540A 0%, #F8D96A 100%) !important;
        border-color: rgba(255, 219, 99, 0.42) !important;
        box-shadow:
          4px 5px 12px rgba(0, 0, 0, 0.20),
          inset 1px 1px 0 rgba(255, 255, 255, 0.20),
          inset -1px -1px 0 rgba(0, 0, 0, 0.16) !important;
      }

.resident-panel.theme-light .resident-unit-switch-card {
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 34%, rgba(0, 0, 0, 0.16) 100%),
          linear-gradient(135deg, #040811 0%, #172332 100%) !important;
        border-color: rgba(255, 255, 255, 0.10) !important;
        box-shadow:
          4px 5px 11px rgba(26, 42, 56, 0.18),
          inset 1px 1px 0 rgba(255, 255, 255, 0.10),
          inset -1px -1px 0 rgba(0, 0, 0, 0.28) !important;
      }

.resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-label {
        color: rgba(255, 255, 255, 0.82) !important;
        text-shadow: none !important;
      }

@media (max-width: 780px) {
.resident-unit-switch-card .resident-unit-selector-row {
          grid-template-columns: 1fr !important;
          justify-content: stretch !important;
        }

.resident-unit-switch-card .resident-unit-select-wrap {
          justify-self: stretch !important;
          width: 100% !important;
        }

}

.resident-unit-switch-card .resident-unit-selector-label {
        font-size: 0.72rem !important;
        line-height: 1.05 !important;
        font-weight: 920 !important;
        letter-spacing: 0.035em !important;
        text-transform: uppercase !important;
      }

.resident-panel.theme-light .resident-unit-switch-card {
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 34%, rgba(0, 0, 0, 0.16) 100%),
          linear-gradient(135deg, #040811 0%, #172332 100%) !important;
      }

.resident-unit-switch-card .resident-unit-selector-label,
      .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-label,
      .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-label {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.72rem !important;
        line-height: 1.05 !important;
        font-weight: 920 !important;
        letter-spacing: 0.035em !important;
        text-transform: uppercase !important;
        white-space: normal !important;
      }

.resident-unit-switch-card .resident-unit-selector-copy {
        display: flex !important;
        align-items: center !important;
        min-height: 42px !important;
      }

.resident-unit-switch-card .resident-unit-selector-label,
      .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-label,
      .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-label {
        font-size: 0.82rem !important;
        line-height: 1.05 !important;
        font-weight: 950 !important;
        letter-spacing: 0.035em !important;
        text-transform: uppercase !important;
      }

@media (max-width: 780px) {
.resident-unit-switch-card .resident-unit-selector-label,
        .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-label,
        .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-label {
          font-size: 0.80rem !important;
        }

}

.resident-unit-switch-card,
      .resident-panel.theme-dark .resident-unit-switch-card,
      .resident-panel.theme-light .resident-unit-switch-card {
        margin: 0 0 18px !important;
        padding: 14px 16px !important;
        border-radius: 22px !important;
      }

.resident-panel.theme-dark .resident-unit-switch-card {
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.055) 34%, rgba(255, 255, 255, 0.00) 72%),
          #D7E2E8 !important;
        border: 1px solid rgba(255, 255, 255, 0.50) !important;
        box-shadow:
          -2px -2px 6px rgba(255, 255, 255, 0.06),
          4px 5px 10px rgba(0, 0, 0, 0.18),
          inset 1px 1px 0 rgba(255, 255, 255, 0.46),
          inset -1px -1px 0 rgba(25, 50, 68, 0.045) !important;
      }

.resident-panel.theme-light .resident-unit-switch-card {
        background:
          linear-gradient(135deg, rgba(7, 146, 219, 0.13) 0%, rgba(7, 146, 219, 0.035) 32%, rgba(7, 146, 219, 0.00) 72%),
          #061B2F !important;
        border: 1px solid rgba(6, 135, 203, 0.50) !important;
        box-shadow:
          -3px -3px 8px rgba(255, 255, 255, 0.34),
          5px 6px 12px rgba(48, 68, 84, 0.18),
          inset 1px 1px 0 rgba(255, 255, 255, 0.045),
          inset -1px -1px 0 rgba(0, 0, 0, 0.16) !important;
      }

.resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-label {
        color: rgba(7, 21, 39, 0.74) !important;
        text-shadow: none !important;
      }

.resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-label {
        color: rgba(255, 255, 255, 0.82) !important;
        text-shadow: none !important;
      }

.resident-panel.theme-dark .resident-unit-switch-card .resident-unit-select,
      .resident-panel.theme-light .resident-unit-switch-card .resident-unit-select {
        color: #071527 !important;
        background: #FFFFFF !important;
        border-color: rgba(255, 255, 255, 0.78) !important;
        box-shadow:
          inset 1px 1px 2px rgba(15, 23, 42, 0.035),
          2px 3px 7px rgba(0, 0, 0, 0.08) !important;
      }

.resident-panel.theme-dark .resident-unit-switch-card .resident-unit-select-arrow,
      .resident-panel.theme-light .resident-unit-switch-card .resident-unit-select-arrow {
        color: rgba(7, 21, 39, 0.62) !important;
      }

@media (max-width: 780px) {
.resident-unit-switch-card,
        .resident-panel.theme-dark .resident-unit-switch-card,
        .resident-panel.theme-light .resident-unit-switch-card {
          padding: 13px !important;
          border-radius: 20px !important;
          margin-bottom: 16px !important;
        }

}

@media (min-width: 781px) {
.resident-header-inner {
          position: relative !important;
          display: grid !important;
          grid-template-columns: minmax(240px, 1fr) auto minmax(240px, 1fr) !important;
          align-items: center !important;
          gap: 18px !important;
        }

.resident-brand {
          grid-column: 1 !important;
          justify-self: start !important;
          z-index: 2 !important;
        }

.resident-top-nav {
          grid-column: 2 !important;
          position: static !important;
          left: auto !important;
          top: auto !important;
          transform: none !important;
          justify-self: center !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          width: auto !important;
          max-width: none !important;
          padding-left: 0 !important;
          margin: 0 !important;
          gap: 8px !important;
        }

.resident-account {
          grid-column: 3 !important;
          justify-self: end !important;
          margin-left: 0 !important;
          z-index: 2 !important;
        }

}

@media (max-width: 780px) {
.resident-header-inner {
          display: flex !important;
          align-items: center !important;
          justify-content: space-between !important;
          gap: 12px !important;
        }

.resident-top-nav {
          display: none !important;
          position: static !important;
          transform: none !important;
          max-width: none !important;
        }

.resident-account {
          margin-left: auto !important;
        }

}

.resident-bottom-nav {
        overflow: hidden !important;
      }

.resident-bottom-nav-inner {
        width: min(100%, 520px) !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        justify-items: stretch !important;
        gap: 6px !important;
      }

.resident-bottom-link {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
        padding: 7px 3px 6px !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        overflow: hidden !important;
        line-height: 1 !important;
      }

.resident-bottom-link img.resident-bottom-img,
      .resident-bottom-link .resident-bottom-img,
      .resident-bottom-img {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
        flex: 0 0 22px !important;
        display: block !important;
        object-fit: contain !important;
        object-position: center center !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0.76 !important;
        visibility: visible !important;
        pointer-events: none !important;
        transform: none !important;
        filter: none !important;
      }

.resident-bottom-link.is-active img.resident-bottom-img,
      .resident-bottom-link.is-active .resident-bottom-img {
        opacity: 1 !important;
        filter: none !important;
      }

.resident-bottom-link span {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 0.68rem !important;
        line-height: 1 !important;
        font-weight: 820 !important;
      }

@media (max-width: 390px) {
.resident-bottom-nav-inner {
          gap: 4px !important;
        }

.resident-bottom-link {
          height: 62px !important;
          min-height: 62px !important;
          max-height: 62px !important;
          padding-left: 2px !important;
          padding-right: 2px !important;
        }

.resident-bottom-link img.resident-bottom-img,
        .resident-bottom-link .resident-bottom-img,
        .resident-bottom-img {
          width: 21px !important;
          height: 21px !important;
          min-width: 21px !important;
          min-height: 21px !important;
          max-width: 21px !important;
          max-height: 21px !important;
          flex-basis: 21px !important;
        }

.resident-bottom-link span {
          font-size: 0.64rem !important;
        }

}

.resident-panel.theme-light .resident-bottom-link:not(.is-active) {
        color: rgba(7, 21, 39, 0.66) !important;
      }

.resident-panel.theme-light .resident-bottom-link:not(.is-active) img.resident-bottom-img,
      .resident-panel.theme-light .resident-bottom-link:not(.is-active) .resident-bottom-img {
        filter: brightness(0) saturate(100%) invert(14%) sepia(30%) saturate(1018%) hue-rotate(169deg) brightness(92%) contrast(94%) !important;
        opacity: 0.74 !important;
      }

.resident-panel.theme-light .resident-bottom-link:not(.is-active):hover,
      .resident-panel.theme-light .resident-bottom-link:not(.is-active):focus {
        color: rgba(7, 21, 39, 0.82) !important;
      }

.resident-panel.theme-light .resident-bottom-link:not(.is-active):hover img.resident-bottom-img,
      .resident-panel.theme-light .resident-bottom-link:not(.is-active):focus img.resident-bottom-img,
      .resident-panel.theme-light .resident-bottom-link:not(.is-active):hover .resident-bottom-img,
      .resident-panel.theme-light .resident-bottom-link:not(.is-active):focus .resident-bottom-img {
        filter: brightness(0) saturate(100%) invert(12%) sepia(34%) saturate(1100%) hue-rotate(169deg) brightness(88%) contrast(98%) !important;
        opacity: 0.88 !important;
      }

.resident-panel.theme-light .resident-bottom-link.is-active,
      .resident-panel.theme-light .resident-bottom-link.is-active span {
        color: #FFFFFF !important;
      }

.resident-panel.theme-light .resident-bottom-link.is-active img.resident-bottom-img,
      .resident-panel.theme-light .resident-bottom-link.is-active .resident-bottom-img {
        filter: none !important;
        opacity: 1 !important;
      }

.resident-bottom-nav-inner {
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important;
      }

.resident-panel.theme-dark .resident-bottom-link:not(.is-active) img.resident-bottom-img,
.resident-panel.theme-dark .resident-bottom-link:not(.is-active) .resident-bottom-img {
        filter: none !important;
        opacity: 0.74 !important;
      }

.resident-unit-switch-icon {
        width: 46px !important;
        height: 46px !important;
        border-radius: 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
      }

.resident-unit-switch-icon img {
        width: 54px !important;
        height: 54px !important;
        object-fit: contain !important;
        display: block !important;
        filter: drop-shadow(0 7px 5px rgba(0, 0, 0, 0.22)) !important;
      }

.resident-panel.theme-light .resident-unit-switch-icon img {
        filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.16)) !important;
      }

@media (min-width: 781px) {
.resident-unit-switch-card .resident-unit-selector-row {
          grid-template-columns: 52px minmax(180px, auto) minmax(240px, 430px) !important;
          justify-content: space-between !important;
          align-items: center !important;
        }

}

@media (max-width: 780px) {
.resident-unit-switch-card .resident-unit-selector-row {
          grid-template-columns: 44px 1fr !important;
          align-items: center !important;
        }

.resident-unit-switch-card .resident-unit-select-wrap {
          grid-column: 1 / -1 !important;
        }

.resident-unit-switch-icon {
          width: 42px !important;
          height: 42px !important;
        }

.resident-unit-switch-icon img {
          width: 48px !important;
          height: 48px !important;
        }

}

.resident-unit-switch-card,
      .resident-panel.theme-dark .resident-unit-switch-card,
      .resident-panel.theme-light .resident-unit-switch-card {
        padding: 16px 18px !important;
        border-radius: 24px !important;
      }

.resident-unit-switch-card .resident-unit-selector-row,
      .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-row,
      .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-row {
        display: grid !important;
        grid-template-columns: 86px minmax(220px, 1fr) minmax(260px, 430px) !important;
        align-items: center !important;
        gap: 18px !important;
        justify-content: stretch !important;
        width: 100% !important;
      }

.resident-unit-switch-icon,
      .resident-panel.theme-dark .resident-unit-switch-icon,
      .resident-panel.theme-light .resident-unit-switch-icon {
        width: 74px !important;
        height: 62px !important;
        border-radius: 20px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        justify-self: start !important;
        overflow: visible !important;
        background:
          radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.10) 42%, rgba(255, 255, 255, 0.00) 72%) !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        box-shadow:
          4px 5px 12px rgba(0, 0, 0, 0.10),
          inset 1px 1px 0 rgba(255, 255, 255, 0.16),
          inset -1px -1px 0 rgba(0, 0, 0, 0.08) !important;
      }

.resident-unit-switch-icon img,
      .resident-panel.theme-dark .resident-unit-switch-icon img,
      .resident-panel.theme-light .resident-unit-switch-icon img {
        width: 78px !important;
        height: 78px !important;
        max-width: 78px !important;
        max-height: 78px !important;
        object-fit: contain !important;
        object-position: center center !important;
        display: block !important;
        transform: translateY(-3px) !important;
        filter: drop-shadow(0 8px 5px rgba(0, 0, 0, 0.20)) !important;
      }

.resident-panel.theme-dark .resident-unit-switch-icon {
        background:
          radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.18) 42%, rgba(255, 255, 255, 0.02) 74%) !important;
        border-color: rgba(7, 146, 219, 0.20) !important;
      }

.resident-panel.theme-dark .resident-unit-switch-icon img {
        filter:
          drop-shadow(0 8px 5px rgba(0, 0, 0, 0.26))
          drop-shadow(0 0 18px rgba(7, 146, 219, 0.18)) !important;
      }

.resident-panel.theme-light .resident-unit-switch-icon {
        background:
          radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035) 42%, rgba(255, 255, 255, 0.00) 74%) !important;
        border-color: rgba(255, 255, 255, 0.10) !important;
      }

.resident-unit-switch-card .resident-unit-selector-copy,
      .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-copy,
      .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-copy {
        min-height: 62px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
      }

.resident-unit-switch-card .resident-unit-selector-label,
      .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-label,
      .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-label {
        font-size: 0.82rem !important;
        line-height: 1.12 !important;
        font-weight: 950 !important;
        letter-spacing: 0.045em !important;
        text-transform: uppercase !important;
        text-align: left !important;
      }

.resident-unit-switch-card .resident-unit-select-wrap,
      .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-select-wrap,
      .resident-panel.theme-light .resident-unit-switch-card .resident-unit-select-wrap {
        justify-self: end !important;
        width: min(100%, 430px) !important;
      }

@media (max-width: 780px) {
.resident-unit-switch-card,
        .resident-panel.theme-dark .resident-unit-switch-card,
        .resident-panel.theme-light .resident-unit-switch-card {
          padding: 14px !important;
          border-radius: 22px !important;
        }

.resident-unit-switch-card .resident-unit-selector-row,
        .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-row,
        .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-row {
          grid-template-columns: 66px minmax(0, 1fr) !important;
          gap: 12px !important;
          align-items: center !important;
        }

.resident-unit-switch-icon,
        .resident-panel.theme-dark .resident-unit-switch-icon,
        .resident-panel.theme-light .resident-unit-switch-icon {
          width: 58px !important;
          height: 54px !important;
          border-radius: 18px !important;
        }

.resident-unit-switch-icon img,
        .resident-panel.theme-dark .resident-unit-switch-icon img,
        .resident-panel.theme-light .resident-unit-switch-icon img {
          width: 64px !important;
          height: 64px !important;
          max-width: 64px !important;
          max-height: 64px !important;
          transform: translateY(-2px) !important;
        }

.resident-unit-switch-card .resident-unit-selector-copy,
        .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-copy,
        .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-copy {
          min-height: 54px !important;
        }

.resident-unit-switch-card .resident-unit-select-wrap,
        .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-select-wrap,
        .resident-panel.theme-light .resident-unit-switch-card .resident-unit-select-wrap {
          grid-column: 1 / -1 !important;
          justify-self: stretch !important;
          width: 100% !important;
        }

}

.resident-unit-switch-card,
      .resident-panel.theme-dark .resident-unit-switch-card,
      .resident-panel.theme-light .resident-unit-switch-card {
        min-height: 118px !important;
        padding: 20px 24px !important;
        border-radius: 26px !important;
        overflow: visible !important;
      }

.resident-unit-switch-card .resident-unit-selector-row,
      .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-row,
      .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-row {
        display: grid !important;
        grid-template-columns: 126px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        column-gap: 24px !important;
        row-gap: 12px !important;
        width: 100% !important;
      }

.resident-unit-switch-icon,
      .resident-panel.theme-dark .resident-unit-switch-icon,
      .resident-panel.theme-light .resident-unit-switch-icon {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        width: 106px !important;
        height: 92px !important;
        border-radius: 24px !important;
        align-self: center !important;
        justify-self: start !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        background:
          radial-gradient(circle at 36% 20%, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.14) 42%, rgba(255, 255, 255, 0.00) 74%) !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        box-shadow:
          5px 7px 16px rgba(0, 0, 0, 0.12),
          inset 1px 1px 0 rgba(255, 255, 255, 0.18),
          inset -1px -1px 0 rgba(0, 0, 0, 0.08) !important;
      }

.resident-unit-switch-icon img,
      .resident-panel.theme-dark .resident-unit-switch-icon img,
      .resident-panel.theme-light .resident-unit-switch-icon img {
        width: 118px !important;
        height: 118px !important;
        max-width: 118px !important;
        max-height: 118px !important;
        object-fit: contain !important;
        object-position: center center !important;
        display: block !important;
        transform: translateY(-4px) !important;
        filter: drop-shadow(0 10px 6px rgba(0, 0, 0, 0.22)) !important;
      }

.resident-panel.theme-dark .resident-unit-switch-icon img {
        filter:
          drop-shadow(0 10px 6px rgba(0, 0, 0, 0.28))
          drop-shadow(0 0 20px rgba(7, 146, 219, 0.18)) !important;
      }

.resident-unit-switch-card .resident-unit-selector-copy,
      .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-copy,
      .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-copy {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-height: 0 !important;
        display: flex !important;
        align-items: end !important;
        justify-content: flex-start !important;
      }

.resident-unit-switch-card .resident-unit-selector-label,
      .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-label,
      .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-label {
        font-size: 0.86rem !important;
        line-height: 1.08 !important;
        font-weight: 950 !important;
        letter-spacing: 0.045em !important;
        text-transform: uppercase !important;
        text-align: left !important;
      }

.resident-unit-switch-card .resident-unit-select-wrap,
      .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-select-wrap,
      .resident-panel.theme-light .resident-unit-switch-card .resident-unit-select-wrap {
        grid-column: 2 !important;
        grid-row: 2 !important;
        justify-self: stretch !important;
        width: min(100%, 560px) !important;
      }

.resident-unit-switch-card .resident-unit-select,
      .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-select,
      .resident-panel.theme-light .resident-unit-switch-card .resident-unit-select {
        min-height: 48px !important;
        border-radius: 17px !important;
        font-size: 0.92rem !important;
        font-weight: 900 !important;
      }

@media (max-width: 780px) {
.resident-unit-switch-card,
        .resident-panel.theme-dark .resident-unit-switch-card,
        .resident-panel.theme-light .resident-unit-switch-card {
          min-height: 150px !important;
          padding: 16px !important;
          border-radius: 24px !important;
        }

.resident-unit-switch-card .resident-unit-selector-row,
        .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-row,
        .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-row {
          grid-template-columns: 92px minmax(0, 1fr) !important;
          grid-template-rows: auto auto !important;
          column-gap: 14px !important;
          row-gap: 12px !important;
        }

.resident-unit-switch-icon,
        .resident-panel.theme-dark .resident-unit-switch-icon,
        .resident-panel.theme-light .resident-unit-switch-icon {
          grid-column: 1 !important;
          grid-row: 1 !important;
          width: 84px !important;
          height: 76px !important;
          border-radius: 22px !important;
        }

.resident-unit-switch-icon img,
        .resident-panel.theme-dark .resident-unit-switch-icon img,
        .resident-panel.theme-light .resident-unit-switch-icon img {
          width: 92px !important;
          height: 92px !important;
          max-width: 92px !important;
          max-height: 92px !important;
          transform: translateY(-3px) !important;
        }

.resident-unit-switch-card .resident-unit-selector-copy,
        .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-copy,
        .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-copy {
          grid-column: 2 !important;
          grid-row: 1 !important;
          align-items: center !important;
        }

.resident-unit-switch-card .resident-unit-selector-label,
        .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-label,
        .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-label {
          font-size: 0.78rem !important;
          line-height: 1.18 !important;
        }

.resident-unit-switch-card .resident-unit-select-wrap,
        .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-select-wrap,
        .resident-panel.theme-light .resident-unit-switch-card .resident-unit-select-wrap {
          grid-column: 1 / -1 !important;
          grid-row: 2 !important;
          width: 100% !important;
        }

.resident-unit-switch-card .resident-unit-select,
        .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-select,
        .resident-panel.theme-light .resident-unit-switch-card .resident-unit-select {
          min-height: 46px !important;
        }

}

.resident-unit-switch-card,
      .resident-panel.theme-dark .resident-unit-switch-card,
      .resident-panel.theme-light .resident-unit-switch-card {
        min-height: 142px !important;
        padding: 24px 28px !important;
        border-radius: 28px !important;
        overflow: visible !important;
        position: relative !important;
      }

.resident-unit-switch-card::after,
      .resident-panel.theme-dark .resident-unit-switch-card::after,
      .resident-panel.theme-light .resident-unit-switch-card::after {
        content: "" !important;
        position: absolute !important;
        inset: 1px !important;
        border-radius: 27px !important;
        pointer-events: none !important;
        background:
          radial-gradient(circle at 12% 42%, rgba(7, 146, 219, 0.18), rgba(7, 146, 219, 0.00) 32%),
          radial-gradient(circle at 86% 18%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.00) 36%) !important;
        opacity: 0.78 !important;
      }

.resident-unit-switch-card .resident-unit-selector-row,
      .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-row,
      .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-row {
        position: relative !important;
        z-index: 1 !important;
        display: grid !important;
        grid-template-columns: 148px minmax(0, 1fr) minmax(280px, 480px) !important;
        grid-template-rows: auto !important;
        align-items: center !important;
        gap: 24px !important;
        width: 100% !important;
      }

.resident-unit-switch-icon,
      .resident-panel.theme-dark .resident-unit-switch-icon,
      .resident-panel.theme-light .resident-unit-switch-icon {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 138px !important;
        height: 112px !important;
        border-radius: 0 !important;
        align-self: center !important;
        justify-self: start !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
      }

.resident-unit-switch-icon img,
      .resident-panel.theme-dark .resident-unit-switch-icon img,
      .resident-panel.theme-light .resident-unit-switch-icon img {
        width: 146px !important;
        height: 146px !important;
        max-width: 146px !important;
        max-height: 146px !important;
        object-fit: contain !important;
        object-position: center center !important;
        display: block !important;
        transform: translateY(-6px) !important;
        filter:
          drop-shadow(0 16px 10px rgba(0, 0, 0, 0.24))
          drop-shadow(0 0 24px rgba(7, 146, 219, 0.16)) !important;
      }

.resident-unit-switch-card .resident-unit-selector-copy,
      .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-copy,
      .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-copy {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-height: 88px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
      }

.resident-unit-switch-card .resident-unit-selector-label,
      .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-label,
      .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-label {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        text-align: left !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        line-height: 1.05 !important;
      }

.resident-unit-selector-kicker,
      .resident-panel.theme-dark .resident-unit-selector-kicker,
      .resident-panel.theme-light .resident-unit-selector-kicker {
        display: inline-flex !important;
        width: fit-content !important;
        max-width: 100% !important;
        align-items: center !important;
        padding: 5px 9px !important;
        border-radius: 999px !important;
        background: rgba(7, 146, 219, 0.12) !important;
        border: 1px solid rgba(7, 146, 219, 0.18) !important;
        color: var(--cenit-blue-strong) !important;
        font-size: 0.68rem !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        letter-spacing: 0.09em !important;
        text-transform: uppercase !important;
      }

.resident-unit-selector-title,
      .resident-panel.theme-dark .resident-unit-selector-title,
      .resident-panel.theme-light .resident-unit-selector-title {
        display: block !important;
        color: var(--cenit-text) !important;
        font-size: clamp(1.28rem, 2.1vw, 1.75rem) !important;
        line-height: 0.98 !important;
        font-weight: 950 !important;
        letter-spacing: -0.045em !important;
      }

.resident-unit-selector-subtitle,
      .resident-panel.theme-dark .resident-unit-selector-subtitle,
      .resident-panel.theme-light .resident-unit-selector-subtitle {
        display: block !important;
        max-width: 390px !important;
        color: var(--cenit-muted) !important;
        font-size: 0.84rem !important;
        line-height: 1.25 !important;
        font-weight: 800 !important;
        letter-spacing: -0.01em !important;
      }

.resident-unit-switch-card .resident-unit-select-wrap,
      .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-select-wrap,
      .resident-panel.theme-light .resident-unit-switch-card .resident-unit-select-wrap {
        grid-column: 3 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        width: min(100%, 480px) !important;
      }

.resident-unit-switch-card .resident-unit-select,
      .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-select,
      .resident-panel.theme-light .resident-unit-switch-card .resident-unit-select {
        min-height: 52px !important;
        border-radius: 18px !important;
        font-size: 0.95rem !important;
        font-weight: 950 !important;
        box-shadow:
          0 12px 24px rgba(0, 0, 0, 0.10),
          inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
      }

.resident-panel.theme-dark .resident-unit-selector-kicker {
        background: rgba(7, 146, 219, 0.16) !important;
        border-color: rgba(7, 146, 219, 0.28) !important;
        color: #33C9FF !important;
      }

.resident-panel.theme-dark .resident-unit-selector-title {
        color: #FFFFFF !important;
      }

.resident-panel.theme-dark .resident-unit-selector-subtitle {
        color: rgba(235, 246, 255, 0.72) !important;
      }

@media (max-width: 900px) {
.resident-unit-switch-card .resident-unit-selector-row,
        .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-row,
        .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-row {
          grid-template-columns: 126px minmax(0, 1fr) !important;
          grid-template-rows: auto auto !important;
          gap: 16px !important;
        }

.resident-unit-switch-card .resident-unit-select-wrap,
        .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-select-wrap,
        .resident-panel.theme-light .resident-unit-switch-card .resident-unit-select-wrap {
          grid-column: 1 / -1 !important;
          grid-row: 2 !important;
          justify-self: stretch !important;
          width: 100% !important;
        }

}

@media (max-width: 780px) {
.resident-unit-switch-card,
        .resident-panel.theme-dark .resident-unit-switch-card,
        .resident-panel.theme-light .resident-unit-switch-card {
          min-height: 212px !important;
          padding: 18px !important;
          border-radius: 26px !important;
        }

.resident-unit-switch-card::after,
        .resident-panel.theme-dark .resident-unit-switch-card::after,
        .resident-panel.theme-light .resident-unit-switch-card::after {
          border-radius: 25px !important;
          background:
            radial-gradient(circle at 22% 16%, rgba(7, 146, 219, 0.20), rgba(7, 146, 219, 0.00) 42%),
            radial-gradient(circle at 88% 10%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.00) 38%) !important;
        }

.resident-unit-switch-card .resident-unit-selector-row,
        .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-row,
        .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-row {
          grid-template-columns: 118px minmax(0, 1fr) !important;
          grid-template-rows: auto auto !important;
          column-gap: 12px !important;
          row-gap: 16px !important;
          align-items: center !important;
        }

.resident-unit-switch-icon,
        .resident-panel.theme-dark .resident-unit-switch-icon,
        .resident-panel.theme-light .resident-unit-switch-icon {
          grid-column: 1 !important;
          grid-row: 1 !important;
          width: 112px !important;
          height: 108px !important;
          background: transparent !important;
          border: 0 !important;
          box-shadow: none !important;
        }

.resident-unit-switch-icon img,
        .resident-panel.theme-dark .resident-unit-switch-icon img,
        .resident-panel.theme-light .resident-unit-switch-icon img {
          width: 126px !important;
          height: 126px !important;
          max-width: 126px !important;
          max-height: 126px !important;
          transform: translate(-4px, -4px) !important;
        }

.resident-unit-switch-card .resident-unit-selector-copy,
        .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-copy,
        .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-copy {
          grid-column: 2 !important;
          grid-row: 1 !important;
          min-height: 108px !important;
          align-items: center !important;
        }

.resident-unit-selector-kicker,
        .resident-panel.theme-dark .resident-unit-selector-kicker,
        .resident-panel.theme-light .resident-unit-selector-kicker {
          font-size: 0.58rem !important;
          padding: 4px 7px !important;
          letter-spacing: 0.075em !important;
        }

.resident-unit-selector-title,
        .resident-panel.theme-dark .resident-unit-selector-title,
        .resident-panel.theme-light .resident-unit-selector-title {
          font-size: 1.26rem !important;
          line-height: 0.98 !important;
        }

.resident-unit-selector-subtitle,
        .resident-panel.theme-dark .resident-unit-selector-subtitle,
        .resident-panel.theme-light .resident-unit-selector-subtitle {
          font-size: 0.76rem !important;
          line-height: 1.2 !important;
        }

.resident-unit-switch-card .resident-unit-select-wrap,
        .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-select-wrap,
        .resident-panel.theme-light .resident-unit-switch-card .resident-unit-select-wrap {
          grid-column: 1 / -1 !important;
          grid-row: 2 !important;
          width: 100% !important;
        }

.resident-unit-switch-card .resident-unit-select,
        .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-select,
        .resident-panel.theme-light .resident-unit-switch-card .resident-unit-select {
          min-height: 50px !important;
        }

}

.resident-unit-switch-card,
      .resident-panel.theme-dark .resident-unit-switch-card,
      .resident-panel.theme-light .resident-unit-switch-card {
        min-height: 154px !important;
        padding: 26px 30px !important;
        border-radius: 30px !important;
      }

.resident-panel.theme-dark .resident-unit-switch-card {
        background:
          linear-gradient(135deg, rgba(7, 146, 219, 0.13) 0%, rgba(7, 146, 219, 0.035) 34%, rgba(7, 146, 219, 0.00) 74%),
          #061B2F !important;
        border-color: rgba(6, 135, 203, 0.52) !important;
        box-shadow:
          -3px -3px 8px rgba(22, 58, 84, 0.10),
          5px 6px 12px rgba(0, 0, 0, 0.22),
          inset 1px 1px 0 rgba(255, 255, 255, 0.045),
          inset -1px -1px 0 rgba(0, 0, 0, 0.16) !important;
      }

.resident-panel.theme-light .resident-unit-switch-card {
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.12) 38%, rgba(255, 255, 255, 0.00) 78%),
          #E4EDF2 !important;
        border-color: rgba(255, 255, 255, 0.72) !important;
        box-shadow:
          -4px -4px 10px rgba(255, 255, 255, 0.42),
          5px 6px 12px rgba(48, 68, 84, 0.080),
          inset 1px 1px 0 rgba(255, 255, 255, 0.64),
          inset -1px -1px 0 rgba(25, 50, 68, 0.030) !important;
      }

.resident-unit-switch-card::after,
      .resident-panel.theme-dark .resident-unit-switch-card::after,
      .resident-panel.theme-light .resident-unit-switch-card::after {
        background:
          radial-gradient(circle at 16% 52%, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.00) 32%),
          radial-gradient(circle at 82% 18%, rgba(7, 146, 219, 0.15), rgba(7, 146, 219, 0.00) 36%) !important;
        opacity: 0.86 !important;
      }

.resident-unit-switch-card .resident-unit-selector-row,
      .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-row,
      .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-row {
        grid-template-columns: 178px minmax(0, 1fr) minmax(300px, 490px) !important;
        gap: 26px !important;
      }

.resident-unit-switch-icon,
      .resident-panel.theme-dark .resident-unit-switch-icon,
      .resident-panel.theme-light .resident-unit-switch-icon {
        width: 166px !important;
        height: 124px !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
      }

.resident-unit-switch-icon img,
      .resident-panel.theme-dark .resident-unit-switch-icon img,
      .resident-panel.theme-light .resident-unit-switch-icon img {
        width: 178px !important;
        height: 178px !important;
        max-width: 178px !important;
        max-height: 178px !important;
        object-fit: contain !important;
        object-position: center center !important;
        transform: translate(-8px, -11px) !important;
      }

.resident-panel.theme-dark .resident-unit-switch-icon img {
        filter:
          drop-shadow(0 18px 12px rgba(0, 0, 0, 0.34))
          drop-shadow(0 0 22px rgba(7, 146, 219, 0.18)) !important;
      }

.resident-panel.theme-light .resident-unit-switch-icon img {
        filter:
          drop-shadow(0 14px 10px rgba(48, 68, 84, 0.18))
          drop-shadow(-5px -5px 10px rgba(255, 255, 255, 0.40)) !important;
      }

.resident-unit-selector-kicker,
      .resident-panel.theme-dark .resident-unit-selector-kicker,
      .resident-panel.theme-light .resident-unit-selector-kicker {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(251, 191, 36, 0.26) 100%) !important;
        border-color: rgba(245, 158, 11, 0.42) !important;
        color: #B45309 !important;
        box-shadow:
          0 5px 12px rgba(245, 158, 11, 0.12),
          inset 1px 1px 0 rgba(255, 255, 255, 0.22) !important;
      }

.resident-panel.theme-dark .resident-unit-selector-kicker {
        color: #FCD34D !important;
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(251, 191, 36, 0.12) 100%) !important;
        border-color: rgba(251, 191, 36, 0.36) !important;
      }

.resident-panel.theme-light .resident-unit-selector-title {
        color: #071527 !important;
        text-shadow: none !important;
      }

.resident-panel.theme-dark .resident-unit-selector-title {
        color: #FFFFFF !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22) !important;
      }

.resident-panel.theme-light .resident-unit-selector-subtitle {
        color: rgba(7, 21, 39, 0.66) !important;
      }

.resident-panel.theme-dark .resident-unit-selector-subtitle {
        color: rgba(235, 246, 255, 0.76) !important;
      }

@media (max-width: 900px) {
.resident-unit-switch-card .resident-unit-selector-row,
        .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-row,
        .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-row {
          grid-template-columns: 150px minmax(0, 1fr) !important;
          gap: 16px !important;
        }

}

@media (max-width: 780px) {
.resident-unit-switch-card,
        .resident-panel.theme-dark .resident-unit-switch-card,
        .resident-panel.theme-light .resident-unit-switch-card {
          min-height: 236px !important;
          padding: 18px !important;
          border-radius: 28px !important;
        }

.resident-unit-switch-card .resident-unit-selector-row,
        .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-row,
        .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-row {
          grid-template-columns: 136px minmax(0, 1fr) !important;
          column-gap: 12px !important;
          row-gap: 16px !important;
        }

.resident-unit-switch-icon,
        .resident-panel.theme-dark .resident-unit-switch-icon,
        .resident-panel.theme-light .resident-unit-switch-icon {
          width: 130px !important;
          height: 112px !important;
        }

.resident-unit-switch-icon img,
        .resident-panel.theme-dark .resident-unit-switch-icon img,
        .resident-panel.theme-light .resident-unit-switch-icon img {
          width: 146px !important;
          height: 146px !important;
          max-width: 146px !important;
          max-height: 146px !important;
          transform: translate(-8px, -8px) !important;
        }

.resident-unit-selector-title,
        .resident-panel.theme-dark .resident-unit-selector-title,
        .resident-panel.theme-light .resident-unit-selector-title {
          font-size: 1.34rem !important;
        }

.resident-unit-selector-subtitle,
        .resident-panel.theme-dark .resident-unit-selector-subtitle,
        .resident-panel.theme-light .resident-unit-selector-subtitle {
          font-size: 0.78rem !important;
        }

}

.resident-unit-switch-card,
      .resident-panel.theme-dark .resident-unit-switch-card {
        background:
          linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
          rgba(8, 30, 52, 0.68) !important;
        border: 1px solid var(--cenit-border) !important;
        box-shadow: var(--cenit-soft-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
      }

.resident-panel.theme-light .resident-unit-switch-card {
        background: #E2EAEE !important;
        border-color: rgba(255, 255, 255, 0.46) !important;
        box-shadow:
          -6px -6px 14px rgba(255, 255, 255, 0.52),
          7px 7px 16px rgba(13, 39, 58, 0.065),
          inset 1px 1px 0 rgba(255, 255, 255, 0.50),
          inset -1px -1px 0 rgba(13, 39, 58, 0.025) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }

.resident-unit-switch-card::after,
      .resident-panel.theme-dark .resident-unit-switch-card::after,
      .resident-panel.theme-light .resident-unit-switch-card::after {
        background: transparent !important;
        opacity: 0 !important;
      }

.resident-unit-switch-icon,
      .resident-panel.theme-dark .resident-unit-switch-icon,
      .resident-panel.theme-light .resident-unit-switch-icon {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
      }

.resident-unit-switch-icon img,
      .resident-panel.theme-dark .resident-unit-switch-icon img,
      .resident-panel.theme-light .resident-unit-switch-icon img {
        transform: translate(-10px, 15px) !important;
      }

.resident-unit-selector-kicker,
      .resident-panel.theme-dark .resident-unit-selector-kicker,
      .resident-panel.theme-light .resident-unit-selector-kicker {
        background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 100%) !important;
        border: 1px solid rgba(180, 83, 9, 0.28) !important;
        color: #6B4500 !important;
        box-shadow: none !important;
      }

@media (max-width: 780px) {
.resident-unit-switch-icon img,
        .resident-panel.theme-dark .resident-unit-switch-icon img,
        .resident-panel.theme-light .resident-unit-switch-icon img {
          transform: translate(-8px, -3px) !important;
        }

}

.resident-unit-switch-card,
      .resident-panel.theme-dark .resident-unit-switch-card,
      .resident-panel.theme-light .resident-unit-switch-card {
        position: relative !important;
        min-height: 154px !important;
        padding: 26px 30px !important;
        border-radius: 30px !important;
        overflow: visible !important;
      }

.resident-panel.theme-dark .resident-unit-switch-card {
        background:
          linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
          rgba(8, 30, 52, 0.68) !important;
        border: 1px solid var(--cenit-border) !important;
        box-shadow:
          var(--cenit-soft-shadow),
          inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
      }

.resident-panel.theme-light .resident-unit-switch-card {
        background: #E2EAEE !important;
        border-color: rgba(255, 255, 255, 0.46) !important;
        box-shadow:
          -6px -6px 14px rgba(255, 255, 255, 0.52),
          7px 7px 16px rgba(13, 39, 58, 0.065),
          inset 1px 1px 0 rgba(255, 255, 255, 0.50),
          inset -1px -1px 0 rgba(13, 39, 58, 0.025) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }

.resident-unit-switch-card::after,
      .resident-panel.theme-dark .resident-unit-switch-card::after,
      .resident-panel.theme-light .resident-unit-switch-card::after {
        content: "" !important;
        background: transparent !important;
        opacity: 0 !important;
        box-shadow: none !important;
      }

.resident-unit-switch-card .resident-unit-selector-row,
      .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-row,
      .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-row {
        position: relative !important;
        z-index: 1 !important;
        display: grid !important;
        grid-template-columns: 178px minmax(0, 1fr) minmax(300px, 490px) !important;
        grid-template-rows: auto !important;
        align-items: center !important;
        gap: 26px !important;
        width: 100% !important;
      }

.resident-unit-switch-icon,
      .resident-panel.theme-dark .resident-unit-switch-icon,
      .resident-panel.theme-light .resident-unit-switch-icon {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 166px !important;
        height: 124px !important;
        align-self: center !important;
        justify-self: start !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
      }

.resident-unit-switch-icon img,
      .resident-panel.theme-dark .resident-unit-switch-icon img,
      .resident-panel.theme-light .resident-unit-switch-icon img {
        width: 178px !important;
        height: 178px !important;
        max-width: 178px !important;
        max-height: 178px !important;
        object-fit: contain !important;
        object-position: center center !important;
        display: block !important;
        transform: translate(-10px, 10px) !important;
      }

.resident-panel.theme-dark .resident-unit-switch-icon img {
        filter: drop-shadow(0 18px 12px rgba(0, 0, 0, 0.34)) !important;
      }

.resident-panel.theme-light .resident-unit-switch-icon img {
        filter:
          drop-shadow(0 14px 10px rgba(48, 68, 84, 0.18))
          drop-shadow(-5px -5px 10px rgba(255, 255, 255, 0.40)) !important;
      }

.resident-unit-switch-card .resident-unit-selector-copy,
      .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-copy,
      .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-copy {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-height: 88px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
      }

.resident-unit-switch-card .resident-unit-selector-label,
      .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-label,
      .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-label {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        text-align: left !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        line-height: 1.05 !important;
      }

.resident-unit-selector-kicker,
      .resident-panel.theme-dark .resident-unit-selector-kicker,
      .resident-panel.theme-light .resident-unit-selector-kicker {
        display: inline-flex !important;
        width: fit-content !important;
        max-width: 100% !important;
        align-items: center !important;
        padding: 5px 10px !important;
        border-radius: 999px !important;
        background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 100%) !important;
        border: 1px solid rgba(180, 83, 9, 0.28) !important;
        color: #6B4500 !important;
        box-shadow: none !important;
        font-size: 0.68rem !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        letter-spacing: 0.09em !important;
        text-transform: uppercase !important;
      }

.resident-unit-selector-title,
      .resident-panel.theme-dark .resident-unit-selector-title,
      .resident-panel.theme-light .resident-unit-selector-title {
        display: block !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        color: var(--cenit-text) !important;
        font-size: clamp(1.28rem, 2.1vw, 1.75rem) !important;
        line-height: 0.98 !important;
        font-weight: 950 !important;
        letter-spacing: -0.045em !important;
      }

.resident-panel.theme-light .resident-unit-selector-title {
        color: #071527 !important;
        text-shadow: none !important;
      }

.resident-panel.theme-dark .resident-unit-selector-title {
        color: #FFFFFF !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22) !important;
      }

.resident-unit-selector-subtitle,
      .resident-panel.theme-dark .resident-unit-selector-subtitle,
      .resident-panel.theme-light .resident-unit-selector-subtitle {
        display: block !important;
        max-width: 390px !important;
        font-size: 0.84rem !important;
        line-height: 1.25 !important;
        font-weight: 800 !important;
        letter-spacing: -0.01em !important;
      }

.resident-panel.theme-light .resident-unit-selector-subtitle {
        color: rgba(7, 21, 39, 0.66) !important;
      }

.resident-panel.theme-dark .resident-unit-selector-subtitle {
        color: rgba(235, 246, 255, 0.76) !important;
      }

.resident-unit-switch-card .resident-unit-select-wrap,
      .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-select-wrap,
      .resident-panel.theme-light .resident-unit-switch-card .resident-unit-select-wrap {
        grid-column: 3 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        width: min(100%, 490px) !important;
      }

.resident-unit-switch-card .resident-unit-select,
      .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-select,
      .resident-panel.theme-light .resident-unit-switch-card .resident-unit-select {
        min-height: 52px !important;
        border-radius: 18px !important;
        font-size: 0.95rem !important;
        font-weight: 950 !important;
        box-shadow:
          0 12px 24px rgba(0, 0, 0, 0.10),
          inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
      }

@media (max-width: 900px) {
.resident-unit-switch-card .resident-unit-selector-row,
        .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-row,
        .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-row {
          grid-template-columns: 150px minmax(0, 1fr) !important;
          grid-template-rows: auto auto !important;
          gap: 16px !important;
        }

.resident-unit-switch-card .resident-unit-select-wrap,
        .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-select-wrap,
        .resident-panel.theme-light .resident-unit-switch-card .resident-unit-select-wrap {
          grid-column: 1 / -1 !important;
          grid-row: 2 !important;
          justify-self: stretch !important;
          width: 100% !important;
        }

}

@media (max-width: 780px) {
.resident-unit-switch-card,
        .resident-panel.theme-dark .resident-unit-switch-card,
        .resident-panel.theme-light .resident-unit-switch-card {
          min-height: 236px !important;
          padding: 18px !important;
          border-radius: 28px !important;
        }

.resident-unit-switch-card .resident-unit-selector-row,
        .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-row,
        .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-row {
          grid-template-columns: 136px minmax(0, 1fr) !important;
          column-gap: 12px !important;
          row-gap: 16px !important;
          align-items: center !important;
        }

.resident-unit-switch-icon,
        .resident-panel.theme-dark .resident-unit-switch-icon,
        .resident-panel.theme-light .resident-unit-switch-icon {
          width: 130px !important;
          height: 112px !important;
        }

.resident-unit-switch-icon img,
        .resident-panel.theme-dark .resident-unit-switch-icon img,
        .resident-panel.theme-light .resident-unit-switch-icon img {
          width: 146px !important;
          height: 146px !important;
          max-width: 146px !important;
          max-height: 146px !important;
          transform: translate(-8px, -3px) !important;
        }

.resident-unit-selector-title,
        .resident-panel.theme-dark .resident-unit-selector-title,
        .resident-panel.theme-light .resident-unit-selector-title {
          font-size: 1.34rem !important;
          padding-top: 5px !important;
          padding-bottom: 5px !important;
        }

.resident-unit-selector-subtitle,
        .resident-panel.theme-dark .resident-unit-selector-subtitle,
        .resident-panel.theme-light .resident-unit-selector-subtitle {
          font-size: 0.78rem !important;
        }

}

.resident-unit-switch-card,
      .resident-panel.theme-dark .resident-unit-switch-card,
      .resident-panel.theme-light .resident-unit-switch-card {
        position: relative !important;
        min-height: 146px !important;
        margin-top: 10px !important;
        margin-bottom: 18px !important;
        padding: 22px 28px !important;
        border-radius: var(--cenit-radius-lg) !important;
        overflow: visible !important;
      }

.resident-panel.theme-dark .resident-unit-switch-card {
        background:
          linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
          rgba(8, 30, 52, 0.68) !important;
        border: 1px solid var(--cenit-border) !important;
        box-shadow:
          var(--cenit-soft-shadow),
          inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
      }

.resident-panel.theme-light .resident-unit-switch-card {
        background: #E2EAEE !important;
        border-color: rgba(255, 255, 255, 0.46) !important;
        box-shadow:
          -6px -6px 14px rgba(255, 255, 255, 0.52),
          7px 7px 16px rgba(13, 39, 58, 0.065),
          inset 1px 1px 0 rgba(255, 255, 255, 0.50),
          inset -1px -1px 0 rgba(13, 39, 58, 0.025) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }

.resident-unit-switch-card::before,
      .resident-unit-switch-card::after,
      .resident-panel.theme-dark .resident-unit-switch-card::before,
      .resident-panel.theme-dark .resident-unit-switch-card::after,
      .resident-panel.theme-light .resident-unit-switch-card::before,
      .resident-panel.theme-light .resident-unit-switch-card::after {
        background: transparent !important;
        opacity: 0 !important;
        box-shadow: none !important;
        content: "" !important;
        pointer-events: none !important;
      }

.resident-unit-switch-card .resident-unit-selector-row,
      .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-row,
      .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-row {
        position: relative !important;
        z-index: 1 !important;
        display: grid !important;
        grid-template-columns: 164px minmax(0, 1fr) minmax(300px, 490px) !important;
        grid-template-rows: auto !important;
        align-items: center !important;
        gap: 24px !important;
        width: 100% !important;
        margin: 0 !important;
      }

.resident-unit-switch-icon,
      .resident-panel.theme-dark .resident-unit-switch-icon,
      .resident-panel.theme-light .resident-unit-switch-icon {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 154px !important;
        height: 116px !important;
        align-self: center !important;
        justify-self: start !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
      }

.resident-unit-switch-icon img,
      .resident-panel.theme-dark .resident-unit-switch-icon img,
      .resident-panel.theme-light .resident-unit-switch-icon img {
        width: 162px !important;
        height: 162px !important;
        max-width: 162px !important;
        max-height: 162px !important;
        object-fit: contain !important;
        object-position: center center !important;
        display: block !important;
        transform: translate(-10px, 15px) !important;
      }

.resident-panel.theme-dark .resident-unit-switch-icon img {
        filter:
          drop-shadow(0 14px 8px rgba(0, 0, 0, 0.42))
          drop-shadow(0 0 22px rgba(7, 146, 219, 0.22)) !important;
      }

.resident-panel.theme-light .resident-unit-switch-icon img {
        filter:
          drop-shadow(0 12px 9px rgba(48, 68, 84, 0.18))
          drop-shadow(-5px -5px 10px rgba(255, 255, 255, 0.40)) !important;
      }

.resident-unit-switch-card .resident-unit-selector-copy,
      .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-copy,
      .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-copy {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-height: 82px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
      }

.resident-unit-switch-card .resident-unit-selector-label,
      .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-label,
      .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-label {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        text-align: left !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        line-height: 1.05 !important;
      }

.resident-unit-selector-kicker,
      .resident-panel.theme-dark .resident-unit-selector-kicker,
      .resident-panel.theme-light .resident-unit-selector-kicker {
        display: inline-flex !important;
        width: fit-content !important;
        max-width: 100% !important;
        align-items: center !important;
        padding: 5px 10px !important;
        border-radius: 999px !important;
        background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 100%) !important;
        border: 1px solid rgba(180, 83, 9, 0.28) !important;
        color: #6B4500 !important;
        box-shadow: none !important;
        font-size: 0.68rem !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        letter-spacing: 0.09em !important;
        text-transform: uppercase !important;
      }

.resident-unit-selector-title,
      .resident-panel.theme-dark .resident-unit-selector-title,
      .resident-panel.theme-light .resident-unit-selector-title {
        display: block !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        color: var(--cenit-text) !important;
        font-size: clamp(1.28rem, 2.1vw, 1.75rem) !important;
        line-height: 0.98 !important;
        font-weight: 950 !important;
        letter-spacing: -0.045em !important;
      }

.resident-panel.theme-light .resident-unit-selector-title {
        color: #071527 !important;
        text-shadow: none !important;
      }

.resident-panel.theme-dark .resident-unit-selector-title {
        color: #FFFFFF !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22) !important;
      }

.resident-unit-selector-subtitle,
      .resident-panel.theme-dark .resident-unit-selector-subtitle,
      .resident-panel.theme-light .resident-unit-selector-subtitle {
        display: block !important;
        max-width: 390px !important;
        font-size: 0.84rem !important;
        line-height: 1.25 !important;
        font-weight: 800 !important;
        letter-spacing: -0.01em !important;
      }

.resident-panel.theme-light .resident-unit-selector-subtitle {
        color: rgba(7, 21, 39, 0.66) !important;
      }

.resident-panel.theme-dark .resident-unit-selector-subtitle {
        color: rgba(235, 246, 255, 0.76) !important;
      }

.resident-unit-switch-card .resident-unit-select-wrap,
      .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-select-wrap,
      .resident-panel.theme-light .resident-unit-switch-card .resident-unit-select-wrap {
        grid-column: 3 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        width: min(100%, 490px) !important;
      }

.resident-unit-switch-card .resident-unit-select,
      .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-select,
      .resident-panel.theme-light .resident-unit-switch-card .resident-unit-select {
        min-height: 52px !important;
        border-radius: 18px !important;
        font-size: 0.95rem !important;
        font-weight: 950 !important;
        box-shadow:
          0 12px 24px rgba(0, 0, 0, 0.10),
          inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
      }

@media (max-width: 900px) {
.resident-unit-switch-card .resident-unit-selector-row,
        .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-row,
        .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-row {
          grid-template-columns: 142px minmax(0, 1fr) !important;
          grid-template-rows: auto auto !important;
          gap: 14px !important;
        }

.resident-unit-switch-card .resident-unit-select-wrap,
        .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-select-wrap,
        .resident-panel.theme-light .resident-unit-switch-card .resident-unit-select-wrap {
          grid-column: 1 / -1 !important;
          grid-row: 2 !important;
          justify-self: stretch !important;
          width: 100% !important;
        }

}

@media (max-width: 780px) {
.resident-unit-switch-card,
        .resident-panel.theme-dark .resident-unit-switch-card,
        .resident-panel.theme-light .resident-unit-switch-card {
          min-height: 224px !important;
          padding: 18px !important;
          border-radius: 28px !important;
        }

.resident-unit-switch-card .resident-unit-selector-row,
        .resident-panel.theme-dark .resident-unit-switch-card .resident-unit-selector-row,
        .resident-panel.theme-light .resident-unit-switch-card .resident-unit-selector-row {
          grid-template-columns: 128px minmax(0, 1fr) !important;
          column-gap: 12px !important;
          row-gap: 14px !important;
          align-items: center !important;
        }

.resident-unit-switch-icon,
        .resident-panel.theme-dark .resident-unit-switch-icon,
        .resident-panel.theme-light .resident-unit-switch-icon {
          width: 124px !important;
          height: 108px !important;
        }

.resident-unit-switch-icon img,
        .resident-panel.theme-dark .resident-unit-switch-icon img,
        .resident-panel.theme-light .resident-unit-switch-icon img {
          width: 140px !important;
          height: 140px !important;
          max-width: 140px !important;
          max-height: 140px !important;
          transform: translate(-8px, 4px) !important;
        }

.resident-unit-selector-title,
        .resident-panel.theme-dark .resident-unit-selector-title,
        .resident-panel.theme-light .resident-unit-selector-title {
          font-size: 1.34rem !important;
          padding-top: 5px !important;
          padding-bottom: 5px !important;
        }

.resident-unit-selector-subtitle,
        .resident-panel.theme-dark .resident-unit-selector-subtitle,
        .resident-panel.theme-light .resident-unit-selector-subtitle {
          font-size: 0.78rem !important;
        }

}

.resident-panel.theme-dark .resident-unit-switch-card {
        background: linear-gradient(135deg, rgba(7, 146, 219, 0.13) 0%, rgba(7, 146, 219, 0.035) 34%, rgba(7, 146, 219, 0.00) 74%), #061B2F !important;
        border: 1px solid rgba(6, 135, 203, 0.52) !important;
        box-shadow:
          -3px -3px 8px rgba(22, 58, 84, 0.10),
          5px 6px 12px rgba(0, 0, 0, 0.22),
          inset 1px 1px 0 rgba(255, 255, 255, 0.045),
          inset -1px -1px 0 rgba(0, 0, 0, 0.16) !important;
      }

.resident-panel.theme-light .resident-unit-switch-card {
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.12) 38%, rgba(255, 255, 255, 0.00) 78%),
          #E4EDF2 !important;
        border-color: rgba(255, 255, 255, 0.72) !important;
        box-shadow:
          -4px -4px 10px rgba(255, 255, 255, 0.42),
          5px 6px 12px rgba(48, 68, 84, 0.080),
          inset 1px 1px 0 rgba(255, 255, 255, 0.64),
          inset -1px -1px 0 rgba(25, 50, 68, 0.030) !important;
      }

.resident-unit-switch-card::after,
      .resident-panel.theme-dark .resident-unit-switch-card::after,
      .resident-panel.theme-light .resident-unit-switch-card::after {
        background: transparent !important;
        opacity: 0 !important;
      }

.resident-unit-selector-title,
      .resident-panel.theme-dark .resident-unit-selector-title,
      .resident-panel.theme-light .resident-unit-selector-title {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
      }

.resident-unit-switch-icon img,
      .resident-panel.theme-dark .resident-unit-switch-icon img,
      .resident-panel.theme-light .resident-unit-switch-icon img {
        transform: translate(-10px, 15px) !important;
      }

.resident-unit-switch-icon img,
      .resident-panel.theme-dark .resident-unit-switch-icon img,
      .resident-panel.theme-light .resident-unit-switch-icon img {
        transform: translate(-10px, -25px) !important;
      }

@media (max-width: 780px) {
.resident-unit-switch-icon img,
        .resident-panel.theme-dark .resident-unit-switch-icon img,
        .resident-panel.theme-light .resident-unit-switch-icon img {
          transform: translate(-8px, -18px) !important;
        }

}

.resident-panel.theme-light {
        --cenit-bg-deep: #D5E1E7 !important;
        --cenit-blue-900: #F6FAFC !important;
        --cenit-blue-800: #EEF5F8 !important;
        --cenit-blue-700: #DCE8EE !important;
        --cenit-text: #071527 !important;
        --cenit-muted: #465D70 !important;
        --cenit-faint: rgba(7, 21, 39, 0.76) !important;
        --cenit-border: rgba(12, 36, 56, 0.11) !important;
        --cenit-card: #F3F8FA !important;
        --cenit-card-2: #EEF5F8 !important;
        background: #D5E1E7 !important;
      }

.resident-panel.theme-light .resident-shell {
        background:
          radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.00) 34%),
          #D5E1E7 !important;
      }

.resident-panel.theme-light {
        --cenit-bg-deep: #F5F5F7 !important;
        --cenit-blue-900: #FFFFFF !important;
        --cenit-blue-800: #FFFFFF !important;
        --cenit-blue-700: #E5E7EB !important;
        --cenit-text: #111827 !important;
        --cenit-muted: #4B5563 !important;
        --cenit-faint: rgba(17, 24, 39, 0.72) !important;
        --cenit-border: rgba(17, 24, 39, 0.08) !important;
        --cenit-card: #FFFFFF !important;
        --cenit-card-2: #FFFFFF !important;
        background: #F5F5F7 !important;
        color: #111827 !important;
      }

.resident-panel.theme-light .resident-header {
        background: linear-gradient(135deg, #02233A 0%, #020A14 100%) !important;
        border-color: rgba(255, 255, 255, 0.07) !important;
        box-shadow: 0 10px 24px rgba(2, 10, 20, 0.18) !important;
      }

.resident-panel.theme-light .resident-unit-select,
      .resident-panel.theme-light .resident-unit-switch-card .resident-unit-select {
        background: #FFFFFF !important;
        background-image: none !important;
        color: #111827 !important;
        border: 1px solid rgba(17, 24, 39, 0.08) !important;
        box-shadow:
          0 8px 20px rgba(17, 24, 39, 0.075),
          inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
      }

.resident-panel.theme-light .resident-bottom-nav {
        background: rgba(255, 255, 255, 0.88) !important;
        background-image: none !important;
        border-color: rgba(17, 24, 39, 0.08) !important;
        box-shadow:
          0 -14px 30px rgba(17, 24, 39, 0.075),
          0 -2px 8px rgba(17, 24, 39, 0.045) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
      }

.resident-panel.theme-light .resident-bottom-link {
        color: #4B5563 !important;
      }

.resident-panel.theme-light .resident-bottom-link.is-active {
        color: #FFFFFF !important;
      }

.resident-panel.theme-light {
        background: #F5F5F7 !important;
        background-image: none !important;
      }

.resident-notification-priority {
        color: #FFFFFF !important;
        border: 0 !important;
        box-shadow: none !important;
      }

.resident-panel.theme-light .resident-notification-more {
        color: #071527 !important;
        background: transparent !important;
        border: 1px solid rgba(7, 21, 39, 0.28) !important;
        box-shadow: none !important;
      }

.resident-panel.theme-light .resident-notification-more:hover,
      .resident-panel.theme-light .resident-notification-more:focus {
        color: #071527 !important;
        background: rgba(7, 21, 39, 0.045) !important;
        border-color: rgba(7, 21, 39, 0.38) !important;
      }

.resident-user-name {
        max-width: 175px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
      }

.resident-panel.theme-light .resident-notification-panel {
        background: #FFFFFF !important;
        border: 1px solid rgba(17, 24, 39, 0.14) !important;
        box-shadow:
          0 16px 36px rgba(17, 24, 39, 0.12),
          0 3px 10px rgba(17, 24, 39, 0.06) !important;
      }

.resident-panel.theme-light .resident-notification-panel::before {
        background: #FFFFFF !important;
        border-color: rgba(17, 24, 39, 0.14) !important;
      }

.resident-panel.theme-light .resident-notification-title,
      .resident-panel.theme-light .resident-notification-count {
        color: #071527 !important;
      }

.resident-panel.theme-light .resident-notification-head,
      .resident-panel.theme-light .resident-notification-footer {
        border-color: rgba(17, 24, 39, 0.11) !important;
      }

.resident-panel.theme-light .resident-notification-item,
      .resident-panel.theme-light .resident-notification-empty {
        background: #FFFFFF !important;
        border: 1px solid rgba(17, 24, 39, 0.12) !important;
        box-shadow: none !important;
      }

.resident-panel.theme-light .resident-notification-message,
      .resident-panel.theme-light .resident-notification-empty {
        color: #526172 !important;
      }

.resident-panel.theme-light .resident-notification-more {
        color: #071527 !important;
        background: #FFFFFF !important;
        border: 1px solid rgba(17, 24, 39, 0.26) !important;
        box-shadow: none !important;
      }

.resident-panel.theme-light .resident-notification-more:hover,
      .resident-panel.theme-light .resident-notification-more:focus {
        color: #071527 !important;
        background: #F8FAFC !important;
        border-color: rgba(17, 24, 39, 0.36) !important;
      }

.resident-notification-icon,
      .resident-panel.theme-dark .resident-notification-icon,
      .resident-panel.theme-light .resident-notification-icon {
        box-shadow:
          0 4px 8px rgba(0, 0, 0, 0.10),
          inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
      }

.resident-panel.theme-light .resident-notification-icon {
        box-shadow:
          0 3px 7px rgba(48, 68, 84, 0.10),
          inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
      }

.resident-panel.theme-dark .resident-notification-icon {
        box-shadow:
          0 4px 8px rgba(0, 0, 0, 0.16),
          inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
      }

.resident-notification-item {
        display: grid;
      }

.resident-notification-item[style*="display: none"] {
        display: none !important;
      }

.resident-notification-icon,
      .resident-panel.theme-dark .resident-notification-icon,
      .resident-panel.theme-light .resident-notification-icon {
        color: #FFFFFF !important;
        font-size: 0.92rem !important;
        font-weight: 950 !important;
        letter-spacing: -0.02em !important;
        text-transform: uppercase !important;
        box-shadow:
          0 6px 10px rgba(0, 0, 0, 0.16),
          inset 1px 1px 0 rgba(255, 255, 255, 0.18) !important;
      }

.resident-panel.theme-light .resident-notification-icon {
        box-shadow:
          0 5px 9px rgba(17, 24, 39, 0.10),
          inset 1px 1px 0 rgba(255, 255, 255, 0.22) !important;
      }

/* =========================================================
   RESIDENT HOME STATUS AUTHORITY
   Shared ownership for unit selector and financial summaries.
========================================================= */

[data-cenit-resident-panel="1"] .resident-unit-switch-card {
  overflow: visible !important;
}

[data-cenit-resident-panel="1"] .resident-unit-switch-card .resident-unit-switch-icon {
  width: 174px !important;
  height: 132px !important;
  overflow: visible !important;
}

[data-cenit-resident-panel="1"] .resident-unit-switch-card .resident-unit-switch-icon img {
  width: 190px !important;
  height: 190px !important;
  max-width: 190px !important;
  max-height: 190px !important;
  transform: translate(-8px, -18px) !important;
}

[data-cenit-resident-panel="1"] .resident-unit-card-shell .resident-unit-state.is-active {
  width: 100% !important;
  min-width: 0 !important;
}

[data-cenit-resident-panel="1"] .resident-unit-card-shell .resident-status-copy {
  min-width: 0 !important;
}

[data-cenit-resident-panel="1"] .resident-unit-card-shell .resident-status-unit,
[data-cenit-resident-panel="1"] .resident-unit-card-shell .resident-status-unit [data-cenit-greeting] {
  display: block !important;
  width: 100% !important;
  min-height: 1.1em !important;
  opacity: 1 !important;
  visibility: visible !important;
}

[data-cenit-resident-panel="1"] .resident-unit-card-shell .resident-status-note.resident-status-note-row {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  box-sizing: border-box !important;
}

[data-cenit-resident-panel="1"] .resident-unit-card-shell .resident-status-note.resident-status-note-row > .resident-status-mini-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

@media (min-width: 981px) {
  [data-cenit-resident-panel="1"] .resident-unit-switch-card .resident-unit-selector-row {
    grid-template-columns: 184px minmax(0, 1fr) minmax(300px, 490px) !important;
  }

  [data-cenit-resident-panel="1"] .resident-unit-card-shell .resident-unit-state.is-active {
    display: flex !important;
    flex-flow: row nowrap !important;
    gap: 22px !important;
    align-items: center !important;
  }

  [data-cenit-resident-panel="1"] .resident-unit-card-shell .resident-status-building {
    flex: 0 0 72px !important;
  }

  [data-cenit-resident-panel="1"] .resident-unit-card-shell .resident-status-copy {
    flex: 0 1 240px !important;
    min-width: 180px !important;
  }

  [data-cenit-resident-panel="1"] .resident-unit-card-shell .resident-status-note.resident-status-note-row {
    flex: 1 1 auto !important;
    flex-flow: row nowrap !important;
  }

  [data-cenit-resident-panel="1"] .resident-unit-card-shell .resident-status-note.resident-status-note-row > .resident-status-mini-card {
    flex: 1 1 235px !important;
    min-width: 235px !important;
  }
}

@media (min-width: 781px) and (max-width: 980px) {
  [data-cenit-resident-panel="1"] .resident-unit-card-shell .resident-unit-state.is-active {
    display: flex !important;
    flex-flow: row wrap !important;
  }

  [data-cenit-resident-panel="1"] .resident-unit-card-shell .resident-status-note.resident-status-note-row {
    flex: 0 0 100% !important;
    flex-flow: row nowrap !important;
    margin-top: 12px !important;
  }

  [data-cenit-resident-panel="1"] .resident-unit-card-shell .resident-status-note.resident-status-note-row > .resident-status-mini-card {
    min-width: 0 !important;
  }
}

@media (max-width: 780px) {
  [data-cenit-resident-panel="1"] .resident-unit-switch-card {
    min-height: 224px !important;
    padding: 18px !important;
  }

  [data-cenit-resident-panel="1"] .resident-unit-switch-card .resident-unit-selector-row {
    grid-template-columns: 136px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important;
    row-gap: 14px !important;
  }

  [data-cenit-resident-panel="1"] .resident-unit-switch-card .resident-unit-switch-icon {
    width: 138px !important;
    height: 124px !important;
  }

  [data-cenit-resident-panel="1"] .resident-unit-switch-card .resident-unit-switch-icon img {
    width: 160px !important;
    height: 160px !important;
    max-width: 160px !important;
    max-height: 160px !important;
    transform: translate(-7px, -17px) !important;
  }

  [data-cenit-resident-panel="1"] .resident-unit-switch-card .resident-unit-select-wrap {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
  }

  [data-cenit-resident-panel="1"] .resident-unit-card-shell .resident-unit-state.is-active {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
  }

  [data-cenit-resident-panel="1"] .resident-unit-card-shell .resident-status-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-height: 48px !important;
    overflow: visible !important;
  }

  [data-cenit-resident-panel="1"] .resident-unit-card-shell .resident-status-unit,
  [data-cenit-resident-panel="1"] .resident-unit-card-shell .resident-status-unit [data-cenit-greeting] {
    color: #FFFFFF !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  [data-cenit-resident-panel="1"].theme-light .resident-unit-card-shell .resident-status-unit,
  [data-cenit-resident-panel="1"].theme-light .resident-unit-card-shell .resident-status-unit [data-cenit-greeting] {
    color: #111827 !important;
  }

  [data-cenit-resident-panel="1"] .resident-unit-card-shell .resident-status-note.resident-status-note-row {
    flex: 0 0 100% !important;
    flex-flow: column nowrap !important;
    width: 100% !important;
    margin-top: 12px !important;
  }

  [data-cenit-resident-panel="1"] .resident-unit-card-shell .resident-status-note.resident-status-note-row > .resident-status-mini-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Home page styles extracted from Unidades - Home.md */

/* =========================
         CENIT RESIDENT PANEL V1
      ========================== */

      /* =========================
         HEADER
      ========================== */

      .resident-notification-icon.is-info {
        background:
          radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.26), transparent 36%),
          linear-gradient(135deg, rgba(14, 165, 233, 0.92), rgba(2, 132, 199, 0.74));
      }

      .resident-notification-icon.is-financial,
      .resident-notification-icon.is-payment,
      .resident-notification-icon.is-receipt {
        background:
          radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.26), transparent 36%),
          linear-gradient(135deg, rgba(0, 166, 106, 0.94), rgba(5, 150, 105, 0.74));
      }

      .resident-notification-icon.is-important {
        background:
          radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.26), transparent 36%),
          linear-gradient(135deg, rgba(249, 115, 22, 0.96), rgba(194, 65, 12, 0.78));
      }

      .resident-notification-icon.is-critical {
        background:
          radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.26), transparent 36%),
          linear-gradient(135deg, rgba(220, 38, 38, 0.96), rgba(127, 29, 29, 0.82));
      }

      /* =========================
         MAIN LAYOUT
      ========================== */

      .resident-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 38px;
        align-items: start;
        padding-top: 46px;
      }

      .resident-left {
        width: 100%;
      }

      .resident-hero-title {
        margin: 0;
        font-size: clamp(2.1rem, 4vw, 3.4rem);
        letter-spacing: -0.05em;
        line-height: 1;
        color: #FFFFFF;
        text-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
      }

      .resident-hero-subtitle {
        margin: 11px 0 0;
        color: var(--cenit-muted);
        font-size: 1.05rem;
        font-weight: 560;
      }

      .resident-status-card {
        margin-top: 0;
        margin-bottom: 24px;
        display: flex;
        flex-flow: row nowrap;
        gap: 15px;
        align-items: center;
        padding: 18px;
        border-radius: 24px;
        background:
          radial-gradient(circle at top left, rgba(14, 165, 233, 0.22), rgba(8, 30, 52, 0.74) 58%, rgba(6, 33, 58, 0.82) 100%);
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow: var(--cenit-soft-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }

      .resident-status-building {
        width: 64px;
        height: 64px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0F375A;
        background:
          radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.96), rgba(226, 232, 240, 0.88) 42%, rgba(148, 163, 184, 0.70) 100%);
        box-shadow: 0 12px 22px rgba(0, 0, 0, 0.24), inset 0 2px 1px rgba(255, 255, 255, 0.88);
      }

      .resident-status-building svg {
        width: 38px;
        height: 38px;
        stroke: currentColor;
      }

      .resident-status-copy {
        min-width: 0;
      }

      .resident-status-unit {
        display: block;
        color: #FFFFFF;
        font-size: 1.12rem;
        font-weight: 920;
        line-height: 1.08;
      }

      .resident-status-name {
        display: block;
        margin-top: 4px;
        color: var(--cenit-muted);
        font-size: 0.9rem;
        font-weight: 620;
        line-height: 1.18;
      }

      .resident-status-note {
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.10);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        color: var(--cenit-muted);
        font-size: 0.94rem;
        line-height: 1.25;
      }

      .resident-status-note strong {
        color: #FFFFFF;
        display: block;
        font-size: 1rem;
        margin-bottom: 2px;
      }

      .resident-check {
        width: 40px;
        height: 40px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        background: linear-gradient(135deg, #22C55E, #00A66A);
        flex: 0 0 40px;
        box-shadow: none;
      }

      .resident-check svg {
        width: 22px;
        height: 22px;
        stroke: currentColor;
      }

      .resident-app-grid {
        margin-top: 0;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
      }

      .resident-app-card {
        position: relative;
        min-height: 202px;
        padding: 22px 18px 20px;
        border-radius: var(--cenit-radius-lg);
        background:
          linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
          rgba(8, 30, 52, 0.68);
        border: 1px solid var(--cenit-border);
        box-shadow: var(--cenit-soft-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        text-decoration: none !important;
        color: #FFFFFF !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        overflow: hidden;
        transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
      }

      .resident-app-card::before {
        content: "";
        position: absolute;
        inset: -1px;
        opacity: 0;
        border-radius: inherit;
        background: radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.30), transparent 60%);
        pointer-events: none;
        transition: opacity 0.18s ease;
      }

      .resident-app-card:hover,
      .resident-app-card:focus {
        transform: translateY(-3px);
        border-color: rgba(125, 211, 252, 0.38);
        box-shadow: 0 22px 50px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(56, 189, 248, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.12);
      }

      .resident-app-card:hover::before,
      .resident-app-card:focus::before {
        opacity: 1;
      }

      .resident-app-card.is-primary {
        border-color: rgba(56, 189, 248, 0.92);
        box-shadow:
          0 24px 55px rgba(0, 0, 0, 0.34),
          0 0 0 2px rgba(56, 189, 248, 0.24),
          0 0 34px rgba(14, 165, 233, 0.34),
          inset 0 1px 0 rgba(255, 255, 255, 0.13);
        background:
          radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.22), transparent 54%),
          linear-gradient(145deg, rgba(15, 78, 123, 0.76), rgba(7, 31, 54, 0.84));
      }

      .resident-app-icon {
        position: relative;
        z-index: 1;
        width: 88px;
        height: 88px;
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .resident-icon-3d {
        width: 84px;
        height: 84px;
        border-radius: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        background:
          radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.96), rgba(226, 232, 240, 0.88) 42%, rgba(148, 163, 184, 0.70) 100%);
        box-shadow:
          0 18px 28px rgba(0, 0, 0, 0.28),
          inset 0 2px 1px rgba(255, 255, 255, 0.88),
          inset 0 -7px 14px rgba(15, 23, 42, 0.12);
        color: #0F375A;
      }

      .resident-icon-3d svg {
        width: 48px;
        height: 48px;
        stroke: currentColor;
      }

      .resident-icon-money::after {
        content: "";
        position: absolute;
        right: 2px;
        bottom: 8px;
        width: 34px;
        height: 34px;
        border-radius: 999px;
        border: 2px solid rgba(255, 255, 255, 0.78);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
      }

      .resident-icon-money::after {
        content: "$";
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        background: linear-gradient(135deg, #22C55E, #15803D);
        font-weight: 950;
        font-size: 1.15rem;
      }

      .resident-app-title {
        position: relative;
        z-index: 1;
        margin: 0;
        color: #FFFFFF;
        font-size: 1.04rem;
        font-weight: 900;
        letter-spacing: -0.025em;
        line-height: 1.12;
      }

      .resident-app-text {
        position: relative;
        z-index: 1;
        margin: 8px 0 0;
        color: var(--cenit-muted);
        font-size: 0.91rem;
        line-height: 1.33;
        font-weight: 520;
      }

      /* =========================
         SIDE PANEL
      ========================== */

      .resident-detail-panel {
        position: sticky;
        top: 102px;
        border-radius: var(--cenit-radius-xl);
        background:
          radial-gradient(circle at 18% 0%, rgba(56, 189, 248, 0.18), transparent 46%),
          linear-gradient(145deg, rgba(18, 57, 92, 0.74), rgba(4, 18, 36, 0.84));
        border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: var(--cenit-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.10);
        padding: 25px;
        overflow: hidden;
      }

      .resident-detail-head {
        display: flex;
        align-items: center;
        gap: 15px;
      }

      .resident-detail-icon {
        width: 62px;
        height: 62px;
        border-radius: 22px;
        flex: 0 0 62px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0F375A;
        background:
          radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.96), rgba(226, 232, 240, 0.88) 42%, rgba(148, 163, 184, 0.70) 100%);
        box-shadow: 0 15px 28px rgba(0, 0, 0, 0.28), inset 0 2px 1px rgba(255, 255, 255, 0.88);
      }

      .resident-detail-icon svg {
        width: 34px;
        height: 34px;
        stroke: currentColor;
      }

      .resident-detail-title {
        margin: 0;
        color: #FFFFFF;
        font-weight: 950;
        letter-spacing: -0.04em;
        font-size: 1.36rem;
        line-height: 1.08;
      }

      .resident-detail-subtitle {
        margin: 5px 0 0;
        color: var(--cenit-muted);
        font-size: 0.92rem;
        font-weight: 540;
      }

      .resident-balance-card {
        position: relative;
        margin-top: 22px;
        min-height: 158px;
        padding: 22px;
        border-radius: 22px;
        background:
          radial-gradient(circle at 92% 18%, rgba(34, 197, 94, 0.14), transparent 34%),
          linear-gradient(145deg, rgba(34, 76, 114, 0.58), rgba(8, 35, 63, 0.72));
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
        overflow: hidden;
      }

      .resident-balance-label {
        display: flex;
        align-items: center;
        gap: 7px;
        margin: 0;
        color: rgba(255, 255, 255, 0.86);
        font-size: 0.92rem;
        font-weight: 720;
      }

      .resident-balance-amount {
        margin-top: 9px;
        color: #FFFFFF;
        font-size: clamp(2.2rem, 4vw, 3.15rem);
        line-height: 1;
        font-weight: 950;
        letter-spacing: -0.06em;
      }

      .resident-balance-meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 9px;
        margin-top: 14px;
        color: rgba(255, 255, 255, 0.74);
        font-size: 0.88rem;
        font-weight: 620;
      }

      .resident-status-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 28px;
        padding: 0 11px;
        border-radius: 999px;
        color: #FFFFFF;
        background: linear-gradient(135deg, #22C55E, #00A66A);
        font-size: 0.82rem;
        font-weight: 900;
        box-shadow: 0 10px 22px rgba(0, 166, 106, 0.24);
      }

      .resident-status-pill.is-warning {
        background: linear-gradient(135deg, #F97316, #C2410C);
        box-shadow: none;
      }

      .resident-quick-title {
        margin: 26px 0 13px;
        color: #FFFFFF;
        font-size: 1.08rem;
        font-weight: 850;
        letter-spacing: -0.025em;
      }

      .resident-quick-list {
        display: grid;
        gap: 10px;
      }

      .resident-quick-item {
        min-height: 76px;
        padding: 13px 14px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.075);
        border: 1px solid rgba(255, 255, 255, 0.11);
        text-decoration: none !important;
        display: grid;
        grid-template-columns: 48px 1fr auto;
        align-items: center;
        gap: 13px;
        color: #FFFFFF !important;
        transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
      }

      .resident-quick-item:hover,
      .resident-quick-item:focus {
        transform: translateY(-1px);
        border-color: rgba(125, 211, 252, 0.36);
        background: rgba(255, 255, 255, 0.10);
      }

      .resident-quick-icon {
        width: 48px;
        height: 48px;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        box-shadow: 0 12px 22px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.20);
      }

      .resident-quick-icon svg {
        width: 25px;
        height: 25px;
        stroke: currentColor;
      }

      .resident-quick-icon.is-green {
        background: linear-gradient(135deg, #22C55E, #00A66A);
      }

      .resident-quick-icon.is-blue {
        background: linear-gradient(135deg, #38BDF8, #2563EB);
      }

      .resident-quick-icon.is-purple {
        background: linear-gradient(135deg, #A78BFA, #7C3AED);
      }

      .resident-quick-copy {
        min-width: 0;
      }

      .resident-quick-name {
        display: block;
        color: #FFFFFF;
        font-size: 0.96rem;
        font-weight: 870;
        line-height: 1.17;
      }

      .resident-quick-desc {
        display: block;
        margin-top: 4px;
        color: var(--cenit-muted);
        font-size: 0.82rem;
        font-weight: 540;
        line-height: 1.25;
      }

      .resident-quick-arrow {
        color: rgba(255, 255, 255, 0.78);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .resident-quick-arrow svg {
        width: 21px;
        height: 21px;
        stroke: currentColor;
      }

      .resident-coming-soon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 27px;
        padding: 0 9px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.10);
        color: rgba(255, 255, 255, 0.76);
        font-size: 0.75rem;
        font-weight: 780;
      }

      /* =========================
         PUBLIC / EMPTY STATES
      ========================== */

      /* =========================
         MOBILE BOTTOM NAV
      ========================== */

      /* =========================
         RESPONSIVE
      ========================== */

      @media (max-width: 1060px) {
        .resident-main {
          grid-template-columns: 1fr;
          gap: 28px;
        }

        .resident-app-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }

      @media (max-width: 780px) {

        .resident-main {
          padding-top: 25px;
          gap: 24px;
        }

        .resident-hero-title {
          font-size: 2rem;
        }

        .resident-hero-subtitle {
          font-size: 0.95rem;
          margin-top: 7px;
        }

        .resident-status-card {
          margin-top: 0;
          margin-bottom: 20px;
          gap: 13px;
          padding: 15px;
          border-radius: 22px;
        }

        .resident-status-building {
          width: 58px;
          height: 58px;
          border-radius: 18px;
        }

        .resident-status-building svg {
          width: 35px;
          height: 35px;
        }

        .resident-status-unit {
          font-size: 1.02rem;
        }

        .resident-status-name {
          font-size: 0.88rem;
        }

        .resident-status-note {
          padding-top: 10px;
          font-size: 0.9rem;
        }

        .resident-status-note strong {
          font-size: 0.95rem;
        }

        .resident-check {
          width: 38px;
          height: 38px;
          flex: 0 0 38px;
        }

        .resident-check svg {
          width: 21px;
          height: 21px;
        }

        .resident-app-grid {
          margin-top: 20px;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 12px;
        }

        .resident-app-card {
          min-height: 172px;
          border-radius: 20px;
          padding: 16px 12px 14px;
        }

        .resident-app-icon {
          width: 78px;
          height: 78px;
          margin-bottom: 10px;
        }

        .resident-icon-3d {
          width: 74px;
          height: 74px;
          border-radius: 23px;
        }

        .resident-icon-3d svg {
          width: 43px;
          height: 43px;
        }

        .resident-app-title {
          font-size: 0.96rem;
        }

        .resident-app-text {
          font-size: 0.78rem;
          line-height: 1.25;
          margin-top: 6px;
        }

        .resident-detail-panel {
          border-radius: 24px;
          padding: 18px;
        }

        .resident-detail-head {
          gap: 12px;
        }

        .resident-detail-icon {
          width: 52px;
          height: 52px;
          flex-basis: 52px;
          border-radius: 18px;
        }

        .resident-detail-title {
          font-size: 1.18rem;
        }

        .resident-detail-subtitle {
          font-size: 0.84rem;
        }

        .resident-balance-card {
          min-height: 150px;
          padding: 18px;
          border-radius: 20px;
        }

        .resident-balance-amount {
          font-size: 2.25rem;
        }

        .resident-quick-item {
          min-height: 72px;
          grid-template-columns: 46px 1fr auto;
          padding: 12px;
        }

        .resident-quick-icon {
          width: 46px;
          height: 46px;
        }

        .resident-quick-name {
          font-size: 0.91rem;
        }

        .resident-quick-desc {
          font-size: 0.78rem;
        }

      }

      @media (max-width: 390px) {

        .resident-app-card {
          min-height: 164px;
          padding-left: 10px;
          padding-right: 10px;
        }

        .resident-app-icon {
          width: 70px;
          height: 70px;
        }

        .resident-icon-3d {
          width: 67px;
          height: 67px;
          border-radius: 21px;
        }

        .resident-icon-3d svg {
          width: 38px;
          height: 38px;
        }

        .resident-app-title {
          font-size: 0.89rem;
        }

        .resident-app-text {
          font-size: 0.73rem;
        }
      }

      .resident-unit-state .resident-status-note {
        flex: 1 1 auto;
      }

      .resident-status-building img {
        width: 38px;
        height: 38px;
        object-fit: contain;
        display: block;
      }

      /* =========================
         LIGHT / DARK THEME
      ========================== */

      .resident-panel.theme-light .resident-status-unit,
      .resident-panel.theme-light .resident-app-title,
      .resident-panel.theme-light .resident-notification-title,
      .resident-panel.theme-light .resident-unit-selector-current {
        color: #071527 !important;
      }

      .resident-panel.theme-light .resident-status-card,
      .resident-panel.theme-light .resident-app-card,
      .resident-panel.theme-light .resident-detail-panel,
      .resident-panel.theme-light .resident-balance-card,
      .resident-panel.theme-light .resident-state-card,
      .resident-panel.theme-light .resident-quick-item {
        background: #E8EEF2;
        border-color: rgba(255, 255, 255, 0.54);
        box-shadow:
          -10px -10px 22px rgba(255, 255, 255, 0.58),
          10px 10px 24px rgba(13, 39, 58, 0.085),
          inset 1px 1px 0 rgba(255, 255, 255, 0.62),
          inset -1px -1px 0 rgba(13, 39, 58, 0.03);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }

      .resident-panel.theme-light .resident-app-card::before {
        background: transparent;
        opacity: 0;
      }

      .resident-panel.theme-light .resident-app-card:hover,
      .resident-panel.theme-light .resident-app-card:focus,
      .resident-panel.theme-light .resident-quick-item:hover,
      .resident-panel.theme-light .resident-quick-item:focus {
        transform: translateY(-1px);
        border-color: rgba(255, 255, 255, 0.64);
        background: #EAF0F3;
        box-shadow:
          -11px -11px 24px rgba(255, 255, 255, 0.62),
          11px 11px 26px rgba(13, 39, 58, 0.095),
          inset 1px 1px 0 rgba(255, 255, 255, 0.66),
          inset -1px -1px 0 rgba(13, 39, 58, 0.035);
      }

      .resident-panel.theme-light .resident-app-card.is-primary {
        background: #E8EEF2;
        border-color: rgba(255, 255, 255, 0.54);
        box-shadow:
          -10px -10px 22px rgba(255, 255, 255, 0.58),
          10px 10px 24px rgba(13, 39, 58, 0.085),
          inset 1px 1px 0 rgba(255, 255, 255, 0.62),
          inset -1px -1px 0 rgba(13, 39, 58, 0.03);
      }

      .resident-panel.theme-light .resident-app-text,
      .resident-panel.theme-light .resident-status-name,
      .resident-panel.theme-light .resident-status-note,
      .resident-panel.theme-light .resident-detail-subtitle,
      .resident-panel.theme-light .resident-balance-meta,
      .resident-panel.theme-light .resident-quick-desc,
      .resident-panel.theme-light .resident-state-text,
      .resident-panel.theme-light .resident-notification-count,
      .resident-panel.theme-light .resident-notification-message,
      .resident-panel.theme-light .resident-notification-empty {
        color: #526677;
      }

      .resident-panel.theme-light .resident-status-note,
      .resident-panel.theme-light .resident-notification-head,
      .resident-panel.theme-light .resident-notification-footer {
        border-color: rgba(7, 21, 39, 0.075);
      }

      .resident-panel.theme-light .resident-status-note strong,
      .resident-panel.theme-light .resident-detail-title,
      .resident-panel.theme-light .resident-balance-amount,
      .resident-panel.theme-light .resident-balance-label,
      .resident-panel.theme-light .resident-quick-name,
      .resident-panel.theme-light .resident-state-title {
        color: #071527;
      }

      .resident-panel.theme-light .resident-icon-3d,
      .resident-panel.theme-light .resident-status-building,
      .resident-panel.theme-light .resident-detail-icon {
        color: #075985;
        background: #E8EEF2;
        border: 1px solid rgba(255, 255, 255, 0.54);
        box-shadow:
          -7px -7px 16px rgba(255, 255, 255, 0.62),
          8px 8px 18px rgba(13, 39, 58, 0.095),
          inset 1px 1px 0 rgba(255, 255, 255, 0.64),
          inset -1px -1px 0 rgba(13, 39, 58, 0.035);
      }

      /* =========================
         CENIT NEUMORPHIC CLEAN PASS
         - softer light mode
         - dark neumorphic treatment
         - no header/notification glow
      ========================== */

      .resident-panel.theme-light .resident-status-card,
      .resident-panel.theme-light .resident-app-card,
      .resident-panel.theme-light .resident-detail-panel,
      .resident-panel.theme-light .resident-balance-card,
      .resident-panel.theme-light .resident-state-card,
      .resident-panel.theme-light .resident-quick-item {
        background: #E2EAEE !important;
        border-color: rgba(255, 255, 255, 0.46) !important;
        box-shadow:
          -6px -6px 14px rgba(255, 255, 255, 0.52),
          7px 7px 16px rgba(13, 39, 58, 0.065),
          inset 1px 1px 0 rgba(255, 255, 255, 0.50),
          inset -1px -1px 0 rgba(13, 39, 58, 0.025) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }

      .resident-panel.theme-light .resident-app-card:hover,
      .resident-panel.theme-light .resident-app-card:focus,
      .resident-panel.theme-light .resident-quick-item:hover,
      .resident-panel.theme-light .resident-quick-item:focus {
        transform: translateY(-1px);
        background: #E6EDF1 !important;
        border-color: rgba(255, 255, 255, 0.54) !important;
        box-shadow:
          -6px -6px 14px rgba(255, 255, 255, 0.54),
          7px 7px 16px rgba(13, 39, 58, 0.075),
          inset 1px 1px 0 rgba(255, 255, 255, 0.54),
          inset -1px -1px 0 rgba(13, 39, 58, 0.03) !important;
      }

      .resident-panel.theme-light .resident-app-card.is-primary,
      .resident-panel.theme-dark .resident-app-card.is-primary {
        border-color: inherit !important;
        box-shadow: inherit !important;
      }

      .resident-panel.theme-light .resident-app-card::before,
      .resident-panel.theme-dark .resident-app-card::before {
        background: transparent !important;
        opacity: 0 !important;
      }

      .resident-panel.theme-light .resident-icon-3d,
      .resident-panel.theme-light .resident-status-building,
      .resident-panel.theme-light .resident-detail-icon {
        background: #E7EEF2 !important;
        border: 1px solid rgba(255, 255, 255, 0.50) !important;
        box-shadow:
          -4px -4px 10px rgba(255, 255, 255, 0.55),
          5px 5px 12px rgba(13, 39, 58, 0.075),
          inset 1px 1px 0 rgba(255, 255, 255, 0.55),
          inset -1px -1px 0 rgba(13, 39, 58, 0.03) !important;
      }

      .resident-panel.theme-dark .resident-status-card,
      .resident-panel.theme-dark .resident-app-card,
      .resident-panel.theme-dark .resident-detail-panel,
      .resident-panel.theme-dark .resident-balance-card,
      .resident-panel.theme-dark .resident-state-card,
      .resident-panel.theme-dark .resident-quick-item {
        background: #081B2E !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        box-shadow:
          -5px -5px 12px rgba(255, 255, 255, 0.025),
          7px 7px 16px rgba(0, 0, 0, 0.22),
          inset 1px 1px 0 rgba(255, 255, 255, 0.055),
          inset -1px -1px 0 rgba(0, 0, 0, 0.18) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }

      .resident-panel.theme-dark .resident-app-card:hover,
      .resident-panel.theme-dark .resident-app-card:focus,
      .resident-panel.theme-dark .resident-quick-item:hover,
      .resident-panel.theme-dark .resident-quick-item:focus {
        transform: translateY(-1px);
        background: #0A2136 !important;
        border-color: rgba(255, 255, 255, 0.11) !important;
        box-shadow:
          -5px -5px 12px rgba(255, 255, 255, 0.028),
          8px 8px 18px rgba(0, 0, 0, 0.24),
          inset 1px 1px 0 rgba(255, 255, 255, 0.065),
          inset -1px -1px 0 rgba(0, 0, 0, 0.16) !important;
      }

      .resident-panel.theme-dark .resident-icon-3d,
      .resident-panel.theme-dark .resident-status-building,
      .resident-panel.theme-dark .resident-detail-icon {
        background: #0A2136 !important;
        color: #38BDF8;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow:
          -4px -4px 10px rgba(255, 255, 255, 0.028),
          6px 6px 14px rgba(0, 0, 0, 0.24),
          inset 1px 1px 0 rgba(255, 255, 255, 0.06),
          inset -1px -1px 0 rgba(0, 0, 0, 0.16) !important;
      }

      /* =========================
         FINAL SUBTLE NEUMORPHIC PASS
         - Softer shadows across both modes
         - No notification glow
         - Livelier dark borders
      ========================== */

      .resident-status-card,
      .resident-app-card,
      .resident-detail-panel,
      .resident-balance-card,
      .resident-state-card,
      .resident-quick-item,
      .resident-icon-3d,
      .resident-status-building,
      .resident-detail-icon,
      .resident-theme-toggle,
      .resident-bell,
      .resident-top-link,
      .resident-unit-select,
      .resident-unit-inline-select {
        box-shadow:
          5px 7px 16px rgba(0, 0, 0, 0.14),
          -3px -3px 10px rgba(255, 255, 255, 0.025),
          inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
      }

      .resident-app-card:hover,
      .resident-app-card:focus,
      .resident-quick-item:hover,
      .resident-quick-item:focus,
      .resident-top-link:hover,
      .resident-top-link:focus,
      .resident-theme-toggle:hover,
      .resident-theme-toggle:focus,
      .resident-bell:hover,
      .resident-bell:focus {
        box-shadow:
          7px 9px 20px rgba(0, 0, 0, 0.16),
          -3px -3px 10px rgba(255, 255, 255, 0.03),
          inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
      }

      .resident-app-card::before,
      .resident-panel.theme-light .resident-app-card::before {
        display: none !important;
        opacity: 0 !important;
      }

      .resident-panel.theme-dark .resident-status-card,
      .resident-panel.theme-dark .resident-app-card,
      .resident-panel.theme-dark .resident-detail-panel,
      .resident-panel.theme-dark .resident-balance-card,
      .resident-panel.theme-dark .resident-state-card,
      .resident-panel.theme-dark .resident-quick-item {
        border-color: rgba(6, 135, 203, 0.50) !important;
        box-shadow:
          6px 8px 18px rgba(0, 0, 0, 0.22),
          -3px -3px 10px rgba(255, 255, 255, 0.018),
          inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
      }

      .resident-panel.theme-dark .resident-app-card:hover,
      .resident-panel.theme-dark .resident-app-card:focus,
      .resident-panel.theme-dark .resident-quick-item:hover,
      .resident-panel.theme-dark .resident-quick-item:focus {
        border-color: rgba(6, 135, 203, 0.72) !important;
        box-shadow:
          8px 10px 22px rgba(0, 0, 0, 0.24),
          -3px -3px 10px rgba(255, 255, 255, 0.022),
          inset 0 1px 0 rgba(255, 255, 255, 0.052) !important;
      }

      .resident-panel.theme-dark .resident-icon-3d,
      .resident-panel.theme-dark .resident-status-building,
      .resident-panel.theme-dark .resident-detail-icon {
        border-color: rgba(6, 135, 203, 0.42) !important;
        box-shadow:
          5px 7px 14px rgba(0, 0, 0, 0.24),
          -2px -2px 8px rgba(255, 255, 255, 0.018),
          inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
      }

      .resident-panel.theme-light .resident-status-card,
      .resident-panel.theme-light .resident-app-card,
      .resident-panel.theme-light .resident-detail-panel,
      .resident-panel.theme-light .resident-balance-card,
      .resident-panel.theme-light .resident-state-card,
      .resident-panel.theme-light .resident-quick-item {
        background: #E2EBEF !important;
        border-color: rgba(255, 255, 255, 0.62) !important;
        box-shadow:
          7px 9px 18px rgba(68, 88, 102, 0.12),
          -6px -6px 16px rgba(255, 255, 255, 0.54),
          inset 0 1px 0 rgba(255, 255, 255, 0.50) !important;
      }

      .resident-panel.theme-light .resident-icon-3d,
      .resident-panel.theme-light .resident-status-building,
      .resident-panel.theme-light .resident-detail-icon {
        background: #E5EEF2 !important;
        box-shadow:
          5px 7px 14px rgba(68, 88, 102, 0.12),
          -5px -5px 13px rgba(255, 255, 255, 0.60),
          inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
      }

      /* =========================
         STICKY HEADER + UNIT BADGE
      ========================== */

      .resident-status-building.is-unit-badge {
        color: #FFFFFF !important;
        background: linear-gradient(135deg, #02233A 0%, #0792DB 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.20) !important;
        box-shadow:
          5px 7px 14px rgba(0, 0, 0, 0.18),
          -2px -2px 8px rgba(255, 255, 255, 0.045),
          inset 1px 1px 0 rgba(255, 255, 255, 0.18),
          inset -1px -1px 0 rgba(0, 0, 0, 0.16) !important;
      }

      .resident-panel.theme-light .resident-status-building.is-unit-badge {
        color: #FFFFFF !important;
        background: linear-gradient(135deg, #02233A 0%, #0792DB 100%) !important;
        border-color: rgba(255, 255, 255, 0.42) !important;
        box-shadow:
          5px 7px 14px rgba(68, 88, 102, 0.18),
          -4px -4px 12px rgba(255, 255, 255, 0.52),
          inset 1px 1px 0 rgba(255, 255, 255, 0.20),
          inset -1px -1px 0 rgba(0, 0, 0, 0.13) !important;
      }

      .resident-panel.theme-dark .resident-status-building.is-unit-badge {
        color: #FFFFFF !important;
        background: linear-gradient(135deg, #02233A 0%, #0792DB 100%) !important;
        border-color: rgba(6, 135, 203, 0.58) !important;
        box-shadow:
          5px 7px 14px rgba(0, 0, 0, 0.24),
          -2px -2px 8px rgba(255, 255, 255, 0.018),
          inset 1px 1px 0 rgba(255, 255, 255, 0.14),
          inset -1px -1px 0 rgba(0, 0, 0, 0.18) !important;
      }

      /* =========================
         STATUS ROW + CLEAN CARD COPY
      ========================== */

      .resident-app-card {
        justify-content: center !important;
      }

      .resident-app-card .resident-app-icon {
        margin-bottom: 14px !important;
      }

      .resident-app-text {
        display: none !important;
      }

      .resident-status-note.resident-status-note-row {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 18px !important;
        padding-top: 0 !important;
        border-top: 0 !important;
        min-width: 0 !important;
      }

      .resident-status-note.resident-status-note-row strong {
        display: block !important;
        margin: 0 !important;
        color: rgba(255, 255, 255, 0.70) !important;
        font-size: 0.78rem !important;
        line-height: 1.1 !important;
        font-weight: 900 !important;
        letter-spacing: 0.015em !important;
        white-space: nowrap !important;
      }

      .resident-status-current,
      .resident-status-metric {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 5px !important;
        min-height: 48px !important;
        color: rgba(255, 255, 255, 0.92) !important;
        white-space: nowrap !important;
      }

      .resident-status-current strong {
        color: rgba(255, 255, 255, 0.70) !important;
      }

      .resident-status-note-row .resident-status-pill {
        min-height: 27px !important;
        padding: 0 11px !important;
      }

      .resident-status-metric strong {
        color: rgba(255, 255, 255, 0.70) !important;
      }

      .resident-panel.theme-light .resident-status-note.resident-status-note-row strong,
      .resident-panel.theme-light .resident-status-current strong,
      .resident-panel.theme-light .resident-status-metric strong {
        color: rgba(15, 35, 55, 0.66) !important;
      }

      .resident-panel.theme-light .resident-status-current,
      .resident-panel.theme-light .resident-status-metric {
        color: rgba(15, 35, 55, 0.92) !important;
      }

      @media (max-width: 980px) {

        .resident-unit-state .resident-status-note {
          flex: 0 0 100% !important;
        }

        .resident-status-note.resident-status-note-row {
          padding-top: 13px !important;
          border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
          flex-wrap: wrap !important;
        }
      }

      @media (max-width: 780px) {
        .resident-status-note.resident-status-note-row {
          gap: 10px 14px !important;
        }

        .resident-status-current,
        .resident-status-metric {
          min-width: calc(50% - 8px) !important;
          white-space: normal !important;
        }
      }

      /* =========================
         FIXED HEADER OVERRIDE
         Sticky was unreliable inside Odoo's responsive/editor iframe.
         Use fixed positioning and restore the removed layout space.
      ========================== */

      .resident-panel > .resident-shell {
        padding-top: 78px !important;
      }

      @media (max-width: 780px) {
        .resident-panel > .resident-shell {
          padding-top: 76px !important;
        }
      }

      /* =========================
         STATUS MINI CARDS + WALLET ICON + MOBILE NAV SPACING
      ========================== */

      .resident-status-note.resident-status-note-row {
        display: flex !important;
        flex-flow: row nowrap !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
      }

      .resident-status-mini-card {
        min-height: 76px !important;
        padding: 13px 15px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 7px !important;
        border: 1px solid rgba(6, 135, 203, 0.42) !important;
        background: rgba(8, 31, 52, 0.72) !important;
        box-shadow:
          4px 5px 12px rgba(0, 0, 0, 0.16),
          inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
        white-space: normal !important;
      }

      .resident-status-mini-card strong {
        display: block !important;
        color: rgba(255, 255, 255, 0.64) !important;
        font-size: 0.72rem !important;
        line-height: 1.05 !important;
        font-weight: 920 !important;
        letter-spacing: 0.035em !important;
        text-transform: uppercase !important;
        white-space: normal !important;
      }

      .resident-status-value {
        display: block !important;
        color: #FFFFFF !important;
        font-size: 1.28rem !important;
        line-height: 1.05 !important;
        font-weight: 960 !important;
        letter-spacing: -0.04em !important;
      }

      .resident-status-mini-card.is-money .resident-status-value,
      .resident-status-mini-card.is-credit .resident-status-value {
        font-size: 1.46rem !important;
      }

      .resident-status-mini-card .resident-status-pill {
        min-height: 30px !important;
        padding: 0 12px !important;
        font-size: 0.78rem !important;
        box-shadow: none !important;
      }

      .resident-panel.theme-light .resident-status-mini-card {
        background: #DCE7EC !important;
        border-color: rgba(255, 255, 255, 0.58) !important;
        box-shadow:
          4px 6px 12px rgba(68, 88, 102, 0.10),
          -4px -4px 11px rgba(255, 255, 255, 0.40),
          inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
      }

      .resident-panel.theme-light .resident-status-mini-card strong {
        color: rgba(15, 35, 55, 0.58) !important;
      }

      .resident-panel.theme-light .resident-status-value {
        color: #0B2238 !important;
      }

      .resident-icon-3d-image {
        overflow: visible !important;
      }

      .resident-card-icon-img {
        width: 82px !important;
        height: 82px !important;
        object-fit: contain !important;
        display: block !important;
        transform: scale(1.18) !important;
        filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.16));
      }

      .resident-panel.theme-dark .resident-card-icon-img {
        filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.22));
      }

      .resident-icon-image-wrap::after {
        display: none !important;
        content: none !important;
      }

      @media (max-width: 980px) {

        .resident-unit-state .resident-status-note {
          flex: 0 0 100% !important;
        }

        .resident-status-note.resident-status-note-row {
          flex-flow: row nowrap !important;
          padding-top: 13px !important;
          border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
        }
      }

      @media (max-width: 780px) {
        .resident-status-note.resident-status-note-row {
          flex-flow: column nowrap !important;
          gap: 10px !important;
        }

        .resident-status-mini-card {
          min-height: 68px !important;
          padding: 12px 13px !important;
        }

        .resident-status-value {
          font-size: 1.18rem !important;
        }

        .resident-status-mini-card.is-money .resident-status-value,
        .resident-status-mini-card.is-credit .resident-status-value {
          font-size: 1.34rem !important;
        }
      }

      /* =========================
         CINEMATIC CARD FLARE + STATUS CARDS V2
      ========================== */

      .resident-app-card::before {
        opacity: 1 !important;
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.018) 34%, transparent 68%) !important;
      }

      .resident-panel.theme-dark .resident-app-card::before {
        background:
          linear-gradient(135deg, rgba(7, 146, 219, 0.13) 0%, rgba(7, 146, 219, 0.035) 35%, transparent 70%) !important;
      }

      .resident-panel.theme-light .resident-app-card::before {
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.14) 36%, transparent 72%) !important;
      }

      .resident-app-image-free {
        width: 112px !important;
        height: 112px !important;
        margin-bottom: 8px !important;
        overflow: visible !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
      }

      .resident-app-image-free::after,
      .resident-app-image-free::before {
        display: none !important;
        content: none !important;
      }

      .resident-app-image-free .resident-card-icon-img,
      .resident-card-icon-img {
        width: 105px !important;
        height: 105px !important;
        object-fit: contain !important;
        display: block !important;
        transform: none !important;
        filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.14)) !important;
      }

      .resident-panel.theme-dark .resident-card-icon-img {
        filter: drop-shadow(0 9px 10px rgba(0, 0, 0, 0.20)) !important;
      }

      .resident-status-mini-card.is-blue-card {
        background:
          linear-gradient(135deg, rgba(7, 146, 219, 0.92), rgba(2, 35, 58, 0.94)) !important;
        border-color: rgba(7, 146, 219, 0.54) !important;
      }

      .resident-status-mini-card.is-warning-card {
        background:
          linear-gradient(135deg, rgba(249, 115, 22, 0.98), rgba(154, 52, 18, 0.92)) !important;
        border-color: rgba(251, 146, 60, 0.58) !important;
      }

      .resident-status-mini-card.is-ok-card {
        background:
          linear-gradient(135deg, rgba(34, 197, 94, 0.94), rgba(0, 120, 80, 0.92)) !important;
        border-color: rgba(34, 197, 94, 0.50) !important;
      }

      .resident-status-mini-card.is-blue-card strong,
      .resident-status-mini-card.is-warning-card strong,
      .resident-status-mini-card.is-ok-card strong,
      .resident-panel.theme-light .resident-status-mini-card.is-blue-card strong,
      .resident-panel.theme-light .resident-status-mini-card.is-warning-card strong,
      .resident-panel.theme-light .resident-status-mini-card.is-ok-card strong {
        color: rgba(255, 255, 255, 0.76) !important;
      }

      .resident-status-mini-card.is-blue-card .resident-status-value,
      .resident-status-mini-card.is-warning-card .resident-status-value,
      .resident-status-mini-card.is-ok-card .resident-status-value,
      .resident-panel.theme-light .resident-status-mini-card.is-blue-card .resident-status-value,
      .resident-panel.theme-light .resident-status-mini-card.is-warning-card .resident-status-value,
      .resident-panel.theme-light .resident-status-mini-card.is-ok-card .resident-status-value {
        color: #FFFFFF !important;
      }

      .resident-status-mini-card.is-warning-card .resident-status-pill,
      .resident-status-mini-card.is-ok-card .resident-status-pill {
        background: rgba(255, 255, 255, 0.16) !important;
        border: 1px solid rgba(255, 255, 255, 0.22) !important;
        color: #FFFFFF !important;
      }

      @media (max-width: 780px) {
        .resident-app-image-free {
          width: 106px !important;
          height: 106px !important;
          margin-bottom: 2px !important;
        }

        .resident-app-image-free .resident-card-icon-img,
        .resident-card-icon-img {
          width: 105px !important;
          height: 105px !important;
        }
      }

      /* =========================
         REFINEMENT - STATUS COLOR, CONTRAST, DARK NEUMORPHISM
      ========================== */

      .resident-panel.theme-light .resident-status-card,
      .resident-panel.theme-light .resident-app-card {
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.08) 42%, transparent 78%),
          #EAF1F5 !important;
        border-color: rgba(255, 255, 255, 0.66) !important;
        box-shadow:
          -7px -7px 16px rgba(255, 255, 255, 0.48),
          7px 8px 18px rgba(42, 65, 82, 0.105),
          inset 1px 1px 0 rgba(255, 255, 255, 0.70),
          inset -1px -1px 0 rgba(30, 55, 72, 0.035) !important;
      }

      .resident-panel.theme-light .resident-app-grid .resident-app-card:nth-child(2n),
      .resident-panel.theme-light .resident-status-mini-card {
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0.07) 42%, transparent 78%),
          #E6EEF3 !important;
      }

      .resident-panel.theme-light .resident-status-mini-card.is-blue-card {
        background:
          linear-gradient(135deg, #0792DB 0%, #02233A 100%) !important;
        border-color: rgba(7, 146, 219, 0.46) !important;
        box-shadow:
          -4px -4px 10px rgba(255, 255, 255, 0.32),
          6px 7px 14px rgba(30, 55, 72, 0.13),
          inset 1px 1px 0 rgba(255, 255, 255, 0.17),
          inset -1px -1px 0 rgba(0, 0, 0, 0.10) !important;
      }

      .resident-status-mini-card.is-warning-card,
      .resident-panel.theme-light .resident-status-mini-card.is-warning-card {
        background:
          linear-gradient(135deg, #F97316 0%, #9A3412 100%) !important;
        border-color: rgba(249, 115, 22, 0.52) !important;
      }

      .resident-status-mini-card.is-ok-card,
      .resident-panel.theme-light .resident-status-mini-card.is-ok-card {
        background:
          linear-gradient(135deg, #22C55E 0%, #047857 100%) !important;
        border-color: rgba(34, 197, 94, 0.48) !important;
      }

      .resident-status-state-word {
        display: block !important;
        color: #FFFFFF !important;
        font-size: 1.34rem !important;
        line-height: 1.02 !important;
        font-weight: 950 !important;
        letter-spacing: -0.04em !important;
      }

      .resident-status-mini-card strong {
        color: rgba(255, 255, 255, 0.76) !important;
      }

      .resident-status-mini-card .resident-status-value {
        color: #FFFFFF !important;
      }

      .resident-panel.theme-dark .resident-app-card {
        background:
          linear-gradient(135deg, rgba(7, 146, 219, 0.12) 0%, rgba(7, 146, 219, 0.028) 38%, rgba(2, 10, 20, 0.00) 78%),
          #061B2F !important;
        border-color: rgba(6, 135, 203, 0.50) !important;
        box-shadow:
          -7px -7px 15px rgba(17, 55, 82, 0.18),
          8px 9px 18px rgba(0, 0, 0, 0.28),
          inset 1px 1px 0 rgba(255, 255, 255, 0.055),
          inset -1px -1px 0 rgba(0, 0, 0, 0.18) !important;
      }

      .resident-panel.theme-dark .resident-status-card {
        background:
          linear-gradient(135deg, rgba(7, 146, 219, 0.13) 0%, rgba(7, 146, 219, 0.030) 44%, transparent 78%),
          #061B2F !important;
        border-color: rgba(6, 135, 203, 0.50) !important;
        box-shadow:
          -7px -7px 16px rgba(17, 55, 82, 0.14),
          8px 9px 18px rgba(0, 0, 0, 0.30),
          inset 1px 1px 0 rgba(255, 255, 255, 0.050),
          inset -1px -1px 0 rgba(0, 0, 0, 0.18) !important;
      }

      .resident-panel.theme-dark .resident-app-card:hover,
      .resident-panel.theme-dark .resident-app-card:focus {
        transform: translateY(-1px) !important;
        background:
          linear-gradient(135deg, rgba(7, 146, 219, 0.16) 0%, rgba(7, 146, 219, 0.04) 40%, rgba(2, 10, 20, 0.00) 78%),
          #071F36 !important;
        box-shadow:
          -7px -7px 15px rgba(17, 55, 82, 0.20),
          8px 9px 18px rgba(0, 0, 0, 0.30),
          inset 1px 1px 0 rgba(255, 255, 255, 0.065),
          inset -1px -1px 0 rgba(0, 0, 0, 0.18) !important;
      }

      .resident-icon-image-wrap.resident-app-image-free {
        position: relative !important;
        isolation: isolate !important;
      }

      .resident-panel.theme-dark .resident-icon-image-wrap.resident-app-image-free::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        z-index: -1 !important;
        inset: 18px 10px 6px !important;
        border-radius: 999px !important;
        background: radial-gradient(circle, rgba(7, 146, 219, 0.42) 0%, rgba(7, 146, 219, 0.18) 34%, rgba(7, 146, 219, 0.00) 72%) !important;
        filter: blur(16px) !important;
        opacity: 0.90 !important;
        pointer-events: none !important;
      }

      .resident-panel.theme-dark .resident-card-icon-img {
        filter:
          drop-shadow(0 10px 4px rgba(0, 0, 0, 0.48))
          drop-shadow(0 0 30px rgba(7, 146, 219, 0.50)) !important;
      }

      @media (max-width: 780px) {
        .resident-status-state-word {
          font-size: 1.24rem !important;
        }
      }

      /* =========================
         UNIT SWITCH CARD
      ========================== */

      /* =========================
         FINAL PASS - PREMIUM UNIT SWITCH + TIGHTER SHADOWS
         - wallet icon free, larger on desktop, tighter light shadow
         - tighter status card shadows
         - no star badge
         - white dropdown aligned right
         - consistent gradient direction
      ========================== */

      .resident-panel.theme-light .resident-status-card,
      .resident-panel.theme-light .resident-app-card {
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.08) 34%, rgba(255, 255, 255, 0.00) 72%),
          #E4EDF2 !important;
        border-color: rgba(255, 255, 255, 0.72) !important;
        box-shadow:
          -4px -4px 10px rgba(255, 255, 255, 0.40),
          5px 6px 12px rgba(48, 68, 84, 0.075),
          inset 1px 1px 0 rgba(255, 255, 255, 0.62),
          inset -1px -1px 0 rgba(25, 50, 68, 0.030) !important;
      }

      .resident-panel.theme-light .resident-app-card:hover,
      .resident-panel.theme-light .resident-app-card:focus {
        transform: translateY(-1px) !important;
        box-shadow:
          -4px -4px 10px rgba(255, 255, 255, 0.44),
          6px 7px 13px rgba(48, 68, 84, 0.085),
          inset 1px 1px 0 rgba(255, 255, 255, 0.66),
          inset -1px -1px 0 rgba(25, 50, 68, 0.035) !important;
      }

      .resident-panel.theme-dark .resident-app-card,
      .resident-panel.theme-dark .resident-status-card {
        background:
          linear-gradient(135deg, rgba(7, 146, 219, 0.13) 0%, rgba(7, 146, 219, 0.035) 32%, rgba(7, 146, 219, 0.00) 72%),
          #061B2F !important;
        border-color: rgba(6, 135, 203, 0.50) !important;
        box-shadow:
          -3px -3px 8px rgba(22, 58, 84, 0.10),
          5px 6px 12px rgba(0, 0, 0, 0.22),
          inset 1px 1px 0 rgba(255, 255, 255, 0.045),
          inset -1px -1px 0 rgba(0, 0, 0, 0.16) !important;
      }

      .resident-panel.theme-dark .resident-app-card:hover,
      .resident-panel.theme-dark .resident-app-card:focus {
        transform: translateY(-1px) !important;
        background:
          linear-gradient(135deg, rgba(7, 146, 219, 0.16) 0%, rgba(7, 146, 219, 0.045) 34%, rgba(7, 146, 219, 0.00) 74%),
          #071F36 !important;
        box-shadow:
          -3px -3px 8px rgba(22, 58, 84, 0.12),
          6px 7px 13px rgba(0, 0, 0, 0.24),
          inset 1px 1px 0 rgba(255, 255, 255, 0.055),
          inset -1px -1px 0 rgba(0, 0, 0, 0.16) !important;
      }

      .resident-status-mini-card,
      .resident-panel.theme-light .resident-status-mini-card,
      .resident-panel.theme-dark .resident-status-mini-card {
        box-shadow:
          3px 4px 10px rgba(0, 0, 0, 0.12),
          inset 1px 1px 0 rgba(255, 255, 255, 0.12),
          inset -1px -1px 0 rgba(0, 0, 0, 0.11) !important;
      }

      .resident-status-mini-card.is-blue-card,
      .resident-panel.theme-light .resident-status-mini-card.is-blue-card,
      .resident-panel.theme-dark .resident-status-mini-card.is-blue-card,
      .resident-status-building.is-unit-badge,
      .resident-panel.theme-light .resident-status-building.is-unit-badge,
      .resident-panel.theme-dark .resident-status-building.is-unit-badge,
      .resident-bottom-link.is-active,
      .resident-panel.theme-light .resident-bottom-link.is-active,
      .resident-panel.theme-dark .resident-bottom-link.is-active {
        background: linear-gradient(135deg, #02233A 0%, #0792DB 100%) !important;
      }

      .resident-status-mini-card.is-warning-card,
      .resident-panel.theme-light .resident-status-mini-card.is-warning-card,
      .resident-panel.theme-dark .resident-status-mini-card.is-warning-card {
        background: linear-gradient(135deg, #9A3412 0%, #F97316 100%) !important;
        box-shadow:
          3px 4px 10px rgba(154, 52, 18, 0.18),
          inset 1px 1px 0 rgba(255, 255, 255, 0.15),
          inset -1px -1px 0 rgba(0, 0, 0, 0.12) !important;
      }

      .resident-status-mini-card.is-ok-card,
      .resident-panel.theme-light .resident-status-mini-card.is-ok-card,
      .resident-panel.theme-dark .resident-status-mini-card.is-ok-card {
        background: linear-gradient(135deg, #047857 0%, #22C55E 100%) !important;
      }

      .resident-icon-image-wrap.resident-app-image-free,
      .resident-icon-image-wrap.resident-app-image-free .resident-card-icon-img {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
      }

      @media (min-width: 781px) {
        .resident-app-image-free {
          width: 126px !important;
          height: 126px !important;
          margin-top: -4px !important;
          margin-bottom: -2px !important;
        }

        .resident-app-image-free .resident-card-icon-img,
        .resident-card-icon-img {
          width: 125px !important;
          height: 125px !important;
        }
      }

      .resident-panel.theme-light .resident-card-icon-img {
        filter: drop-shadow(0 8px 3px rgba(0, 0, 0, 0.20)) !important;
      }

      .resident-panel.theme-dark .resident-card-icon-img {
        filter:
          drop-shadow(0 10px 4px rgba(0, 0, 0, 0.48))
          drop-shadow(0 0 30px rgba(7, 146, 219, 0.50)) !important;
      }

      @media (max-width: 780px) {

        .resident-app-image-free {
          width: 106px !important;
          height: 106px !important;
        }

        .resident-app-image-free .resident-card-icon-img,
        .resident-card-icon-img {
          width: 105px !important;
          height: 105px !important;
        }
      }

      /* =========================
         WALLET SHADOW + SELECTOR LABEL FINAL TUNE
      ========================== */

      .resident-panel.theme-dark .resident-card-icon-img {
        filter:
          drop-shadow(0 10px 4px rgba(0, 0, 0, 0.48))
          drop-shadow(0 0 30px rgba(7, 146, 219, 0.50)) !important;
      }

      .resident-panel.theme-light .resident-card-icon-img {
        filter: drop-shadow(0 8px 3px rgba(0, 0, 0, 0.20)) !important;
      }

      /* =========================
         UNIT SELECTOR LABEL CONSISTENCY
      ========================== */

      /* =========================
         FIX - UNIT SELECTOR LABEL REAL SIZE MATCH
         Make Unidad seleccionada visually match status labels.
      ========================== */

      /* =========================
         FINAL OVERRIDE - UNIT SWITCH CONTRAST REVERSE
         - Label: Seleccionar unidad (Multi-unidad)
         - No gold treatment
         - Dark mode gets a light-style selector card
         - Light mode gets a dark-style selector card
      ========================== */

      /* =========================
         BARELY PERCEPTIBLE 3D ICON BOB
         - Soft ambient movement only
         - Slow timing keeps it premium
         - Different delays avoid robotic sync
      ========================== */

      @keyframes cenitIconBob {
        0% {
          transform: translateY(0) rotate(0deg);
        }

        50% {
          transform: translateY(-2px) rotate(-0.08deg);
        }

        100% {
          transform: translateY(0) rotate(0deg);
        }
      }

      .resident-app-card .resident-app-icon {
        animation: cenitIconBob 7.4s ease-in-out infinite;
        will-change: transform;
        transform-origin: center center;
      }

      .resident-app-card:nth-child(2) .resident-app-icon {
        animation-delay: -1.1s;
      }

      .resident-app-card:nth-child(3) .resident-app-icon {
        animation-delay: -2.2s;
      }

      .resident-app-card:nth-child(4) .resident-app-icon {
        animation-delay: -3.3s;
      }

      .resident-app-card:nth-child(5) .resident-app-icon {
        animation-delay: -4.4s;
      }

      .resident-app-card:hover .resident-app-icon,
      .resident-app-card:focus .resident-app-icon {
        animation-play-state: paused;
        transform: translateY(-2px) scale(1.008);
        transition: transform 0.22s ease;
      }

      .resident-card-icon-img {
        transform: translateZ(0) !important;
      }

      @media (prefers-reduced-motion: reduce) {
        .resident-app-card .resident-app-icon {
          animation: none !important;
        }

        .resident-app-card:hover .resident-app-icon,
        .resident-app-card:focus .resident-app-icon {
          transform: none !important;
        }
      }

      /* =========================
         FINAL LOCK - CENTERED MENU + CLICKAWAY SAFETY
         This block overrides body refactors so shell position does not drift.
      ========================== */

      /* =========================
         FIX - MOBILE BOTTOM NAV STORED SVG SIZE
         Stored /shell/*.svg icons must never use intrinsic 512px size.
         Bottom nav is a compass, not an icon wall.
      ========================== */

      /* =========================
         FINAL FIX - MOBILE NAV LIGHT MODE CONTRAST
         - Stored SVG icons are white by default.
         - Light mode inactive icons must be dark blue-gray.
         - Active item stays white on blue.
      ========================== */

      /* Conditional mobile nav: keep equal visible slots when Servicios is hidden. */

      /* =========================
         FINAL ICON MAP - 3D BODY ASSETS
         - Casos comunitarios uses house.png
         - Citas uses calendar.png
         - Tienda uses cart.png
         - Multi-unit selector uses building.png
      ========================== */

      /* =========================
         FINAL REFACTOR - MULTI UNIT SELECTOR WITH BUILDING ICON
         - building.png is now part of the selector identity
         - icon is visible but not oversized
         - label + select stay structured and aligned
      ========================== */

      /* =========================
         FINAL REFACTOR - MULTI UNIT SELECTOR HERO CARD
         - building.png becomes a real visual anchor
         - desktop uses a two-row structure, not a thin one-line selector
         - mobile keeps icon + title prominent and select easy to tap
      ========================== */

      /* =========================
         FINAL REFACTOR - MULTI UNIT HERO SELECTOR V2
         - kill icon backing box
         - make building icon the visual anchor
         - improve title hierarchy and give selector more presence
      ========================== */

      /* =========================
         FINAL REFACTOR - MULTI UNIT HERO V3
         - golden kicker
         - icon follows body-card 3D image doctrine
         - stronger light/dark text contrast
         - bigger building icon on desktop and mobile
      ========================== */

      /* =========================
         FINAL REFACTOR - MULTI UNIT HERO V4
         - building pushed down another 5px
         - selector card uses the same card system as body cards
         - multi-unit kicker uses consistent gold gradient in both themes
      ========================== */

      /* =========================
         FINAL AUTHORITY - MULTI UNIT HERO CLEANUP
         - one final source of truth for the selector hero
         - hard-lock building_orange.png behavior through CSS/markup asset above
         - card background matches the body card system
         - no decorative radial overlay
         - building pops from card without sinking
         - title padding restored
      ========================== */

      /* =========================
         FINAL AUTHORITY - MULTI UNIT SELECTOR CORRECTION
         - do not move shell/nav/body
         - selector belongs to the same card system
         - no decorative/radial selector overlay
         - orange building asset, controlled pop-out
         - title padding restored
      ========================== */

      /* =========================
         FINAL FIX - MULTI UNIT BACKGROUND
         - use the exact accepted card background
         - do not move shell, nav, body, or routes
      ========================== */

      /* =========================
         FINAL MICRO FIX - MULTI UNIT BUILDING POP DIRECTION
         - from current accepted position, push icon up
      ========================== */

      /* =========================
         FINAL MICRO FIX - JUEGOS 3D ICON
         - uses games.png from shell assets
      ========================== */

      .resident-card-icon-img[src*="games.png"] {
        object-fit: contain !important;
      }

      /* =========================
         FINAL REFACTOR - UNIT STATUS / WALLET
         - unit badge gold
         - resident name only
         - oldest pending month moves to first card
         - wallet credit always visible
      ========================== */

      .resident-status-building.is-unit-badge.is-gold-unit-badge,
      .resident-panel.theme-dark .resident-status-building.is-unit-badge.is-gold-unit-badge,
      .resident-panel.theme-light .resident-status-building.is-unit-badge.is-gold-unit-badge {
        color: #6B4500 !important;
        background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 100%) !important;
        border-color: rgba(180, 83, 9, 0.32) !important;
        box-shadow:
          5px 7px 14px rgba(0, 0, 0, 0.20),
          inset 1px 1px 0 rgba(255, 255, 255, 0.34),
          inset -1px -1px 0 rgba(120, 53, 15, 0.16) !important;
      }

      .resident-status-building.is-unit-badge.is-gold-unit-badge .resident-unit-code {
        color: #6B4500 !important;
        text-shadow: none !important;
      }

      .resident-status-mini-card.is-wallet-empty,
      .resident-panel.theme-dark .resident-status-mini-card.is-wallet-empty {
        background:
          linear-gradient(135deg, rgba(71, 85, 105, 0.78), rgba(30, 41, 59, 0.86)) !important;
        border-color: rgba(148, 163, 184, 0.26) !important;
      }

      .resident-panel.theme-light .resident-status-mini-card.is-wallet-empty {
        background:
          linear-gradient(135deg, rgba(203, 213, 225, 0.96), rgba(148, 163, 184, 0.72)) !important;
        border-color: rgba(255, 255, 255, 0.62) !important;
      }

      .resident-status-mini-card.is-wallet-empty strong,
      .resident-panel.theme-light .resident-status-mini-card.is-wallet-empty strong {
        color: rgba(255, 255, 255, 0.72) !important;
      }

      .resident-status-mini-card.is-wallet-empty .resident-status-value,
      .resident-panel.theme-light .resident-status-mini-card.is-wallet-empty .resident-status-value {
        color: #FFFFFF !important;
      }

      .resident-status-mini-card.is-credit,
      .resident-panel.theme-dark .resident-status-mini-card.is-credit,
      .resident-panel.theme-light .resident-status-mini-card.is-credit {
        background:
          linear-gradient(135deg, rgba(34, 197, 94, 0.94), rgba(0, 120, 80, 0.92)) !important;
        border-color: rgba(34, 197, 94, 0.50) !important;
      }

      .resident-status-mini-card.is-credit strong,
      .resident-panel.theme-light .resident-status-mini-card.is-credit strong {
        color: rgba(255, 255, 255, 0.76) !important;
      }

      .resident-status-mini-card.is-credit .resident-status-value,
      .resident-panel.theme-light .resident-status-mini-card.is-credit .resident-status-value {
        color: #FFFFFF !important;
      }

      /* =========================
         FINAL REFACTOR - WALLET SOURCE / JUEGOS CLEANUP / LIGHT MODE TUNE
      ========================== */

      .resident-status-building.is-unit-badge.is-gold-unit-badge,
      .resident-panel.theme-dark .resident-status-building.is-unit-badge.is-gold-unit-badge,
      .resident-panel.theme-light .resident-status-building.is-unit-badge.is-gold-unit-badge {
        color: #6B4500 !important;
        background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 100%) !important;
        border-color: rgba(180, 83, 9, 0.32) !important;
        box-shadow:
          5px 7px 14px rgba(0, 0, 0, 0.20),
          inset 1px 1px 0 rgba(255, 255, 255, 0.34),
          inset -1px -1px 0 rgba(120, 53, 15, 0.16) !important;
      }

      .resident-status-building.is-unit-badge.is-gold-unit-badge .resident-unit-code {
        color: #6B4500 !important;
        text-shadow: none !important;
      }

      .resident-status-mini-card.is-wallet-empty,
      .resident-panel.theme-dark .resident-status-mini-card.is-wallet-empty {
        background:
          linear-gradient(135deg, rgba(71, 85, 105, 0.78), rgba(30, 41, 59, 0.86)) !important;
        border-color: rgba(148, 163, 184, 0.26) !important;
      }

      .resident-panel.theme-light .resident-status-mini-card.is-wallet-empty {
        background:
          linear-gradient(135deg, rgba(186, 199, 211, 0.94), rgba(143, 158, 174, 0.78)) !important;
        border-color: rgba(255, 255, 255, 0.68) !important;
      }

      .resident-status-mini-card.is-wallet-empty strong,
      .resident-status-mini-card.is-wallet-empty .resident-status-value,
      .resident-panel.theme-light .resident-status-mini-card.is-wallet-empty strong,
      .resident-panel.theme-light .resident-status-mini-card.is-wallet-empty .resident-status-value {
        color: #FFFFFF !important;
      }

      .resident-status-mini-card.is-credit,
      .resident-panel.theme-dark .resident-status-mini-card.is-credit,
      .resident-panel.theme-light .resident-status-mini-card.is-credit {
        background:
          linear-gradient(135deg, rgba(34, 197, 94, 0.94), rgba(0, 120, 80, 0.92)) !important;
        border-color: rgba(34, 197, 94, 0.50) !important;
      }

      .resident-status-mini-card.is-credit strong,
      .resident-status-mini-card.is-credit .resident-status-value,
      .resident-panel.theme-light .resident-status-mini-card.is-credit strong,
      .resident-panel.theme-light .resident-status-mini-card.is-credit .resident-status-value {
        color: #FFFFFF !important;
      }

      .resident-icon-games-clean,
      .resident-panel.theme-dark .resident-icon-games-clean,
      .resident-panel.theme-light .resident-icon-games-clean {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
      }

      .resident-icon-games-clean::before,
      .resident-icon-games-clean::after {
        content: none !important;
        display: none !important;
      }

      .resident-icon-games-clean .resident-card-icon-img,
      .resident-card-icon-img[src*="games.png"] {
        width: 110px !important;
        height: 110px !important;
        max-width: 110px !important;
        max-height: 110px !important;
        transform: none !important;
        object-fit: contain !important;
        filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.18)) !important;
      }

      .resident-panel.theme-dark .resident-icon-games-clean .resident-card-icon-img,
      .resident-panel.theme-dark .resident-card-icon-img[src*="games.png"] {
        filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.24)) !important;
      }

      /* Cleaner Apple-like light mode: more contrast, less cloudy glow. */

      .resident-panel.theme-light .resident-unit-switch-card,
      .resident-panel.theme-light .resident-status-card,
      .resident-panel.theme-light .resident-app-card,
      .resident-panel.theme-light .resident-detail-panel,
      .resident-panel.theme-light .resident-balance-card,
      .resident-panel.theme-light .resident-state-card,
      .resident-panel.theme-light .resident-quick-item {
        background:
          linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(239, 247, 250, 0.88)) !important;
        border-color: rgba(255, 255, 255, 0.82) !important;
        box-shadow:
          0 14px 26px rgba(37, 56, 71, 0.11),
          0 2px 5px rgba(37, 56, 71, 0.055),
          inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }

      .resident-panel.theme-light .resident-app-card:hover,
      .resident-panel.theme-light .resident-app-card:focus,
      .resident-panel.theme-light .resident-quick-item:hover,
      .resident-panel.theme-light .resident-quick-item:focus {
        transform: translateY(-1px) !important;
        background:
          linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(242, 248, 251, 0.94)) !important;
        border-color: rgba(255, 255, 255, 0.94) !important;
        box-shadow:
          0 17px 30px rgba(37, 56, 71, 0.13),
          0 3px 7px rgba(37, 56, 71, 0.065),
          inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;
      }

      .resident-panel.theme-light .resident-app-card::before,
      .resident-panel.theme-light .resident-unit-switch-card::before,
      .resident-panel.theme-light .resident-unit-switch-card::after {
        background: transparent !important;
        opacity: 0 !important;
      }

      .resident-panel.theme-light .resident-status-mini-card.is-blue-card {
        background:
          linear-gradient(135deg, rgba(7, 146, 219, 0.96), rgba(2, 84, 135, 0.94)) !important;
        border-color: rgba(7, 146, 219, 0.46) !important;
      }

      .resident-panel.theme-light .resident-status-mini-card.is-warning-card {
        background:
          linear-gradient(135deg, rgba(249, 115, 22, 0.98), rgba(194, 65, 12, 0.94)) !important;
        border-color: rgba(251, 146, 60, 0.50) !important;
      }

      .resident-panel.theme-light .resident-status-mini-card.is-ok-card {
        background:
          linear-gradient(135deg, rgba(34, 197, 94, 0.96), rgba(0, 128, 80, 0.94)) !important;
        border-color: rgba(34, 197, 94, 0.44) !important;
      }

      .resident-panel.theme-light .resident-status-mini-card.is-blue-card strong,
      .resident-panel.theme-light .resident-status-mini-card.is-warning-card strong,
      .resident-panel.theme-light .resident-status-mini-card.is-ok-card strong,
      .resident-panel.theme-light .resident-status-mini-card.is-blue-card .resident-status-value,
      .resident-panel.theme-light .resident-status-mini-card.is-warning-card .resident-status-value,
      .resident-panel.theme-light .resident-status-mini-card.is-ok-card .resident-status-value {
        color: #FFFFFF !important;
      }

      /* =========================
         FINAL REFACTOR - APPLE CLEAN LIGHT MODE
         - solid #f5f5f7 background
         - no page/card background gradients in light mode
         - consistent clean white cards
         - stronger Apple-like separation
         - dark mode untouched
      ========================== */

      .resident-panel.theme-light,
      .resident-panel.theme-light .resident-shell,
      .resident-panel.theme-light .resident-main,
      .resident-panel.theme-light .resident-content,
      .resident-panel.theme-light #wrap,
      .resident-panel.theme-light #wrapwrap {
        background: #F5F5F7 !important;
        background-image: none !important;
      }

      .resident-panel.theme-light::before,
      .resident-panel.theme-light::after,
      .resident-panel.theme-light .resident-shell::before,
      .resident-panel.theme-light .resident-shell::after,
      .resident-panel.theme-light .resident-main::before,
      .resident-panel.theme-light .resident-main::after {
        background: transparent !important;
        background-image: none !important;
        opacity: 0 !important;
        box-shadow: none !important;
      }

      .resident-panel.theme-light .resident-unit-switch-card,
      .resident-panel.theme-light .resident-status-card,
      .resident-panel.theme-light .resident-app-card,
      .resident-panel.theme-light .resident-detail-panel,
      .resident-panel.theme-light .resident-balance-card,
      .resident-panel.theme-light .resident-state-card,
      .resident-panel.theme-light .resident-quick-item {
        background: #FFFFFF !important;
        background-image: none !important;
        border: 1px solid rgba(17, 24, 39, 0.08) !important;
        box-shadow:
          0 18px 34px rgba(17, 24, 39, 0.075),
          0 2px 8px rgba(17, 24, 39, 0.045) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }

      .resident-panel.theme-light .resident-unit-switch-card::before,
      .resident-panel.theme-light .resident-unit-switch-card::after,
      .resident-panel.theme-light .resident-status-card::before,
      .resident-panel.theme-light .resident-status-card::after,
      .resident-panel.theme-light .resident-app-card::before,
      .resident-panel.theme-light .resident-app-card::after,
      .resident-panel.theme-light .resident-detail-panel::before,
      .resident-panel.theme-light .resident-detail-panel::after,
      .resident-panel.theme-light .resident-balance-card::before,
      .resident-panel.theme-light .resident-balance-card::after,
      .resident-panel.theme-light .resident-state-card::before,
      .resident-panel.theme-light .resident-state-card::after,
      .resident-panel.theme-light .resident-quick-item::before,
      .resident-panel.theme-light .resident-quick-item::after {
        background: transparent !important;
        background-image: none !important;
        opacity: 0 !important;
        box-shadow: none !important;
      }

      .resident-panel.theme-light .resident-app-card:hover,
      .resident-panel.theme-light .resident-app-card:focus,
      .resident-panel.theme-light .resident-quick-item:hover,
      .resident-panel.theme-light .resident-quick-item:focus {
        transform: translateY(-2px) !important;
        background: #FFFFFF !important;
        background-image: none !important;
        border-color: rgba(17, 24, 39, 0.10) !important;
        box-shadow:
          0 22px 40px rgba(17, 24, 39, 0.095),
          0 4px 10px rgba(17, 24, 39, 0.055) !important;
      }

      .resident-panel.theme-light .resident-unit-selector-title,
      .resident-panel.theme-light .resident-status-unit,
      .resident-panel.theme-light .resident-app-title {
        color: #111827 !important;
        text-shadow: none !important;
      }

      .resident-panel.theme-light .resident-unit-selector-subtitle,
      .resident-panel.theme-light .resident-status-name {
        color: #4B5563 !important;
      }

      .resident-panel.theme-light .resident-status-mini-card {
        box-shadow:
          0 12px 22px rgba(17, 24, 39, 0.12),
          inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
      }

      .resident-panel.theme-light .resident-status-building.is-unit-badge.is-gold-unit-badge {
        box-shadow:
          0 12px 22px rgba(180, 83, 9, 0.18),
          0 2px 7px rgba(17, 24, 39, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
      }

      .resident-panel.theme-light .resident-card-icon-img,
      .resident-panel.theme-light .resident-icon-image-wrap img {
        filter:
          drop-shadow(0 13px 10px rgba(17, 24, 39, 0.16))
          drop-shadow(0 2px 3px rgba(17, 24, 39, 0.08)) !important;
      }

      /* =========================
         FINAL FIX - LIGHT MODE UNIFORM CARDS
         - kill checker/texture remnants
         - all body cards use same white surface
         - keep colored metric pills intact
      ========================== */

      .resident-panel.theme-light .resident-unit-switch-card,
      .resident-panel.theme-light .resident-status-card,
      .resident-panel.theme-light .resident-app-card,
      .resident-panel.theme-light .resident-detail-panel,
      .resident-panel.theme-light .resident-balance-card,
      .resident-panel.theme-light .resident-state-card,
      .resident-panel.theme-light .resident-quick-item {
        background: #FFFFFF !important;
        background-color: #FFFFFF !important;
        background-image: none !important;
        border: 1px solid rgba(17, 24, 39, 0.08) !important;
        box-shadow:
          0 18px 34px rgba(17, 24, 39, 0.075),
          0 2px 8px rgba(17, 24, 39, 0.045) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }

      .resident-panel.theme-light .resident-app-card:hover,
      .resident-panel.theme-light .resident-app-card:focus,
      .resident-panel.theme-light .resident-quick-item:hover,
      .resident-panel.theme-light .resident-quick-item:focus {
        background: #FFFFFF !important;
        background-color: #FFFFFF !important;
        background-image: none !important;
        border-color: rgba(17, 24, 39, 0.10) !important;
        box-shadow:
          0 22px 40px rgba(17, 24, 39, 0.095),
          0 4px 10px rgba(17, 24, 39, 0.055) !important;
      }

      .resident-panel.theme-light .resident-app-card::before,
      .resident-panel.theme-light .resident-app-card::after,
      .resident-panel.theme-light .resident-unit-switch-card::before,
      .resident-panel.theme-light .resident-unit-switch-card::after,
      .resident-panel.theme-light .resident-status-card::before,
      .resident-panel.theme-light .resident-status-card::after,
      .resident-panel.theme-light .resident-detail-panel::before,
      .resident-panel.theme-light .resident-detail-panel::after,
      .resident-panel.theme-light .resident-balance-card::before,
      .resident-panel.theme-light .resident-balance-card::after,
      .resident-panel.theme-light .resident-state-card::before,
      .resident-panel.theme-light .resident-state-card::after,
      .resident-panel.theme-light .resident-quick-item::before,
      .resident-panel.theme-light .resident-quick-item::after {
        content: none !important;
        display: none !important;
        background: none !important;
        background-color: transparent !important;
        background-image: none !important;
        opacity: 0 !important;
        box-shadow: none !important;
        pointer-events: none !important;
      }

      .resident-panel.theme-light .resident-app-card *,
      .resident-panel.theme-light .resident-unit-switch-card *,
      .resident-panel.theme-light .resident-status-card * {
        background-image: none;
      }

      .resident-panel.theme-light .resident-icon-3d,
      .resident-panel.theme-light .resident-icon-image-wrap,
      .resident-panel.theme-light .resident-app-image-free,
      .resident-panel.theme-light .resident-icon-games-clean {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border-color: transparent !important;
        box-shadow: none !important;
      }

      .resident-panel.theme-light .resident-icon-3d::before,
      .resident-panel.theme-light .resident-icon-3d::after,
      .resident-panel.theme-light .resident-icon-image-wrap::before,
      .resident-panel.theme-light .resident-icon-image-wrap::after,
      .resident-panel.theme-light .resident-app-image-free::before,
      .resident-panel.theme-light .resident-app-image-free::after,
      .resident-panel.theme-light .resident-icon-games-clean::before,
      .resident-panel.theme-light .resident-icon-games-clean::after {
        content: none !important;
        display: none !important;
        background: none !important;
        background-image: none !important;
        opacity: 0 !important;
        box-shadow: none !important;
      }

      /* Restore intentional colored status mini-cards after global background-image cleanup. */
      .resident-panel.theme-light .resident-status-mini-card.is-blue-card {
        background:
          linear-gradient(135deg, rgba(7, 146, 219, 0.96), rgba(2, 84, 135, 0.94)) !important;
      }

      .resident-panel.theme-light .resident-status-mini-card.is-warning-card {
        background:
          linear-gradient(135deg, rgba(249, 115, 22, 0.98), rgba(194, 65, 12, 0.94)) !important;
      }

      .resident-panel.theme-light .resident-status-mini-card.is-ok-card,
      .resident-panel.theme-light .resident-status-mini-card.is-credit {
        background:
          linear-gradient(135deg, rgba(34, 197, 94, 0.96), rgba(0, 128, 80, 0.94)) !important;
      }

      .resident-panel.theme-light .resident-status-mini-card.is-wallet-empty {
        background:
          linear-gradient(135deg, rgba(186, 199, 211, 0.94), rgba(143, 158, 174, 0.78)) !important;
      }

      .resident-panel.theme-light .resident-status-building.is-unit-badge.is-gold-unit-badge,
      .resident-panel.theme-light .resident-unit-selector-kicker {
        background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 100%) !important;
      }

      /* =========================
         FINAL AUTHORITY - LIGHT CARDS + USER GREETING + NOTIFICATION PILLS
         - Light mode app cards are all white, no checkered / alternating card tint.
         - Single-unit badge stays blue; gold only appears when multi-unit class is present.
         - Notification priority pills: Importante orange, Critica red, Normal hidden in markup.
         - Light mode notification CTA stays inside system: dark text, dark border.
      ========================== */

      .resident-panel.theme-light .resident-shell,
      .resident-panel.theme-light .resident-main,
      .resident-panel.theme-light .resident-left {
        background: transparent !important;
        background-image: none !important;
      }

      .resident-panel.theme-light .resident-app-grid .resident-app-card,
      .resident-panel.theme-light .resident-app-grid .resident-app-card:nth-child(1),
      .resident-panel.theme-light .resident-app-grid .resident-app-card:nth-child(2),
      .resident-panel.theme-light .resident-app-grid .resident-app-card:nth-child(3),
      .resident-panel.theme-light .resident-app-grid .resident-app-card:nth-child(4),
      .resident-panel.theme-light .resident-app-grid .resident-app-card:nth-child(5),
      .resident-panel.theme-light .resident-app-grid .resident-app-card:nth-child(6),
      .resident-panel.theme-light .resident-app-grid .resident-app-card:nth-child(7),
      .resident-panel.theme-light .resident-app-grid .resident-app-card:nth-child(8),
      .resident-panel.theme-light .resident-app-grid .resident-app-card:nth-child(9),
      .resident-panel.theme-light .resident-app-grid .resident-app-card:nth-child(10),
      .resident-panel.theme-light .resident-app-grid .resident-app-card:nth-child(11),
      .resident-panel.theme-light .resident-app-grid .resident-app-card:nth-child(12),
      .resident-panel.theme-light .resident-app-grid .resident-app-card:nth-child(13) {
        background: #FFFFFF !important;
        background-color: #FFFFFF !important;
        background-image: none !important;
        border: 1px solid rgba(17, 24, 39, 0.075) !important;
        box-shadow:
          0 10px 22px rgba(17, 24, 39, 0.075),
          0 2px 6px rgba(17, 24, 39, 0.045) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }

      .resident-panel.theme-light .resident-app-grid .resident-app-card::before,
      .resident-panel.theme-light .resident-app-grid .resident-app-card::after {
        display: none !important;
        content: none !important;
        opacity: 0 !important;
        background: transparent !important;
        background-image: none !important;
      }

      .resident-panel.theme-light .resident-app-grid .resident-app-card:hover,
      .resident-panel.theme-light .resident-app-grid .resident-app-card:focus {
        background: #FFFFFF !important;
        background-image: none !important;
        border-color: rgba(17, 24, 39, 0.105) !important;
        box-shadow:
          0 12px 26px rgba(17, 24, 39, 0.090),
          0 3px 8px rgba(17, 24, 39, 0.050) !important;
      }

      .resident-panel.theme-light .resident-app-grid .resident-app-title {
        color: #111827 !important;
      }

      .resident-status-building.is-unit-badge:not(.is-gold-unit-badge),
      .resident-panel.theme-light .resident-status-building.is-unit-badge:not(.is-gold-unit-badge),
      .resident-panel.theme-dark .resident-status-building.is-unit-badge:not(.is-gold-unit-badge) {
        color: #FFFFFF !important;
        background: linear-gradient(135deg, #02233A 0%, #0792DB 100%) !important;
        border-color: rgba(6, 135, 203, 0.58) !important;
      }

      .resident-notification-priority.is-important {
        background: linear-gradient(135deg, #9A3412 0%, #F97316 100%) !important;
      }

      .resident-notification-priority.is-critical {
        background: linear-gradient(135deg, #7F1D1D 0%, #EF4444 100%) !important;
      }

      .resident-status-unit [data-cenit-greeting] {
        white-space: nowrap !important;
      }

      /* =========================
         FINAL AUTHORITY - GREETING + LIGHT NOTIFICATIONS
         - greeting lives in the unit status row, not the profile link
         - light notification dropdown matches the white card system
      ========================== */

      .resident-status-unit [data-cenit-greeting] {
        display: inline-block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
      }

      /* =========================
         FINAL PATCH - AI ICON + SOFTER NOTIFICATION ICON SHADOWS
         - Ayuda IA uses assistantai.png from shell assets
         - notification icons keep their color but lose heavy shadow
      ========================== */

      .resident-icon-ai-clean,
      .resident-icon-ai-clean.resident-app-image-free,
      .resident-icon-ai-clean.resident-icon-image-wrap {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
      }

      .resident-icon-ai-clean::before,
      .resident-icon-ai-clean::after {
        display: none !important;
        content: none !important;
      }

      .resident-icon-ai-clean .resident-card-icon-img {
        width: 125px !important;
        height: 125px !important;
        object-fit: contain !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
      }

      @media (max-width: 780px) {
        .resident-icon-ai-clean .resident-card-icon-img {
          width: 105px !important;
          height: 105px !important;
        }
      }

      /* =========================
         FINAL FIX - SERVER-RENDERED NOTIFICATION LIST
         - notification rows are visible by default
         - empty state is server-gated with t-if
         - JS may trim long lists, but never owns existence
      ========================== */

      /* =========================
         FINAL PATCH - AI ICON SHADOW BY THEME
         - light mode stays clean and light
         - dark mode follows the same glow/shadow doctrine as the other 3D icons
      ========================== */

      .resident-icon-ai-clean .resident-card-icon-img,
      .resident-panel.theme-light .resident-icon-ai-clean .resident-card-icon-img {
        filter: drop-shadow(0 13px 10px rgba(17, 24, 39, 0.10)) drop-shadow(0 2px 3px rgba(17, 24, 39, 0.01)) !important;
      }

      .resident-panel.theme-dark .resident-icon-ai-clean .resident-card-icon-img {
        filter:
          drop-shadow(0 10px 4px rgba(0, 0, 0, 0.48))
          drop-shadow(0 0 30px rgba(7, 146, 219, 0.50)) !important;
      }

      @media (max-width: 780px) {
        .resident-icon-ai-clean .resident-card-icon-img,
        .resident-panel.theme-light .resident-icon-ai-clean .resident-card-icon-img {
          filter: drop-shadow(0 10px 8px rgba(17, 24, 39, 0.09)) drop-shadow(0 2px 3px rgba(17, 24, 39, 0.01)) !important;
        }

        .resident-panel.theme-dark .resident-icon-ai-clean .resident-card-icon-img {
          filter:
            drop-shadow(0 9px 4px rgba(0, 0, 0, 0.46))
            drop-shadow(0 0 26px rgba(7, 146, 219, 0.46)) !important;
        }
      }

      /* =========================
         FINAL AUTHORITY - NOTIFICATION LETTER ICONS
         - all notifications use letters, not emoji icons
         - info/system types blue
         - financial types green
         - important and critical override type color
      ========================== */

      .resident-notification-icon.is-info,
      .resident-panel.theme-dark .resident-notification-icon.is-info,
      .resident-panel.theme-light .resident-notification-icon.is-info {
        background:
          radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.24), transparent 36%),
          linear-gradient(135deg, #38BDF8 0%, #0284C7 100%) !important;
        border-color: rgba(56, 189, 248, 0.28) !important;
      }

      .resident-notification-icon.is-financial,
      .resident-panel.theme-dark .resident-notification-icon.is-financial,
      .resident-panel.theme-light .resident-notification-icon.is-financial {
        background:
          radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.24), transparent 36%),
          linear-gradient(135deg, #22C55E 0%, #047857 100%) !important;
        border-color: rgba(34, 197, 94, 0.28) !important;
      }

      .resident-notification-icon.is-important,
      .resident-panel.theme-dark .resident-notification-icon.is-important,
      .resident-panel.theme-light .resident-notification-icon.is-important {
        background:
          radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.24), transparent 36%),
          linear-gradient(135deg, #F97316 0%, #C2410C 100%) !important;
        border-color: rgba(249, 115, 22, 0.30) !important;
      }

      .resident-notification-icon.is-critical,
      .resident-panel.theme-dark .resident-notification-icon.is-critical,
      .resident-panel.theme-light .resident-notification-icon.is-critical {
        background:
          radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.24), transparent 36%),
          linear-gradient(135deg, #EF4444 0%, #991B1B 100%) !important;
        border-color: rgba(239, 68, 68, 0.32) !important;
      }

/* Final status layout authority after extracted Home rules. */
[data-cenit-resident-panel="1"] .resident-unit-card-shell .resident-status-unit,
[data-cenit-resident-panel="1"] .resident-unit-card-shell .resident-status-unit [data-cenit-greeting] {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

@media (min-width: 981px) {
  [data-cenit-resident-panel="1"] .resident-unit-card-shell .resident-status-note.resident-status-note-row {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-flow: row nowrap !important;
  }

  [data-cenit-resident-panel="1"] .resident-unit-card-shell .resident-status-note.resident-status-note-row > .resident-status-mini-card {
    flex: 1 1 235px !important;
    min-width: 235px !important;
  }
}

@media (max-width: 780px) {
  [data-cenit-resident-panel="1"] .resident-unit-card-shell .resident-unit-state.is-active {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    gap: 14px 18px !important;
    width: 100% !important;
  }

  [data-cenit-resident-panel="1"] .resident-unit-card-shell .resident-status-building {
    flex: 0 0 72px !important;
  }

  [data-cenit-resident-panel="1"] .resident-unit-card-shell .resident-status-copy {
    flex: 1 1 calc(100% - 90px) !important;
    min-width: 0 !important;
  }

  [data-cenit-resident-panel="1"] .resident-unit-card-shell .resident-status-note.resident-status-note-row {
    display: flex !important;
    flex: 0 0 100% !important;
    flex-flow: column nowrap !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 0 !important;
  }

  [data-cenit-resident-panel="1"] .resident-unit-card-shell .resident-status-note.resident-status-note-row > .resident-status-mini-card {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}