/* K Residence. Apple reference via awesome-design-md; see DESIGN.md. */
:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #29352d;
  background: #f7f5ef;
  --green: #4f6b57;
  --line: #e1e4d9;
  --muted: #697368;
  --surface: #fff;
  --pale: #e9efe3;
  --sand: #f7f5ef;
  --terra: #4f6b57;
  --shadow: 0 8px 32px #29352d06;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a.button {
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  color: inherit;
  padding: 11px 17px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 500;
  transition:
    background 0.2s,
    transform 0.2s,
    box-shadow 0.2s;
}
button:hover,
a.button:hover {
  background: #eeeee6;
}
button:active,
a.button:active {
  transform: scale(0.97);
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
button.primary {
  background: var(--green);
  border-color: var(--green);
  color: white;
}
button.primary:hover {
  background: #3d5745;
  box-shadow: 0 4px 12px #4f6b5718;
}
button.danger,
.sos {
  background: #b42332;
  color: white;
  border-color: #b42332;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 4px;
}
h1,
h2,
h3 {
  font-weight: 600;
}
h1 {
  font-size: 34px;
  letter-spacing: -1px;
  line-height: 1.18;
}
h2 {
  font-size: 20px;
  letter-spacing: -0.4px;
}
p {
  line-height: 1.55;
}
a {
  color: var(--green);
}
.muted {
  color: var(--muted);
}
.shell {
  max-width: 1560px;
  margin: auto;
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  min-height: 100dvh;
}
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  min-height: 100dvh;
  padding: 38px 22px;
  border-right: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #29352d;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.6px;
  margin-bottom: 46px;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--green);
  color: white;
  font-size: 22px;
}
.sidebar nav {
  display: grid;
  gap: 8px;
}
.sidebar button {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  border: 0;
  background: transparent;
  min-height: 50px;
  color: var(--muted);
}
.sidebar button:hover {
  background: #eeede5;
}
.sidebar button.active {
  background: var(--pale);
  color: var(--green);
  font-weight: 600;
}
.sidebar small {
  display: block;
  padding: 28px 17px;
  color: var(--muted);
  line-height: 1.7;
  font-size: 12px;
}
.nav-icon {
  flex-shrink: 0;
}
main {
  padding: 0 48px 80px;
  min-width: 0;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 92px;
  border-bottom: 1px solid var(--line);
}
.context {
  border: 0;
  background: transparent;
  padding-left: 0;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  min-width: 0;
}
.context:disabled {
  opacity: 1;
  cursor: default;
}
.context small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 5px;
}
header .actions button {
  background: transparent;
  border: 0;
  font-size: 13px;
}
header .actions button.primary {
  background: var(--pale);
  color: var(--green);
}
header .actions .notification-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 50%;
}
#content {
  animation: content-in 0.4s ease-out both;
}
.pagehead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 32px 0 26px;
}
.pagehead h1 {
  margin: 0;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.metric {
  padding: 24px;
  background: var(--surface);
  border-radius: 22px;
}
.metric strong {
  display: block;
  font-size: 32px;
  font-weight: 600;
  margin-top: 18px;
  letter-spacing: -1px;
  overflow-wrap: anywhere;
}
.panel {
  background: var(--surface);
  border-radius: 22px;
  padding: 26px;
  margin: 24px 0;
}
.panel h2 {
  margin: 0 0 18px;
}
.rows {
  display: grid;
  gap: 8px;
}
.record {
  background: var(--surface);
  border-radius: 16px;
  padding: 0;
  min-width: 0;
  overflow: hidden;
}
.record-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px 16px;
  list-style: none;
  cursor: pointer;
}
.record-summary::-webkit-details-marker { display: none; }
.record-summary:focus-visible { outline: 2px solid var(--green); outline-offset: -3px; }
.record-identity { flex: 1; min-width: 0; }
.record-identity strong {
  display: block;
  font-size: 15px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.record-preview {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.record-summary .status { max-width: 110px; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.record-chevron { color: var(--muted); font-size: 22px; transition: transform 180ms ease; }
.record[open] .record-chevron { transform: rotate(90deg); }
.record-content { padding: 0 16px 16px; }
.record p {
  margin: 12px 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 13px;
}
.record .actions { margin-top: 12px; }
.record .actions button { font-size: 13px; }
.record-urgent .record-summary { cursor: default; }
.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.status {
  display: inline-block;
  background: #eeeee6;
  color: #646e61;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11px;
  text-transform: capitalize;
  white-space: nowrap;
}
.status.open,
.status.pending,
.status.unpaid,
.status.awaiting_confirmation {
  background: var(--pale);
  color: #3d5745;
}
.status.inside,
.status.paid,
.status.resolved,
.status.on {
  background: #eef4ef;
  color: #376546;
}
.status.overdue,
.status.emergency,
.status.locked {
  background: #fff0f1;
  color: #b42332;
}
.empty {
  padding: 24px 0;
  color: var(--muted);
  font-size: 14px;
}
.bottom {
  display: none;
}
.login-layout {
  min-height: 100dvh;
  max-width: 1120px;
  margin: auto;
  padding: 48px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 100px;
}
.welcome-story {
  animation: content-in 0.65s ease-out both;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 1.8px;
  font-weight: 600;
  color: var(--muted);
}
.welcome-story .eyebrow {
  color: var(--green);
}
.welcome-story h1 {
  font-size: clamp(40px, 4.6vw, 58px);
  line-height: 1.07;
  letter-spacing: -2px;
  margin: 26px 0 20px;
}
.welcome-story > p {
  color: var(--muted);
  font-size: 17px;
}
.welcome-story img {
  display: block;
  width: 100%;
  margin-top: 40px;
  border-radius: 28px;
}
.login {
  max-width: 440px;
  width: 100%;
  padding: 36px;
  background: var(--surface);
  border-radius: 28px;
  box-shadow: 0 12px 48px #29352d06;
  margin: 8vh auto;
  animation: content-in 0.7s ease-out both;
}
.login-layout .login {
  margin: 0;
}
.login .brand {
  display: block;
  margin-bottom: 30px;
  color: var(--green);
}
.login .brand span {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
  margin-top: 8px;
}
.login h1 {
  font-size: 28px;
  margin: 0 0 10px;
}
.login > p {
  font-size: 14px;
}
.login button.primary {
  width: 100%;
  margin-top: 10px;
  min-height: 50px;
}
label {
  display: grid;
  gap: 8px;
  margin: 18px 0;
  font-size: 13px;
  font-weight: 500;
}
input,
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: #f7f5ef;
  color: inherit;
  font-weight: 400;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--green);
}
input::placeholder {
  color: #72796f;
}
textarea {
  min-height: 100px;
  resize: vertical;
}
select[multiple] {
  min-height: 110px;
}
input[type="checkbox"] {
  width: auto;
  min-height: auto;
}
.demo-accounts {
  margin-top: 20px;
  color: var(--muted);
  font-size: 12px;
}
.demo-accounts summary {
  cursor: pointer;
  min-height: 32px;
  padding: 8px 0;
}
.demo-accounts small {
  line-height: 1.6;
}
.login a {
  font-size: 12px;
}
dialog {
  width: min(540px, 92vw);
  max-height: 90dvh;
  border: 0;
  padding: 28px;
  border-radius: 28px;
  color: inherit;
  background: var(--surface);
  box-shadow: 0 24px 100px #29352d20;
}
dialog[open] {
  animation: dialog-in 0.22s ease-out both;
}
dialog::backdrop {
  background: #29352d50;
  backdrop-filter: blur(5px);
}
dialog h2 {
  margin: 0;
}
.dialoghead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.dialoghead button {
  border: 0;
  background: #f7f5ef;
}
.error {
  color: #b42332;
  white-space: pre-wrap;
}
#toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: #29352d;
  color: white;
  padding: 14px 22px;
  border-radius: 14px;
  display: none;
  z-index: 20;
  max-width: 90vw;
  box-shadow: 0 8px 30px #0002;
}
.qr {
  display: block;
  width: min(320px, 100%);
  margin: auto;
}
.sos {
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  padding: 15px 20px;
  user-select: none;
}
.sos-fixed {
  position: fixed;
  bottom: 20px;
  right: max(24px, calc((100vw - 1560px) / 2 + 24px));
  z-index: 9;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-height: 44px;
  padding: 10px 16px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: #fff;
  color: #29352d;
  font-size: 12px;
  text-decoration: none;
  box-shadow: 0 4px 16px #29352d06;
}
.sos-fixed .nav-icon {
  width: 18px;
  height: 18px;
  color: #b42332;
}
.sos-fixed:hover {
  background: #fff5f5;
}
button.link {
  background: none;
  border: none;
  padding: 10px 0;
  color: var(--green);
  font-size: 13px;
}
.resident-home {
  max-width: 640px;
}
.home-greeting {
  padding: 32px 0;
}
.home-greeting h1 {
  margin: 0;
  font-size: 38px;
}
.home-greeting p {
  margin: 0;
  font-size: 14px;
}
.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.quick-action {
  text-align: left;
  padding: 24px;
  border: 0;
  border-radius: 22px;
  background: white;
}
.quick-action.featured {
  background: var(--pale);
}
.quick-action:hover {
  box-shadow: 0 8px 30px #4f6b570b;
  transform: translateY(-3px);
  background: #fff;
}
.quick-action.featured:hover {
  background: #dce6d4;
}
.quick-action svg {
  display: block;
  color: var(--green);
  margin-bottom: 16px;
  width: 28px;
  height: 28px;
}
.quick-action strong {
  display: block;
  font-size: 17px;
  font-weight: 600;
}
.quick-action > span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 6px;
}
.section-title {
  margin: 30px 0 16px;
}
.balance-card {
  background: #fff;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 22px;
  width: 100%;
  border: 0;
  margin-top: 20px;
  text-align: left;
}
.balance-card > span:first-child {
  flex: 1;
  min-width: 0;
  font-size: 14px;
}
.balance-card strong {
  font-size: 16px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.balance-card > span:last-child {
  color: var(--muted);
  font-size: 24px;
}
.community-highlight {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  min-height: 148px;
  padding: 24px;
  margin-top: 20px;
  border: 0;
  border-radius: 22px;
  text-align: left;
}
.community-highlight > div {
  flex: 1;
  min-width: 0;
}
.highlight-label {
  font-size: 12px;
  color: var(--muted);
}
.community-highlight strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
  margin-top: 10px;
}
.highlight-arrow {
  display: block;
  color: var(--green);
  font-size: 22px;
  margin-top: 10px;
}
.community-highlight img {
  flex-shrink: 0;
  width: 112px;
  height: 96px;
  object-fit: cover;
  border-radius: 18px;
}
.balance-link {
  border: 0;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}
