:root {
  --glass-card: linear-gradient(135deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.07) 34%, rgba(255,255,255,.025) 68%, rgba(255,255,255,.16) 100%);
  --glass-card-strong: linear-gradient(135deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,.14) 42%, rgba(255,255,255,.07) 76%, rgba(255,255,255,.22) 100%);
  --glass-nav: linear-gradient(180deg, rgba(248,255,253,.3), rgba(221,241,236,.12));
  --glass-line: rgba(255, 255, 255, .78);
  --glass-shadow: 0 18px 46px rgba(8, 58, 51, .12);
  --glass-rim: inset 0 1.5px 0 rgba(255,255,255,.98), inset 0 -1px 0 rgba(7,75,68,.24), inset 1px 0 0 rgba(255,255,255,.62), inset -1px 0 0 rgba(7,75,68,.1);
}

.app-header {
  background: var(--glass-nav);
  border-bottom-color: rgba(255,255,255,.78);
  box-shadow: var(--glass-rim), 0 8px 30px rgba(12,73,65,.09);
  -webkit-backdrop-filter: blur(8px) saturate(185%) contrast(106%);
  backdrop-filter: blur(8px) saturate(185%) contrast(106%);
}

.side-nav {
  border-right-color: rgba(255,255,255,.58);
  background: linear-gradient(90deg, rgba(238,251,247,.22), rgba(224,243,238,.08));
  box-shadow: inset -1px 0 0 rgba(20,127,116,.12);
  -webkit-backdrop-filter: blur(9px) saturate(180%) contrast(105%);
  backdrop-filter: blur(9px) saturate(180%) contrast(105%);
}

.brand-logo-glass {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 0 0 auto;
  width: 58px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(255,255,255,.38), rgba(255,255,255,.06) 60%, rgba(218,241,235,.18));
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.98), inset 0 -1px 0 rgba(5,68,60,.24), inset 1px 0 0 rgba(255,255,255,.68), inset -1px 0 0 rgba(5,68,60,.1), 0 9px 20px rgba(7,58,51,.12);
  -webkit-backdrop-filter: blur(5px) saturate(195%) contrast(108%);
  backdrop-filter: blur(5px) saturate(195%) contrast(108%);
}

.brand-logo-glass::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -55% -80%;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 42%, rgba(255,255,255,.68) 50%, rgba(255,255,255,.12) 57%, transparent 65%);
}

.brand-logo {
  position: relative;
  z-index: 1;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
  opacity: .96;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 2px 3px rgba(7,58,51,.12));
}

@media (max-width: 720px) {
  .brand-logo-glass {
    width: 50px;
    height: 44px;
  }
}

@media (max-width: 360px) {
  .brand-logo-glass {
    width: 44px;
    height: 38px;
  }
}

.active-role-button,
.compact-button,
.header-icon:hover {
  border-color: rgba(255,255,255,.74);
  background: var(--glass-card-strong);
  box-shadow: var(--glass-rim), 0 8px 20px rgba(14,74,66,.08);
  -webkit-backdrop-filter: blur(5px) saturate(180%);
  backdrop-filter: blur(5px) saturate(180%);
}

.nav-button:hover { background: var(--glass-card-strong); }
.nav-button.active {
  border-color: rgba(255,255,255,.7);
  background: var(--glass-card-strong);
  box-shadow: var(--glass-rim), inset 0 0 0 1px rgba(20,127,116,.38), 0 12px 25px rgba(14,74,66,.09);
  -webkit-backdrop-filter: blur(5px) saturate(185%);
  backdrop-filter: blur(5px) saturate(185%);
}

.summary-tile,
.list-row,
.dashboard-link,
.timeline-card,
.member-card,
.group-card,
.notification-card,
.calendar-day-event,
.finance-person-card,
.mobile-card-table tr,
.finance-table tr,
.signature-preview,
.contact-card,
.feedback-card,
.workflow-card,
.trial-guest-card,
.member-editor,
.message-action-button,
.quick-add,
.credential-panel,
.setting-toggle-row,
.ocr-import,
.member-file-records > article,
.source-file-list > div,
.social-link,
.folder-node,
.empty {
  border: 1px solid var(--glass-line);
  background: var(--glass-card);
  box-shadow: var(--glass-rim), inset 0 0 0 1px rgba(20,127,116,.12), var(--glass-shadow);
  -webkit-backdrop-filter: blur(5px) saturate(190%) contrast(106%) brightness(1.02);
  backdrop-filter: blur(5px) saturate(190%) contrast(106%) brightness(1.02);
}

