:root {
  --ink: #07142f;
  --muted: #53617b;
  --line: #dde5f0;
  --panel: #ffffff;
  --page: #f4f8fd;
  --nav: #06162f;
  --blue: #1559dd;
  --blue-dark: #0d3fb2;
  --green: #19a337;
  --orange: #ff7417;
  --purple: #7a3ff2;
  --teal: #0ba8bb;
  --red: #f43f4d;
  --shadow: 0 14px 45px rgba(13, 43, 87, 0.1);
}

body.resident-route-active {
  background: white;
}

body.resident-route-active .desktop-auth,
body.resident-route-active .sidebar,
body.resident-route-active .topbar,
body.resident-route-active .mobile-tabs,
body.resident-route-active .content-grid,
body.resident-route-active .view-section,
body.resident-route-active .renovations-desktop {
  display: none !important;
}

body.resident-route-active .app-shell {
  display: block;
  min-height: 100svh;
  pointer-events: auto;
  user-select: auto;
}

body.resident-route-active .workspace {
  width: 100%;
  min-height: 100svh;
  padding: 0;
}

body.resident-route-active .phone-stage {
  display: grid;
  min-height: 100svh;
  padding: 0;
}

body.resident-route-active .phone-frame {
  display: none;
  width: 100%;
  min-height: 100svh;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

body.resident-route-active .phone-frame.active {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

body.resident-route-active .auth-screen.active {
  grid-template-rows: 1fr;
}

body.resident-route-active .phone-status {
  display: none;
}

body.resident-route-active .phone-frame header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: 70px 1fr 70px;
  align-items: center;
  min-height: calc(52px + env(safe-area-inset-top));
  color: white;
  background: var(--nav);
  padding: env(safe-area-inset-top) 12px 0;
}

body.resident-route-active .phone-frame header strong {
  text-align: center;
}

body.resident-route-active .phone-frame header button {
  border: 0;
  color: white;
  background: transparent;
  text-align: left;
}

body.resident-route-active .phone-frame header button:last-child {
  text-align: right;
}

body.resident-route-active .phone-body {
  min-height: 0;
  overflow-y: auto;
  padding: 16px 16px 20px;
}

body.resident-route-active .auth-body {
  display: grid;
  align-content: center;
  gap: 18px;
  min-height: 100svh;
  padding: 28px 18px;
  background:
    radial-gradient(circle at 25% 14%, rgba(255, 255, 255, 0.32), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(241, 246, 252, 0.7)),
    url("assets/royal-mile-high-street.jpg") center / cover;
}

body.resident-route-active .auth-brand,
body.resident-route-active .resident-auth-brand {
  display: grid;
  justify-items: center;
  gap: 8px;
  border: 1px solid rgba(221, 229, 240, 0.75);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  padding: 14px;
  text-align: center;
  backdrop-filter: blur(8px);
}

body.resident-route-active .auth-form,
body.resident-route-active .resident-form {
  display: grid;
  gap: 12px;
}

body.resident-route-active .auth-form label,
body.resident-route-active .resident-form label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

body.resident-route-active .auth-form input,
body.resident-route-active .resident-form input,
body.resident-route-active .resident-form textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--ink);
  padding: 0 12px;
}

body.resident-route-active .resident-form textarea {
  min-height: 82px;
  padding-top: 10px;
}

body.resident-route-active .resident-brand-card,
body.resident-route-active .resident-alert,
body.resident-route-active .resident-section,
body.resident-route-active .resident-action-accordion {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 10px 24px rgba(20, 39, 66, 0.07);
}

body.resident-route-active .resident-brand-card {
  grid-template-columns: auto 1fr;
  align-items: center;
  min-height: 128px;
  overflow: hidden;
  border: 0;
  color: white;
  background:
    linear-gradient(90deg, rgba(7, 27, 52, 0.86), rgba(7, 27, 52, 0.38)),
    url("assets/royal-mile-high-street.jpg") center / cover;
  box-shadow: 0 16px 30px rgba(20, 39, 66, 0.18);
}

body.resident-route-active .resident-brand-card strong,
body.resident-route-active #resident-dashboard-phone .resident-brand-card strong {
  color: white;
  font-size: 20px;
}

body.resident-route-active .resident-brand-card span,
body.resident-route-active #resident-dashboard-phone .resident-brand-card span {
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
  font-weight: 800;
}

body.resident-route-active .building-logo {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border: 1px solid #bdd2f4;
  border-radius: 8px;
  background: #eaf2ff;
  color: var(--blue);
  font-weight: 950;
}

body.resident-route-active #resident-dashboard-phone .resident-brand-card .building-logo {
  border-color: rgba(255, 255, 255, 0.48);
  background: rgba(255, 255, 255, 0.18);
  color: white;
}

body.resident-route-active .resident-home-actions,
body.resident-route-active .resident-filter-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

body.resident-route-active .resident-home-actions button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 54px;
  border: 1px solid #d5e2f1;
  border-radius: 8px;
  background: white;
  color: #17304f;
  padding: 10px;
  text-align: left;
  box-shadow: 0 10px 20px rgba(20, 39, 66, 0.08);
}

body.resident-route-active .resident-home-actions button span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #eef5ff;
  color: var(--blue);
  font-size: 18px;
  font-weight: 950;
}

body.resident-route-active .resident-alert {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-color: #ffc8cf;
  background: linear-gradient(135deg, #fff8f9, #ffffff 64%);
  box-shadow: 0 12px 24px rgba(184, 0, 24, 0.08);
}

body.resident-route-active .resident-alert #resident-buzzer {
  grid-column: 2;
  grid-row: 1 / span 2;
}

body.resident-route-active .resident-list {
  display: grid;
  gap: 8px;
}

body.resident-route-active .resident-list article {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 10px;
}

body.resident-route-active .resident-task-carousel {
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

body.resident-route-active .resident-task-carousel article {
  scroll-snap-align: start;
}

body.resident-route-active .resident-carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

body.resident-route-active .resident-carousel-dots button {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: #b8c7de;
  padding: 0;
}

body.resident-route-active .resident-carousel-dots button.active {
  width: 20px;
  background: var(--blue);
}

body.resident-route-active .resident-request-search {
  display: grid;
  gap: 10px;
  border: 1px solid #dbe6f4;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 10px 24px rgba(17, 32, 56, 0.08);
}

body.resident-route-active .resident-request-search input {
  width: 100%;
  min-height: 46px;
  border: 1px solid #c7d8f4;
  border-radius: 8px;
  background: #f8fbff;
  padding: 0 13px;
}

body.resident-route-active .resident-request-scroll {
  max-height: 240px;
  min-height: 96px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  padding: 6px;
}

body.resident-route-active .phone-frame footer {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  border-top: 1px solid var(--line);
  background: white;
  padding: 8px 4px calc(10px + env(safe-area-inset-bottom));
}

body.resident-route-active .phone-frame footer button {
  height: 36px;
  border: 0;
  color: #5a6a86;
  background: transparent;
}

body.resident-route-active .phone-frame footer .active {
  color: var(--blue);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--page);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: default;
  opacity: 0.55;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.app-shell {
  display: flex;
  min-height: 100vh;
}

.desktop-auth {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: none;
  place-items: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1), transparent 28%),
    linear-gradient(135deg, rgba(6, 22, 47, 0.46), rgba(10, 48, 99, 0.22)),
    url("assets/royal-mile-high-street.jpg") center / cover;
  padding: 24px;
}

.desktop-auth-card {
  display: grid;
  gap: 14px;
  width: min(420px, 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 70px rgba(2, 10, 24, 0.24);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  padding: 22px;
}

.desktop-auth-brand {
  color: var(--ink);
  padding: 0 0 10px;
}

.desktop-auth-brand small {
  color: var(--muted);
}

.desktop-auth-card label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.desktop-auth-card input {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: white;
  padding: 0 14px;
}

.desktop-role-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f2f5fa;
  padding: 2px;
}

.desktop-role-tabs button {
  border: 0;
  border-radius: 5px;
  background: transparent;
  padding: 9px;
  color: var(--ink);
  font-weight: 800;
}

.desktop-role-tabs button.active {
  color: white;
  background: var(--blue);
}

body.desktop-locked .desktop-auth {
  display: grid;
}

body.desktop-locked .app-shell {
  pointer-events: none;
  user-select: none;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  width: 260px;
  height: 100vh;
  padding: 22px 14px 14px;
  color: white;
  background: radial-gradient(circle at 20% 0%, #103971 0, var(--nav) 42%, #020a19 100%);
  flex: 0 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px 24px;
}

.brand strong {
  display: block;
  font-size: 20px;
  line-height: 1;
}

.brand small {
  display: block;
  margin-top: 5px;
  color: #d7e5ff;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.brand-mark {
  position: relative;
  width: 48px;
  height: 50px;
  border-bottom: 4px solid #2a7cff;
}

.brand-mark::before,
.brand-mark::after,
.brand-mark span {
  position: absolute;
  bottom: 0;
  width: 12px;
  border: 3px solid #1681ff;
  border-bottom: 0;
  content: "";
}

.brand-mark::before {
  left: 3px;
  height: 26px;
}

.brand-mark::after {
  left: 18px;
  height: 38px;
}

.brand-mark span {
  left: 33px;
  height: 30px;
}

.nav-list {
  display: grid;
  gap: 5px;
}

.nav-item,
.profile {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  color: white;
  background: transparent;
  padding: 12px 14px;
  text-align: left;
}

.nav-item {
  font-size: 16px;
}

.nav-item:hover,
.nav-item.active {
  background: linear-gradient(90deg, #1f5bc5, #164497);
}

.nav-item.with-badge {
  justify-content: space-between;
}

.nav-item.with-badge > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.icon {
  display: inline-flex;
  justify-content: center;
  width: 18px;
  color: #f8fbff;
  font-weight: 800;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--red);
  font-size: 12px;
  font-weight: 800;
}

.profile {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0;
  padding-top: 16px;
}

.profile img,
.shift-row img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}

.profile strong,
.profile small {
  display: block;
}

.profile small {
  color: #cad8ef;
}

.chevron {
  margin-left: auto;
}

.workspace {
  width: min(100%, calc(100vw - 260px));
  padding: 24px 32px 38px;
}

.topbar,
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.eyebrow {
  display: none;
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 28px;
}

h2 {
  margin-bottom: 0;
  font-size: 17px;
}

h3 {
  margin-bottom: 12px;
  font-size: 15px;
}

.menu-button {
  display: none;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.desktop-logout {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--ink);
  padding: 0 14px;
  font-weight: 800;
}

.date-control input,
select,
input[type="search"] {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: white;
  padding: 0 14px;
}

.primary-button {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  color: white;
  background: linear-gradient(180deg, #1765f2, var(--blue));
  box-shadow: 0 8px 20px rgba(21, 89, 221, 0.2);
  padding: 0 20px;
  font-weight: 750;
}

.primary-button span {
  margin-right: 8px;
  font-weight: 900;
}

.mobile-tabs {
  display: none;
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(320px, 0.82fr);
  gap: 18px;
}

.metric-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 18px;
}

