@font-face {
  font-family: 'Figtree';
  src: url('assets/fonts/Figtree-Variable.ttf') format('truetype-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('assets/fonts/Figtree-Italic-Variable.ttf') format('truetype-variations');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #F3F3F1;
  --surface: #ffffff;
  --surface-2: #F7F7F4;
  --border: #E7E6E1;
  --border-strong: #D6D4CC;
  --text: #121212;
  --text-muted: #767671;
  --accent: #121212;
  --accent-strong: #000000;
  --yellow: #FFD100;
  --yellow-deep: #B08A00;
  --danger: #9C3B2E;
  --success: #3D6A2A;
  --radius: 14px;
  --font-display: 'Figtree', system-ui, sans-serif;
  --font-body: 'Figtree', system-ui, sans-serif;
}

/* ============================================================
   MOBILE-FIRST BASE STYLES
   Everything below with no media query is written for a phone
   screen first. Tablet/desktop enhancements are added afterward
   via min-width media queries, layered on top.
   ============================================================ */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html {
  width: 100%;
  min-height: 100%;
  background: var(--bg);
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  width: 100%;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  min-height: 100dvh;
  font-size: 15px;
  /*
   * Unlike overflow:hidden, overflow:clip does not turn body into a scroll
   * container. That distinction keeps position:sticky working in iOS Safari.
   */
  overflow-x: clip;
}

.weave-band { height: 0; background: none; border: none; }
.weave-band.thin { height: 0; }

.view { width: 100%; }
.view[hidden] { display: none !important; }

/*
 * Standalone iOS can expose a strip outside the layout viewport beneath a
 * fixed control. Paint that overscan area with the dock surface while keeping
 * the actual borrower page on the normal application background.
 */
body.borrower-page {
  --standalone-bottom-shift: 0px;
  background: var(--surface);
}
body.borrower-page #app-view {
  min-height: 100vh;
  min-height: 100dvh;
  min-height: var(--borrower-view-height, 100dvh);
  background: var(--bg);
}

/*
 * On the first launch of an iOS home-screen app, 100dvh can be shorter than
 * the full standalone canvas. Move fixed borrower controls through that
 * difference. Once iOS settles the viewport, the difference becomes zero.
 */
@media (display-mode: standalone) {
  body.borrower-page {
    --standalone-bottom-shift: min(0px, calc(100dvh - 100lvh));
  }
}

#login-view {
  min-height: calc(100vh - 8px);
  min-height: calc(100dvh - 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(16px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 28px 22px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 1px 2px rgba(18,18,18,0.03), 0 12px 32px rgba(18,18,18,0.06);
}
@media (min-width: 480px) {
  .card { padding: 40px 32px; }
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: var(--text);
}
.wordmark.small { font-size: 22px; margin: 0; }
@media (min-width: 480px) {
  .wordmark { font-size: 32px; }
}

.tagline {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 24px;
}

.auth-logo-wrap {
  padding: 12px 0 22px;
}
.auth-logo {
  display: block;
  width: min(250px, 86%);
  height: auto;
  margin: 0 auto;
}
@media (min-width: 480px) {
  .auth-logo-wrap { padding: 16px 0 26px; }
}

label {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.field-help {
  display: block;
  margin-top: 7px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"],
input[type="date"],
select,
textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 13px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px; /* keep >=16px: prevents iOS Safari auto-zoom on focus */
}

textarea {
  min-height: 88px;
  line-height: 1.4;
  resize: vertical;
}

/*
 * Native date controls can retain an intrinsic width on iOS and extend
 * through a modal's right padding. Keep every date field inside its parent
 * while preserving the platform date picker.
 */
input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  block-size: 52px;
  min-block-size: 52px;
  max-block-size: 52px;
  min-width: 0;
  max-width: 100%;
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  padding-block: 0;
  line-height: normal;
  text-align: left;
  overflow: hidden;
}
input[type="date"]::-webkit-date-and-time-value {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  line-height: normal;
  text-align: left;
}
input[type="date"]::-webkit-datetime-edit {
  padding: 0;
}

input:focus-visible, select:focus-visible {
  outline: 2px solid var(--yellow-deep);
  outline-offset: 1px;
}
input:disabled, select:disabled {
  color: var(--text-muted);
  background: var(--surface);
  cursor: not-allowed;
  opacity: 0.72;
}

button {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: transform 120ms ease, opacity 120ms ease, background-color 160ms ease, border-color 160ms ease;
}
button:disabled { opacity: 0.5; cursor: not-allowed; }
button:active:not(:disabled) { transform: scale(0.975); }
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--yellow-deep);
  outline-offset: 3px;
}

/* Immediate feedback for user-triggered network work. The original button
   stays in place, which prevents layout jumps while an action is running. */
button.is-network-busy {
  position: relative;
  pointer-events: none;
  color: transparent !important;
  text-shadow: none !important;
}
button.is-network-busy > * { opacity: 0 !important; }
button.is-network-busy::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 50%;
  top: 50%;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(118, 118, 113, 0.28);
  border-top-color: var(--yellow-deep);
  border-radius: 50%;
  animation: network-spin 700ms linear infinite;
}

@keyframes network-spin {
  to { transform: rotate(360deg); }
}

button[type="submit"] {
  width: 100%;
  padding: 14px;
  background: var(--accent);
  color: #ffffff;
  border: none;
  border-radius: var(--radius);
  margin-top: 4px;
  font-weight: 800;
}
button[type="submit"]:hover { background: var(--accent-strong); }
button[type="submit"]:focus-visible {
  outline: 2px solid var(--yellow-deep);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--surface);
}

.ghost-btn {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 700;
  min-height: 40px;
}
.ghost-btn:hover { color: var(--text); border-color: var(--text-muted); }

.small-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  min-height: 38px;
}
.small-btn:hover { color: var(--text); border-color: var(--text-muted); }

.error {
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
  margin-top: 12px;
  padding-left: 10px;
  border-left: 3px solid var(--border-strong);
}
.feedback.success {
  color: var(--success);
  font-size: 13px;
  font-weight: 600;
  margin-top: 12px;
  padding-left: 10px;
  border-left: 3px solid var(--border-strong);
}
.feedback.error {
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
  margin-top: 12px;
  padding-left: 10px;
  border-left: 3px solid var(--border-strong);
}
.muted { color: var(--text-muted); font-size: 14px; }

/* ---- Header (mobile-first: compact, wraps if needed) ---- */

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:
    calc(14px + env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    14px
    max(16px, env(safe-area-inset-left, 0px));
  flex-wrap: wrap;
  gap: 10px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.app-header-left {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.app-header-actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
}
.header-notification-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  padding: 0;
  color: var(--text);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(18,18,18,.1), inset 0 1px 0 rgba(255,255,255,.95);
  cursor: pointer;
}
.header-notification-btn:hover,
.header-notification-btn.active {
  background: var(--yellow);
}
.header-notification-btn svg {
  width: 21px;
  height: 21px;
}
.header-notification-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  color: #fff;
  background: #8f2f63;
  border: 2px solid #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(18,18,18,.2);
}
.header-notification-badge[hidden] { display: none !important; }
.header-notification-btn.has-unread svg { animation: notification-bell-ring 2.8s ease-in-out infinite; }
@keyframes notification-bell-ring {
  0%, 76%, 100% { transform: rotate(0); }
  80% { transform: rotate(8deg); }
  84% { transform: rotate(-7deg); }
  88% { transform: rotate(5deg); }
  92% { transform: rotate(0); }
}
.dashboard-wordmark {
  display: block;
  width: clamp(94px, 26vw, 116px);
  max-width: 100%;
  height: auto;
}
.group-label { color: var(--text-muted); font-size: 14px; }

.sticky-band-wrap { position: sticky; top: var(--header-h, 65px); z-index: 20; }

.group-heading {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 28px;
  padding: 5px 11px;
  background: rgba(255, 209, 0, 0.14);
  border: 1px solid rgba(176, 138, 0, 0.24);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0;
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

@media (min-width: 640px) {
  .app-header {
    padding:
      calc(20px + env(safe-area-inset-top, 0px))
      max(28px, env(safe-area-inset-right, 0px))
      20px
      max(28px, env(safe-area-inset-left, 0px));
  }
  .dashboard-wordmark { width: 128px; }
  .group-heading {
    min-height: 30px;
    padding: 6px 12px;
    font-size: 15px;
  }
}

.page-section {
  max-width: 640px;
  margin: 0 auto;
  padding:
    24px
    max(16px, env(safe-area-inset-right, 0px))
    calc(48px + env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
}
.page-section.wide { max-width: 760px; }
@media (min-width: 640px) {
  .page-section {
    padding:
      32px
      max(28px, env(safe-area-inset-right, 0px))
      calc(60px + env(safe-area-inset-bottom, 0px))
      max(28px, env(safe-area-inset-left, 0px));
  }
}

h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 28px 0 14px;
}
h2:first-child { margin-top: 0; }
@media (min-width: 640px) {
  h2 { font-size: 21px; margin: 32px 0 16px; }
}

form.panel-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
}
form.panel-form button[type="submit"] { width: auto; padding: 11px 20px; }
@media (min-width: 640px) {
  form.panel-form { padding: 24px; }
}

/* ---- List rows (mobile-first: always stack vertically by default) ---- */

.group-row, .list-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(18,18,18,0.03);
}
.group-info, .list-row-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.group-name, .row-title { font-weight: 800; }
.toggle-btn { align-self: flex-end; }

@media (min-width: 640px) {
  .group-row, .list-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
  }
  .toggle-btn { align-self: auto; }
}