.section-band {
  background: transparent;
  box-shadow: none;
}

.chip,
.application-file-link,
.file-selection-info,
.member-group-fieldset .checkline,
.card-pill,
.trial-counter,
.calendar-event-pill,
.file-button,
.active-role-popover,
.modal .icon-button,
.mobile-nav-dialog .icon-button {
  border-color: rgba(255,255,255,.86);
  background: var(--glass-card-strong);
  box-shadow: var(--glass-rim), inset 0 0 0 1px rgba(20,127,116,.14), 0 9px 22px rgba(7,58,51,.09);
  -webkit-backdrop-filter: blur(4px) saturate(185%) contrast(105%);
  backdrop-filter: blur(4px) saturate(185%) contrast(105%);
}

.chip:hover,
.chip.selected,
.application-file-link:hover,
.message-action-button:hover,
.message-action-button:focus-visible,
.option-button.active {
  border-color: rgba(255,255,255,.94);
  background: linear-gradient(135deg, rgba(220,251,244,.46), rgba(255,255,255,.08));
  box-shadow: var(--glass-rim), inset 0 0 0 1px rgba(20,127,116,.58), 0 14px 30px rgba(7,58,51,.12);
}

.active-role-popover::before {
  border-color: rgba(255,255,255,.86);
  background: rgba(236,248,244,.68);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.82);
}

.feedback-card.unread,
.trial-guest-card.threshold-reached {
  background: linear-gradient(135deg, rgba(255,244,210,.3), rgba(255,255,255,.045) 72%);
}

.application-document-card {
  border-left-color: rgba(20,127,116,.78);
}

.status,
.badge,
.card-pill,
.trial-counter,
.calendar-event-pill {
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), inset 0 -1px 0 rgba(7,75,68,.12);
  -webkit-backdrop-filter: blur(3px) saturate(170%);
  backdrop-filter: blur(3px) saturate(170%);
}

.status.active,
.status.paid,
.status.forwarded { background: linear-gradient(145deg, rgba(214,247,225,.48), rgba(255,255,255,.1)); }
.status.inactive { background: linear-gradient(145deg, rgba(226,232,240,.5), rgba(255,255,255,.1)); }
.status.passive,
.status.pending,
.status.approved { background: linear-gradient(145deg, rgba(255,240,202,.5), rgba(255,255,255,.1)); }
.status.exited,
.status.late,
.status.returned,
.status.received { background: linear-gradient(145deg, rgba(255,230,232,.5), rgba(255,255,255,.1)); }
.status.trial,
.status.submitted { background: linear-gradient(145deg, rgba(230,240,251,.5), rgba(255,255,255,.1)); }
.status.none { background: linear-gradient(145deg, rgba(241,233,255,.5), rgba(255,255,255,.1)); }

.danger-button {
  border: 1px solid rgba(255,255,255,.82);
  color: var(--red-700);
  background: linear-gradient(145deg, rgba(255,225,229,.48), rgba(255,255,255,.08));
  box-shadow: var(--glass-rim), inset 0 0 0 1px rgba(162,27,36,.18), 0 10px 24px rgba(112,20,28,.09);
  -webkit-backdrop-filter: blur(4px) saturate(180%);
  backdrop-filter: blur(4px) saturate(180%);
}

.danger-button:hover {
  background: linear-gradient(145deg, rgba(255,214,220,.64), rgba(255,255,255,.12));
}

.callout,
.family-suggestion,
.correction-note,
.ocr-result,
.review-confirmation,
.warning-callout,
.file-viewer-error,
.inactive-group,
.year-folder,
.number-grid span,
.group-feature-tag {
  border-color: rgba(255,255,255,.8);
  background: var(--glass-card-strong);
  box-shadow: var(--glass-rim), inset 0 0 0 1px rgba(20,127,116,.12), 0 10px 24px rgba(7,58,51,.08);
  -webkit-backdrop-filter: blur(4px) saturate(180%) contrast(105%);
  backdrop-filter: blur(4px) saturate(180%) contrast(105%);
}