.metric-card,
.panel,
.table-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 1px 0 rgba(15, 37, 68, 0.02);
}

.metric-card {
  display: flex;
  gap: 18px;
  min-height: 128px;
  padding: 22px;
}

.metric-card span,
.metric-card small {
  color: var(--muted);
}

.metric-card strong {
  display: block;
  margin: 7px 0 10px;
  font-size: 30px;
  line-height: 1;
}

.metric-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: white;
  font-size: 23px;
  font-weight: 900;
  flex: 0 0 auto;
}

.blue { background: var(--blue); }
.green { background: var(--green); }
.orange { background: var(--orange); }
.purple { background: var(--purple); }
.teal { background: var(--teal); }
.green-text { color: var(--green) !important; }
.purple-text { color: var(--purple) !important; }

.progress {
  position: relative;
  width: 145px;
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: #e6e8ed;
}

.progress span {
  display: block;
  width: 67%;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}

.link-button {
  border: 0;
  color: var(--blue);
  background: transparent;
  padding: 0;
  font-weight: 700;
}

.panel {
  min-width: 0;
  overflow: hidden;
}

.desktop-report-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 16px;
}

.desktop-report-card {
  grid-column: span 2;
}

.report-kpi-card,
.report-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 16px;
}

.report-kpi-card span,
.report-kpi-card small,
.report-bar span,
.report-insight-list span {
  color: var(--muted);
}

.report-kpi-card strong {
  color: var(--ink);
  font-size: 30px;
  line-height: 1;
}

.report-bars,
.report-insight-list {
  display: grid;
  gap: 10px;
}

.report-bar {
  display: grid;
  gap: 7px;
}

.report-bar > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.report-bar i {
  display: block;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6eaf2;
}

.report-bar b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}

.report-bar.green b { background: var(--green); }
.report-bar.orange b { background: var(--orange); }
.report-bar.red b { background: var(--red); }
.report-bar.purple b { background: var(--purple); }

.report-insight-list article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  padding: 11px 12px;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.shift-list,
.incident-list,
.compliance-list {
  display: grid;
}

.shift-row,
.incident-row,
.compliance-list article {
  display: grid;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.shift-row:last-child,
.incident-row:last-child,
.compliance-list article:last-child {
  border-bottom: 0;
}

.shift-row {
  grid-template-columns: auto minmax(130px, 1fr) auto auto;
}

.shift-row strong,
.incident-row strong,
.compliance-list strong {
  display: block;
}

.shift-row span,
.incident-row span,
.compliance-list small {
  display: block;
  color: #31517f;
  font-size: 13px;
}

.pill {
  display: inline-block;
  border-radius: 7px;
  padding: 5px 9px;
  font-size: 12px;
  font-style: normal;
  line-height: 1.2;
  text-align: center;
}

.pill.green {
  color: #14702b;
  background: #e6f6e9;
}

.pill.blue-soft {
  color: #24528f;
  background: #edf4ff;
}

.pill.high {
  color: #fa1f35;
  background: #fff0f1;
}

.pill.medium {
  color: #e46800;
  background: #fff1e6;
}

.pill.low {
  color: #b06a00;
  background: #fff7dd;
}

.incident-row {
  grid-template-columns: 66px minmax(190px, 1fr) auto auto;
}

.thumb {
  width: 66px;
  height: 54px;
  border: 0;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
}

.incident-photo-trigger {
  cursor: zoom-in;
  box-shadow: inset 0 0 0 1px rgba(15, 37, 68, 0.08);
}

.incident-photo-trigger:focus-visible {
  outline: 3px solid rgba(23, 101, 242, 0.35);
  outline-offset: 2px;
}

.thumb.glass {
  background-image: linear-gradient(90deg, rgba(5, 15, 28, 0.55), rgba(5, 15, 28, 0.05)), url("assets/royal-mile-high-street.jpg");
}

.thumb.wall,
.photo.wall {
  background-image: radial-gradient(circle at 44% 42%, #6f6258 0 9%, #a59181 10% 15%, transparent 16%), linear-gradient(120deg, #d7d0c8, #f3f1ed 52%, #c9beb4);
}

.thumb.ceiling {
  background-image: linear-gradient(rgba(70, 52, 36, 0.25), rgba(70, 52, 36, 0.25)), url("https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&w=240&q=80");
}

.thumb.exit {
  background-image: linear-gradient(rgba(5, 15, 28, 0.45), rgba(5, 15, 28, 0.45)), url("https://images.unsplash.com/photo-1558618666-fcd25c85cd64?auto=format&fit=crop&w=240&q=80");
}

.incident-photo-modal-card {
  width: min(640px, calc(100vw - 28px));
  padding: 0;
  overflow: hidden;
}

.incident-photo-large {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
}

.incident-photo-large.glass {
  background-image: linear-gradient(90deg, rgba(5, 15, 28, 0.4), rgba(5, 15, 28, 0.02)), url("assets/royal-mile-high-street.jpg");
}

.incident-photo-large.wall {
  background-image: radial-gradient(circle at 44% 42%, #6f6258 0 9%, #a59181 10% 15%, transparent 16%), linear-gradient(120deg, #d7d0c8, #f3f1ed 52%, #c9beb4);
}

.incident-photo-large.ceiling {
  background-image: linear-gradient(rgba(70, 52, 36, 0.2), rgba(70, 52, 36, 0.2)), url("https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&w=960&q=80");
}

.incident-photo-large.exit {
  background-image: linear-gradient(rgba(5, 15, 28, 0.3), rgba(5, 15, 28, 0.3)), url("https://images.unsplash.com/photo-1558618666-fcd25c85cd64?auto=format&fit=crop&w=960&q=80");
}

.incident-photo-copy {
  display: grid;
  gap: 10px;
  padding: 18px 20px 20px;
}

.incident-photo-copy div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.incident-photo-copy p,
.incident-photo-copy small {
  color: var(--muted);
}

.resident-incident-update {
  grid-template-columns: auto 1fr;
  align-items: start;
}

.resident-incident-update .pill {
  margin-top: 6px;
  justify-self: start;
}

.resident-news-feed {
  display: grid;
  gap: 10px;
}

.resident-news-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  border: 1px solid #dfe8f4;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(245, 250, 255, 0.94)),
    white;
  padding: 11px;
}

.resident-news-card .thumb {
  width: 42px;
  height: 42px;
  min-height: 42px;
  border-radius: 8px;
}

.resident-news-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  color: white;
  background: linear-gradient(145deg, #ff4f6d, #ff9a3c);
  font-size: 18px;
  font-weight: 950;
  box-shadow: 0 10px 18px rgba(255, 79, 109, 0.2);
}

.resident-news-card.resident-report .resident-news-icon {
  background: linear-gradient(145deg, #1d7cff, #15d1ff);
  box-shadow: 0 10px 18px rgba(29, 124, 255, 0.18);
}

.resident-news-card strong,
.resident-news-card span,
.resident-news-card small {
  display: block;
}

.resident-news-card span,
.resident-news-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.resident-news-card .pill {
  max-width: 86px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.incident-status {
  color: #fa001f;
  font-weight: 750;
}

.incident-status.progress-status {
  color: var(--blue);
}

.right-column {
  display: grid;
  gap: 18px;
}

.desktop-buzzer-panel {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-color: #ffc8cf;
  background: #fff7f8;
}

.desktop-buzzer-panel:not(.has-active-buzzers) {
  border-color: var(--line);
  background: var(--panel);
}

.desktop-buzzer-panel .panel-header {
  padding: 0;
}

.donut-area {
  display: grid;
  grid-template-columns: 170px 1fr;
  align-items: center;
  gap: 26px;
  padding: 22px 28px;
}

.donut {
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: conic-gradient(var(--green) 0 67%, var(--blue) 67% 88%, #a9b9d2 88% 100%);
  position: relative;
}

.donut::before {
  position: absolute;
  inset: 24px;
  border-radius: inherit;
  background: white;
  content: "";
}

.donut strong,
.donut span {
  position: relative;
  z-index: 1;
}

.donut strong {
  align-self: end;
  font-size: 27px;
}

.donut span {
  align-self: start;
  color: var(--muted);
  font-size: 13px;
}

.legend {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.legend li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.green-dot { background: var(--green); }
.blue-dot { background: var(--blue); }
.grey-dot { background: #a8b9d2; }

.compliance-list article {
  grid-template-columns: auto 1fr auto;
  padding: 12px 20px;
}

.compliance-list > article > span {
  color: #23456e;
}

.compliance-list em {
  border-radius: 7px;
  color: #ec6400;
  background: #fff1e6;
  padding: 7px 10px;
  font-size: 12px;
  font-style: normal;
}

.hidden {
  display: none !important;
}

.view-section {
  display: grid;
  gap: 18px;
}

.table-panel {
  padding: 18px;
}

.table-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.table-toolbar input {
  flex: 1;
}

.record-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 14px;
}

.record-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 16px;
}

.record-card header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.record-card p {
  margin-bottom: 16px;
  color: var(--muted);
}

.record-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.incident-record-card {
  display: grid;
  gap: 12px;
}

.incident-record-card header {
  margin-bottom: 0;
}

.incident-record-card header small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.incident-remedy-field {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.incident-remedy-field textarea {
  width: 100%;
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  resize: vertical;
}

.incident-action-log {
  display: grid;
  gap: 7px;
  border: 1px solid #dfe8f4;
  border-radius: 8px;
  background: #f8fbff;
  padding: 10px;
}

.incident-action-log > strong {
  font-size: 13px;
}

.incident-action-log article {
  display: grid;
  gap: 3px;
  border-top: 1px solid #e6edf7;
  padding-top: 7px;
}

.incident-action-log span,
.incident-action-log p {
  color: var(--muted);
  font-size: 13px;
}

.incident-action-log small {
  color: #31517f;
  font-size: 11px;
  font-weight: 850;
}

.incident-status-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.incident-status-actions button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  color: var(--blue);
  font-weight: 850;
}

.incident-status-actions button:disabled {
  color: #60718e;
  background: #eef3f8;
  cursor: default;
}

.incident-status-actions .close-incident {
  border-color: #bfe8c7;
  color: #14702b;
  background: #e6f6e9;
}

.incident-status-actions .incident-add-step {
  border-color: #c7d8f4;
  color: var(--blue);
  background: #edf4ff;
}

.renovations-desktop {
  display: grid;
  gap: 18px;
}

.reno-desktop-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  border: 1px solid #c9d9ef;
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff 0%, #f1f8f5 100%);
  padding: 22px;
}

.reno-desktop-hero h2 {
  margin-bottom: 5px;
  font-size: 28px;
}

.reno-desktop-hero span,
.reno-desktop-metrics span,
.desktop-reno-card span,
.desktop-reno-card small,
.desktop-reno-card p {
  color: var(--muted);
}

.reno-desktop-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 14px;
}

.reno-desktop-metrics article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 18px;
}

.reno-desktop-metrics strong {
  display: block;
  margin-bottom: 5px;
  font-size: 30px;
}

.reno-desktop-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
}

.desktop-reno-list {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.desktop-reno-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 16px;
}

.desktop-reno-card header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.desktop-reno-card header strong {
  display: block;
  margin-bottom: 4px;
}

.desktop-room-tree {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
}

.desktop-room-node {
  border: 1px solid #e0e8f4;
  border-radius: 8px;
  background: #fbfdff;
  padding: 10px;
}

.desktop-room-node summary {
  color: var(--ink);
  font-weight: 850;
}

.desktop-room-node div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 9px;
}