.badge {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge.active { background: #E7F1E1; color: var(--success); }
.badge.disabled { background: var(--surface-2); color: var(--text-muted); }
.badge.paid { background: #FBF1D0; color: var(--yellow-deep); }

.toggle-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--radius);
  padding: 9px 16px;
  font-size: 13px;
  min-height: 38px;
}
.toggle-btn:hover { color: var(--text); border-color: var(--text-muted); }

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.tab-btn {
  background: transparent;
  border: none;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab-btn.active { color: var(--text); border-bottom-color: var(--yellow-deep); border-bottom-width: 3px; }
.tab-btn:hover { color: var(--text); }
.tab-content[hidden] { display: none; }

/* ---- Tables: stacked cards on mobile, real tables from tablet up ----
   Every <td> in the generated HTML carries a data-label attribute
   (e.g. data-label="Date"). On phones, each row becomes its own small
   card with the label shown next to its value. From 640px up, this
   flips back into a conventional table. */

.schedule-wrap, .table-wrap { margin-top: 12px; width: 100%; }
.collapsible-history-panel {
  overflow: hidden;
  overflow-anchor: none;
  opacity: 1;
  transition:
    height 220ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 150ms ease,
    margin-top 220ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: height, opacity, margin-top;
}
.collapsible-history-panel.is-history-closing {
  pointer-events: none;
}
.table-wrap {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.table-wrap::-webkit-scrollbar { display: none; }

table.schedule, .dist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.schedule thead, .dist-table thead { display: none; }

table.schedule tr, .dist-table tr {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 12px;
  margin-bottom: 8px;
  background: var(--surface);
}
table.schedule td, .dist-table td {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  white-space: normal;
  text-align: right;
}
table.schedule tr td:last-child, .dist-table tr td:last-child { border-bottom: none; }
table.schedule td::before, .dist-table td::before {
  content: attr(data-label);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  text-align: left;
  flex-shrink: 0;
}
/* Cells holding just an action button (no data-label) shouldn't force
   the space-between/label layout */
table.schedule td:empty, table.schedule td:has(button:only-child) {
  justify-content: flex-end;
}
.ledger-entry-voided { opacity: 0.58; }
.loan-ledger-table {
  table-layout: fixed;
}
.ledger-cell-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px 14px;
}
.ledger-cell-group > span {
  display: flex;
  flex-direction: column;
  min-width: 72px;
}
.ledger-cell-group small {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.2;
}
.ledger-cell-group strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
}
.ledger-total-value {
  color: var(--text);
  font-weight: 800;
}
.ledger-not-included {
  color: var(--text-muted);
  font-weight: 700;
}
.loan-ledger-total {
  background: #FFF8DB !important;
  border-color: rgba(176, 138, 0, 0.35) !important;
}
table.schedule td.loan-ledger-total-cell {
  display: block;
  padding: 10px 0;
  border-bottom: 0;
  white-space: normal;
}
table.schedule td.loan-ledger-total-cell::before { display: none; }
.loan-ledger-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.loan-ledger-total-row > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: left;
}
.loan-ledger-total-row strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}
.loan-ledger-total-row small {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
}
.loan-ledger-total-row > b {
  flex-shrink: 0;
  color: var(--text);
  font-size: 20px;
  font-weight: 900;
}
.borrower-ledger-total {
  margin-top: 12px;
  padding: 15px 16px;
  background: #FFF8DB;
  border: 1px solid rgba(176, 138, 0, 0.35);
  border-radius: 16px;
}
.history-running-balance {
  color: var(--text);
  font-weight: 800;
}

@media (min-width: 640px) {
  table.loan-ledger-table {
    min-width: 0;
    table-layout: fixed;
  }
  table.loan-ledger-table th:nth-child(1) { width: 12%; }
  table.loan-ledger-table th:nth-child(2) { width: 16%; }
  table.loan-ledger-table th:nth-child(3) { width: 22%; }
  table.loan-ledger-table th:nth-child(4) { width: 24%; }
  table.loan-ledger-table th:nth-child(5) { width: 14%; }
  table.loan-ledger-table th:nth-child(6) { width: 12%; }
  table.schedule thead, .dist-table thead { display: table-header-group; }
  table.schedule tr, .dist-table tr {
    display: table-row;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
    background: transparent;
  }
  table.schedule td, .dist-table td {
    display: table-cell;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    text-align: left;
  }
  table.schedule td::before, .dist-table td::before { content: none; }
  table.loan-ledger-table td {
    white-space: normal;
    vertical-align: middle;
  }
  table.loan-ledger-table .ledger-cell-group {
    justify-content: flex-start;
  }
  table.loan-ledger-table .small-btn {
    padding: 8px 10px;
  }
  table.schedule td.loan-ledger-total-cell {
    display: table-cell;
    padding: 14px 10px;
  }
  table.schedule th, .dist-table th {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  table.schedule th { font-size: 10px; }
  .dist-table th { font-size: 11px; }
  .dist-table td { padding: 10px; font-size: 14px; }
}

.confirm-btn {
  margin-top: 16px;
  width: 100%;
  padding: 12px 20px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
}
@media (min-width: 480px) {
  .confirm-btn { width: auto; }
}

.startup-error {
  max-width: 420px;
  margin: 60px auto;
  padding: 24px;
  font-family: sans-serif;
  color: #232323;
}

.loan-summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(18,18,18,0.03);
}
.loan-summary-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.loan-summary-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-muted); padding: 4px 0; }
.loan-summary-row b { color: var(--text); font-weight: 700; }

/* Treasurer loan directory: borrower-first organization */
.loan-directory-toolbar {
  display: grid;
  grid-template-columns: minmax(420px, 2fr) minmax(160px, 1fr) minmax(160px, 1fr);
  align-items: end;
  gap: 12px;
  margin-bottom: 12px;
}

.loan-directory-search {
  display: grid;
  gap: 5px;
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
}

.search-input.loan-directory-search input {
  width: 100%;
  max-width: none;
}

.loan-directory-control {
  display: grid;
  gap: 5px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
}

.loan-directory-control select {
  width: 100%;
  min-height: 48px;
  padding: 0 38px 0 13px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid var(--border-strong);
  border-radius: 15px;
  background-color: #fff;
}

.loan-directory-summary {
  min-height: 24px;
  margin: 2px 2px 10px;
  color: var(--text-muted);
  font-size: 13px;
}

.loan-directory-summary strong {
  color: var(--text);
  font-weight: 800;
}

.borrower-loan-directory {
  display: grid;
  gap: 12px;
}

.borrower-loan-group {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.borrower-loan-group.is-expanded {
  border-color: color-mix(in srgb, var(--yellow-deep) 38%, var(--border));
}

.borrower-loan-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 15px 17px;
  color: var(--text);
  text-align: left;
  font: inherit;
  border: 0;
  background: #fff;
  cursor: pointer;
}

.borrower-loan-toggle:hover {
  background: #fffdf4;
}

.borrower-loan-toggle:focus-visible {
  position: relative;
  z-index: 2;
  outline: 3px solid color-mix(in srgb, var(--yellow) 60%, transparent);
  outline-offset: -3px;
}

.borrower-loan-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  color: #171717;
  font-size: 16px;
  font-weight: 900;
  border: 1px solid #e0b912;
  border-radius: 14px;
  background: var(--yellow);
}

.borrower-loan-identity {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.borrower-loan-identity > strong {
  overflow: hidden;
  font-size: 16px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.borrower-loan-identity > span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
}

.borrower-loan-balance {
  display: grid;
  min-width: 132px;
  gap: 2px;
  text-align: right;
}

.borrower-loan-balance small,
.loan-item-total small {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 750;
}

.borrower-loan-balance strong {
  font-size: 16px;
  font-weight: 900;
}

.borrower-loan-chevron {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  transition: transform .18s ease;
}

.borrower-loan-group.is-expanded .borrower-loan-chevron {
  transform: rotate(90deg);
}

.borrower-loan-items {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.borrower-loan-items[hidden] {
  display: none;
}

.borrower-loan-item {
  overflow: hidden;
  padding: 15px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--yellow-deep);
  border-radius: 15px;
  background: #fff;
}

.borrower-loan-item--paused {
  border-left-color: #9a6a22;
}

.borrower-loan-item--paid {
  border-left-color: #5d8b70;
}

.borrower-loan-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 13px;
}

.borrower-loan-item-head > div:first-child {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.loan-sequence-label {
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.loan-item-total {
  display: grid;
  gap: 2px;
  text-align: right;
  white-space: nowrap;
}

.loan-item-total strong {
  font-size: 17px;
  font-weight: 900;
}

.borrower-loan-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  gap: 8px;
}

.borrower-loan-metrics > span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #faf9f5;
}

.borrower-loan-metrics small {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.25;
}

.borrower-loan-metrics strong {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loan-co-maker {
  margin: 11px 1px 0;
  color: var(--text-muted);
  font-size: 12px;
}

.loan-co-maker strong {
  color: var(--text);
}

.borrower-loan-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.borrower-loan-actions .loan-void-btn {
  color: #8d3131;
}

.loan-directory-empty {
  display: grid;
  place-items: center;
  gap: 5px;
  min-height: 150px;
  padding: 28px;
  color: var(--text-muted);
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: 18px;
  background: var(--surface-2);
}

.loan-directory-empty strong {
  color: var(--text);
  font-size: 15px;
}

.loan-directory-empty span {
  font-size: 13px;
}

@media (max-width: 900px) {
  .loan-directory-toolbar {
    grid-template-columns: 1fr 1fr;
  }
  .loan-directory-search {
    grid-column: 1 / -1;
  }
  .borrower-loan-metrics {
    grid-template-columns: repeat(3, minmax(110px, 1fr));
  }
}

@media (max-width: 600px) {
  .loan-directory-toolbar {
    grid-template-columns: 1fr;
  }
  .loan-directory-search {
    grid-column: auto;
  }
  .borrower-loan-toggle {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    padding: 13px;
  }
  .borrower-loan-balance {
    grid-column: 2 / 3;
    min-width: 0;
    text-align: left;
  }
  .borrower-loan-chevron {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
  .borrower-loan-items {
    padding: 9px;
  }
  .borrower-loan-item {
    padding: 13px;
  }
  .borrower-loan-item-head {
    align-items: flex-start;
  }
  .borrower-loan-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .borrower-loan-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .borrower-loan-actions .small-btn {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .borrower-loan-metrics,
  .borrower-loan-actions {
    grid-template-columns: 1fr;
  }
}

.quicklink-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 12px; }
.quicklink-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.quicklink-card svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--yellow-deep); }
.quicklink-label { font-weight: 700; font-size: 14px; }