.callout {
  background: linear-gradient(145deg, rgba(230,240,251,.46), rgba(255,255,255,.07));
}

.family-suggestion,
.warning-callout,
.number-grid.used span,
.trial-counter.complete {
  background: linear-gradient(145deg, rgba(255,240,202,.46), rgba(255,255,255,.07));
}

.correction-note {
  background: linear-gradient(145deg, rgba(255,230,232,.46), rgba(255,255,255,.07));
}

.ocr-result,
.number-grid.free span,
.group-feature-tag.enabled {
  background: linear-gradient(145deg, rgba(214,247,225,.46), rgba(255,255,255,.07));
}

.member-group-fieldset .checkline:has(input:checked),
label.ocr-filled input,
label.ocr-filled select,
.group-assignment-grid label.ocr-filled {
  border-color: rgba(255,255,255,.9);
  background: linear-gradient(145deg, rgba(214,247,225,.42), rgba(255,255,255,.08));
  box-shadow: var(--glass-rim), inset 0 0 0 1px rgba(20,127,116,.38);
}

.file-viewer-close {
  border: 1px solid rgba(255,255,255,.88);
  background: var(--glass-card-strong);
  box-shadow: var(--glass-rim), 0 10px 24px rgba(7,58,51,.14);
  -webkit-backdrop-filter: blur(5px) saturate(180%);
  backdrop-filter: blur(5px) saturate(180%);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--teal-700);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 10px rgba(7,58,51,.08);
}

select option {
  color: var(--ink);
  background: #e8f3f0;
}

select option:checked {
  color: #fff;
  background: var(--teal-700);
}

.summary-tile:nth-child(1) {
  border-color: rgba(255,255,255,.88);
  background: linear-gradient(135deg, rgba(226,255,248,.28), rgba(255,255,255,.025) 70%);
  box-shadow: var(--glass-rim), inset 0 0 0 1px rgba(20,127,116,.6), var(--glass-shadow);
}
.summary-tile.blue {
  border-color: rgba(255,255,255,.88);
  background: linear-gradient(135deg, rgba(227,242,255,.28), rgba(255,255,255,.025) 70%);
  box-shadow: var(--glass-rim), inset 0 0 0 1px rgba(37,102,169,.54), var(--glass-shadow);
}
.summary-tile.amber {
  border-color: rgba(255,255,255,.88);
  background: linear-gradient(135deg, rgba(255,244,210,.28), rgba(255,255,255,.025) 70%);
  box-shadow: var(--glass-rim), inset 0 0 0 1px rgba(180,125,0,.56), var(--glass-shadow);
}
.summary-tile.red {
  border-color: rgba(255,255,255,.88);
  background: linear-gradient(135deg, rgba(255,225,229,.28), rgba(255,255,255,.025) 70%);
  box-shadow: var(--glass-rim), inset 0 0 0 1px rgba(162,27,36,.48), var(--glass-shadow);
}

.list-row:hover,
.dashboard-link:hover,
.option-button:hover {
  border-color: rgba(255,255,255,.92);
  background: linear-gradient(135deg, rgba(232,255,249,.38), rgba(255,255,255,.06));
  box-shadow: var(--glass-rim), inset 0 0 0 1px rgba(20,127,116,.48), 0 22px 48px rgba(14,74,66,.15);
}

.year-calendar {
  border-color: rgba(255,255,255,.72);
  background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.02));
  box-shadow: var(--glass-rim), var(--glass-shadow);
  -webkit-backdrop-filter: blur(5px) saturate(180%);
  backdrop-filter: blur(5px) saturate(180%);
}
.calendar-weekday { background: rgba(208,239,233,.24); }
.calendar-week-number { background: rgba(235,245,242,.16); }
.calendar-day { background: rgba(255,255,255,.055); }
.calendar-day.outside-month { background: rgba(241,247,245,.05); }
.calendar-day:hover,
.calendar-day:focus-visible { background: rgba(222,255,247,.24); }
.calendar-day.next-event-day { background: rgba(255,244,191,.72); }
.calendar-day-event.calendar-extra-event { background: rgba(255,253,244,.7); }