.home-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: 28px;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.section-heading h2 {
  margin: 0;
}
.compact-record {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: white;
  border-radius: 20px;
  margin-bottom: 12px;
}
.compact-record > .nav-icon {
  color: var(--green);
}
.compact-record > div {
  min-width: 0;
}
.compact-record strong {
  font-size: 14px;
  font-weight: 600;
  display: block;
}
.compact-record span {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 5px;
}
.compact-record p {
  font-size: 13px;
  margin: 6px 0 0;
}
.activity-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.profile-grid,
.workspace {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.workspace button {
  text-align: left;
  padding: 24px;
  font-size: 16px;
  border: 0;
  min-height: 84px;
  border-radius: 22px;
}
.timeline {
  padding-left: 18px;
  border-left: 2px solid var(--line);
  margin: 14px 0;
}
.timeline p {
  margin: 4px 0;
}
.visitor-public {
  max-width: 500px;
  margin: 5vh auto;
  padding: 28px;
  background: white;
  border-radius: 28px;
  text-align: center;
}
.visitor-public img {
  width: 100%;
  max-width: 360px;
}
#emergency {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #851f29;
  color: white;
  padding: 7vh max(25px, calc((100vw - 600px) / 2));
  overflow: auto;
}
#emergency h1 {
  font-size: 40px;
}
#emergency a {
  color: white;
  font-size: 22px;
}
#emergency button {
  width: 100%;
  margin: 20px 0;
  font-weight: 600;
}
.filters,
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.tabs button {
  background: transparent;
  border: 0;
  color: var(--muted);
}
.tabs button.active {
  background: var(--pale);
  color: var(--green);
}
video {
  width: 100%;
  max-height: 300px;
}
pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
a.button,
a.sos:not(.sos-fixed) {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  border-radius: 14px;
}
code.credential {
  font-size: 1.15em;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  background: var(--pale);
  border-radius: 8px;
}
.acting {
  margin: 0;
}
.acting select {
  margin-left: 6px;
}
.setup form {
  margin-top: 16px;
}
[hidden] {
  display: none !important;
}
@keyframes content-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 1100px) {
  main {
    padding: 0 28px 80px;
  }
  .shell {
    grid-template-columns: 210px minmax(0, 1fr);
  }
  .home-columns {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
@media (max-width: 800px) {
  .shell {
    display: block;
  }
  .sidebar {
    display: none;
  }
  main {
    padding: 0 22px 120px;
  }
  header {
    min-height: 78px;
    gap: 8px;
  }
  header .actions {
    gap: 0;
  }
  header .actions button {
    padding: 8px;
    font-size: 12px;
  }
  #logout {
    display: none;
  }
  .context {
    font-size: 15px;
  }
  .context small {
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bottom {
    position: fixed;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 14px;
    right: 14px;
    background: #fffffff2;
    backdrop-filter: blur(20px);
    border: 1px solid #ffffff;
    border-radius: 24px;
    display: flex;
    justify-content: space-around;
    padding: 8px 4px;
    z-index: 10;
    box-shadow: 0 8px 36px #29352d0c;
  }
  .bottom button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 0;
    padding: 9px 5px;
    font-size: 10px;
    min-width: 18%;
    color: var(--muted);
    background: transparent;
  }
  .bottom button.active {
    color: var(--green);
    background: var(--pale);
    font-weight: 600;
  }
  .bottom button.scan {
    background: var(--green);
    color: white;
  }
  .pagehead {
    align-items: flex-start;
    margin: 26px 0;
  }
  .pagehead h1 {
    font-size: 28px;
  }
  .pagehead .actions {
    justify-content: flex-end;
  }
  .pagehead .actions button {
    font-size: 12px;
    padding: 10px 12px;
  }
  h1 {
    font-size: 28px;
  }
  .home-greeting {
    padding: 26px 0;
  }
  .home-greeting h1 {
    font-size: 31px;
  }
  .quick-actions {
    gap: 12px;
  }
  .quick-action {
    padding: 20px;
  }
  .quick-action strong {
    font-size: 15px;
  }
  .quick-action svg {
    margin-bottom: 16px;
  }
  .balance-card {
    padding: 16px;
    gap: 12px;
  }
  .balance-link {
    font-size: 16px;
    padding: 8px;
    margin-left: auto;
  }
  .balance-card strong {
    font-size: 16px;
  }
  .resident-home {
    padding-bottom: 60px;
  }
  .community-highlight {
    padding: 20px;
    gap: 16px;
  }
  .community-highlight img {
    width: 96px;
    height: 82px;
  }
  .home-columns {
    margin-top: 24px;
  }
  .section-heading h2 {
    font-size: 19px;
  }
  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .metric {
    padding: 20px;
  }
  .metric strong {
    font-size: 26px;
  }
  .record .sub {
    flex-wrap: wrap;
  }
  .panel {
    padding: 20px;
  }
  .login-layout {
    display: block;
    padding: 28px 20px;
  }
  .welcome-story {
    display: flex;
    justify-content: center;
  }
  .welcome-story h1,
  .welcome-story > p,
  .welcome-story .eyebrow {
    display: none;
  }
  .welcome-story img {
    width: 200px;
    height: 150px;
    margin: 0 0 24px;
    object-fit: cover;
  }
  .login-layout .login {
    max-width: 480px;
    margin: auto;
    padding: 28px;
  }
  .login:not(.login-layout .login) {
    width: auto;
    margin: 24px 20px;
  }
  .sos-fixed {
    bottom: calc(98px + env(safe-area-inset-bottom));
    right: 22px;
  }
  #toast {
    bottom: 108px;
  }
  .visitor-public {
    margin: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
.overview > summary {
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  padding: 2px 0;
  min-height: 44px;
}
.overview > summary span {
  display: block;
  font-size: 12px;
  font-weight: 400;
  margin: 7px 0 0 18px;
}
.overview-list {
  margin-top: 16px;
}
.overview-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 0;
}
.overview-list strong {
  font-size: 15px;
  font-weight: 600;
}
.more-actions summary {
  cursor: pointer;
  color: var(--muted);
  min-height: 44px;
  padding: 12px 8px;
  font-size: 13px;
}
.more-actions[open] {
  width: 100%;
}

/* Community payment details on the Fees page */
.pay-details-body {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.pay-details-body > div {
  flex: 1 1 220px;
  min-width: 0;
}
.pay-details p {
  margin: 0 0 10px;
}
.pay-account {
  font-size: 1.15em;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}
.pay-qr {
  width: min(220px, 100%);
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
}

/* Payments to review: search, status and sort */
.pay-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.pay-tools input {
  flex: 1 1 240px;
  min-width: 0;
}
.pay-tools select {
  flex: 0 1 auto;
}
.payment-tools {
  display: block;
}
.pay-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.pay-query {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: 10px;
  padding-left: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.pay-query .nav-icon {
  color: var(--muted);
  width: 20px;
  height: 20px;
}
.pay-query input {
  padding-left: 0;
  min-width: 0;
  border: 0;
  background: transparent;
}
.pay-sort-control {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 48px;
  margin: 0;
  color: var(--green);
  cursor: pointer;
  border-radius: 14px;
}
.pay-sort-control:hover {
  background: var(--pale);
}
.pay-sort-control select {
  position: absolute;
  inset: 0;
  padding: 0;
  width: 44px;
  opacity: 0;
  cursor: pointer;
}
.pay-sort-control:focus-within {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.payment-tools #pay-status {
  width: auto;
  max-width: 100%;
  min-height: 44px;
  padding: 8px 14px;
  font-size: 13px;
}

.resident-search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0 12px 0 18px;
  margin-bottom: 22px;
}
.resident-search-box .nav-icon {
  color: var(--green);
}
.resident-search-box input {
  min-width: 0;
  background: transparent;
  border: 0;
  padding-left: 0;
}
.resident-search-box button {
  border: 0;
  padding: 8px;
  width: 44px;
  color: var(--muted);
  font-size: 22px;
  background: transparent;
}
.resident-row {
  background: var(--surface);
  border-radius: 20px;
}
.resident-row summary {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  padding: 20px;
  list-style: none;
  min-height: 84px;
}
.resident-row summary::-webkit-details-marker {
  display: none;
}
.resident-row summary::after {
  content: "⌄";
  font-size: 18px;
  color: var(--muted);
}
.resident-row[open] summary::after {
  content: "⌃";
}
.resident-identity {
  flex: 1;
  min-width: 0;
}
.resident-identity strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.resident-identity > span {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
}
.resident-row .status {
  font-size: 11px;
}
.resident-detail {
  padding: 0 20px 20px;
  border-top: 1px solid var(--line);
}
.resident-detail p {
  font-size: 13px;
  margin: 16px 0;
}
.resident-detail .actions button {
  font-size: 12px;
}
.fee-section-selector {
  width: min(230px, 55vw);
  background: var(--pale);
  color: var(--green);
  font-size: 13px;
  font-weight: 600;
}
.rate-summary > .muted {
  font-size: 13px;
}
.rate-amount {
  font-size: clamp(28px, 6vw, 36px);
  letter-spacing: -1px;
  font-weight: 600;
  margin-top: 12px;
}
.rate-summary p {
  margin: 8px 0 24px;
}
.billing-details,
.property-fees {
  margin: 14px 0;
}
.billing-details summary,
.property-fees summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
}
.billing-details summary::-webkit-details-marker,
.property-fees summary::-webkit-details-marker {
  display: none;
}
.billing-details summary::after,
.property-fees summary::after {
  content: "+";
  margin-left: auto;
  color: var(--muted);
  font-size: 20px;
}
.billing-details[open] summary::after,
.property-fees[open] summary::after {
  content: "−";
}
.property-fees summary .muted {
  font-size: 12px;
  font-weight: 400;
}
.billing-details dl {
  margin: 10px 0 20px;
  font-size: 13px;
}
.billing-details dl > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.billing-details dt {
  color: var(--muted);
}
.billing-details dd {
  margin: 0;
  text-align: right;
}
.property-fee {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.property-fee:first-child {
  margin-top: 12px;
}
.property-fee > div {
  flex: 1;
  min-width: 0;
}
.property-fee span {
  display: block;
  font-size: 12px;
  margin-top: 5px;
}
.property-fee > strong {
  white-space: nowrap;
}

/* Account identity and a single, quiet settings list. */
.profile-page { max-width: 620px; margin: 0 auto; }
.profile-identity { padding: 20px; background: var(--pale); border-radius: 24px; animation: content-in 420ms ease-out both; }
.profile-identity-row { display: flex; align-items: center; gap: 14px; }
.profile-avatar { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: white; font-size: 22px; font-weight: 500; }
.profile-identity-name { flex: 1; min-width: 0; }
.profile-identity-name h2 { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -.6px; overflow-wrap: anywhere; }
.profile-identity-name p { margin: 5px 0 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.profile-edit, .profile-device-signout { display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--green); }
.profile-edit .nav-icon { width: 19px; height: 19px; }
.profile-properties { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.profile-properties > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; background: white; color: var(--green); font-size: 11px; overflow-wrap: anywhere; }
.profile-properties .nav-icon { width: 14px; height: 14px; flex-shrink: 0; }
.profile-settings { background: white; border-radius: 20px; overflow: hidden; margin-top: 18px; }
.profile-settings > * { position: relative; }
.profile-settings > :not(:last-child)::after { content: ""; position: absolute; bottom: 0; left: 64px; right: 16px; border-bottom: 1px solid var(--line); pointer-events: none; }
.profile-setting { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 70px; padding: 13px 16px; border: 0; border-radius: 0; list-style: none; text-align: left; cursor: pointer; background: transparent; }
.profile-setting::-webkit-details-marker { display: none; }
.profile-setting:focus-visible { outline: 2px solid var(--green); outline-offset: -3px; }
.profile-setting-icon { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: var(--sand); color: var(--green); display: grid; place-items: center; }
.profile-setting-icon .nav-icon { width: 19px; height: 19px; }
.profile-setting-label { flex: 1; min-width: 0; }
.profile-setting-label strong { display: block; font-size: 14px; line-height: 1.4; font-weight: 500; }
.profile-setting-label small { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.profile-chevron { font-size: 22px; color: var(--muted); transition: transform 180ms ease; }
.profile-settings details[open] > summary .profile-chevron { transform: rotate(90deg); }
.profile-details { padding: 0 20px 16px 64px; font-size: 12px; overflow-wrap: anywhere; }
.profile-contact { margin: 0; }
.profile-contact > div { margin-bottom: 12px; }
.profile-contact dt { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.profile-contact dd { margin: 0; font-size: 14px; }
.profile-details p { margin: 0; line-height: 1.5; }
.profile-preference { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: 0; padding: 8px 0; cursor: pointer; font-size: 13px; }
.profile-preference input { margin: 0; width: 18px; height: 18px; accent-color: var(--green); }
.profile-device { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.profile-device > div { flex: 1; min-width: 0; }
.profile-device strong { display: block; font-size: 13px; font-weight: 500; }
.profile-device small { display: block; color: var(--muted); margin-top: 4px; }
.profile-signout { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); border: 0; background: transparent; min-width: 120px; min-height: 48px; margin: 16px auto 0; }
.profile-signout .nav-icon { width: 18px; height: 18px; }

/* Pay several bills: checkbox list with a live total */
fieldset.checks { border: 1px solid var(--line, #d2d2d7); border-radius: 12px; padding: 8px 12px; margin: 0 0 12px; min-width: 0; }
fieldset.checks legend { padding: 0 4px; font-weight: 600; }
fieldset.checks label.check { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; margin: 0; font-weight: 400; }
fieldset.checks label.check + label.check { border-top: 1px solid var(--line, #e5e5ea); }
fieldset.checks input { width: auto; margin-top: 3px; flex: none; }
.pay-total { margin: 0 0 12px; }

/* Status pills: green = done/good, amber = in progress/waiting,
   red = needs attention/stopped, grey = neutral. */
.status { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 10px; font-weight: 600; background: #eef0ec; color: #697368; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.status.active, .status.resolved, .status.paid, .status.approved, .status.issued, .status.handled, .status.posted, .status.inside, .status.on, .status.ok, .status.income { background: #e6f4ea; color: #1f7a3a; }
.status.in_progress, .status.pending, .status.awaiting_confirmation, .status.expected, .status.unpaid, .status.logged { background: #fff4e0; color: #a15c00; }
.status.open, .status.inactive, .status.suspended, .status.rejected, .status.overdue, .status.void, .status.reversed, .status.revoked, .status.removed, .status.emergency, .status.locked, .status.expense { background: #fdecee; color: #b42332; }

/* Residents: name · doors on one line */
.resident-identity.one-line { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 1; }
.resident-identity.one-line strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; max-width: 60%; }
.resident-identity.one-line > span { display: inline; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Admin More: settings-style groups */
.menu-group { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 22px 8px 8px; font-weight: 600; }
.menu-card { background: var(--surface, #fff); border-radius: 16px; overflow: hidden; border: 1px solid var(--line, #e1e4d9); }
.menu-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; background: none; border: 0; border-radius: 0; text-align: left; cursor: pointer; color: inherit; min-height: 60px; }
.menu-item + .menu-item { border-top: 1px solid var(--line, #e1e4d9); }
.menu-item:hover { background: rgba(0, 0, 0, .03); }
.menu-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.menu-icon svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.menu-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.menu-text strong { font-weight: 600; }
.menu-text small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-chevron { color: var(--muted); font-size: 22px; }

/* Receipt preview (same layout as the PDF) */
.receipt-preview { background: #fff; color: #1d1d1f; border: 1px solid #d2d2d7; border-radius: 10px; padding: 20px; margin: 12px 0; max-width: 560px; display: flex; flex-direction: column; gap: 2px; }
.receipt-preview small { color: #6e6e73; font-size: 12px; }
.receipt-preview hr { border: 0; border-top: 1px solid #d2d2d7; margin: 12px 0; width: 100%; }
.rp-name { font-size: 18px; }
.rp-title { font-size: 16px; margin-bottom: 6px; }
.rp-row { display: grid; grid-template-columns: 120px 1fr; gap: 8px; font-size: 13px; }
.rp-row span:first-child { color: #6e6e73; }
.rp-total { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 8px; }
.mi-orange { background: #f29900; } .mi-purple { background: #8e44ad; } .mi-blue { background: #1a73e8; } .mi-indigo { background: #3f51b5; }
.mi-teal { background: #00897b; } .mi-grey { background: #7d8790; } .mi-red { background: #d93025; } .mi-green { background: #34a853; }
.tabs .status-tab { display: inline-flex; align-items: center; gap: 6px; }
.tabs .status-tab::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.tabs .st-open::before { background: #b42332; }
.tabs .st-in_progress::before { background: #a15c00; }
.tabs .st-resolved::before { background: #1f7a3a; }

/* Resident home: bigger greeting, amount owed up front, solid red SOS */
.home-greeting h1 { font-size: clamp(34px, 9vw, 48px); letter-spacing: -0.03em; line-height: 1.1; }
.balance-card .balance-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.balance-card .balance-text > span { font-size: 13px; color: var(--muted); }
.balance-card .balance-text strong { font-size: 28px; font-weight: 700; }
.balance-card .balance-text small { font-size: 12px; color: var(--muted); }
.balance-card.is-paid .balance-text strong { color: #1f7a3a; }
.balance-card.is-overdue .balance-text strong, .balance-card.is-overdue .balance-text small { color: #b42332; }
.balance-card .balance-pay { background: var(--green, #4f6b57); color: #fff; border-radius: 99px; padding: 10px 16px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.sos-fixed { background: #d70015; color: #fff; border-color: #d70015; font-size: 15px; font-weight: 800; letter-spacing: .03em; min-height: 52px; padding: 12px 22px; box-shadow: 0 6px 20px rgba(215, 0, 21, .35); }
.sos-fixed .nav-icon { color: #fff; width: 22px; height: 22px; }
.sos-fixed:hover { background: #b80012; }
.balance-card > span.balance-pay { color: #fff; font-size: 14px; }
.home-greeting h1 { font-size: clamp(28px, 7.5vw, 36px); letter-spacing: -0.02em; }

/* Privacy policy */
.legal { max-width: 760px; margin: 0 auto; padding: 32px 20px 64px; line-height: 1.65; }
.legal h1 { margin: 12px 0 4px; }
.legal h2 { font-size: 18px; margin: 28px 0 8px; }
.legal ul { padding-left: 20px; }

/* Attachment viewer */
.file-view { display: grid; gap: 12px; max-height: 75vh; overflow: auto; }
.file-view img { width: 100%; height: auto; border-radius: 12px; background: #f2f2ee; }

/* Access card & unpaid alert (resident home) */
.status.deactivated, .status.restricted { background: #fdecee; color: #b42332; }
.unpaid-alert { background: #fdecee; color: #b42332; border: 1px solid #f3c2c8; border-radius: 16px; padding: 14px 16px; font-weight: 600; margin: 0 0 16px; }
.access-card-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border-radius: 22px; padding: 16px 24px; margin-top: 12px; }
.access-card-row > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.access-card-row small.bad { color: #b42332; font-size: 12px; }
.paid-period { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.paid-period strong { font-size: 24px; }
.paid-period progress { width: 100%; height: 8px; appearance: none; border: 0; border-radius: 6px; overflow: hidden; background: #e9efe3; }
.paid-period progress::-webkit-progress-bar { background: #e9efe3; }
.paid-period progress::-webkit-progress-value { background: #1f7a3a; }
.paid-period progress::-moz-progress-bar { background: #1f7a3a; }

/* Logo next to the brand name on sign-in pages */
.brand.brand-with-mark { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 40px; height: 40px; border-radius: 9px; flex: none; }
.brand-with-mark .brand-text { display: flex; flex-direction: column; }
.login .brand.brand-with-mark { display: flex; }
.login .brand.brand-with-mark > .brand-text { display: flex; flex-direction: column; font-size: 21px; font-weight: 600; color: var(--green); letter-spacing: -0.6px; margin-top: 0; }
.login .brand.brand-with-mark > .brand-text > span { display: block; font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: 0; margin-top: 6px; }
.sidebar .brand-mark { width: 36px; height: 36px; background: none; }
.watermark { margin: 28px 0 8px; text-align: center; font-size: 11px; letter-spacing: .08em; color: rgba(125, 135, 144, .6); }

/* ---- Profile photos ---- */
.avatar { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; display: inline-grid; place-items: center; background: var(--green); color: #fff; font-weight: 600; font-size: 16px; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-greeting { display: flex; align-items: center; gap: 14px; }
.home-avatar { width: 52px; height: 52px; font-size: 18px; }
.profile-photo { position: relative; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; flex-shrink: 0; }
.profile-photo .profile-avatar { overflow: hidden; }
.profile-photo .profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.photo-badge { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 1px 4px #0002; color: var(--green); }
.photo-badge svg { width: 14px; height: 14px; }

/* ---- Access cards on the resident home ---- */
.access-cards { background: #fff; border-radius: 22px; padding: 8px 0 4px; margin-top: 12px; }
.access-cards-head { display: flex; justify-content: space-between; gap: 8px; padding: 10px 24px 4px; }
.access-cards-head small.bad { color: #b42332; font-size: 12px; }
.access-cards .access-card-row { margin: 0; border-radius: 0; border-top: 1px solid var(--line); padding: 12px 24px; }
.access-card-row small { color: var(--muted); font-size: 12px; }
.access-card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ---- Visitor pass ticket (in app and on the visitor's webpage) ---- */
.pass-ticket { --notch: 14px; position: relative; max-width: 380px; margin: 0 auto; background: #fff; border-radius: 24px; overflow: hidden;
  box-shadow: 0 18px 50px #29352d1f; color: #29352d; }
.pass-top { background: linear-gradient(135deg, #4c6a53, #6f8f72); color: #fff; padding: 18px 22px 16px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.pass-top strong { font-size: 18px; letter-spacing: -0.2px; }
.pass-top span { font-size: 14px; font-weight: 600; opacity: 0.95; }
.pass-top small { font-size: 12px; opacity: 0.85; }
.pass-qr { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 22px 14px; }
.pass-qr img { width: 210px; height: 210px; image-rendering: pixelated; }
.pass-qr b { font-size: 13px; letter-spacing: 1px; margin-top: 6px; }
.pass-qr small { font-size: 12px; color: var(--muted); font-style: italic; }
.pass-ticket.is-void .pass-qr img { display: none; }
.pass-cut { position: relative; height: 0; border-top: 2px dashed #e1e4d9; margin: 6px 22px; }
.pass-cut::before, .pass-cut::after { content: ""; position: absolute; top: calc(-1 * var(--notch) - 1px); width: calc(var(--notch) * 2); height: calc(var(--notch) * 2); border-radius: 50%; background: var(--sand); }
.pass-cut::before { left: calc(-22px - var(--notch)); }
.pass-cut::after { right: calc(-22px - var(--notch)); }
dialog .pass-cut::before, dialog .pass-cut::after { background: #f2f1ec; }
.pass-details { padding: 12px 22px 8px; display: grid; gap: 2px; }
.pass-row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 10px; border-radius: 8px; font-size: 14px; }
.pass-row span { color: var(--muted); }
.pass-row strong { text-align: right; font-weight: 600; }
.pass-row.highlight { background: #fbefc4; }
.pass-brand { display: flex; align-items: center; justify-content: center; gap: 8px; border-top: 1px solid var(--line); margin: 6px 22px 0; padding: 12px 0 16px; font-weight: 600; color: var(--green); font-size: 14px; }
.pass-brand img { border-radius: 6px; }
.pass-share { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.pass-page { background: var(--sand); min-height: 100vh; }
.pass-public { padding: 28px 16px 40px; max-width: 440px; margin: 0 auto; }
.pass-note { text-align: center; font-size: 14px; margin: 14px 8px 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Invite link page ---- */
.invite-body { padding: 20px 22px 8px; }
.invite-body h1 { font-size: 22px; margin: 0 0 6px; }
.invite-body form { display: grid; gap: 12px; margin-top: 14px; }
.invite-body label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; margin: 0; }
.invite-body input, .invite-body select, .invite-body textarea { margin: 0; width: 100%; }
.invite-body input, .invite-body select, .invite-body textarea { font: inherit; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--sand); }
.invite-body button.primary { padding: 14px; border-radius: 14px; border: 0; background: var(--green); color: #fff; font: inherit; font-weight: 600; }
.invite-note { background: var(--pale); border-radius: 12px; padding: 10px 14px; font-style: italic; }
.invite-link { word-break: break-all; background: var(--pale); border-radius: 12px; padding: 12px 14px; font-size: 14px; }

/* ---- Committee ---- */
.committee { display: grid; gap: 10px; }
.committee-row { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 18px; padding: 14px 18px; }
.committee-who { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.committee-who small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; }
.committee-edit { display: grid; grid-template-columns: 1fr 1fr auto; grid-template-areas: "title title remove" "name phone phone"; gap: 8px; padding: 12px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--sand); }
.committee-edit input { min-width: 0; margin: 0; }
.committee-edit .ce-title { grid-area: title; font-weight: 600; }
.committee-edit .ce-name { grid-area: name; }
.committee-edit .ce-phone { grid-area: phone; }
.committee-edit .ce-remove { grid-area: remove; width: 40px; padding: 0; background: transparent; border: 0; color: #b42332; font-size: 22px; line-height: 1; }
@media (min-width: 760px) { .committee-edit { grid-template-columns: 1.3fr 1.3fr 1fr auto; grid-template-areas: "title name phone remove"; } }

/* ---- Household ---- */
.household-member { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.household-member > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.household-member small { color: var(--muted); font-size: 12px; }
.household-list { background: var(--sand); border-radius: 12px; padding: 10px 14px; margin: 8px 0; }
.household-list p { margin: 4px 0; font-size: 14px; }
/* Tabs stay on one line on phones and scroll sideways if needed. */
@media (max-width: 640px) {
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 4px; margin-inline: -4px; padding-inline: 4px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: none; white-space: nowrap; padding-inline: 12px; }
}
.photo-badge { width: 20px; height: 20px; right: -6px; bottom: -6px; }
.photo-badge svg { width: 12px; height: 12px; }
.committee-edit input { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; }

/* ---- Resident home (Quick Access layout) ---- */
.home-v2 { display: flex; flex-direction: column; gap: 14px; }
.home-hero { position: relative; margin: -8px -4px 0; padding: 18px 20px 24px; border-radius: 28px; background: linear-gradient(180deg, #e3ebdc, #f7f5ef); overflow: hidden; }
.home-hero::after { content: ""; position: absolute; right: -12px; bottom: 0; width: 180px; height: 120px; background: url(/residence.svg) no-repeat right bottom / contain; opacity: 0.35; pointer-events: none; }
.home-top { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.home-identity { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; background: #fff; border: 0; border-radius: 999px; box-shadow: 0 1px 3px #29352d14; text-align: left; cursor: pointer; }
.home-identity span:last-child { display: flex; flex-direction: column; min-width: 0; }
.home-identity strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-identity small { font-size: 12px; color: var(--muted); }
.home-identity .home-avatar { width: 40px; height: 40px; font-size: 14px; }
.home-switch { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 0; border-radius: 999px; padding: 10px 14px; color: var(--green); font-weight: 600; box-shadow: 0 1px 3px #29352d14; }
.home-switch svg { width: 18px; height: 18px; }
.home-qr { width: 52px; height: 52px; flex: none; border-radius: 50%; border: 1.5px solid #dab976; background: #fff; display: grid; place-items: center; color: var(--green); }
.home-qr svg { width: 26px; height: 26px; }
.home-hero h1 { position: relative; z-index: 1; margin: 22px 0 8px; font-size: 28px; letter-spacing: -0.6px; }
.home-news { position: relative; z-index: 1; display: flex; gap: 8px; align-items: flex-start; background: none; border: 0; padding: 0 140px 0 0; text-align: left; color: #29352d; font-size: 15px; line-height: 1.4; cursor: pointer; }
.home-news svg { width: 18px; height: 18px; flex: none; color: var(--green); margin-top: 2px; }
.outstanding-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 16px 22px; border-radius: 22px; border: 1px solid #cfdcc6; background: linear-gradient(90deg, #eef3e8, #fbf6ea); }
.outstanding-card > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.outstanding-card > div > span { font-size: 13px; color: var(--muted); }
.outstanding-card strong { display: flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 800; }
.outstanding-card.is-overdue strong { color: #b42332; }
.outstanding-card small { font-size: 12px; color: var(--muted); }
.outstanding-card .eye { border: 0; background: none; padding: 2px 4px; font-size: 16px; opacity: 0.6; cursor: pointer; }
.outstanding-card > button.primary { border-radius: 999px; padding: 12px 20px; flex: none; }
.home-section { font-size: 20px; margin: 14px 0 2px; }
.home-section-row { display: flex; align-items: center; justify-content: space-between; }
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 8px; }
@media (min-width: 760px) { .quick-grid { grid-template-columns: repeat(8, 1fr); } }
.quick-tile { --c: #4c6a53; display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: 0; padding: 0; font-size: 12px; font-weight: 500; color: #29352d; text-decoration: none; text-align: center; cursor: pointer; }
.quick-icon { position: relative; width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
.quick-icon svg { width: 28px; height: 28px; }
.quick-dot { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: #b42332; border: 2px solid #fff; }
.q-green { --c: #4c6a53; } .q-sage { --c: #6f8f72; } .q-gold { --c: #b8934a; } .q-blue { --c: #5d7f8f; }
.q-terra { --c: #c0765a; } .q-navy { --c: #3f5f73; } .q-brown { --c: #8a6d3b; }
.q-sos { --c: #d70015; color: #d70015; font-weight: 700; }
.q-sos .quick-icon { background: #d70015; color: #fff; box-shadow: 0 6px 14px #d7001559; }
.home-updates { display: grid; gap: 10px; }
.home-update { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 0; border-radius: 18px; background: #fff; text-align: left; cursor: pointer; }
.home-update > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.home-update strong, .home-update small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-update small { color: var(--muted); font-size: 12px; }
.update-icon { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--pale); color: var(--green); }
.update-icon.urgent { background: #fdecee; color: #b42332; }
.update-icon svg { width: 20px; height: 20px; }
.home-news { padding-right: 110px; }
.home-update { min-width: 0; width: 100%; overflow: hidden; }
.home-update > span:last-child { flex: 1; }
.committee-who small { white-space: normal; }
.guard-since { text-transform: none !important; letter-spacing: 0 !important; }
/* The resident home has its own header (photo, door, QR). */
body.resident-home-page main > header { display: none; }

/* ---- Pages share the home look: a soft green header band ---- */
.pagehead { background: linear-gradient(180deg, #e3ebdc, #f7f5ef); border-radius: 24px; padding: 18px 20px; margin: 0 -4px 16px; align-items: center; }
.pagehead h1 { margin: 0; }
.panel, .rows > article, .committee-row, .access-cards, .access-card-row { border-radius: 20px; }
.pdf-view { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: 12px; background: #fff; margin-bottom: 10px; }
.meeting-box { display: flex; flex-direction: column; gap: 2px; background: var(--pale); border-radius: 14px; padding: 10px 14px; margin-bottom: 8px; }
.meeting-box small { color: var(--muted); }
.meeting-box p { margin: 6px 0 0; }
.rsvp-list { display: grid; gap: 6px; margin-top: 10px; }
.rsvp-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; background: var(--sand); border-radius: 12px; }
.attention-card strong { font-size: 19px; line-height: 1.25; }
.home-switch { flex: none; }
@media (max-width: 480px) {
  .home-switch { font-size: 0; padding: 12px; gap: 0; }
  .home-switch svg { width: 20px; height: 20px; }
}

/* ---- One page width everywhere; the home uses two columns on wide screens ---- */
#content { max-width: 1040px; margin: 0 auto; }
.resident-home { max-width: none; }
.profile-page { max-width: 720px; margin: 0; }
.home-main, .home-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.home-side > .home-section-row:first-child .home-section { margin-top: 0; }
.home-side .panel { margin: 0; }
@media (min-width: 1000px) {
  .home-v2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .home-hero { margin-top: 4px; }
  .home-v2 .quick-grid { grid-template-columns: repeat(4, 1fr); }
  .home-side { padding-top: 4px; }
}
/* The home draws its own header only on phones; wide screens keep the top bar (Sign out). */
@media (min-width: 801px) {
  body.resident-home-page main > header { display: flex; }
}
@media (min-width: 801px) {
  /* The top bar already has the mode switch and messages. */
  .home-top .home-switch, .home-top [data-page="notifications"] { display: none; }
}
.home-hero { margin-top: 8px; }

/* ---- Wide screens: pages use the full width; the home fills the screen ---- */
#content { max-width: none; }
.shell { max-width: none; }
.profile-page { max-width: 820px; }
@media (min-width: 1000px) {
  .home-v2 { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); grid-template-areas: "hero hero" "main side"; gap: 24px 28px; }
  .home-v2 > .home-hero { grid-area: hero; margin: 4px 0 0; padding: 30px 36px 34px; min-height: 210px; display: flex; flex-direction: column; justify-content: center; }
  .home-v2 > .home-hero::after { width: 360px; height: 220px; right: 24px; opacity: 0.45; }
  .home-v2 > .home-hero h1 { font-size: 38px; margin-top: 26px; }
  .home-v2 > .home-hero .home-news { font-size: 17px; padding-right: 380px; }
  .home-v2 > .home-hero .home-top { max-width: 640px; }
  .home-v2 > .home-main { grid-area: main; }
  .home-v2 > .home-side { grid-area: side; }
  .home-v2 .outstanding-card { padding: 22px 26px; }
  .home-v2 .outstanding-card strong { font-size: 30px; }
  .home-v2 .quick-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 22px 12px; background: #fff; border-radius: 22px; padding: 22px 16px; }
  .home-v2 .quick-icon { width: 64px; height: 64px; }
  .home-v2 .quick-tile { font-size: 13px; }
}
@media (min-width: 1000px) and (max-width: 1280px) {
  .home-v2 .quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.home-update .status { margin-left: auto; flex: none; }
.home-side .home-section-row + .home-updates + .home-section-row { margin-top: 6px; }
.home-update .update-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.home-update > span.status:last-child { display: inline-flex; flex-direction: row; flex: none; }

/* ---- Admin dashboard: same look, laid out for managing ---- */
.admin-dash { display: flex; flex-direction: column; gap: 18px; }
.admin-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 26px; border-radius: 24px; background: linear-gradient(180deg, #e3ebdc, #eef3e8); position: relative; overflow: hidden; }
.admin-hero::after { content: ""; position: absolute; right: 8px; bottom: 0; width: 150px; height: 90px; background: url(/residence.svg) no-repeat right bottom / contain; opacity: 0.3; pointer-events: none; }
.admin-hero small { color: var(--muted); }
.admin-hero h1 { margin: 4px 0 0; font-size: 28px; letter-spacing: -0.6px; }
.admin-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { --c: #4c6a53; display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid transparent; border-radius: 20px; background: #fff; text-align: left; cursor: pointer; }
.kpi .quick-icon { width: 46px; height: 46px; border-radius: 14px; flex: none; }
.kpi .quick-icon svg { width: 22px; height: 22px; }
.kpi-text { display: flex; flex-direction: column; min-width: 0; }
.kpi-text small { color: var(--muted); font-size: 12px; }
.kpi-text strong { font-size: 24px; font-weight: 800; }
.kpi.kpi-alert { border-color: color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 7%, #fff); }
.kpi.q-sos .quick-icon { background: #fde7e9; color: #d70015; box-shadow: none; }
.admin-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.admin-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.dash-card { margin: 0; }
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.dash-head h2 { margin: 0; font-size: 18px; }
.dash-big { display: block; font-size: 30px; margin: 4px 0 10px; }
.dash-big small { font-size: 14px; color: var(--muted); font-weight: 500; }
.dash-card progress { width: 100%; margin-bottom: 12px; }
.dash-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 0; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; }
.dash-row > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.dash-row small { color: var(--muted); font-size: 12px; }
.dash-row .status { flex: none; }
.dash-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.dash-stats div { display: flex; flex-direction: column; background: var(--sand); border-radius: 14px; padding: 12px 14px; }
.dash-stats small { color: var(--muted); font-size: 12px; }
.dash-stats strong { font-size: 20px; }
.admin-shortcuts { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; background: none !important; padding: 0 !important; }
@media (min-width: 801px) { .admin-to-resident { display: none; } }
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-cols { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .kpi { padding: 12px; gap: 10px; } .kpi-text strong { font-size: 20px; } .admin-hero { padding: 18px; } }
.dash-stats { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.kpi-text strong { color: #29352d; }
.kpi.kpi-alert.q-sos .kpi-text strong { color: #d70015; }

/* ---- Home: one header only (the hero); top bar hidden at every width ---- */
body.resident-home-page main > header { display: none !important; }
.home-top .home-switch, .home-top [data-page="notifications"], .admin-hero .home-switch, .admin-hero .home-qr { display: inline-flex !important; }
.admin-hero .home-qr { width: 44px; height: 44px; }
.admin-hero .home-qr svg { width: 22px; height: 22px; }
body.resident-home-page #content { padding-top: 20px; }
/* Sign out at the bottom of the sidebar (wide screens). */
.sidebar-signout { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; border-radius: 12px; }
.sidebar-signout:hover { background: var(--pale); color: var(--green); }
.sidebar-signout svg { width: 20px; height: 20px; }
/* Profile sits in the middle of the page. */
.profile-page { max-width: 760px; margin: 0 auto; }
/* Floating "New ticket" in the bottom-right corner. */
.fab { position: fixed; right: 32px; bottom: 32px; z-index: 30; display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 999px; box-shadow: 0 10px 24px #29352d33; }
.fab svg { width: 20px; height: 20px; }
@media (max-width: 800px) { .fab { right: 20px; bottom: 104px; } }