:root{--pl:#4C1A5C;--pd:#260030;--gold:#FCDA59;--gd:#CC9A00;--ink:#1A1D24;--mut:#717784;--wash:#F7F1FA;--line:#E8E4EC;--rad:16px}
*{box-sizing:border-box}
body{margin:0;font-family:"Montserrat",system-ui,sans-serif}
/* Login */
.fam-login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#F5EFFA;padding:20px}
.fam-login-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:44px 40px;width:100%;max-width:420px;box-shadow:0 24px 60px -20px rgba(38,0,48,.18);text-align:center}
.fam-login-logo{width:76px;height:76px;object-fit:contain;border-radius:50%;margin:0 auto 14px;display:block}
.fam-login-church{font-size:11px;font-weight:700;color:#9d8fb0;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.fam-login-title{font-family:"Cormorant Garamond",Georgia,serif;font-size:28px;font-weight:700;color:var(--pd);margin:0 0 8px}
.fam-login-sub{font-size:14px;color:var(--mut);margin:0 0 26px;line-height:1.5}
.fam-err{background:#FBEAE9;border:1px solid #F1C6C2;color:#7A211B;font-size:13px;font-weight:600;padding:10px 14px;border-radius:10px;margin-bottom:16px;text-align:left}
.fam-field{text-align:left;margin-bottom:16px}
.fam-field label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin-bottom:6px}
.fam-field input{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:13px 16px;font-family:inherit;font-size:15px;color:var(--ink);outline:0;transition:border-color .15s}
.fam-field input:focus{border-color:var(--pl);box-shadow:0 0 0 3px rgba(76,26,92,.1)}
.fam-pw-wrap{position:relative;display:flex;align-items:center}
.fam-pw-wrap input{padding-right:48px;width:100%}
.fam-eye{position:absolute;right:12px;background:none;border:none;cursor:pointer;color:#9d8fb0;display:flex;padding:4px;transition:color .15s}
.fam-eye:hover{color:var(--pl)}
/* Buttons */
.fam-btn{display:inline-flex;align-items:center;gap:7px;border:none;border-radius:10px;padding:10px 18px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:.15s;white-space:nowrap;text-decoration:none}
.fam-btn:disabled{opacity:.6;cursor:not-allowed}
.fam-btn-primary{background:var(--pl);color:#fff;width:100%;height:50px;justify-content:center;font-size:15px;border-radius:13px;margin-top:8px}
.fam-btn-primary:hover{background:var(--pd)}
.fam-btn-ghost{background:none;border:1.5px solid var(--line);color:var(--pl)}
.fam-btn-ghost:hover{background:var(--wash)}
.fam-btn-gold{background:var(--gold);color:#2B1F00}
.fam-btn-gold:hover{background:var(--gd)}
.fam-btn-sm{font-size:12px;padding:5px 12px;border-radius:8px;border:1.5px solid var(--line);background:var(--wash);color:var(--pl);gap:4px}
.fam-btn-sm:hover{border-color:var(--pl)}
.fam-rev{border-color:var(--pl)!important}
.fam-unrev{border-color:#CB9CDA!important;color:#888!important}
/* Portal header */
.fam-portal{min-height:100vh;background:#FAF5FC;display:flex;flex-direction:column}
.fam-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;gap:16px;flex-wrap:wrap}
.fam-hd-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;color:var(--pd)}
.fam-hd-logo{width:38px;height:38px;object-fit:contain;border-radius:50%}
.fam-hd-right{display:flex;align-items:center;gap:12px}
.fam-hd-user{font-size:13px;color:var(--mut);display:flex;align-items:center;gap:6px}
/* Tabs */
.fam-tabs{display:flex;gap:4px;padding:20px 28px 0;background:#fff;border-bottom:1px solid var(--line)}
.fam-tab{background:none;border:none;border-bottom:3px solid transparent;padding:10px 18px;font-family:inherit;font-size:14px;font-weight:600;color:var(--mut);cursor:pointer;transition:.15s;margin-bottom:-1px;border-radius:8px 8px 0 0}
.fam-tab:hover{color:var(--pl);background:var(--wash)}
.fam-tab.active{color:var(--pl);border-bottom-color:var(--pl);background:var(--wash)}
/* Body */
.fam-body{padding:24px 28px;flex:1}
/* Filters */
.fam-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 20px;margin-bottom:20px}
.fam-ff{display:flex;flex-direction:column;gap:5px;flex:1;min-width:120px}
.fam-ff label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}
.fam-ff input,.fam-ff select{border:1.5px solid var(--line);border-radius:9px;padding:8px 12px;font-family:inherit;font-size:13px;color:var(--ink);outline:0;background:#fff}
.fam-ff input:focus{border-color:var(--pl)}
/* Table */
.fam-tbl-wrap{overflow-x:auto;border-radius:16px;border:1px solid var(--line);background:#fff}
.fam-tbl{width:100%;border-collapse:collapse;font-size:14px}
.fam-tbl thead{background:var(--wash)}
.fam-tbl th{padding:11px 14px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);white-space:nowrap;border-bottom:1px solid var(--line);text-align:left}
.fam-tbl td{padding:12px 14px;border-bottom:1px solid #F3EEF7;color:var(--ink);vertical-align:middle}
.fam-tbl tbody tr:last-child td{border:none}
.fam-tbl tbody tr:hover td{background:#FAF5FF}
.fam-row-rev td{opacity:.7}
.fam-loading{text-align:center;padding:36px;color:var(--mut)}
.fam-badge{display:inline-block;background:#EDE0F5;color:var(--pl);font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}
.fam-rev-badge{display:inline-flex;align-items:center;gap:4px;background:#E4F6E4;color:#2D6A31;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}
.fam-check{color:#2D6A31;font-weight:800}
.fam-st{display:inline-block;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px}
.fam-st-success,.fam-st-active{background:#E4F6E4;color:#2D6A31}
.fam-st-failed,.fam-st-inactive{background:#FBEAE9;color:#7A211B}
.fam-st-new{background:#FFF3CC;color:#7A5C00}
/* Pager */
.fam-pager{display:flex;justify-content:center;gap:8px;margin-top:18px;flex-wrap:wrap}
.fam-pg{border:1.5px solid var(--line);background:#fff;border-radius:8px;padding:7px 13px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;color:var(--pl)}
.fam-pg.on{background:var(--pl);color:#fff;border-color:var(--pl)}
.fam-pg:hover:not(.on){background:var(--wash)}
/* Spinner */
@keyframes fam-spin{to{transform:rotate(360deg)}}
.fam-spin{display:inline-block;animation:fam-spin 1s linear infinite;vertical-align:middle}
/* Dark mode */
@media(prefers-color-scheme:dark){
  .fam-login-wrap{background:#1F0F27}
  .fam-login-card{background:#2A1433;border-color:#4C2A5C}
  .fam-login-title{color:#F3EAF6}
  .fam-login-sub,.fam-login-church{color:#C9B9D1}
  .fam-field input{background:#1F0F27;border-color:#4C2A5C;color:#F3EAF6}
  .fam-portal{background:#1F0F27}
  .fam-hd{background:#2A1433;border-color:#4C2A5C}
  .fam-hd-brand{color:#F3EAF6}
  .fam-tabs{background:#2A1433;border-color:#4C2A5C}
  .fam-tab{color:#C9B9D1}
  .fam-tab:hover,.fam-tab.active{background:#33183F;color:#F3EAF6}
  .fam-filters{background:#2A1433;border-color:#4C2A5C}
  .fam-ff input{background:#1F0F27;border-color:#4C2A5C;color:#F3EAF6}
  .fam-tbl-wrap{background:#1F0F27;border-color:#4C2A5C}
  .fam-tbl thead{background:#2A1433}
  .fam-tbl td{color:#F3EAF6;border-color:#33183F}
  .fam-tbl tbody tr:hover td{background:#33183F}
  .fam-pg{background:#2A1433;border-color:#4C2A5C;color:#D4BEDE}
  .fam-badge{background:#3B1C49;color:#D4BEDE}
  .fam-btn-ghost{border-color:#4C2A5C;color:#D4BEDE}
}
/* Brand header text */
.fam-hd-txt{display:flex;flex-direction:column;line-height:1.12}
.fam-hd-feci{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gd)}
.fam-hd-group{font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;font-weight:700;color:var(--pd)}
.fam-hd-user{font-weight:600;color:var(--ink)}
/* Dark-mode contrast fixes */
@media(prefers-color-scheme:dark){
  :root{--mut:#C9B9D1}
  .fam-hd-feci{color:var(--gold)}
  .fam-hd-group{color:#F3EAF6}
  .fam-hd-user{color:#D9CBE1}
  .fam-hd-user .material-symbols-rounded{color:#D9CBE1}
  .fam-btn-ghost{color:#EBDDF2}
  .fam-tbl th{color:#C9B9D1}
  .fam-ff label{color:#C9B9D1}
  .fam-tab{color:#C9B9D1}
}