.modal,
.mobile-nav-dialog,
.login-panel {
  border: 1px solid rgba(255,255,255,.82);
  background: linear-gradient(145deg, rgba(250,255,253,.5), rgba(229,244,240,.22));
  box-shadow: var(--glass-rim), 0 30px 90px rgba(8,26,23,.28);
  -webkit-backdrop-filter: blur(11px) saturate(185%);
  backdrop-filter: blur(11px) saturate(185%);
}

.login-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  align-items: center;
  padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
  background: transparent;
}

.login-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.9);
  background: linear-gradient(145deg, rgba(255,255,255,.31) 0%, rgba(255,255,255,.075) 45%, rgba(226,243,238,.13) 100%);
  box-shadow: var(--glass-rim), inset 0 0 0 1px rgba(20,127,116,.12), 0 34px 88px rgba(7,58,51,.2);
  -webkit-backdrop-filter: blur(7px) saturate(195%) contrast(107%);
  backdrop-filter: blur(7px) saturate(195%) contrast(107%);
}

.login-panel::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.16) 17%, transparent 38%, transparent 73%, rgba(255,255,255,.14) 100%);
}

.login-panel > * {
  position: relative;
  z-index: 1;
}

.login-panel > .login-logo-glass {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 180px;
  height: 132px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255,255,255,.34), rgba(255,255,255,.055) 58%, rgba(221,242,236,.16));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.98), inset 0 -1px 0 rgba(5,68,60,.28), inset 1px 0 0 rgba(255,255,255,.72), inset -1px 0 0 rgba(5,68,60,.12), 0 18px 38px rgba(7,58,51,.13);
  -webkit-backdrop-filter: blur(6px) saturate(195%) contrast(108%);
  backdrop-filter: blur(6px) saturate(195%) contrast(108%);
}

.login-logo-glass::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -35% -65%;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 40%, rgba(255,255,255,.62) 49%, rgba(255,255,255,.12) 55%, transparent 64%);
  transform: translateX(-10%);
}

.login-logo-glass::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 9px;
  bottom: 7px;
  left: 9px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.92), transparent);
}

.login-logo {
  position: relative;
  z-index: 1;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
  opacity: .96;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 5px 7px rgba(7,58,51,.12));
}

@media (max-width: 720px) {
  .login-panel > .login-logo-glass {
    width: 158px;
    height: 116px;
  }
}

.login-panel input {
  border-color: rgba(255,255,255,.9);
  background: linear-gradient(135deg, rgba(255,255,255,.38), rgba(255,255,255,.11));
  box-shadow: var(--glass-rim), inset 0 0 0 1px rgba(20,127,116,.14), 0 9px 22px rgba(7,58,51,.08);
  -webkit-backdrop-filter: blur(4px) saturate(180%);
  backdrop-filter: blur(4px) saturate(180%);
}

.login-panel .icon-button {
  border-color: rgba(255,255,255,.84);
  background: var(--glass-card-strong);
  box-shadow: var(--glass-rim), 0 8px 20px rgba(7,58,51,.08);
  -webkit-backdrop-filter: blur(4px) saturate(180%);
  backdrop-filter: blur(4px) saturate(180%);
}

.login-panel .primary-button {
  border-color: rgba(255,255,255,.5);
  background: linear-gradient(145deg, rgba(20,127,116,.82), rgba(7,95,86,.68));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.46), inset 0 -1px 0 rgba(4,55,49,.28), 0 15px 30px rgba(7,95,86,.2);
  -webkit-backdrop-filter: blur(5px) saturate(175%);
  backdrop-filter: blur(5px) saturate(175%);
}

.login-panel .primary-button:hover {
  background: linear-gradient(145deg, rgba(20,127,116,.9), rgba(7,95,86,.76));
}

.login-panel .login-intro {
  display: grid;
  gap: 10px;
}

.login-panel .login-intro.hidden {
  display: none;
}