h2 .h2-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  margin-right: 8px;
  vertical-align: middle;
  position: relative;
  top: -2px;
}
h2 .h2-icon svg { width: 15px; height: 15px; }
h2 .h2-icon.gold { background: #FFF3C4; color: var(--yellow-deep); }
h2 .h2-icon.green { background: #E7F1E1; color: var(--success); }

/* ---- Summary cards (one per borrower tab) and history cards ---- */

.summary-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 18px; }
.summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(18,18,18,0.03);
}
.summary-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.summary-icon svg { width: 14px; height: 14px; }
.summary-icon.gold { background: #FFF3C4; color: var(--yellow-deep); }
.summary-icon.green { background: #E7F1E1; color: var(--success); }
.summary-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.summary-value { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -0.01em; margin-top: 5px; color: var(--text); }

.history-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.history-icon svg { width: 11px; height: 11px; }
.history-icon.green { background: #E7F1E1; color: var(--success); }
.history-icon.rust { background: #FBEAE6; color: var(--danger); }
.history-icon.gold { background: #FFF3C4; color: var(--yellow-deep); }

.history-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.history-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.history-title { font-weight: 700; font-size: 14px; }
.history-date { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.history-amount { font-weight: 800; font-size: 15px; margin-top: 2px; }
.history-amount.positive { color: var(--success); }
.history-amount.negative { color: var(--danger); }
.history-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.contribution-record-list {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(18,18,18,0.03);
}
.contribution-record {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--border);
}
.contribution-record:last-child { border-bottom: 0; }
.contribution-record-main {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 11px;
}
.contribution-record-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  color: var(--yellow-deep);
  background: #FFF3C4;
  border-radius: 10px;
}
.contribution-record-icon svg { width: 16px; height: 16px; }
.contribution-record-period {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}
.contribution-record-date {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.3;
}
.contribution-record-amount {
  flex: 0 0 auto;
  color: var(--success);
  font-size: 16px;
  font-weight: 850;
  white-space: nowrap;
}
.contribution-record-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.contribution-record-list-admin {
  margin-top: 2px;
}
@media (max-width: 560px) {
  .contribution-record {
    align-items: flex-start;
    gap: 10px;
    min-height: 68px;
    padding: 12px;
  }
  .contribution-record-actions {
    align-items: flex-end;
    flex-direction: column;
    gap: 6px;
  }
  .contribution-record-list-admin .contribution-record-actions {
    flex-direction: row;
    align-items: center;
  }
}

/* ---- Floating chat button ---- */

.fab-chat {
  position: fixed;
  right: 18px;
  bottom: calc(
    78px
    + env(safe-area-inset-bottom, 0px)
    + var(--standalone-bottom-shift, 0px)
  );
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--yellow);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(255,209,0,0.4), 0 2px 8px rgba(18,18,18,0.18);
  z-index: 55;
  cursor: pointer;
}
.fab-chat svg { width: 24px; height: 24px; color: var(--text); }
.fab-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: var(--text);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  min-width: 19px;
  height: 19px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--bg);
}
.fab-badge[hidden] { display: none !important; }
.fab-chat:has(.fab-badge:not([hidden])) { animation: fab-pulse 1.8s ease-in-out infinite; }
@keyframes fab-pulse {
  0%, 100% { box-shadow: 0 8px 20px rgba(255,209,0,0.4), 0 2px 8px rgba(18,18,18,0.18), 0 0 0 0 rgba(255,209,0,0.5); }
  50% { box-shadow: 0 8px 20px rgba(255,209,0,0.4), 0 2px 8px rgba(18,18,18,0.18), 0 0 0 8px rgba(255,209,0,0); }
}

/* ---- Chat ---- */

body.chat-modal-open { overflow: hidden; }

.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 40vh;
  max-height: 58vh;
  overflow-y: auto;
  padding: 6px 2px 16px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.chat-thread::-webkit-scrollbar,
#messages-convo-list::-webkit-scrollbar,
.chat-modal::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.chat-row { display: flex; }
.chat-row.mine { justify-content: flex-end; }
.chat-row.theirs { justify-content: flex-start; }
.chat-bubble-wrap { max-width: 78%; display: flex; flex-direction: column; }
.chat-row.mine .chat-bubble-wrap { align-items: flex-end; }
.chat-row.theirs .chat-bubble-wrap { align-items: flex-start; }
.chat-bubble {
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.4;
  word-break: break-word;
}
.chat-row.mine .chat-bubble { background: var(--text); color: #fff; border-bottom-right-radius: 4px; }
.chat-row.theirs .chat-bubble { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chat-time { font-size: 10px; color: var(--text-muted); margin-top: 4px; padding: 0 4px; }
.chat-sender-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--yellow-deep); margin-bottom: 3px; padding: 0 4px; }

.chat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  position: sticky;
  bottom: 8px;
  background: var(--bg);
  padding-top: 6px;
}
.chat-input-row input {
  flex: 1 1 auto !important;
  min-width: 0;
  width: auto !important;
  margin-top: 0 !important;
  border-radius: 999px !important;
  padding: 12px 18px !important;
}
.chat-send-btn {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: var(--yellow) !important;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 !important;
  margin-top: 0 !important;
}
.chat-send-btn svg { width: 18px; height: 18px; color: var(--text); flex-shrink: 0; }
.chat-send-btn:disabled { opacity: 0.5; cursor: default; }

/* ---- Chat: treasurer conversation list ---- */

.chat-convo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.chat-convo-row.unread { background: #FFF8DB; }
.chat-convo-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--text); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex-shrink: 0;
}
.chat-convo-info { flex: 1; min-width: 0; }
.chat-convo-name { font-weight: 700; font-size: 14px; }
.chat-convo-preview { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-convo-badge {
  background: var(--yellow-deep); color: #fff; font-size: 10px; font-weight: 800;
  min-width: 18px; height: 18px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

/*
 * Keyboard-aware phone layout. Only the message list scrolls; the header and
 * composer remain fixed inside the current visual viewport. The custom
 * viewport values are maintained by setupKeyboardAwareChat().
 */
@media (max-width: 639px) {
  .modal-overlay.chat-modal-overlay {
    inset: auto 0 auto 0;
    top: var(--chat-viewport-top, 0px);
    width: 100%;
    height: var(--chat-viewport-height, 100dvh);
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
  }

  .chat-modal-overlay .chat-modal {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    max-height: none;
    padding:
      calc(14px + env(safe-area-inset-top, 0px))
      max(16px, env(safe-area-inset-right, 0px))
      max(10px, env(safe-area-inset-bottom, 0px))
      max(16px, env(safe-area-inset-left, 0px));
    border: 0;
    border-radius: 0;
    overflow: hidden;
  }

  .chat-modal-overlay.chat-keyboard-open .chat-modal {
    padding-bottom: 4px;
  }

  .chat-modal .modal-header,
  .chat-modal > .muted,
  .chat-modal > .subsection-heading {
    flex: 0 0 auto;
  }

  .chat-modal .modal-header {
    position: relative;
    z-index: 2;
    margin-bottom: 10px;
    background: var(--surface);
  }

  .chat-modal > .muted { margin-bottom: 8px; }

  .chat-modal > .chat-thread,
  #messages-thread-view:not([hidden]) > .chat-thread {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding-bottom: 8px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .chat-modal .chat-input-row {
    position: relative;
    bottom: auto;
    flex: 0 0 auto;
    padding: 8px 0 4px;
    background: var(--surface);
  }

  #messages-list-view:not([hidden]),
  #messages-thread-view:not([hidden]) {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    height: 100%;
  }

  #messages-list-view:not([hidden]) > .muted { flex: 0 0 auto; }

  #messages-convo-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  #messages-thread-name {
    flex: 0 0 auto;
    margin-top: 0 !important;
    margin-bottom: 8px;
  }
}

/* ---- Borrower mobile shell: dock navigation ---- */

.borrower-content {
  max-width: 640px;
  min-height: calc(
    var(--borrower-view-height, 100dvh)
    - var(--header-h, 65px)
  );
  margin: 0 auto;
  padding:
    8px
    max(16px, env(safe-area-inset-right, 0px))
    calc(100px + env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
}

.greeting { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 10px 0 18px; }

.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--standalone-bottom-shift, 0px);
  z-index: 50;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding:
    8px
    max(6px, env(safe-area-inset-right, 0px))
    max(10px, env(safe-area-inset-bottom, 0px))
    max(6px, env(safe-area-inset-left, 0px));
}
.dock::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: max(72px, env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  pointer-events: none;
}
.dock-item-wrap { position: relative; display: flex; flex: 1; justify-content: center; }
.dock-item-wrap[hidden] { display: none; }
.dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  padding: 6px 4px;
  width: 100%;
  position: relative;
}
/* ---- Profile avatar + dropdown menu ---- */

.avatar-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--text);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  border: none;
  font-family: inherit;
  flex-shrink: 0;
  cursor: pointer;
}
.avatar-btn svg { width: 18px; height: 18px; }

.profile-menu-wrap { position: relative; }
.profile-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(18,18,18,0.14);
  min-width: 170px;
  padding: 6px;
  z-index: 60;
}
.profile-menu[hidden] { display: none; }
.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
.profile-menu-item svg { width: 17px; height: 17px; color: var(--text-muted); }
.profile-menu-item:hover { background: var(--surface-2); }