.desktop-room-node span {
  border-radius: 999px;
  background: #eaf2ff;
  color: var(--blue);
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 850;
}

.project-timeline {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.project-timeline h3,
.project-attachments h3 {
  margin-bottom: 10px;
}

.project-attachments {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.attachment-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.attachment-counts span {
  border-radius: 999px;
  background: #eef6f2;
  color: #12713a;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 850;
}

.attachment-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 10px;
}

.attachment-list article {
  display: grid;
  gap: 4px;
  border: 1px solid #e0e8f4;
  border-radius: 8px;
  background: #fbfdff;
  padding: 10px;
}

.attachment-list p {
  margin: 4px 0 0;
  font-size: 12px;
}

.project-timeline ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-timeline li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #e0e8f4;
  border-radius: 8px;
  background: #fbfdff;
  padding: 10px;
}

.timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--orange);
}

.timeline-dot.green {
  background: var(--green);
}

.timeline-dot.blue-soft {
  background: var(--blue);
}

.project-timeline small {
  display: block;
  margin-top: 3px;
}

.desktop-reno-side {
  position: sticky;
  top: 24px;
}

.desktop-estimate-form {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.desktop-estimate-form label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.desktop-estimate-form input,
.desktop-estimate-form select,
.desktop-estimate-form textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 10px 12px;
}

.desktop-estimate-form textarea {
  resize: vertical;
}

.attachment-form {
  border-top: 1px solid var(--line);
}

.attachment-form input[type="file"] {
  padding: 8px 10px;
}

.desktop-reno-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 18px 18px;
}

.desktop-reno-actions button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--blue);
  background: white;
  font-weight: 800;
}

.phone-stage {
  display: none;
}

dialog {
  border: 0;
  border-radius: 12px;
  padding: 0;
  box-shadow: var(--shadow);
}

dialog::backdrop {
  background: rgba(7, 20, 47, 0.42);
}

.modal-card {
  width: min(460px, calc(100vw - 32px));
  background: white;
}

.icon-button {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  font-size: 22px;
}

.action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 20px;
}

.action-grid button {
  display: grid;
  gap: 10px;
  min-height: 104px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  color: var(--ink);
  font-weight: 800;
}

.action-grid span {
  color: var(--blue);
  font-size: 28px;
}

.record-modal-card {
  display: grid;
  gap: 12px;
  padding-bottom: 18px;
}

.record-modal-card > label,
.record-modal-grid label {
  display: grid;
  gap: 7px;
  padding: 0 20px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.record-modal-card input,
.record-modal-card select,
.record-modal-card textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
}