.login-panel .passkey-login-button {
  min-height: 46px;
  justify-content: center;
  border-color: rgba(255,255,255,.92);
  background: linear-gradient(145deg, rgba(255,255,255,.52), rgba(255,255,255,.15));
  box-shadow: var(--glass-rim), inset 0 0 0 1px rgba(20,127,116,.22), 0 12px 24px rgba(7,58,51,.1);
}

.passkey-login-button.is-checking svg {
  animation: spin 1s linear infinite;
}

.passkey-login-hint {
  margin: 0;
  text-align: center;
}

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

.passkey-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.84);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255,255,255,.44), rgba(255,255,255,.11));
  box-shadow: var(--glass-rim), inset 0 0 0 1px rgba(20,127,116,.1), 0 12px 26px rgba(7,58,51,.08);
  -webkit-backdrop-filter: blur(5px) saturate(180%);
  backdrop-filter: blur(5px) saturate(180%);
}

.passkey-row-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 8px;
  color: var(--primary-dark);
  background: rgba(255,255,255,.28);
  box-shadow: var(--glass-rim);
}

.passkey-row-icon svg {
  width: 22px;
  height: 22px;
}

.passkey-row > div:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.passkey-row small {
  color: var(--muted);
}

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

.passkey-actions p {
  margin: 0;
}

.passkey-remove-button.is-armed,
.passkey-dialog .danger-button.is-armed {
  border-color: rgba(185,28,28,.68);
  color: #991b1b;
  background: rgba(254,226,226,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 22px rgba(153,27,27,.14);
}

@media (max-width: 640px) {
  .passkey-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .passkey-row-icon {
    width: 38px;
    height: 38px;
  }

  .passkey-row .passkey-remove-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .passkey-actions,
  .passkey-actions .primary-button {
    width: 100%;
  }
}

.option-button,
input,
select,
textarea {
  border-color: rgba(255,255,255,.82);
  background: var(--glass-card-strong);
  box-shadow: var(--glass-rim), inset 0 0 0 1px rgba(20,127,116,.15);
  -webkit-backdrop-filter: blur(4px) saturate(175%);
  backdrop-filter: blur(4px) saturate(175%);
}

.primary-button {
  border: 1px solid rgba(255,255,255,.38);
  background: rgba(20,127,116,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 28px rgba(7,95,86,.2);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
}
.secondary-button {
  border-color: rgba(255,255,255,.86);
  background: var(--glass-card-strong);
  box-shadow: var(--glass-rim), inset 0 0 0 1px rgba(20,127,116,.36);
  -webkit-backdrop-filter: blur(4px) saturate(180%);
  backdrop-filter: blur(4px) saturate(180%);
}

button.mobile-menu-button {
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(20,127,116,.68);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 18px 38px rgba(7,95,86,.28);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .app-header, .side-nav { background: rgba(237,244,242,.96); }
  .brand-logo-glass { background: rgba(255,255,255,.92); }
  .summary-tile, .list-row, .dashboard-link, .timeline-card, .member-card, .group-card,
  .notification-card, .calendar-day-event, .finance-person-card, .mobile-card-table tr,
  .finance-table tr, .signature-preview, .option-button, .contact-card, .feedback-card,
  .workflow-card, .trial-guest-card, .member-editor, .message-action-button, .quick-add,
  .credential-panel, .setting-toggle-row, .ocr-import, .member-file-records > article,
  .source-file-list > div, .social-link, .folder-node, .empty, .callout, .family-suggestion,
  .correction-note, .ocr-result, .review-confirmation, .warning-callout, .file-viewer-error,
  .inactive-group, .year-folder, .number-grid span, .group-feature-tag, .passkey-row { background: rgba(255,255,255,.94); }
  .modal, .mobile-nav-dialog, .login-panel { background: rgba(245,251,249,.98); }
  .login-panel > .login-logo-glass { background: rgba(255,255,255,.92); }
}

@media print {
  .summary-tile, .list-row, .dashboard-link, .timeline-card, .member-card, .group-card,
  .notification-card, .calendar-day-event, .finance-person-card, .year-calendar,
  .calendar-day, .signature-preview { background: #fff; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}