.dock-item.active { color: var(--text); }
.dock-item svg { width: 22px; height: 22px; }

.dock-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: -30px;
}
.dock-center-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--text-muted);
  border: 4px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(18,18,18,0.15);
}
.dock-center-btn svg { width: 23px; height: 23px; color: #fff; }
.dock-center span { font-size: 10px; font-weight: 800; color: var(--text-muted); }
.dock-center-btn.active { background: var(--yellow); box-shadow: 0 8px 18px rgba(255,209,0,0.4), 0 2px 6px rgba(18,18,18,0.12); }
.dock-center-btn.active svg { color: var(--text); }
.dock-center:has(.dock-center-btn.active) span { color: var(--text); }

/* ---- Standing hero card ---- */

.standing-hero {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  background: var(--text);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 22px 24px;
  margin-bottom: 4px;
  position: relative;
  overflow: hidden;
}
.standing-hero::after {
  content: '';
  position: absolute;
  right: -30px;
  top: -30px;
  width: 140px;
  height: 140px;
  background: var(--yellow);
  border-radius: 50%;
  opacity: 0.14;
}
.standing-expand-hint {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #ACABA5;
  margin-top: 14px;
  position: relative;
}
.standing-details { margin-bottom: 4px; }

.reason-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 4px 16px;
  box-shadow: 0 1px 2px rgba(18,18,18,0.03);
}
.reason-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.reason-row:last-child { border-bottom: none; }
.reason-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.reason-icon svg { width: 14px; height: 14px; }
.reason-icon.ok { background: #E7F1E1; color: var(--success); }
.reason-icon.bad { background: #FBEAE6; color: var(--danger); }
.reason-icon.neutral { background: var(--surface-2); color: var(--text-muted); }
.reason-text { font-size: 14px; color: var(--text); }
.standing-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #C7C6C1; position: relative; }
.standing-value { font-size: 26px; font-weight: 800; margin-top: 6px; letter-spacing: -0.02em; position: relative; }
.standing-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--yellow);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
  margin-top: 14px;
  position: relative;
}

.reloan-row { border: 1px solid var(--yellow-deep); background: #FFFBEB; }

/* ---- Notification panel: anchored above the dock on mobile ---- */

.notif-panel {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(
    84px
    + env(safe-area-inset-bottom, 0px)
    + var(--standalone-bottom-shift, 0px)
  );
  max-height: 60vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 -4px 24px rgba(18,18,18,0.12), 0 4px 24px rgba(18,18,18,0.12);
  z-index: 60;
}
.notif-panel[hidden] { display: none; }
.notif-panel-header {
  position: sticky;
  top: 0;
  background: var(--surface);
  border-radius: 18px 18px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.notif-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 2px;
  cursor: pointer;
  font-family: inherit;
}
.notif-item.unread { background: #FFF8DB; }
.notif-message { font-size: 13px; color: var(--text); }
.notif-message.unread { font-weight: 700; }
.notif-time { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

@media (min-width: 480px) {
  .phone-shell-note { display: none; }
}

/* ---- Dashboard layout: sidebar + KPI cards (mobile-first) ---- */

.dashboard-shell {
  display: flex;
  flex-direction: column;
  max-width: 1100px;
  margin: 0 auto;
  padding:
    16px
    max(16px, env(safe-area-inset-right, 0px))
    calc(48px + env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
  gap: 16px;
}

.sidebar {
  width: 100%;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 8px;
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 4px;
  position: sticky;
  top: calc(var(--header-h, 65px) + 10px);
  z-index: 15;
}
.sidebar::-webkit-scrollbar { display: none; }
.sidebar-item[hidden] { display: none !important; }
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  min-height: 40px;
}
.sidebar-item:hover { background: var(--surface-2); color: var(--text); }
.sidebar-item.active { background: #FFF8DB; color: var(--text); }
.sidebar-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar-item-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-main { flex: 1; min-width: 0; }

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  min-width: 0;
  box-shadow: 0 1px 2px rgba(18,18,18,0.03);
}
.kpi-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.kpi-value {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-top: 5px;
  color: var(--text);
}

.variance-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 16px;
  margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(18,18,18,0.03);
  font-family: var(--font-body);
}
.variance-alert[hidden] { display: none; }
.variance-alert:hover { border-color: var(--border-strong); }
.variance-alert-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #FBEAE6;
  color: var(--danger);
}
.variance-alert-icon svg { width: 17px; height: 17px; }
.variance-alert.is-surplus .variance-alert-icon { background: #FFF3C4; color: var(--yellow-deep); }
.variance-alert-body { flex: 1; min-width: 0; }
.variance-alert-title {
  display: block;
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
}
.variance-alert-sub {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.variance-alert-chevron { color: var(--text-muted); flex-shrink: 0; }
.variance-alert-chevron svg { width: 16px; height: 16px; }

@media (min-width: 900px) {
  .dashboard-shell {
    flex-direction: row;
    align-items: flex-start;
    padding:
      24px
      max(28px, env(safe-area-inset-right, 0px))
      calc(60px + env(safe-area-inset-bottom, 0px))
      max(28px, env(safe-area-inset-left, 0px));
    gap: 28px;
  }
  .sidebar {
    width: 200px;
    display: block;
    overflow-x: visible;
    padding: 14px;
    position: sticky;
    top: calc(var(--header-h, 73px) + 10px);
  }
  .sidebar-item {
    width: 100%;
    border-left: 3px solid transparent;
    border-radius: 0 10px 10px 0;
    padding: 13px 14px;
    margin-bottom: 4px;
    min-height: 0;
  }
  .sidebar-item.active { border-left-color: var(--yellow-deep); }
  .kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
    position: sticky;
    top: var(--header-h, 73px);
    z-index: 15;
    background: var(--bg);
    padding: 16px 2px 14px;
    margin-bottom: 20px;
  }
  .kpi-card { padding: 16px 14px; }
  .kpi-label { font-size: 9px; letter-spacing: 0.02em; }
  .kpi-value { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
  button:active:not(:disabled) { transform: none; }
  .collapsible-history-panel { transition: none; }
  button.is-network-busy::after { animation-duration: 1.6s; }
}

.subsection-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--text);
  margin: 22px 0 10px;
}
@media (min-width: 640px) {
  .subsection-heading { font-size: 16px; margin: 24px 0 10px; }
}

.search-input { margin-bottom: 16px; }
.search-input input { max-width: 100%; }
@media (min-width: 640px) {
  .search-input input { max-width: 320px; }
}

.field-row { display: flex; flex-direction: column; gap: 0; }
.field-row > label { flex: 1; min-width: 0; }
@media (min-width: 480px) {
  .field-row { flex-direction: row; gap: 16px; flex-wrap: wrap; }
  .field-row > label { min-width: 160px; }
}

.radio-row { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.radio-option { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text); }
.radio-option input { width: auto; margin: 0; }

.checkbox-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.checkbox-option input {
  width: auto;
  margin: 3px 0 0;
  accent-color: var(--yellow-deep);
}

.section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 28px 0 16px;
}
.section-header:first-child { margin-top: 0; }
.section-header h2 { margin: 0; }
@media (min-width: 480px) {
  .section-header { flex-direction: row; align-items: center; justify-content: space-between; }
}

.add-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 13px;
  min-height: 40px;
}
.add-btn:hover { background: var(--accent-strong); }

/* ---- Master-admin Android release center ---- */

.release-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  min-height: 190px;
  padding: 20px;
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 84% 25%, rgba(255, 209, 0, 0.08), transparent 38%),
    linear-gradient(145deg, #1b1b19 0%, #26251f 72%, #302d1b 100%);
  box-shadow: 0 16px 34px rgba(18, 18, 18, 0.14);
}

.release-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 230px;
  height: 230px;
  right: -96px;
  top: -86px;
  border-radius: 46% 42% 50% 48%;
  background: var(--yellow);
  box-shadow: 0 14px 28px rgba(255, 209, 0, 0.18);
  transform: rotate(-8deg);
}

.release-hero::after {
  display: none;
}

.release-hero > :first-child {
  display: none;
}

.release-hero-label,
.release-kicker {
  display: block;
  margin-bottom: 7px;
  color: #9a811b;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.release-hero-label { color: var(--yellow); }

.release-hero h2 {
  max-width: 470px;
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(25px, 7vw, 34px);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.release-hero p {
  max-width: 520px;
  margin: 11px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  line-height: 1.5;
}

.release-hero-version {
  position: relative;
  align-self: center;
  justify-self: center;
  width: min(100%, 250px);
  min-height: 118px;
  padding: 18px 22px;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.045)),
    rgba(43, 43, 37, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 26px rgba(0, 0, 0, 0.15);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
}

.release-hero-version span,
.release-hero-version small {
  display: block;
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.release-hero-version small {
  margin-top: 3px;
}

.release-hero-version strong {
  display: block;
  margin: 6px 0 3px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(30px, 8vw, 36px);
  line-height: 1;
  letter-spacing: -0.035em;
}

.release-admin-grid {
  display: grid;
  gap: 16px;
}

.release-panel {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 3px 12px rgba(18, 18, 18, 0.035);
}

.release-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 17px;
}

.release-panel-heading h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: -0.02em;
}

.release-security-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border-radius: 999px;
  color: var(--success);
  background: rgba(61, 106, 42, 0.09);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.release-security-chip svg { width: 13px; height: 13px; }

.release-form {
  display: grid;
  gap: 14px;
}

.release-form > label,
.release-field-grid label {
  display: grid;
  gap: 6px;
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
}

.release-form textarea {
  display: block;
  width: 100%;
  min-height: 88px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  background: var(--surface-2);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  resize: vertical;
}

.release-form textarea:focus-visible {
  outline: 2px solid var(--yellow-deep);
  outline-offset: 1px;
}