.record-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.record-modal-card .primary-button {
  margin: 0 20px;
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  transform: translateY(24px);
  opacity: 0;
  border-radius: 8px;
  color: white;
  background: var(--ink);
  padding: 12px 16px;
  box-shadow: var(--shadow);
  transition: 0.25s ease;
  pointer-events: none;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.feature-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.feature-tag {
  border: 1px solid #c7d8f4;
  border-radius: 999px;
  background: #eef5ff;
  color: var(--blue);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
}

.feature-tag.disabled {
  border-color: #ffd2d7;
  background: #fff3f5;
  color: #b80018;
}

.feature-tag.enabled {
  border-color: #bce3ce;
  background: #edf9f1;
  color: #157533;
}

@media (max-width: 1180px) {
  .content-grid {
    grid-template-columns: 1fr 1fr;
  }

  .right-column {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
  }

  .metric-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .reno-desktop-layout {
    grid-template-columns: 1fr;
  }

  .desktop-reno-side {
    position: static;
  }

  .reno-desktop-metrics {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

@media (max-width: 860px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    position: fixed;
    z-index: 10;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }

  body.menu-open .sidebar {
    transform: translateX(0);
  }

  .workspace {
    width: 100%;
    padding: 16px;
  }

  .menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
  }

  .topbar {
    align-items: flex-start;
  }

  .top-actions {
    margin-left: auto;
  }

  .date-control {
    display: none;
  }

  .content-grid,
  .right-column,
  .metric-row,
  .record-grid {
    grid-template-columns: 1fr;
  }

  .metric-row {
    display: grid;
  }

  .metric-card {
    min-height: auto;
  }

  .shift-row,
  .incident-row {
    grid-template-columns: auto 1fr;
  }

  .shift-row time,
  .shift-row em,
  .incident-row .pill,
  .incident-row .incident-status {
    grid-column: 2;
  }

  .donut-area {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

@media (max-width: 680px) {
  .desktop-auth {
    display: none !important;
  }

  body.desktop-locked .app-shell {
    pointer-events: auto;
    user-select: auto;
  }

  html,
  body,
  .app-shell,
  .workspace {
    min-height: 100%;
  }

  body {
    background: white;
  }

  .workspace {
    padding: 0;
  }

  .topbar {
    display: none;
  }

  .top-actions .primary-button {
    width: 44px;
    padding: 0;
    font-size: 0;
  }

  .top-actions .primary-button span {
    margin: 0;
    font-size: 20px;
  }

  .mobile-tabs {
    display: none;
  }

  .mobile-tabs button {
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: white;
    padding: 9px 13px;
    font-weight: 750;
  }

  .mobile-tabs button.active {
    color: white;
    border-color: var(--blue);
    background: var(--blue);
  }

  .content-grid,
  .view-section,
  .renovations-desktop {
    display: none !important;
  }

  .phone-stage {
    display: grid;
    min-height: 100svh;
    padding: 0;
  }

  .phone-frame {
    display: none;
    width: 100%;
    min-height: 100svh;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
  }

  .phone-frame.active {
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  .auth-screen.active {
    grid-template-rows: 1fr;
  }

  .phone-status,
  .phone-frame header {
    color: white;
    background: var(--nav);
  }

  .phone-status {
    display: none;
  }

  .phone-frame header {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: 70px 1fr 70px;
    align-items: center;
    min-height: calc(52px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 12px 0;
  }

  .phone-frame header strong {
    text-align: center;
  }

  .phone-frame header button {
    border: 0;
    color: white;
    background: transparent;
    text-align: left;
  }

  .phone-frame header button:last-child {
    text-align: right;
  }

  .auth-body {
    display: grid;
    align-content: center;
    gap: 18px;
    min-height: 100svh;
    padding: 28px 18px;
    background:
      radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1), transparent 28%),
      linear-gradient(135deg, rgba(6, 22, 47, 0.46), rgba(10, 48, 99, 0.22)),
      url("assets/royal-mile-high-street.jpg") center / cover;
  }

  .resident-auth-screen .auth-body {
    background:
      radial-gradient(circle at 25% 14%, rgba(255, 255, 255, 0.32), transparent 34%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(241, 246, 252, 0.7)),
      url("assets/royal-mile-high-street.jpg") center / cover;
  }

  .auth-brand {
    display: grid;
    justify-items: center;
    gap: 8px;
    color: var(--ink);
    text-align: center;
  }

  .auth-brand,
  .resident-auth-brand {
    border: 1px solid rgba(221, 229, 240, 0.75);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.82);
    padding: 14px;
    backdrop-filter: blur(8px);
  }

  .auth-brand .brand-mark {
    transform: scale(1.2);
    margin-bottom: 8px;
  }

  .auth-brand strong {
    font-size: 27px;
  }

  .auth-brand small {
    color: var(--muted);
    letter-spacing: 0;
    text-transform: none;
  }

  .auth-form,
  .staff-request-form {
    display: grid;
    gap: 12px;
  }

  .portal-link {
    border: 1px solid #c7d8f4;
    border-radius: 8px;
    background: white;
    color: var(--blue);
    padding: 12px 14px;
    font-weight: 850;
  }

  .resident-auth-brand {
    display: grid;
    justify-items: center;
    gap: 8px;
    color: var(--ink);
    text-align: center;
  }

  .resident-auth-brand .building-logo {
    width: 68px;
    height: 68px;
  }

  .resident-auth-brand strong {
    font-size: 24px;
  }

  .resident-auth-brand small {
    color: var(--muted);
    font-weight: 750;
  }

  .auth-form label,
  .staff-request-form label {
    display: grid;
    gap: 7px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
  }

  .auth-form input,
  .staff-request-form input,
  .staff-request-form select,
  .staff-request-form textarea {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 12px;
    color: var(--ink);
    background: white;
  }

  .staff-request-form textarea {
    min-height: 82px;
    padding-top: 10px;
    resize: vertical;
  }

  .staff-request-confirmation,
  .staff-request-records {
    display: grid;
    gap: 8px;
    border: 1px solid #c7d8f4;
    border-radius: 8px;
    background: #f6fbff;
    padding: 12px;
    margin-bottom: 12px;
  }

  .staff-request-confirmation strong,
  .staff-request-records strong {
    color: var(--ink);
  }

  .staff-request-confirmation span,
  .staff-request-records span,
  .staff-request-records small {
    color: var(--muted);
    font-size: 13px;
  }

  .staff-request-records article {
    display: grid;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    padding: 10px;
  }

  .auth-submit,
  .request-submit {
    width: 100%;
    margin-top: 4px;
  }

  .phone-body {
    min-height: 0;
    overflow-y: auto;
    padding: 16px 16px 20px;
  }

  .phone-body small {
    color: var(--muted);
  }

  .property-summary {
    display: grid;
    gap: 3px;
    margin-bottom: 14px;
  }

  .property-summary strong {
    font-size: 20px;
  }

  .mobile-progress {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdff;
    padding: 14px;
  }

  .announcement-banner {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    border: 1px solid #c7d8f4;
    border-radius: 8px;
    background: #f6fbff;
    padding: 12px;
    margin-bottom: 14px;
  }

  .announcement-composer > small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
  }

  .announcement-composer.announcement-collapsed {
    gap: 0;
    padding: 10px 12px;
  }

  .announcement-composer.announcement-collapsed > small,
  .announcement-composer.announcement-collapsed .manager-banner-preview {
    display: none;
  }

  .manager-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .manager-panel-title h3 {
    margin-bottom: 0;
  }

  .announcement-control-toggle {
    width: 34px;
    height: 34px;
    border: 1px solid #c7d8f4;
    border-radius: 50%;
    color: var(--blue);
    background: white;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
  }

  .announcement-control-toggle[aria-expanded="true"] {
    color: var(--red);
    border-color: #ffc8cf;
    background: #fff7f8;
  }

  .collapsed-announcement-control {
    display: none;
  }

  .manager-banner-preview {
    display: grid;
    gap: 8px;
  }

  .manager-banner-preview article {
    display: grid;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    padding: 10px;
  }

  .manager-banner-preview small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
  }

  .announcement-banner img {
    width: 62px;
    height: 62px;
    border-radius: 8px;
    object-fit: cover;
  }

  .announcement-banner div {
    display: grid;
    gap: 4px;
  }

  .announcement-banner strong {
    font-size: 14px;
  }

  .announcement-banner span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
  }

  .announcement-banner:not(:has(img)) {
    grid-template-columns: 1fr;
  }

  .mobile-progress > div:last-child {
    display: grid;
    gap: 4px;
  }

  .mobile-progress span,
  .mobile-progress small {
    color: var(--muted);
  }

  .progress-ring {
    display: grid;
    place-items: center;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: conic-gradient(var(--green) 0 67%, #dbe4ef 67% 100%);
    position: relative;
  }

  .progress-ring::before {
    position: absolute;
    inset: 12px;
    border-radius: inherit;
    background: white;
    content: "";
  }

  .progress-ring strong,
  .progress-ring span {
    position: relative;
    z-index: 1;
  }

  .progress-ring strong {
    align-self: end;
    font-size: 19px;
  }

  .progress-ring span {
    align-self: start;
    font-size: 11px;
  }

  .phone-search {
    display: block;
    margin: 12px 0 4px;
  }

  .phone-search input {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 12px;
  }

  .empty-state {
    border: 1px dashed #b9c6d8;
    border-radius: 8px;
    color: var(--muted);
    padding: 14px;
  }

  .mini-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
    gap: 8px;
    margin: 16px 0 20px;
  }

  .mini-metrics button {
    display: grid;
    justify-items: center;
    gap: 5px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: white;
    padding: 10px 4px;
  }

  .mini-metrics button:active {
    transform: translateY(1px);
  }

  .mini-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(145deg, #1d7cff, #15d1ff);
    box-shadow:
      inset 0 1px 2px rgba(255, 255, 255, 0.55),
      0 8px 16px rgba(24, 92, 214, 0.22);
  }

  .mini-icon::before,
  .mini-icon::after,
  .mini-icon i,
  .mini-icon i::before,
  .mini-icon i::after {
    content: "";
    position: absolute;
    display: block;
  }

  .mini-icon::before {
    inset: 3px;
    border-radius: 10px;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0));
  }

  .mini-icon.staff {
    background: linear-gradient(145deg, #1c74ff, #11d0c9);
  }

  .mini-icon.staff i {
    width: 9px;
    height: 9px;
    top: 8px;
    left: 13px;
    border-radius: 50%;
    background: white;
    box-shadow:
      -8px 4px 0 -1px rgba(255, 255, 255, 0.86),
      8px 4px 0 -1px rgba(255, 255, 255, 0.86);
  }

  .mini-icon.staff::after {
    width: 22px;
    height: 11px;
    left: 6px;
    bottom: 7px;
    border-radius: 14px 14px 6px 6px;
    background: white;
    box-shadow:
      -8px 2px 0 -3px rgba(255, 255, 255, 0.72),
      8px 2px 0 -3px rgba(255, 255, 255, 0.72);
  }

  .mini-icon.calendar {
    background: linear-gradient(145deg, #7c3dff, #ff5db8);
  }

  .mini-icon.calendar i {
    width: 20px;
    height: 18px;
    left: 7px;
    top: 9px;
    border-radius: 5px;
    background: white;
  }

  .mini-icon.calendar i::before {
    width: 20px;
    height: 5px;
    left: 0;
    top: 0;
    border-radius: 5px 5px 0 0;
    background: #ffbd3f;
  }

  .mini-icon.calendar i::after {
    width: 3px;
    height: 3px;
    left: 5px;
    top: 9px;
    border-radius: 50%;
    background: #7c3dff;
    box-shadow: 6px 0 0 #7c3dff, 12px 0 0 #7c3dff, 0 5px 0 #7c3dff, 6px 5px 0 #7c3dff;
  }

  .calendar-panel {
    display: grid;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdff;
    padding: 12px;
    margin-bottom: 12px;
  }

  .calendar-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .calendar-title-row h3 {
    margin: 0;
    font-size: 16px;
  }

  .calendar-legend {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
  }

  .calendar-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
  }

  .calendar-weekday {
    color: var(--muted);
    text-align: center;
    font-size: 11px;
    font-weight: 850;
  }

  .calendar-day {
    display: grid;
    align-content: space-between;
    gap: 4px;
    min-height: 42px;
    border: 1px solid #e2e9f3;
    border-radius: 8px;
    color: var(--ink);
    background: white;
    padding: 6px;
    text-align: left;
  }

  .calendar-day.empty {
    border-color: transparent;
    background: transparent;
  }

  .calendar-day.today {
    border-color: var(--blue);
    box-shadow: 0 0 0 2px rgba(24, 92, 214, 0.12);
  }

  .calendar-day strong {
    font-size: 12px;
  }

  .calendar-day span {
    display: flex;
    gap: 3px;
    min-height: 6px;
  }

  .calendar-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue);
  }

  .calendar-dot.visit { background: var(--purple); }
  .calendar-dot.leave { background: var(--orange); }
  .calendar-dot.service { background: var(--green); }
  .calendar-dot.holiday { background: var(--red); }

  .calendar-event-list {
    display: grid;
    gap: 9px;
  }

  .calendar-event {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    padding: 11px;
  }

  .calendar-event strong,
  .calendar-event span,
  .calendar-event small {
    display: block;
  }

  .calendar-event span,
  .calendar-event small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
  }

  .calendar-event-form {
    margin: 0;
  }

  .mini-icon.tasks {
    background: linear-gradient(145deg, #ff8a00, #ffd34f);
  }

  .mini-icon.tasks i {
    width: 20px;
    height: 22px;
    left: 8px;
    top: 6px;
    border-radius: 6px;
    background: white;
  }

  .mini-icon.tasks i::before {
    width: 9px;
    height: 5px;
    left: 5px;
    top: 4px;
    border-left: 2px solid #19a64a;
    border-bottom: 2px solid #19a64a;
    transform: rotate(-45deg);
  }

  .mini-icon.tasks i::after {
    width: 10px;
    height: 2px;
    right: 4px;
    top: 12px;
    border-radius: 99px;
    background: #ff8a00;
    box-shadow: 0 5px 0 #ff8a00;
  }

  .mini-icon.incidents {
    background: linear-gradient(145deg, #ff3d5a, #ff8a3d);
  }

  .mini-icon.incidents i {
    width: 0;
    height: 0;
    left: 8px;
    top: 7px;
    border-right: 9px solid transparent;
    border-left: 9px solid transparent;
    border-bottom: 21px solid white;
  }

  .mini-icon.incidents i::before {
    width: 3px;
    height: 8px;
    left: -1px;
    top: 8px;
    border-radius: 99px;
    background: #ff3d5a;
  }

  .mini-icon.incidents i::after {
    width: 3px;
    height: 3px;
    left: -1px;
    top: 18px;
    border-radius: 50%;
    background: #ff3d5a;
  }

  .mini-icon.jobs {
    background: linear-gradient(145deg, #16b85f, #35e0a1);
  }

  .mini-icon.jobs i {
    width: 20px;
    height: 7px;
    left: 8px;
    top: 14px;
    border-radius: 5px;
    background: white;
    transform: rotate(-38deg);
  }

  .mini-icon.jobs i::before {
    width: 9px;
    height: 9px;
    left: -4px;
    top: -1px;
    border: 3px solid white;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
  }

  .mini-icon.jobs i::after {
    width: 7px;
    height: 7px;
    right: -3px;
    top: 0;
    border-radius: 2px;
    background: white;
  }

  .phone-section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    align-items: center;
    gap: 10px;
    margin: 8px 0 10px;
  }

  .phone-section-heading h3 {
    margin: 0;
  }

  .phone-icon-action {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    color: white;
    background: linear-gradient(145deg, #ff7447, var(--red));
    box-shadow: 0 10px 18px rgba(231, 62, 62, 0.28);
    font-size: 22px;
    font-weight: 950;
    line-height: 1;
  }

  .phone-icon-action:active {
    transform: translateY(1px);
    box-shadow: 0 6px 12px rgba(231, 62, 62, 0.24);
  }

  .manager-metric-sections {
    display: grid;
    gap: 10px;
    margin: 14px 0;
  }

  .manager-metric-section .accordion-content {
    padding-top: 10px;
  }

  .manager-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .manager-metrics button {
    display: grid;
    gap: 4px;
    min-height: 78px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: white;
    padding: 12px;
    text-align: left;
  }

  .manager-metrics strong {
    font-size: 26px;
  }

  .manager-metrics span {
    color: var(--muted);
  }

  .report-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 12px 0;
  }

  .report-kpi-card,
  .report-card {
    background: #fbfdff;
    box-shadow: 0 10px 24px rgba(17, 32, 56, 0.06);
  }

  .report-kpi-card {
    min-height: 112px;
    padding: 13px;
  }

  .report-kpi-card strong {
    font-size: 28px;
  }

  .report-card {
    margin-top: 10px;
    padding: 12px;
  }

  .building-selector {
    display: grid;
    gap: 7px;
    margin-bottom: 14px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
  }

  .building-selector select {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    padding: 0 12px;
  }

  .manager-panel,
  .incident-control-card,
  .package-form,
  .edit-form,
  .profile-section {
    display: grid;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdff;
    padding: 12px;
  }

  .manager-progress-link {
    width: 100%;
    color: inherit;
    text-align: left;
    cursor: pointer;
  }

  .manager-progress-link:active {
    transform: translateY(1px);
  }

  .manager-frame:not(.manager-light-theme) {
    --tron-bg: #06111f;
    --tron-panel: rgba(8, 22, 38, 0.92);
    --tron-panel-strong: rgba(10, 30, 52, 0.96);
    --tron-cyan: #1ee7ff;
    --tron-blue: #1f77ff;
    --tron-line: rgba(30, 231, 255, 0.34);
    --tron-text: #e8fbff;
    --tron-muted: #8cb8cc;
    color: var(--tron-text);
    background:
      linear-gradient(rgba(30, 231, 255, 0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(30, 231, 255, 0.06) 1px, transparent 1px),
      radial-gradient(circle at 50% 0%, rgba(31, 119, 255, 0.28), transparent 40%),
      var(--tron-bg);
    background-size: 22px 22px, 22px 22px, auto, auto;
  }

  .manager-frame:not(.manager-light-theme) header,
  .manager-frame:not(.manager-light-theme) footer {
    border-color: rgba(30, 231, 255, 0.32);
    background: linear-gradient(180deg, rgba(4, 14, 28, 0.98), rgba(5, 18, 35, 0.94));
    box-shadow: 0 0 18px rgba(30, 231, 255, 0.18);
  }

  .manager-frame:not(.manager-light-theme) header strong {
    color: var(--tron-text);
    text-shadow: 0 0 10px rgba(30, 231, 255, 0.62);
  }

  .manager-frame:not(.manager-light-theme) header button,
  .manager-frame:not(.manager-light-theme) footer button {
    color: var(--tron-cyan);
  }

  .manager-frame:not(.manager-light-theme) .manager-theme-toggle {
    border: 1px solid rgba(30, 231, 255, 0.54);
    border-radius: 999px;
    background: rgba(30, 231, 255, 0.08);
    padding: 0 10px;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 0 12px rgba(30, 231, 255, 0.18);
  }

  .manager-frame:not(.manager-light-theme) .phone-body {
    background: transparent;
  }

  .manager-frame:not(.manager-light-theme) .property-summary,
  .manager-frame:not(.manager-light-theme) .manager-panel,
  .manager-frame:not(.manager-light-theme) .incident-control-card,
  .manager-frame:not(.manager-light-theme) .package-form,
  .manager-frame:not(.manager-light-theme) .edit-form,
  .manager-frame:not(.manager-light-theme) .profile-section,
  .manager-frame:not(.manager-light-theme) .calendar-panel,
  .manager-frame:not(.manager-light-theme) .report-card,
  .manager-frame:not(.manager-light-theme) .report-kpi-card,
  .manager-frame:not(.manager-light-theme) .accordion-card {
    border-color: var(--tron-line);
    background: linear-gradient(145deg, rgba(7, 22, 40, 0.96), rgba(5, 13, 27, 0.92));
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.03),
      0 0 20px rgba(30, 231, 255, 0.12);
  }

  .manager-frame:not(.manager-light-theme) .property-summary strong,
  .manager-frame:not(.manager-light-theme) .manager-panel h3,
  .manager-frame:not(.manager-light-theme) .manager-panel-title h3,
  .manager-frame:not(.manager-light-theme) .calendar-title-row h3,
  .manager-frame:not(.manager-light-theme) .report-kpi-card strong,
  .manager-frame:not(.manager-light-theme) .report-bar strong,
  .manager-frame:not(.manager-light-theme) .accordion-card summary strong {
    color: var(--tron-text);
    text-shadow: 0 0 10px rgba(30, 231, 255, 0.42);
  }

  .manager-frame:not(.manager-light-theme) .property-summary small,
  .manager-frame:not(.manager-light-theme) .manager-panel span,
  .manager-frame:not(.manager-light-theme) .manager-list span,
  .manager-frame:not(.manager-light-theme) .manager-metrics span,
  .manager-frame:not(.manager-light-theme) .report-kpi-card span,
  .manager-frame:not(.manager-light-theme) .report-kpi-card small,
  .manager-frame:not(.manager-light-theme) .report-bar span,
  .manager-frame:not(.manager-light-theme) .report-insight-list span,
  .manager-frame:not(.manager-light-theme) .calendar-legend,
  .manager-frame:not(.manager-light-theme) .calendar-event span,
  .manager-frame:not(.manager-light-theme) .calendar-event small,
  .manager-frame:not(.manager-light-theme) .calendar-weekday,
  .manager-frame:not(.manager-light-theme) .accordion-content small,
  .manager-frame:not(.manager-light-theme) label {
    color: var(--tron-muted);
  }

  .manager-frame:not(.manager-light-theme) .building-selector select,
  .manager-frame:not(.manager-light-theme) input,
  .manager-frame:not(.manager-light-theme) select,
  .manager-frame:not(.manager-light-theme) textarea {
    border-color: rgba(30, 231, 255, 0.28);
    background: rgba(3, 12, 24, 0.88);
    color: var(--tron-text);
    box-shadow: inset 0 0 12px rgba(30, 231, 255, 0.08);
  }

  .manager-frame:not(.manager-light-theme) .manager-progress {
    border-color: var(--tron-line);
    background: linear-gradient(135deg, rgba(5, 21, 39, 0.98), rgba(7, 34, 55, 0.9));
    box-shadow: 0 0 24px rgba(30, 231, 255, 0.14);
  }

  .manager-frame:not(.manager-light-theme) .progress-ring {
    color: var(--tron-text);
    filter: drop-shadow(0 0 8px rgba(30, 231, 255, 0.45));
  }

  .manager-frame:not(.manager-light-theme) .progress-ring::before {
    background: radial-gradient(circle, rgba(7, 22, 40, 0.98), rgba(2, 9, 20, 0.98));
    box-shadow:
      inset 0 0 14px rgba(30, 231, 255, 0.18),
      0 0 12px rgba(30, 231, 255, 0.12);
  }

  .manager-frame:not(.manager-light-theme) .progress-ring strong {
    color: #ffffff;
    text-shadow:
      0 0 8px rgba(30, 231, 255, 0.86),
      0 0 14px rgba(30, 231, 255, 0.46);
  }

  .manager-frame:not(.manager-light-theme) .progress-ring span {
    color: #bff7ff;
  }

  .manager-frame:not(.manager-light-theme) .manager-metric-section {
    border-color: rgba(30, 231, 255, 0.42);
    background: linear-gradient(135deg, rgba(5, 20, 38, 0.94), rgba(2, 10, 22, 0.96));
  }

  .manager-frame:not(.manager-light-theme) .manager-metric-section summary {
    grid-template-columns: 42px minmax(0, 1fr) 28px auto;
    min-height: 62px;
    border-bottom: 1px solid rgba(30, 231, 255, 0);
  }

  .manager-frame:not(.manager-light-theme) .manager-metric-section[open] summary {
    border-bottom-color: rgba(30, 231, 255, 0.22);
  }

  .manager-frame:not(.manager-light-theme) .manager-metric-section summary::after {
    grid-column: 3;
    border: 1px solid rgba(30, 231, 255, 0.54);
    background: rgba(30, 231, 255, 0.08);
    color: var(--tron-cyan);
    box-shadow: 0 0 14px rgba(30, 231, 255, 0.24);
  }

  .manager-frame:not(.manager-light-theme) .manager-metric-section summary > em {
    grid-column: 4;
    border-color: rgba(30, 231, 255, 0.32);
    background: rgba(30, 231, 255, 0.1);
    color: var(--tron-cyan);
  }

  .tron-section-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(30, 231, 255, 0.6);
    border-radius: 8px;
    color: var(--tron-cyan);
    background: radial-gradient(circle, rgba(30, 231, 255, 0.2), rgba(31, 119, 255, 0.08));
    box-shadow:
      inset 0 0 12px rgba(30, 231, 255, 0.16),
      0 0 16px rgba(30, 231, 255, 0.24);
    font-size: 18px;
    font-weight: 950;
  }

  .manager-frame:not(.manager-light-theme) .manager-metrics button {
    position: relative;
    overflow: hidden;
    border-color: rgba(30, 231, 255, 0.3);
    background:
      linear-gradient(135deg, rgba(30, 231, 255, 0.1), rgba(31, 119, 255, 0.06)),
      rgba(4, 14, 28, 0.94);
    color: var(--tron-text);
    box-shadow: inset 0 0 18px rgba(30, 231, 255, 0.08);
  }

  .manager-frame:not(.manager-light-theme) .manager-metrics button::before {
    content: "";
    position: absolute;
    inset: 0;
    border-left: 3px solid var(--tron-cyan);
    opacity: 0.75;
    pointer-events: none;
  }

  .manager-frame:not(.manager-light-theme) .manager-metrics button strong {
    color: var(--tron-cyan);
    text-shadow: 0 0 12px rgba(30, 231, 255, 0.62);
  }

  .manager-frame:not(.manager-light-theme) .manager-metrics button:active {
    transform: translateY(1px);
    box-shadow: inset 0 0 20px rgba(30, 231, 255, 0.18);
  }

  .manager-frame:not(.manager-light-theme) .manager-list article,
  .manager-frame:not(.manager-light-theme) .manager-panel article,
  .manager-frame:not(.manager-light-theme) .report-insight-list article,
  .manager-frame:not(.manager-light-theme) .calendar-event,
  .manager-frame:not(.manager-light-theme) .manager-banner-preview article,
  .manager-frame:not(.manager-light-theme) .accordion-content article {
    border-color: rgba(30, 231, 255, 0.24);
    background: rgba(4, 15, 29, 0.84);
    color: var(--tron-text);
  }

  .manager-frame:not(.manager-light-theme) .calendar-day {
    border-color: rgba(30, 231, 255, 0.22);
    background: rgba(4, 15, 29, 0.84);
    color: var(--tron-text);
  }

  .manager-frame:not(.manager-light-theme) .calendar-day.today {
    border-color: var(--tron-cyan);
    box-shadow: 0 0 14px rgba(30, 231, 255, 0.26);
  }

  .manager-frame:not(.manager-light-theme) .report-bar i {
    background: rgba(30, 231, 255, 0.12);
    box-shadow: inset 0 0 10px rgba(30, 231, 255, 0.1);
  }

  .manager-frame:not(.manager-light-theme) .report-bar b {
    box-shadow: 0 0 14px rgba(30, 231, 255, 0.34);
  }

  .manager-frame:not(.manager-light-theme) .announcement-composer > small,
  .manager-frame:not(.manager-light-theme) .manager-banner-preview small {
    color: #bff7ff;
  }

  .manager-frame:not(.manager-light-theme) .announcement-control-toggle {
    border-color: rgba(30, 231, 255, 0.54);
    background: rgba(30, 231, 255, 0.08);
    color: var(--tron-cyan);
    box-shadow: 0 0 14px rgba(30, 231, 255, 0.18);
  }

  .manager-frame:not(.manager-light-theme) .announcement-control-toggle[aria-expanded="true"] {
    border-color: rgba(30, 231, 255, 0.68);
    background: var(--tron-cyan);
    color: #03111c;
  }

  .manager-frame:not(.manager-light-theme) .pill {
    border: 1px solid rgba(30, 231, 255, 0.3);
    box-shadow: 0 0 10px rgba(30, 231, 255, 0.12);
  }

  .manager-frame:not(.manager-light-theme) footer .active {
    color: #03111c;
    background: var(--tron-cyan);
    box-shadow: 0 0 16px rgba(30, 231, 255, 0.48);
  }

  .manager-frame.manager-light-theme {
    color: var(--ink);
    background: #f5f8fc;
  }

  .manager-frame.manager-light-theme header,
  .manager-frame.manager-light-theme footer {
    border-color: var(--line);
    background: white;
    box-shadow: 0 10px 24px rgba(17, 32, 56, 0.08);
  }

  .manager-frame.manager-light-theme .manager-theme-toggle {
    color: var(--blue);
    border: 1px solid #c7d8f4;
    border-radius: 999px;
    background: #eef5ff;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 900;
  }

  .manager-frame.manager-light-theme .manager-metric-section summary {
    grid-template-columns: 42px minmax(0, 1fr) 28px auto;
    min-height: 62px;
  }

  .manager-frame.manager-light-theme .tron-section-icon {
    border-color: #c7d8f4;
    color: var(--blue);
    background: #eef5ff;
    box-shadow: none;
  }

  .manager-frame.manager-light-theme .manager-progress,
  .manager-frame.manager-light-theme .manager-metric-section,
  .manager-frame.manager-light-theme .manager-panel,
  .manager-frame.manager-light-theme .report-card,
  .manager-frame.manager-light-theme .report-kpi-card,
  .manager-frame.manager-light-theme .calendar-panel,
  .manager-frame.manager-light-theme .property-summary {
    border-color: var(--line);
    background: #fbfdff;
    box-shadow: none;
  }

  .manager-frame.manager-light-theme .manager-metrics button {
    border-color: var(--line);
    background: white;
    color: var(--ink);
    box-shadow: none;
  }

  .manager-frame.manager-light-theme .manager-metrics button strong {
    color: var(--blue);
    text-shadow: none;
  }

  .manager-frame.manager-light-theme .manager-metrics button::before {
    content: none;
  }

  .staff-buzzer-panel {
    display: grid;
    gap: 10px;
    border: 1px solid #ffc8cf;
    border-radius: 8px;
    background: #fff7f8;
    padding: 12px;
    margin-bottom: 16px;
  }

  .staff-resident-requests-panel {
    display: grid;
    gap: 10px;
    border: 1px solid #c7d8f4;
    border-radius: 8px;
    background: #f6fbff;
    padding: 12px;
    margin-bottom: 16px;
  }

  .buzzer-alert-list {
    display: grid;
    gap: 8px;
  }

  .buzzer-alert {
    display: grid;
    gap: 6px;
    border: 1px solid #ffc8cf;
    border-radius: 8px;
    background: white;
    padding: 10px;
  }

  .buzzer-alert-waiting {
    border-color: #c7d8f4;
    background: #f6fbff;
  }

  .buzzer-alert strong {
    color: var(--red);
  }

  .buzzer-alert-waiting strong {
    color: var(--blue);
  }

  .buzzer-alert span,
  .buzzer-alert small {
    color: var(--muted);
    font-size: 13px;
  }

  .buzzer-alert textarea,
  .resident-action-note {
    width: 100%;
    min-height: 58px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    padding: 9px 10px;
    color: var(--ink);
    resize: vertical;
  }

  .buzzer-alert > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .buzzer-alert button {
    border: 1px solid #ffc8cf;
    border-radius: 8px;
    background: #fff7f8;
    color: var(--red);
    font-weight: 850;
  }

  .resident-contact-actions,
  .buzzer-alert .resident-contact-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .resident-contact-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border: 1px solid #c7d8f4;
    border-radius: 8px;
    background: white;
    color: var(--blue);
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
  }

  .buzzer-alert .resident-contact-actions a {
    border-color: #ffc8cf;
    color: var(--red);
  }

  .buzzer-alert-waiting .resident-contact-actions a {
    border-color: #c7d8f4;
    color: var(--blue);
  }

  .buzzer-alert-waiting button,
  .buzzer-alert button:disabled {
    border-color: #c7d8f4;
    background: #edf4ff;
    color: #31517f;
  }

  .resident-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .resident-confirm-actions button {
    min-height: 38px;
    border: 1px solid #c7d8f4;
    border-radius: 8px;
    background: white;
    color: var(--blue);
    font-weight: 850;
  }

  .resident-confirm-actions .resident-escalate-request {
    border-color: #ffc8cf;
    color: var(--red);
  }

  .resident-invite-output {
    display: grid;
    gap: 10px;
  }

  .resident-invite-output label {
    display: grid;
    gap: 7px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
  }

  .resident-invite-output input {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    padding: 0 12px;
  }

  .resident-invite-output > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .resident-invite-output button {
    border: 1px solid #c7d8f4;
    border-radius: 8px;
    background: white;
    color: var(--blue);
    font-weight: 850;
  }

  .manager-panel article,
  .manager-list article {
    display: grid;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    padding: 12px;
  }

  .accordion-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    overflow: hidden;
  }

  .accordion-card summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px auto;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px;
    cursor: pointer;
    list-style: none;
  }

  .accordion-card summary::-webkit-details-marker {
    display: none;
  }

  .accordion-card summary::after {
    content: "＋";
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #eef5ff;
    color: var(--blue);
    font-weight: 950;
    grid-column: 2;
    grid-row: 1;
  }

  .accordion-card[open] summary::after {
    content: "×";
    background: var(--blue);
    color: white;
  }

  .accordion-card summary > .pill,
  .accordion-card summary > em {
    grid-column: 3;
    grid-row: 1;
    margin-right: 0;
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .accordion-card .accordion-content {
    display: grid;
    gap: 8px;
    border-top: 1px solid var(--line);
    padding: 0 12px 12px;
  }

  .resident-list .accordion-card,
  .manager-list .accordion-card {
    width: 100%;
  }

  .manager-panel span,
  .manager-list span,
  .incident-control-card span {
    color: var(--muted);
    font-size: 13px;
  }

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

  .manager-list article > div,
  .manager-list .accordion-content > div,
  .incident-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .inventory-list article,
  .sop-list article,
  .reno-project-list article {
    align-content: start;
  }

  .inventory-list article small,
  .sop-list article small,
  .reno-project-list article small,
  .reno-project-list article p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
  }

  .sop-list ol {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
    font-size: 12px;
  }

  .room-builder {
    display: grid;
    gap: 10px;
    border: 1px solid #c8d8ee;
    border-radius: 8px;
    background: white;
    padding: 12px;
  }

  .toggle-row {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 9px;
    line-height: 1.25;
    width: 100%;
  }

  .toggle-row input {
    flex: 0 0 auto;
    width: 17px;
    min-height: auto;
    accent-color: var(--blue);
  }

  .toggle-row span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .secondary-button,
  .reno-room-list button {
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    color: var(--blue);
    font-weight: 850;
  }

  .form-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .staff-directory-card .accordion-content {
    gap: 7px;
  }

  .compact-list article {
    gap: 5px;
  }

  .reno-room-list {
    display: grid;
    gap: 8px;
  }

  .reno-room-list article {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fbff;
    padding: 10px;
  }

  .reno-room-tree,
  .reno-room-list details {
    display: grid;
    gap: 7px;
  }

  .reno-room-node,
  .reno-room-list details {
    border: 1px solid #e0e8f4;
    border-radius: 8px;
    background: #fbfdff;
    padding: 8px;
  }

  .reno-room-node summary,
  .reno-room-list summary {
    color: var(--ink);
    font-size: 13px;
    font-weight: 850;
    overflow-wrap: anywhere;
  }

  .reno-room-node div,
  .reno-room-list details div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 8px;
  }

  .reno-room-node span,
  .reno-room-list details span {
    border-radius: 999px;
    background: #eaf2ff;
    color: var(--blue);
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 850;
  }

  @media (max-width: 360px) {
    .reno-room-list article {
      grid-template-columns: 1fr;
    }

    .reno-room-list button {
      width: 100%;
    }
  }

  .contact-list article > div {
    grid-template-columns: repeat(3, 1fr);
  }

  .qr-preview,
  .qr-sticker-list article {
    display: grid;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    padding: 12px;
  }

  .qr-preview {
    grid-template-columns: 120px 1fr;
    align-items: center;
  }

  .qr-preview img,
  .qr-sticker-list img {
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: white;
    object-fit: contain;
    padding: 8px;
  }

  .qr-preview span,
  .qr-preview small,
  .qr-sticker-list small {
    color: var(--muted);
    font-size: 12px;
    word-break: break-word;
  }

  .qr-sticker-list article {
    grid-template-columns: 92px 1fr;
    align-items: start;
  }

  .qr-sticker-list article > strong,
  .qr-sticker-list article > span,
  .qr-sticker-list article > small,
  .qr-sticker-list article > div {
    grid-column: 2;
  }

  .qr-sticker-list img {
    grid-column: 1;
    grid-row: 1 / span 4;
  }

  .qr-sticker-list article > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .approve-request,
  .reject-request,
  .contact-list a,
  .qr-sticker-list a,
  .qr-sticker-list button,
  .inventory-action,
  .open-sop,
  .select-reno-project,
  .incident-actions a,
  .incident-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    color: var(--ink);
    font-weight: 800;
    text-decoration: none;
  }

  .contact-list a {
    color: var(--blue);
  }

  .qr-sticker-list a,
  .qr-sticker-list button,
  .inventory-action,
  .inventory-adjust,
  .inventory-save,
  .open-sop,
  .select-reno-project {
    color: var(--blue);
  }

  .inventory-controls {
    display: grid;
    grid-template-columns: 1fr 38px 58px 38px 64px;
    align-items: center;
    gap: 7px;
  }

  .inventory-controls input {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 8px;
    text-align: center;
  }

  .inventory-adjust,
  .inventory-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    font-weight: 850;
  }

  @media (max-width: 360px) {
    .inventory-controls {
      grid-template-columns: 1fr 1fr 1fr;
    }

    .inventory-controls .pill {
      grid-column: 1 / -1;
      justify-self: start;
    }

    .inventory-save {
      grid-column: 1 / -1;
    }
  }

  .approve-request,
  .incident-actions button {
    color: white;
    border-color: var(--green);
    background: var(--green);
  }

  .reject-request {
    color: white;
    border-color: var(--red);
    background: var(--red);
  }

  .incident-actions a {
    color: white;
    border-color: #1fa855;
    background: #1fa855;
  }

  .incident-control-card label,
  .package-form label,
  .edit-form label,
  .manager-list label {
    display: grid;
    gap: 7px;
    font-size: 13px;
    font-weight: 800;
  }

  .incident-control-card input,
  .incident-control-card textarea,
  .package-form input,
  .package-form textarea,
  .edit-form input,
  .edit-form select,
  .edit-form textarea,
  .manager-list textarea {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    background: white;
  }

  .edit-form .toggle-row input[type="checkbox"] {
    flex: 0 0 18px;
    width: 18px;
    min-width: 18px;
    min-height: 18px;
    padding: 0;
  }

  .edit-form textarea {
    resize: vertical;
  }

  .generated-email-link {
    text-decoration: none;
  }

  .scan-card {
    margin-bottom: 14px;
  }

  .edit-staff,
  .edit-task,
  .building-list button {
    justify-self: start;
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--blue);
    background: white;
    padding: 0 14px;
    font-weight: 800;
  }

  .task-control-toggle {
    width: 34px;
    height: 34px;
    border: 1px solid #c7d8f4;
    border-radius: 50%;
    color: var(--blue);
    background: white;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
  }

  .task-control-toggle[aria-expanded="true"] {
    color: var(--red);
    border-color: #ffc8cf;
    background: #fff7f8;
  }

  .contact-form-toggle {
    width: 34px;
    height: 34px;
    border: 1px solid #c7d8f4;
    border-radius: 50%;
    color: var(--blue);
    background: white;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
  }

  .contact-form-toggle[aria-expanded="true"] {
    color: var(--red);
    border-color: #ffc8cf;
    background: #fff7f8;
  }

  .building-control-toggle {
    width: 34px;
    height: 34px;
    border: 1px solid #c7d8f4;
    border-radius: 50%;
    color: var(--blue);
    background: white;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
  }

  .building-control-toggle[aria-expanded="true"] {
    color: var(--red);
    border-color: #ffc8cf;
    background: #fff7f8;
  }

  .collapsed-task-control,
  .collapsed-contact-form,
  .collapsed-building-control {
    display: none;
  }

  .building-control-panel {
    display: grid;
    gap: 10px;
  }

  .building-portfolio-accordion {
    margin-bottom: 12px;
  }

  .building-portfolio-accordion .accordion-content > small {
    color: var(--muted);
    font-size: 13px;
  }

  .contact-search {
    display: grid;
    gap: 7px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
  }

  .contact-search input {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 12px;
    background: white;
  }

  .profile-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 10px;
  }

  .profile-stats article {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    padding: 12px;
  }

  .profile-stats strong {
    display: block;
    font-size: 25px;
  }

  .profile-stats span,
  .profile-section p,
  .profile-section li {
    color: var(--muted);
    font-size: 13px;
  }

  .inventory-stats {
    margin-bottom: 14px;
  }

  .reno-hero {
    display: grid;
    gap: 5px;
    margin-bottom: 14px;
    border: 1px solid #bdd2f4;
    border-radius: 8px;
    background: linear-gradient(135deg, #f7fbff 0%, #eef6f2 100%);
    padding: 14px;
  }

  .reno-hero strong {
    font-size: 22px;
  }

  .reno-hero span {
    color: var(--muted);
    font-size: 13px;
  }

  .manager-reno-hero {
    background: linear-gradient(135deg, #f9fbff 0%, #f1f8ee 100%);
  }

  .check-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
  }

  .check-grid legend {
    padding: 0 4px;
    font-size: 13px;
    font-weight: 850;
  }

  .check-grid label {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    font-size: 12px;
    font-weight: 750;
  }

  .check-grid input {
    width: 16px;
    min-height: auto;
    accent-color: var(--blue);
  }

  .profile-section ul {
    display: grid;
    gap: 7px;
    margin: 0;
    padding-left: 18px;
  }

  .incident-control-card textarea,
  .package-form textarea {
    min-height: 84px;
    padding-top: 10px;
    resize: vertical;
  }

  .package-signature-label {
    display: grid;
    gap: 7px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
  }

  .package-signature-input,
  .package-signature-display {
    min-height: 54px;
    border: 1px dashed #9fb3cc;
    border-radius: 8px;
    background: #fbfdff;
    padding: 14px 12px;
    font-family: "Brush Script MT", "Segoe Script", cursive;
    font-size: 20px;
  }

  .package-signature-display {
    display: flex;
    align-items: center;
    color: #16324f;
  }

  .package-collect-button {
    min-height: 42px;
    border: 0;
    border-radius: 8px;
    background: var(--green);
    color: white;
    font-weight: 900;
  }

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

  .job-list article {
    display: grid;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
  }

  .job-list span {
    color: var(--muted);
    font-size: 13px;
  }

  .job-list em {
    justify-self: start;
  }

  .phone-list .incident-row {
    grid-template-columns: 54px 1fr;
    padding: 10px 0;
  }

  .phone-list .thumb {
    width: 54px;
    height: 46px;
  }

  .phone-list .pill,
  .phone-list .incident-status {
    display: none;
  }

  .segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    margin-bottom: 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #f2f5fa;
    padding: 2px;
  }

  .segmented button {
    border: 0;
    border-radius: 5px;
    background: transparent;
    padding: 8px;
    font-size: 12px;
  }

  .segmented .active {
    color: white;
    background: var(--blue);
  }

  .role-tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  .resident-brand-card,
  .resident-alert,
  .resident-section {
    display: grid;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdff;
    padding: 12px;
    margin-bottom: 12px;
  }

  .resident-frame#resident-dashboard-phone {
    background: #eef4f8;
  }

  .resident-frame#resident-dashboard-phone .phone-body {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0), #f4f8fb 260px),
      #f4f8fb;
  }

  .resident-brand-card {
    grid-template-columns: auto 1fr;
    align-items: center;
    position: relative;
    min-height: 128px;
    overflow: hidden;
    border: 0;
    color: white;
    background:
      linear-gradient(90deg, rgba(7, 27, 52, 0.86), rgba(7, 27, 52, 0.38)),
      url("assets/royal-mile-high-street.jpg") center / cover;
    box-shadow: 0 16px 30px rgba(20, 39, 66, 0.18);
  }

  .resident-brand-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.34);
  }

  .resident-brand-card > * {
    position: relative;
    z-index: 1;
  }

  .resident-brand-card strong {
    color: white;
    font-size: 20px;
  }

  .resident-brand-card span {
    color: rgba(255, 255, 255, 0.82);
    font-weight: 800;
  }

  .resident-brand-card .building-logo {
    border-color: rgba(255, 255, 255, 0.48);
    background: rgba(255, 255, 255, 0.18);
    color: white;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
  }

  .resident-home-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
  }

  .resident-home-actions button {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 54px;
    border: 1px solid #d5e2f1;
    border-radius: 8px;
    background: white;
    color: #17304f;
    padding: 10px;
    text-align: left;
    box-shadow: 0 10px 20px rgba(20, 39, 66, 0.08);
  }

  .resident-home-actions button span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #eef5ff;
    color: var(--blue);
    font-size: 18px;
    font-weight: 950;
  }

  .resident-home-actions button:nth-child(2) span {
    background: #f4fbf1;
    color: var(--green);
  }

  .resident-home-actions button strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
  }

  .resident-section-heading {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
  }

  .resident-panel-toggle {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #bdd2f4;
    border-radius: 999px;
    background: #eef5ff;
    color: var(--blue);
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
  }

  .resident-panel-toggle[aria-expanded="true"] {
    background: var(--blue);
    color: white;
  }

  .building-logo {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    overflow: hidden;
    border: 1px solid #bdd2f4;
    border-radius: 8px;
    background: #eaf2ff;
    color: var(--blue);
    font-weight: 950;
  }

  .building-logo.small {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    font-size: 12px;
  }

  .building-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .portal-building-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .resident-brand-card span,
  .resident-alert span,
  .resident-list span,
  .resident-list small {
    color: var(--muted);
    font-size: 13px;
  }

  #resident-dashboard-phone .resident-brand-card strong {
    color: white;
  }

  #resident-dashboard-phone .resident-brand-card span {
    color: rgba(255, 255, 255, 0.84);
    font-size: 13px;
  }

  #resident-dashboard-phone .resident-brand-card .building-logo {
    border-color: rgba(255, 255, 255, 0.48);
    background: rgba(255, 255, 255, 0.18);
    color: white;
  }

  .resident-alert {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border-color: #ffc8cf;
    background:
      linear-gradient(135deg, #fff8f9, #ffffff 64%);
    box-shadow: 0 12px 24px rgba(184, 0, 24, 0.08);
  }

  .resident-alert strong,
  .resident-alert span {
    grid-column: 1;
  }

  .resident-alert #resident-buzzer {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .resident-section,
  .resident-action-accordion {
    box-shadow: 0 10px 24px rgba(20, 39, 66, 0.07);
  }

  .resident-section h3 {
    margin: 0;
    color: #172b45;
    font-size: 15px;
  }

  #resident-buzzer {
    position: relative;
    display: grid;
    place-items: center;
    justify-self: center;
    width: 104px;
    height: 104px;
    overflow: visible;
    border: 4px solid #b80018;
    border-radius: 999px;
    background:
      radial-gradient(ellipse at 30% 18%, rgba(255, 235, 238, 0.95) 0 7%, rgba(255, 151, 162, 0.72) 8% 18%, rgba(255, 151, 162, 0) 19%),
      radial-gradient(circle at 50% 46%, #ff4f62 0 38%, #e70e2b 39% 64%, #a90017 100%);
    box-shadow:
      inset 0 10px 16px rgba(255, 255, 255, 0.34),
      inset 0 -12px 18px rgba(80, 0, 10, 0.38),
      0 9px 0 #7f0012,
      0 18px 28px rgba(184, 0, 24, 0.28);
    color: white;
    padding: 0;
    text-shadow: 0 1px 2px rgba(60, 0, 8, 0.45);
  }

  #resident-buzzer::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    box-shadow:
      inset 0 5px 12px rgba(255, 255, 255, 0.2),
      inset 0 -10px 18px rgba(74, 0, 10, 0.28);
  }

  #resident-buzzer::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 18px;
    top: 15px;
    width: 42px;
    height: 24px;
    border-radius: 999px 999px 70% 70%;
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.18) 58%, rgba(255, 255, 255, 0));
    filter: blur(0.2px);
    transform: rotate(-18deg);
  }

  .buzzer-cap {
    position: absolute;
    z-index: 2;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(120, 126, 136, 0.92);
    border-radius: 999px;
    background:
      radial-gradient(ellipse at 32% 20%, rgba(255, 255, 255, 0.98) 0 13%, rgba(233, 238, 244, 0.82) 14% 28%, rgba(233, 238, 244, 0) 29%),
      radial-gradient(circle at 50% 52%, #f3f6f9 0 24%, #b9c1cb 48%, #68717d 100%);
    box-shadow:
      inset 0 5px 8px rgba(255, 255, 255, 0.72),
      inset 0 -7px 10px rgba(50, 55, 64, 0.42),
      0 4px 0 #5f6670,
      0 9px 14px rgba(60, 0, 10, 0.26);
  }

  .buzzer-cap::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 6px;
    width: 14px;
    height: 7px;
    border-radius: 999px 999px 80% 80%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.2));
    transform: rotate(-22deg);
    filter: blur(0.15px);
  }

  .buzzer-curved-label {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }

  .buzzer-curved-label path {
    fill: none;
  }

  .buzzer-curved-label text {
    fill: white;
    font-size: 17px;
    font-weight: 950;
    letter-spacing: 2px;
    text-shadow:
      0 1px 2px rgba(70, 0, 10, 0.7),
      0 -1px 0 rgba(255, 210, 216, 0.3);
  }

  #resident-buzzer:active,
  #resident-buzzer.buzzer-sent {
    transform: translateY(5px);
    box-shadow:
      inset 0 8px 16px rgba(255, 255, 255, 0.24),
      inset 0 -10px 16px rgba(80, 0, 10, 0.42),
      0 4px 0 #7f0012,
      0 10px 20px rgba(184, 0, 24, 0.24);
  }

  #resident-buzzer:active .buzzer-cap,
  #resident-buzzer.buzzer-sent .buzzer-cap {
    transform: translateY(2px);
    box-shadow:
      inset 0 4px 9px rgba(255, 255, 255, 0.26),
      inset 0 -6px 10px rgba(50, 55, 64, 0.46),
      0 2px 0 #5f6670,
      0 6px 11px rgba(80, 0, 10, 0.22);
  }

  #resident-buzzer-header,
  #resident-requests-buzzer,
  #resident-footer-buzzer,
  #resident-requests-footer-buzzer {
    border: 2px solid #ff9aa5;
    border-radius: 999px;
    background: radial-gradient(circle at 32% 25%, #ff9aa5 0 14%, #ff3348 15% 58%, #b80018 100%);
    box-shadow:
      inset 0 4px 8px rgba(255, 255, 255, 0.28),
      0 4px 0 #7f0012,
      0 8px 14px rgba(184, 0, 24, 0.22);
    color: white;
    font-weight: 900;
  }

  #resident-footer-buzzer,
  #resident-requests-footer-buzzer {
    width: 42px;
    height: 42px;
    justify-self: center;
  }

  .resident-alert .buzzer-sent,
  #resident-buzzer-header.buzzer-sent,
  #resident-requests-buzzer.buzzer-sent,
  #resident-footer-buzzer.buzzer-sent,
  #resident-requests-footer-buzzer.buzzer-sent {
    border-color: #ffc5cb;
    background: radial-gradient(circle at 32% 25%, #ffc5cb 0 14%, #e71932 15% 58%, #9f0017 100%);
    color: white;
  }

  .ticket-sent {
    border-color: #19a43a;
    background: #eaf9ee;
    color: #13802d;
  }

  .resident-renovation-card {
    border-color: #c7d8f4;
    background: #f6fbff;
  }

  .resident-feedback-card {
    border-color: #c9e7dc;
    background: #f7fffb;
  }

  .resident-action-accordion {
    margin-bottom: 12px;
  }

  .resident-action-accordion .accordion-content {
    padding-top: 10px;
  }

  .resident-feedback-confirmation {
    border: 1px solid #bce3ce;
    border-radius: 8px;
    background: #edf9f1;
    color: #157533;
    padding: 9px 10px;
    font-size: 12px;
    font-weight: 800;
  }

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

  .resident-request-search {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    gap: 10px;
    border: 1px solid #dbe6f4;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: 0 10px 24px rgba(17, 32, 56, 0.08);
    backdrop-filter: blur(12px);
  }

  .resident-request-search label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
  }

  .resident-request-search input {
    width: 100%;
    min-height: 46px;
    border: 1px solid #c7d8f4;
    border-radius: 8px;
    background: #f8fbff;
    padding: 0 13px;
    color: var(--ink);
    font-size: 15px;
  }

  .resident-filter-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .resident-filter-chips button {
    min-height: 42px;
    border: 1px solid #d3deec;
    border-radius: 999px;
    background: #ffffff;
    color: #31517f;
    font-weight: 900;
  }

  .resident-filter-chips button.active {
    border-color: var(--blue);
    color: white;
    background: var(--blue);
    box-shadow: 0 8px 16px rgba(20, 92, 230, 0.18);
  }

  .resident-request-scroll {
    max-height: 54px;
    min-height: 54px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fbff;
    padding: 6px;
    scrollbar-width: thin;
  }

  #resident-requests-phone .resident-request-scroll {
    max-height: 240px;
    min-height: 96px;
  }

  .resident-request-row summary {
    grid-template-columns: 34px minmax(0, 1fr) auto auto;
    min-height: 52px;
    padding: 9px 10px;
  }

  .resident-request-row summary::after {
    content: none;
  }

  .resident-request-row summary strong,
  .resident-request-row summary span,
  .resident-request-row summary small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .resident-request-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #eef5ff;
    color: var(--blue);
    font-size: 15px;
    font-weight: 950;
  }

  .resident-request-copy {
    display: grid;
    gap: 3px;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .resident-request-copy small {
    color: var(--muted);
    font-size: 12px;
  }

  .resident-request-row summary > em {
    grid-column: 4;
    max-width: 92px;
    margin-right: 0;
  }

  .resident-request-row .accordion-content {
    padding: 8px;
  }

  .resident-list article {
    display: grid;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    padding: 10px;
  }

  .resident-task-carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }

  .resident-task-carousel article {
    min-width: 0;
    scroll-snap-align: start;
  }

  .resident-carousel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding-top: 2px;
  }

  .resident-carousel-dots button {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 999px;
    background: #b8c7de;
    padding: 0;
  }

  .resident-carousel-dots button.active {
    width: 20px;
    background: var(--blue);
  }

  .resident-list em {
    justify-self: start;
  }

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

  .resident-form label {
    display: grid;
    gap: 7px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
  }

  .resident-form input,
  .resident-form textarea {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    padding: 10px 12px;
  }

  .resident-form input[type="file"] {
    padding: 9px;
    color: var(--muted);
    font-size: 12px;
  }

  .resident-photo-preview {
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: center;
    gap: 10px;
    border: 1px solid #c7d8f4;
    border-radius: 8px;
    background: #f6fbff;
    padding: 8px;
  }

  .resident-photo-preview img {
    width: 64px;
    height: 54px;
    border-radius: 6px;
    object-fit: cover;
  }

  .resident-photo-preview span {
    color: var(--muted);
    font-size: 12px;
  }

  .phone-date {
    color: var(--muted);
    font-size: 13px;
  }

  .current-shift,
  .upcoming,
  .task-group {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    padding: 12px;
    margin-bottom: 10px;
  }

  .current-shift {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
  }

  .current-shift button {
    grid-column: 1 / -1;
    min-height: 40px;
    border: 0;
    border-radius: 6px;
    color: white;
    background: var(--blue);
    font-weight: 800;
  }

  .upcoming {
    display: flex;
    justify-content: space-between;
  }

  .request-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 14px 0 12px;
  }

  .request-actions button {
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: white;
    font-weight: 800;
  }

  .request-actions button.active {
    color: white;
    border-color: var(--blue);
    background: var(--blue);
  }

  .staff-request-form {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdff;
    padding: 12px;
    margin-bottom: 12px;
  }

  .task-card {
    border-top: 1px solid var(--line);
    margin-top: 12px;
  }

  .task-card summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 28px auto;
    gap: 8px;
    align-items: center;
    font-size: 13px;
  }

  .task-state-mark {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 2px solid #c7d8f4;
    border-radius: 50%;
    background: white;
    color: white;
    font-size: 13px;
    font-weight: 950;
    line-height: 1;
  }

  .task-card.complete .task-state-mark {
    border-color: var(--green);
    background: var(--green);
  }

  .task-card summary::after {
    grid-column: 3;
    grid-row: 1;
  }

  .task-card summary > em {
    grid-column: 4;
    grid-row: 1;
    margin-right: 0;
  }

  .task-card summary span {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .task-card small,
  .task-card p {
    color: var(--muted);
    font-size: 12px;
  }

  .task-card p {
    margin: 0;
  }

  .task-blocked-reason {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
  }

  .task-blocked-reason input {
    width: 100%;
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdff;
    padding: 0 10px;
    color: var(--ink);
  }

  .task-card.blocked {
    border-left: 3px solid #e46800;
    padding-left: 9px;
  }

  .task-card.in-progress {
    border-left: 3px solid var(--blue);
    padding-left: 9px;
  }

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

  .task-actions button {
    min-height: 36px;
    border: 0;
    border-radius: 8px;
    color: white;
    font-size: 12px;
    font-weight: 850;
    box-shadow: 0 8px 16px rgba(15, 37, 68, 0.12);
  }

  .task-actions .task-start {
    background: var(--blue);
  }

  .task-actions .task-block {
    background: var(--orange);
  }

  .task-actions .task-complete {
    background: var(--green);
  }

  .task-actions button:disabled {
    color: #7185a3;
    background: #edf4ff;
    box-shadow: none;
  }

  .task-group time {
    color: var(--muted);
  }

  .task-group.collapsed {
    display: grid;
    gap: 4px;
  }

  .form-phone label {
    display: grid;
    gap: 7px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 800;
  }

  .form-phone select,
  .form-phone textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px;
    font-weight: 500;
  }

  .form-phone textarea {
    min-height: 86px;
    resize: vertical;
  }

  .severity-slider {
    display: grid;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdff;
    padding: 12px;
  }

  .severity-slider input[type="range"] {
    width: 100%;
    accent-color: var(--orange);
  }

  .severity-scale {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    color: var(--muted);
    font-size: 10px;
    text-align: center;
  }

  #incident-severity-label {
    justify-self: center;
    border-radius: 999px;
    background: #fff4e8;
    color: #c75b00;
    padding: 5px 10px;
    font-size: 12px;
  }

  .photo-upload {
    display: flex;
    gap: 10px;
  }

  .photo {
    width: 82px;
    height: 74px;
    border-radius: 7px;
    background-size: cover;
  }

  .photo-upload button {
    width: 82px;
    border: 1px dashed #b9c6d8;
    border-radius: 7px;
    color: #31517f;
    background: #fbfdff;
  }

  .phone-frame footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
    align-items: center;
    border-top: 1px solid var(--line);
    background: white;
    padding: 8px 4px calc(10px + env(safe-area-inset-bottom));
  }

  .manager-footer {
    grid-template-columns: repeat(5, 1fr) !important;
  }

  .phone-frame footer button {
    height: 36px;
    border: 0;
    color: #5a6a86;
    background: transparent;
  }

  .phone-frame footer .active {
    color: var(--blue);
  }

  .resident-frame footer #resident-footer-buzzer,
  .resident-frame footer #resident-requests-footer-buzzer {
    width: 42px;
    height: 42px;
    justify-self: center;
    border: 2px solid #ff9aa5;
    border-radius: 999px;
    color: white;
    background: radial-gradient(circle at 32% 25%, #ff9aa5 0 14%, #ff3348 15% 58%, #b80018 100%);
    box-shadow:
      inset 0 4px 8px rgba(255, 255, 255, 0.28),
      0 4px 0 #7f0012,
      0 8px 14px rgba(184, 0, 24, 0.22);
    font-weight: 900;
  }

  .resident-frame footer #resident-footer-buzzer.buzzer-sent,
  .resident-frame footer #resident-requests-footer-buzzer.buzzer-sent {
    border-color: #ffc5cb;
    color: white;
    background: radial-gradient(circle at 32% 25%, #ffc5cb 0 14%, #e71932 15% 58%, #9f0017 100%);
  }

}