.release-file-drop {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 12px !important;
  min-height: 86px;
  padding: 14px;
  border: 1.5px dashed #cbc7ba;
  border-radius: 16px;
  cursor: pointer;
  background:
    linear-gradient(135deg, rgba(255, 209, 0, 0.06), rgba(247, 247, 244, 0.8));
  transition: border-color 160ms ease, background 160ms ease;
}

.release-file-drop:hover,
.release-file-drop.has-file {
  border-color: #af8d00;
  background: rgba(255, 209, 0, 0.09);
}

.release-file-drop input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.release-file-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: #fff;
  background: #151513;
  box-shadow: 0 8px 18px rgba(18, 18, 18, 0.14);
}

.release-file-icon svg { width: 20px; height: 20px; }
.release-file-drop strong {
  display: block;
  max-width: 260px;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.release-file-drop small {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 550;
}

.release-field-grid {
  display: grid;
  gap: 12px;
}

.release-type-picker {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.release-type-picker legend {
  margin-bottom: 6px;
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
}

.release-type-picker label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  cursor: pointer;
  background: var(--surface-2);
}

.release-type-picker input {
  width: auto;
  margin: 3px 0 0;
  accent-color: #121212;
}
.release-type-picker strong,
.release-type-picker small { display: block; }
.release-type-picker strong { font-size: 12px; }
.release-type-picker small {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.35;
}

.release-upload-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e3dc;
}
.release-upload-progress[hidden] { display: none; }
.release-upload-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #b99400, var(--yellow));
  transition: width 260ms ease;
}

.release-publish-btn {
  min-height: 46px;
  border-radius: 14px;
  font-size: 13px;
}

.release-history-panel { align-self: start; }

.release-history-item {
  position: relative;
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr);
  gap: 11px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.release-history-item:last-child { border-bottom: 0; }
.release-history-item.is-withdrawn { opacity: 0.63; }

.release-history-line {
  width: 7px;
  min-height: 52px;
  border-radius: 999px;
  background: var(--yellow);
}
.release-history-item.is-withdrawn .release-history-line {
  background: #c9c6bd;
}

.release-history-copy { min-width: 0; }
.release-history-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.release-history-title strong { font-size: 14px; }
.release-history-copy p {
  margin: 5px 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.4;
}
.release-history-copy small {
  color: #96938c;
  font-size: 9px;
  line-height: 1.35;
}

.release-live-chip,
.release-required-chip,
.release-withdrawn-chip {
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.release-live-chip { color: #665100; background: rgba(255, 209, 0, 0.23); }
.release-required-chip { color: #fff; background: #121212; }
.release-withdrawn-chip { color: #6f6c65; background: #e8e6df; }

.release-toggle-btn {
  grid-column: 2;
  justify-self: start;
  margin-top: 3px;
}

.release-empty {
  padding: 26px 16px;
  border: 1px dashed var(--border-strong);
  border-radius: 15px;
  text-align: center;
  background: var(--surface-2);
}
.release-empty span { font-size: 13px; font-weight: 750; }
.release-empty p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 11px;
}

@media (min-width: 560px) {
  .release-hero {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.5fr);
    align-items: center;
    min-height: 220px;
    padding: 24px 28px;
  }
  .release-hero > :first-child {
    display: block;
  }
  .release-hero::before {
    width: 300px;
    height: 300px;
    right: -86px;
    top: -158px;
  }
  .release-hero-version {
    justify-self: end;
    width: min(100%, 250px);
  }
  .release-field-grid { grid-template-columns: 1fr 1fr; }
  .release-type-picker { grid-template-columns: 1fr 1fr; }
  .release-type-picker legend { grid-column: 1 / -1; }
}

@media (min-width: 1050px) {
  .release-admin-grid { grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr); }
  .release-panel { padding: 21px; }
}

/* ---- Modals (mobile-first: full-width sheet from the bottom) ---- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 15, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 100;
}
.modal-overlay[hidden] { display: none; }

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 20px;
  width: 100%;
  max-width: 460px;
  max-height: 88vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.modal-header h2 { margin: 0; }
.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.modal-close-btn:hover { color: var(--text); }
.modal form.panel-form { border: none; padding: 0; }

@media (min-width: 640px) {
  .modal { padding: 28px; }
  .modal-header { margin-bottom: 20px; }
}

/* ---- Activity / report trail (mobile-first: stacked) ---- */

.activity-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.activity-item:last-child { border-bottom: none; }
.activity-date {
  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap;
}
.activity-desc { font-size: 14px; color: var(--text); word-break: break-word; }

@media (min-width: 480px) {
  .activity-item { flex-direction: row; gap: 12px; }
  .activity-date { min-width: 130px; flex-shrink: 0; }
  .activity-desc { flex: 1; min-width: 0; }
}

/* ---- Android app update experience ---- */

body.android-update-open { overflow: hidden; }

.android-update-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding:
    max(16px, env(safe-area-inset-top, 0px))
    max(14px, env(safe-area-inset-right, 0px))
    max(14px, env(safe-area-inset-bottom, 0px))
    max(14px, env(safe-area-inset-left, 0px));
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 209, 0, 0.16), transparent 38%),
    rgba(9, 9, 8, 0.68);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  overflow-y: auto;
}

.android-update-card {
  position: relative;
  isolation: isolate;
  width: min(100%, 430px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 30px;
  padding: 18px 18px 17px;
  color: #151513;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(251, 250, 244, 0.98));
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.34),
    0 2px 0 rgba(255, 255, 255, 0.85) inset;
}

.android-update-card::before {
  content: "";
  position: absolute;
  z-index: -2;
  width: 270px;
  height: 270px;
  top: -175px;
  right: -95px;
  border-radius: 50%;
  background: var(--yellow);
  filter: blur(1px);
}

.android-update-card::after {
  content: "";
  position: absolute;
  z-index: -2;
  width: 190px;
  height: 190px;
  left: -120px;
  bottom: -140px;
  border-radius: 50%;
  background: rgba(255, 209, 0, 0.2);
}

.android-update-glow {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.6), transparent 30%);
}

.android-update-topline {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.android-update-badge {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 6px 10px;
  border: 1px solid rgba(18, 18, 18, 0.08);
  border-radius: 999px;
  background: rgba(255, 209, 0, 0.2);
  color: #5f4b00;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.android-update-card.is-required .android-update-badge {
  color: #fff;
  background: #121212;
  border-color: #121212;
}

.android-update-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0 0 2px;
  border: 1px solid rgba(18, 18, 18, 0.08);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.58);
  color: #4b4b47;
  font: 500 22px/1 var(--font-body);
  box-shadow: none;
}

.android-update-close:hover { background: #fff; color: #121212; }

.android-update-mark {
  position: relative;
  width: 92px;
  height: 92px;
  margin: 12px auto 18px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  background:
    linear-gradient(145deg, #232321, #090909);
  box-shadow:
    0 15px 28px rgba(18, 18, 18, 0.22),
    0 0 0 8px rgba(255, 209, 0, 0.16);
  transform: rotate(-3deg);
}

.android-update-mark img {
  display: block;
  width: 68px;
  height: 68px;
  object-fit: contain;
  border-radius: 18px;
  transform: rotate(3deg);
}

.android-update-spark {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--yellow);
  box-shadow: 0 0 0 4px rgba(255, 209, 0, 0.15);
  transform: rotate(45deg);
}
.android-update-spark.spark-one { top: -11px; right: 3px; }
.android-update-spark.spark-two {
  right: -15px;
  bottom: 15px;
  width: 5px;
  height: 5px;
}
.android-update-spark.spark-three {
  left: -13px;
  top: 25px;
  width: 4px;
  height: 4px;
}

.android-update-copy { text-align: center; }

.android-update-eyebrow {
  margin: 0 0 6px;
  color: #7a6410;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.android-update-copy h2 {
  max-width: 330px;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(25px, 7vw, 31px);
  font-weight: 850;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.android-update-description {
  max-width: 340px;
  margin: 12px auto 0;
  color: #66645f;
  font-size: 13px;
  line-height: 1.52;
}

.android-update-progress {
  margin: 18px 2px 0;
  padding: 12px 13px;
  border: 1px solid #e8e5d9;
  border-radius: 14px;
  background: rgba(247, 246, 240, 0.92);
}

.android-update-progress[hidden] { display: none; }

.android-update-progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfddd3;
}

.android-update-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #caa400, var(--yellow));
  transition: width 240ms ease;
}

.android-update-progress-track span.has-error {
  background: var(--danger);
}

.android-update-progress p {
  margin: 8px 0 0;
  color: #66645f;
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
}

.android-update-actions {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}

.android-update-primary,
.android-update-later {
  width: 100%;
  min-height: 50px;
  border-radius: 15px;
  font-size: 14px;
  font-weight: 800;
}

.android-update-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid #121212;
  color: #fff;
  background: #121212;
  box-shadow: 0 10px 22px rgba(18, 18, 18, 0.18);
}

.android-update-primary:hover { background: #000; }
.android-update-primary:disabled {
  color: rgba(255, 255, 255, 0.72);
  background: #44433f;
  border-color: #44433f;
  box-shadow: none;
}
.android-update-primary svg { width: 18px; height: 18px; }

.android-update-later {
  border: 1px solid #dedbd0;
  color: #56544f;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: none;
}

.android-update-later:hover { color: #121212; border-color: #bdb9ab; }

.android-update-footnote {
  margin: 12px 0 0;
  color: #8a8780;
  font-size: 10px;
  line-height: 1.35;
  text-align: center;
}

@media (min-width: 560px) {
  .android-update-overlay { padding: 24px; }
  .android-update-card { padding: 21px 24px 20px; }
  .android-update-actions {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  }
  .android-update-card.is-required .android-update-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .android-update-card {
    animation: android-update-arrive 420ms cubic-bezier(.2, .9, .28, 1) both;
  }
  .android-update-spark {
    animation: android-update-spark 1.8s ease-in-out infinite alternate;
  }
  .android-update-spark.spark-two { animation-delay: 300ms; }
  .android-update-spark.spark-three { animation-delay: 620ms; }
}

@keyframes android-update-arrive {
  from { opacity: 0; transform: translateY(26px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes android-update-spark {
  from { opacity: 0.45; transform: rotate(45deg) scale(0.72); }
  to { opacity: 1; transform: rotate(45deg) scale(1.08); }
}

@media (prefers-reduced-motion: no-preference) {
  .view { transition: opacity 0.2s ease; }
}

.dock-icon-wrap { position: relative; display: inline-flex; }

.bell-badge[hidden] { display: none !important; }
.bell-badge {
  position: absolute;
  top: -5px;
  right: -7px;
  background: var(--yellow-deep);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  min-width: 15px;
  height: 15px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 2px solid var(--surface);
}

/* ============================================================
   TINUBUAN SIGNATURE UI
   Carries the release-center visual language across Treasurer
   and Member/Borrower views without reducing working space.
   ============================================================ */

:root {
  --bg: #f1f1ee;
  --surface-2: #f8f7f2;
  --border: #e2e0d8;
  --border-strong: #cbc7b9;
  --yellow: #ffd000;
  --yellow-deep: #927400;
  --shadow-card: 0 1px 1px rgba(18,18,18,.03), 0 12px 30px rgba(18,18,18,.055);
  --shadow-float: 0 20px 50px rgba(18,18,18,.12);
}

body {
  background:
    radial-gradient(circle at 95% 3%, rgba(255,208,0,.1), transparent 24rem),
    var(--bg);
}

.app-header {
  color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,.78);
  background: linear-gradient(120deg, rgba(255,255,255,.9), rgba(247,246,240,.76));
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  backdrop-filter: blur(18px) saturate(165%);
  box-shadow:
    0 10px 30px rgba(18,18,18,.08),
    inset 0 -1px 0 rgba(18,18,18,.045);
}

.app-header::after {
  content: "";
  position: absolute;
  right: -54px;
  top: -84px;
  width: 172px;
  height: 172px;
  border-radius: 50%;
  background: rgba(255,208,0,.32);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: inset 0 0 34px rgba(255,255,255,.3);
  pointer-events: none;
}

.app-header-left,
.profile-menu-wrap { position: relative; z-index: 1; }

.dashboard-wordmark {
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.7));
}

.group-heading {
  color: var(--text);
  background: rgba(255,255,255,.58);
  border-color: rgba(18,18,18,.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow:
    0 5px 14px rgba(18,18,18,.055),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.avatar-btn {
  color: #121212;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow:
    0 8px 22px rgba(18,18,18,.1),
    inset 0 0 0 2px rgba(255,208,0,.58),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.dashboard-shell { max-width: 1240px; }

.sidebar {
  border-color: rgba(18,18,18,.08);
  border-radius: 22px;
  box-shadow: var(--shadow-card);
}

.sidebar-item {
  border-radius: 13px;
  font-weight: 750;
}

.sidebar-item.active {
  color: #121212;
  background: var(--yellow);
  box-shadow: inset 0 0 0 1px rgba(18,18,18,.06);
}

.sidebar-item.active svg { stroke-width: 2.4; }

.kpi-row {
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

.kpi-card,
.summary-card {
  position: relative;
  overflow: hidden;
  color: var(--text);
  border-color: var(--border);
  border-radius: 20px;
  background: rgba(255,255,255,.9);
  box-shadow: var(--shadow-card);
}

.kpi-card::before,
.summary-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--yellow);
}

.kpi-card:first-child,
.kpi-card:nth-child(4) {
  color: var(--text);
  border-color: var(--border);
  background: rgba(255,255,255,.9);
}

.kpi-card:first-child .kpi-label,
.kpi-card:nth-child(4) .kpi-label { color: var(--text-muted); }
.kpi-card:first-child .kpi-value,
.kpi-card:nth-child(4) .kpi-value { color: var(--text); }

.tab-content {
  animation: tinubuan-tab-in 240ms ease both;
}

.dashboard-main > .tab-content {
  padding: 18px;
  border: 1px solid rgba(18,18,18,.07);
  border-radius: 24px;
  background: rgba(255,255,255,.76);
  box-shadow: var(--shadow-card);
}

.section-header,
.borrower-page-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 20px;
  color: #fff;
  border-radius: 20px;
  background: linear-gradient(120deg, #0e0e0d 0%, #26251f 72%, #373016 100%);
}

.section-header::after,
.borrower-page-head::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -36px;
  top: -62px;
  width: 145px;
  height: 145px;
  border-radius: 50%;
  background: var(--yellow);
}

.section-header:first-child { margin-bottom: 18px; }
.section-title-block { min-width: 0; }
.section-title-block h2,
.borrower-page-head h2,
.borrower-page-head .greeting {
  color: #fff;
  font-size: clamp(22px, 5vw, 32px);
  line-height: 1.04;
  letter-spacing: -.035em;
}

.section-title-block h2 { margin: 4px 0 0; }
.section-title-block p,
.borrower-page-head > p:last-child {
  max-width: 520px;
  margin: 8px 0 0;
  color: #bdbcb6;
  font-size: 13px;
  line-height: 1.45;
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;
  color: #121212;
  background: var(--yellow);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.section-header .add-btn {
  position: relative;
  z-index: 1;
  color: #121212;
  background: #fff;
  border: 2px solid rgba(255,255,255,.75);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.section-header .add-btn:hover { color: #121212; background: var(--yellow); }

.tab-support-copy {
  margin: 0 2px 18px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
}

.search-input input {
  min-height: 48px;
  border-color: var(--border-strong);
  border-radius: 15px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(18,18,18,.035);
}

.group-row,
.list-row,
.loan-summary-card,
.history-card,
.contribution-record-list,
.reason-card,
form.panel-form {
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}

.add-btn,
.confirm-btn,
.ghost-btn,
.small-btn {
  font-weight: 800;
}

.borrower-content { max-width: 720px; }

.borrower-page-head {
  margin: 8px 0 16px;
}

.borrower-page-head .greeting {
  margin: 7px 0 0;
}

.borrower-page-head h2 {
  margin: 7px 0 0;
}

.borrower-page-head .h2-icon {
  color: #121212;
  background: var(--yellow);
}

.standing-hero {
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(255,255,255,.9);
  box-shadow: var(--shadow-card);
}

.standing-hero::after {
  width: 180px;
  height: 180px;
  right: -52px;
  top: -82px;
  opacity: .26;
}

.standing-hero::before {
  content: "";
  position: absolute;
  right: 42px;
  top: 20px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(18,18,18,.18);
  box-shadow: 22px 24px 0 -3px rgba(18,18,18,.12);
}

.standing-hero .standing-eyebrow,
.standing-hero .standing-expand-hint { color: var(--text-muted); }

.dock {
  left: 10px;
  right: 10px;
  bottom: calc(10px + var(--standalone-bottom-shift, 0px));
  border: 1px solid rgba(18,18,18,.08);
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(18,18,18,.18);
}
.dock::after { display: none; }
.dock-item.active { color: #121212; }
.dock-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: var(--yellow);
}

.modal {
  border: 1px solid rgba(18,18,18,.08);
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(18,18,18,.22);
}

@media (min-width: 480px) {
  .section-header {
    align-items: flex-end;
    padding: 24px;
  }
}

@media (min-width: 720px) {
  .kpi-row { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .dashboard-main > .tab-content { padding: 22px; }
  .section-header,
  .borrower-page-head { padding: 26px 28px; border-radius: 24px; }
}

@media (min-width: 900px) {
  .sidebar {
    width: 212px;
    padding: 12px;
    border-radius: 24px;
  }
  .sidebar-item {
    border-left: 0;
    border-radius: 13px;
  }
  .sidebar-item.active { border-left-color: transparent; }
  .kpi-row {
    grid-template-columns: repeat(6, minmax(0,1fr));
    background: linear-gradient(var(--bg) 82%, transparent);
  }
}

@keyframes tinubuan-tab-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .tab-content { animation: none; }
}

/* ============================================================
   KADAYAWAN SEASON — AUGUST, ASIA/MANILA
   A restrained festival layer built from color and simple geometric CSS.
   The official Kadayawan mark is the only seasonal image used.
   ============================================================ */

body.kadayawan-season {
  --kadayawan-plum: #6b2a61;
  --kadayawan-coral: #c85b4a;
  --kadayawan-leaf: #11624e;
  --kadayawan-leaf-dark: #173f38;
  --kadayawan-gold: #dda83a;
  --kadayawan-cream: #fbf8f1;
  --kadayawan-ink: #1e2927;
  background:
    radial-gradient(circle at 5% 4%, rgba(107,42,97,.07), transparent 22rem),
    radial-gradient(circle at 96% 8%, rgba(17,98,78,.08), transparent 26rem),
    linear-gradient(180deg, #faf8f3, #f1f0eb 72%);
}

.kadayawan-season .app-header {
  border-top: 0;
  border-bottom: 1px solid rgba(221,168,58,.72);
  background: linear-gradient(110deg, #1c2d2a 0%, #173f38 72%, #245548 100%);
  box-shadow: 0 12px 30px rgba(21,46,40,.2);
}

.kadayawan-season .app-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  opacity: .92;
  background: repeating-linear-gradient(
    135deg,
    var(--kadayawan-gold) 0 12px,
    var(--kadayawan-coral) 12px 24px,
    var(--kadayawan-plum) 24px 36px,
    #3c826f 36px 48px
  );
  pointer-events: none;
}

.kadayawan-season .app-header::after {
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: 1px;
  border: 0;
  border-radius: 0;
  transform: none;
  background: rgba(255,255,255,.15);
  box-shadow: none;
}

.kadayawan-season .dashboard-wordmark {
  width: clamp(108px, 27vw, 132px);
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 12px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 7px 18px rgba(8,29,24,.2);
  filter: none;
}

.kadayawan-season .group-heading {
  color: rgba(255,255,255,.94);
  border-color: rgba(255,255,255,.2);
  background: rgba(7,28,24,.28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}

.kadayawan-season .avatar-btn {
  color: var(--kadayawan-leaf-dark);
  border-color: rgba(255,255,255,.86);
  background: #fffaf0;
  box-shadow:
    0 8px 20px rgba(7,29,24,.26),
    inset 0 0 0 2px rgba(221,168,58,.7);
}

.kadayawan-season .header-notification-btn {
  color: var(--kadayawan-leaf-dark);
  border-color: rgba(255,255,255,.86);
  background: #fffaf0;
  box-shadow:
    0 8px 20px rgba(7,29,24,.26),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.kadayawan-season .header-notification-btn:hover,
.kadayawan-season .header-notification-btn.active {
  background: var(--yellow);
}

.kadayawan-season-banner {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  min-height: 94px;
  padding:
    12px
    max(16px, env(safe-area-inset-right, 0px))
    14px
    max(16px, env(safe-area-inset-left, 0px));
  overflow: hidden;
  color: var(--kadayawan-ink);
  background: rgba(255,253,248,.97);
  border-bottom: 1px solid rgba(40,67,60,.1);
  box-shadow: 0 10px 26px rgba(34,57,51,.09);
}

.kadayawan-season-banner::before {
  content: "";
  position: absolute;
  top: -58px;
  right: -42px;
  width: 240px;
  height: 190px;
  opacity: .11;
  transform: rotate(12deg);
  background:
    linear-gradient(135deg, transparent 41%, var(--kadayawan-plum) 42% 48%, transparent 49%) 0 0 / 44px 44px,
    linear-gradient(45deg, transparent 41%, var(--kadayawan-leaf) 42% 48%, transparent 49%) 0 0 / 44px 44px;
  pointer-events: none;
}

.kadayawan-season-banner::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--kadayawan-leaf) 0 34%,
    var(--kadayawan-gold) 34% 58%,
    var(--kadayawan-coral) 58% 79%,
    var(--kadayawan-plum) 79%
  );
}

.kadayawan-logo-panel {
  position: relative;
  z-index: 1;
  display: flex;
  width: clamp(104px, 23vw, 148px);
  padding: 3px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(34,57,51,.13);
  border-radius: 12px;
  box-shadow: 0 7px 18px rgba(34,57,51,.11);
}

.kadayawan-official-logo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 9px;
}

.kadayawan-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.18;
}

.kadayawan-copy strong {
  color: var(--kadayawan-leaf-dark);
  font-size: clamp(17px, 3.6vw, 22px);
  font-weight: 850;
  letter-spacing: -.025em;
}

.kadayawan-copy small {
  margin-top: 4px;
  color: #65736e;
  font-size: 12px;
  font-weight: 620;
}

.kadayawan-copy .kadayawan-eyebrow {
  margin: 0 0 4px;
  color: var(--kadayawan-plum);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.kadayawan-year {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  min-width: 62px;
  min-height: 62px;
  padding: 8px 10px;
  color: var(--kadayawan-leaf-dark);
  background: #f1f6f2;
  border: 1px solid rgba(17,98,78,.2);
  border-radius: 14px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 #fff;
}

.kadayawan-year small {
  color: var(--kadayawan-plum);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.kadayawan-year strong {
  margin-top: 2px;
  font-size: 15px;
  letter-spacing: .04em;
}

.kadayawan-season .dashboard-main > .tab-content {
  border-color: rgba(34,57,51,.1);
  background: rgba(255,255,253,.88);
  box-shadow: 0 15px 34px rgba(34,57,51,.075);
}

.kadayawan-season .section-header,
.kadayawan-season .borrower-page-head {
  border: 1px solid rgba(255,255,255,.13);
  background: linear-gradient(118deg, #1d2d2a 0%, #17483d 78%, #1f5b4d 100%);
  box-shadow: 0 13px 28px rgba(25,58,49,.16);
}

.kadayawan-season .section-header::before,
.kadayawan-season .borrower-page-head::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -64px;
  right: -34px;
  width: 210px;
  height: 190px;
  opacity: .12;
  transform: rotate(10deg);
  background:
    linear-gradient(135deg, transparent 42%, #fff 43% 47%, transparent 48%) 0 0 / 38px 38px,
    linear-gradient(45deg, transparent 42%, var(--kadayawan-gold) 43% 47%, transparent 48%) 0 0 / 38px 38px;
}

.kadayawan-season .section-header::after,
.kadayawan-season .borrower-page-head::after {
  inset: auto 0 0;
  width: auto;
  height: 4px;
  border-radius: 0;
  opacity: 1;
  background: linear-gradient(
    90deg,
    var(--kadayawan-gold) 0 44%,
    var(--kadayawan-coral) 44% 66%,
    var(--kadayawan-plum) 66% 82%,
    #3c826f 82%
  );
}

.kadayawan-season .section-kicker {
  color: #2f2411;
  background: #f0c868;
  box-shadow: none;
}

.kadayawan-season .section-header .add-btn {
  color: var(--kadayawan-leaf-dark);
  background: #fff;
  border-color: rgba(255,255,255,.7);
}

.kadayawan-season .kpi-card::before,
.kadayawan-season .summary-card::before {
  width: 4px;
  background: var(--kadayawan-leaf);
}

.kadayawan-season .kpi-card:nth-child(4n + 2)::before,
.kadayawan-season .summary-card:nth-child(4n + 2)::before {
  background: var(--kadayawan-gold);
}

.kadayawan-season .kpi-card:nth-child(4n + 3)::before,
.kadayawan-season .summary-card:nth-child(4n + 3)::before {
  background: var(--kadayawan-coral);
}

.kadayawan-season .kpi-card:nth-child(4n)::before,
.kadayawan-season .summary-card:nth-child(4n)::before {
  background: var(--kadayawan-plum);
}

.kadayawan-season .kpi-card,
.kadayawan-season .summary-card {
  border-color: rgba(34,57,51,.11);
  background: rgba(255,255,255,.94);
  box-shadow: 0 9px 22px rgba(34,57,51,.065);
}

.kadayawan-season .sidebar-item.active {
  color: #fff;
  background: var(--kadayawan-leaf-dark);
  box-shadow: 0 7px 16px rgba(23,63,56,.16);
}

.kadayawan-season .dock {
  border: 1px solid rgba(34,57,51,.12);
  background: rgba(255,253,248,.97);
  box-shadow: 0 -9px 28px rgba(34,57,51,.12);
}

.kadayawan-season .dock-item.active { color: var(--kadayawan-leaf-dark); }
.kadayawan-season .dock-item.active::after { background: var(--kadayawan-gold); }
.kadayawan-season .dock-center-btn.active {
  background: var(--kadayawan-leaf-dark);
  box-shadow: 0 8px 18px rgba(23,63,56,.28);
}
.kadayawan-season .dock-center-btn.active svg { color: #fff; }

.kadayawan-season .fab-chat {
  color: var(--text);
  border-color: rgba(18,18,18,.08);
  background: var(--yellow);
  box-shadow: 0 9px 22px rgba(255,209,0,.38), 0 2px 8px rgba(18,18,18,.16);
}

.kadayawan-season .card > .kadayawan-season-banner {
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 11px;
  min-height: 78px;
  margin: 0 -8px 22px;
  padding: 8px 10px 11px;
  border: 1px solid rgba(34,57,51,.11);
  border-radius: 17px;
  box-shadow: 0 10px 22px rgba(34,57,51,.08);
}

/* ============================================================
   MASTER ADMIN → GROUP TREASURER TAB ACCESS
   ============================================================ */

.access-control-modal {
  width: min(620px, calc(100vw - 28px));
  max-width: 620px;
}

.access-modal-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.access-modal-intro {
  margin: -2px 0 14px;
  line-height: 1.55;
}

.access-group-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  max-width: 100%;
  margin-bottom: 14px;
  padding: 7px 12px;
  overflow: hidden;
  color: var(--text);
  background: #fff8db;
  border: 1px solid rgba(189, 143, 0, .22);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.access-bulk-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.access-toggle-list {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
}

.access-toggle-list > .muted,
.access-toggle-list > .error {
  margin: 0;
  padding: 20px;
}

.access-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 66px;
  padding: 13px 15px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background-color 150ms ease;
}

.access-toggle-row:last-child { border-bottom: 0; }
.access-toggle-row:hover { background: var(--surface-2); }

.access-toggle-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.access-toggle-copy strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
}

.access-toggle-copy small {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.access-switch {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
}

.access-switch input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}

.access-switch-track {
  position: absolute;
  inset: 0;
  background: #d9d8d2;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(18,18,18,.08);
  transition: background-color 170ms ease, box-shadow 170ms ease;
}

.access-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 7px rgba(18,18,18,.2);
  transition: transform 170ms ease;
}

.access-switch input:checked + .access-switch-track {
  background: var(--yellow-deep);
  box-shadow: inset 0 0 0 1px rgba(18,18,18,.08), 0 0 0 3px rgba(255,209,0,.14);
}

.access-switch input:checked + .access-switch-track::after {
  transform: translateX(20px);
}

.access-switch input:focus-visible + .access-switch-track {
  outline: 3px solid rgba(18,18,18,.25);
  outline-offset: 3px;
}

.access-save-btn {
  width: 100%;
  margin-top: 14px;
}

.access-manage-btn {
  color: var(--text);
  border-color: rgba(18,18,18,.18);
  background: #fff8db;
}

/* Treasurer-side locked navigation */

.sidebar-item.is-locked,
.sidebar-item.is-locked:hover {
  color: var(--text-muted);
  background: rgba(18,18,18,.035);
  box-shadow: none;
  cursor: pointer;
  opacity: .72;
}

.sidebar-lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 3px 6px;
  color: var(--text-muted);
  background: rgba(18,18,18,.055);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
  flex-shrink: 0;
}

.sidebar-lock-badge svg {
  width: 12px;
  height: 12px;
}

.treasurer-access-empty {
  display: grid;
  justify-items: center;
  margin: 10px 0 24px;
  padding: clamp(32px, 8vw, 58px) 22px;
  text-align: center;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
}

.treasurer-access-empty[hidden] { display: none; }

.treasurer-access-empty-icon,
.tab-locked-symbol {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 15px;
  color: var(--text);
  background: #fff8db;
  border: 1px solid rgba(189,143,0,.18);
  border-radius: 18px;
}

.treasurer-access-empty-icon svg,
.tab-locked-symbol svg {
  width: 27px;
  height: 27px;
}

.treasurer-access-empty h2 {
  margin: 8px 0 8px;
}

.treasurer-access-empty p {
  max-width: 560px;
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}

.tab-locked-symbol {
  margin: 3px auto 16px;
}

.kadayawan-season .access-group-chip,
.kadayawan-season .treasurer-access-empty-icon,
.kadayawan-season .tab-locked-symbol {
  color: var(--kadayawan-leaf-dark);
  background: rgba(213,165,59,.13);
  border-color: rgba(213,165,59,.25);
}

.kadayawan-season .access-switch input:checked + .access-switch-track {
  background: var(--kadayawan-leaf-dark);
  box-shadow: inset 0 0 0 1px rgba(18,18,18,.08), 0 0 0 3px rgba(23,63,56,.12);
}

.kadayawan-season .access-manage-btn {
  color: var(--kadayawan-leaf-dark);
  background: rgba(213,165,59,.13);
  border-color: rgba(213,165,59,.25);
}

/* Treasurer scheduled-interest notifications */

.interest-notifications-header {
  align-items: flex-end;
}

.notification-mark-all {
  min-height: 42px;
  padding: 9px 14px;
  color: var(--text);
  background: #fff;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 13px;
  font-size: 12px;
  font-weight: 850;
}
.notification-mark-all[hidden] { display: none !important; }

.notification-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.notification-filters {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.notification-filter {
  min-height: 38px;
  padding: 8px 12px;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
}

.notification-filter.active {
  color: var(--text);
  background: #fff;
  box-shadow: 0 3px 10px rgba(18,18,18,.08);
}

.notification-filter span {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  margin-left: 3px;
  padding: 0 5px;
  color: #fff;
  background: #8f2f63;
  border-radius: 999px;
  font-size: 9px;
}

.notification-search {
  width: min(100%, 320px);
  margin: 0;
}
.notification-search input {
  width: 100%;
  max-width: none;
}

.interest-notification-count {
  min-height: 22px;
  margin: 0 2px 10px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
}

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

.interest-notification-item {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 6px 16px rgba(18,18,18,.035);
}

.interest-notification-item.is-unread {
  background: linear-gradient(90deg, #fffaf0 0%, #fff 44%);
  border-color: rgba(189,143,0,.28);
  box-shadow: inset 4px 0 0 var(--yellow), 0 8px 20px rgba(18,18,18,.045);
}

.interest-notification-item.is-read {
  background: rgba(255,255,255,.7);
}

.interest-notification-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--text);
  background: var(--yellow);
  border-radius: 14px;
}

.interest-notification-icon svg {
  width: 22px;
  height: 22px;
}

.interest-notification-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.interest-notification-name {
  color: var(--text);
  font-size: 15px;
  font-weight: 850;
}

.interest-notification-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.notification-state {
  padding: 3px 7px;
  color: var(--text-muted);
  background: var(--surface-2);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.is-unread .notification-state {
  color: #624400;
  background: #ffe996;
}

.interest-notification-body > strong {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.interest-notification-body small {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.45;
}

.interest-notification-body .notification-read-time {
  margin-top: 1px;
  font-style: italic;
}

.interest-notification-amount {
  display: flex;
  min-width: 112px;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.interest-notification-amount small,
.interest-notification-amount span {
  color: var(--text-muted);
  font-size: 10px;
}

.interest-notification-amount strong {
  margin: 2px 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
}

.notification-read-toggle {
  margin-top: 8px;
  padding: 6px 9px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 10px;
  font-weight: 800;
}

.notification-read-toggle:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

.notification-read-toggle:disabled { opacity: .55; }

.interest-notification-empty {
  padding: 34px 20px;
  text-align: center;
  background: rgba(255,255,255,.74);
  border: 1px dashed var(--border);
  border-radius: 18px;
}

.interest-notification-empty p {
  max-width: 480px;
  margin: 7px auto 0;
  color: var(--text-muted);
  line-height: 1.5;
}

.kadayawan-season .interest-notification-icon {
  color: var(--kadayawan-leaf-dark);
  background: var(--yellow);
}

.kadayawan-season .notification-filter.active {
  color: var(--kadayawan-leaf-dark);
  box-shadow: inset 0 0 0 1px rgba(213,165,59,.22), 0 3px 10px rgba(18,18,18,.08);
}

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

@media (max-width: 899px) {
  .sidebar-lock-badge span { display: none; }
  .sidebar-lock-badge { padding: 3px; }
}

@media (min-width: 900px) {
  .sidebar { width: 248px; }
}

@media (max-width: 520px) {
  .access-toggle-row { align-items: flex-start; }
  .access-switch { margin-top: 4px; }
  .access-bulk-actions .small-btn { flex: 1; }
  .interest-notifications-header { align-items: flex-start; }
  .notification-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .notification-filters,
  .notification-search { width: 100%; }
  .notification-filter { flex: 1; }
  .interest-notification-item {
    grid-template-columns: 40px minmax(0,1fr);
    align-items: start;
    gap: 12px;
    padding: 14px;
  }
  .interest-notification-icon {
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }
  .interest-notification-amount {
    grid-column: 2;
    min-width: 0;
    align-items: flex-start;
    text-align: left;
  }
  .notification-read-toggle { align-self: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .header-notification-btn.has-unread svg { animation: none; }
}

.kadayawan-season .card > .kadayawan-season-banner .kadayawan-logo-panel { width: 94px; }
.kadayawan-season .card > .kadayawan-season-banner .kadayawan-year { display: none; }
.kadayawan-season .card > .kadayawan-season-banner .kadayawan-copy strong { font-size: 15px; }
.kadayawan-season .card > .kadayawan-season-banner .kadayawan-copy small:not(.kadayawan-eyebrow) { font-size: 10px; }

.kadayawan-season #login-view .card {
  border: 1px solid rgba(34,57,51,.12);
  box-shadow: 0 22px 56px rgba(34,57,51,.13);
}

.kadayawan-season #login-view {
  background:
    radial-gradient(circle at 12% 12%, rgba(107,42,97,.08), transparent 18rem),
    radial-gradient(circle at 88% 8%, rgba(17,98,78,.1), transparent 20rem),
    var(--kadayawan-cream);
}

.kadayawan-season > .weave-band {
  position: fixed;
  z-index: 3;
  inset: 0 0 auto;
  height: 5px;
  border: 0;
  background: repeating-linear-gradient(
    135deg,
    var(--kadayawan-gold) 0 12px,
    var(--kadayawan-coral) 12px 24px,
    var(--kadayawan-plum) 24px 36px,
    #3c826f 36px 48px
  );
}

@media (max-width: 479px) {
  .kadayawan-season-banner {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 11px;
    min-height: 82px;
    padding-top: 9px;
    padding-bottom: 12px;
  }
  .kadayawan-logo-panel { width: 88px; }
  .kadayawan-copy strong { font-size: 16px; }
  .kadayawan-copy small { font-size: 10px; }
  .kadayawan-year { display: none; }
}

@media (min-width: 640px) {
  .kadayawan-season-banner {
    min-height: 102px;
    padding-left: max(28px, env(safe-area-inset-left, 0px));
    padding-right: max(28px, env(safe-area-inset-right, 0px));
  }
  .kadayawan-copy small { font-size: 13px; }
  .kadayawan-year { min-width: 68px; min-height: 68px; }
  .kadayawan-logo-panel { width: 148px; }
}

/* ---- Native notification diagnostics ---- */

.push-diagnostics-card { max-width: 520px; }
.push-diagnostics-eyebrow {
  margin: 0 0 3px;
  color: var(--yellow-deep);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.push-diagnostics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 9px;
}

.push-diagnostics-grid > div {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.push-diagnostics-grid > div > span:first-child,
.push-diagnostics-timeline span {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 650;
}

.diagnostic-state {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}
.diagnostic-state.is-good { color: #245F3A; background: #E4F4E8; }
.diagnostic-state.is-bad { color: #8B352D; background: #FBE9E6; }

.push-diagnostics-timeline {
  margin-top: 12px;
  padding: 4px 14px;
  border: 1px solid var(--border);
  border-radius: 15px;
}

.push-diagnostics-timeline > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.push-diagnostics-timeline > div:last-child { border-bottom: 0; }
.push-diagnostics-timeline strong {
  max-width: 58%;
  font-size: 12px;
  text-align: right;
  overflow-wrap: anywhere;
}

.push-server-status {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: rgba(255,209,0,.10);
  border-left: 3px solid var(--yellow);
  border-radius: 3px 12px 12px 3px;
}

.push-diagnostics-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
}
.push-diagnostics-actions button { width: auto; }
.push-settings-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  text-decoration: none;
}
.push-test-feedback {
  min-height: 18px;
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
}
.push-test-feedback.is-success { color: var(--success); }
.push-test-feedback.is-error { color: var(--danger); }

@media (max-width: 380px) {
  .push-diagnostics-grid { grid-template-columns: 1fr; }
  .push-diagnostics-timeline > div { align-items: flex-start; flex-direction: column; gap: 3px; }
  .push-diagnostics-timeline strong { max-width: 100%; text-align: left; }
}