:root{--focus-accent:#1b7a4f;--focus-ring:rgba(13,116,72,.45);--focus-error:#b42318;--focus-error-ring:rgba(180,35,24,.38);--green:#0a5c3a;--green2:#0d7448;--gold:#c69a4b;--ink:#17231f;--muted:#66736d;--line:#dfe7e3;--soft:#f6f8f7;--danger:#c61f2a;--shadow:0 12px 32px rgba(11,57,39,.10)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#fff}.container{width:min(1180px,calc(100% - 32px));margin:auto}.narrow{width:min(860px,calc(100% - 32px))}.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid #edf1ef}.nav-wrap{min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;min-width:0}.brand img{width:62px;height:62px;object-fit:cover;border-radius:50%;border:2px solid #dfb35e;box-shadow:0 4px 14px rgba(0,0,0,.08)}.brand-copy{line-height:1.1;min-width:0}.brand-en{margin-top:7px;font-weight:700;font-size:clamp(10.5px,.92vw,13px);letter-spacing:.02em;white-space:nowrap;color:#3c4b45}nav{display:flex;align-items:center;gap:6px}nav a,.dropbtn{border:0;background:none;color:#30413a;text-decoration:none;padding:11px 12px;border-radius:9px;font:600 14px/1 inherit;cursor:pointer}nav a:hover,.dropbtn:hover{background:var(--nt-tint,#f2f7f4);color:var(--green)}.dropdown{position:relative}.dropmenu{display:none;position:absolute;top:100%;left:0;min-width:210px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:12px;padding:7px}.dropdown:hover .dropmenu,.dropdown:focus-within .dropmenu{display:block}.dropmenu a{display:block}.menu-btn{display:none;border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 10px}.view{display:none}.view.active{display:block}.hero{position:relative;min-height:560px;background-image:linear-gradient(rgba(8,30,22,.14),rgba(8,30,22,.08)),var(--hero-img,url('assets/home-bg.jpg'));background-size:cover;background-position:center;overflow:hidden}.hero-inner{text-align:center;padding:54px 0 112px}.welcome-script{margin:14px 0 0;font:italic 600 clamp(24px,2.5vw,38px)/1.05 Georgia,serif;color:#a67225;text-shadow:0 1px 0 rgba(255,255,255,.8)}.hero h1{margin:8px auto 10px;font-family:Georgia,serif;font-size:clamp(27px,3vw,46px);letter-spacing:-.025em;color:#0b5b3a;white-space:nowrap;max-width:1200px;text-shadow:0 2px 0 rgba(255,255,255,.82)}.tagline{margin:0 auto 34px;font-family:"Noto Sans Bengali","Nirmala UI",sans-serif;font-size:clamp(14px,1.4vw,18px);font-weight:650;color:#3f534b;white-space:nowrap}.portal-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;width:min(760px,100%);margin:0 auto}.portal-card{background:rgba(255,255,255,.96);border:1px solid rgba(205,218,211,.95);border-radius:15px;padding:22px 18px 18px;box-shadow:0 18px 38px rgba(31,62,51,.12);cursor:pointer;transition:.18s transform,.18s box-shadow;color:var(--green)}.portal-card:hover{transform:translateY(-4px);box-shadow:0 22px 45px rgba(31,62,51,.16)}.portal-card .icon{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--nt-tint,#f3f8f5);margin:0 auto 13px;font-size:24px}.portal-card strong{display:block;font-size:13px;letter-spacing:.03em}.portal-card small{display:block;margin-top:14px;background:#0a5134;color:#fff;border-radius:6px;padding:9px 10px;font-weight:800;text-transform:uppercase;font-size:11px}.section-page{padding:58px 0 80px;min-height:65vh}.page-head{text-align:center;margin-bottom:32px}.page-head span{display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--green2);font-weight:800}.page-head h1{font:700 clamp(30px,4vw,44px)/1.1 Georgia,serif;margin:8px 0 10px}.page-head p{color:var(--muted);margin:0;line-height:1.65}.req{color:var(--danger)}.elig-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.info-card,.panel{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 24px rgba(18,55,42,.06);padding:24px}.info-card h2{font:700 22px/1.25 Georgia,serif;margin-top:0}.info-card li{margin:11px 0;line-height:1.55;color:var(--nt-ink-2,#4f5f58)}.notice{margin-top:18px;padding:14px 16px;border-left:4px solid var(--gold);background:#fffbf2;color:#665838;border-radius:8px;font-size:13px;line-height:1.55}.form-container{width:min(980px,calc(100% - 32px))}.member-form{display:grid;gap:18px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;padding:22px}.form-grid.one-col{grid-template-columns:1fr}.span-2{grid-column:span 2}label{display:grid;gap:7px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;font-weight:800;color:var(--nt-ink-2,#46564f)}input,select,textarea{width:100%;border:1px solid var(--nt-line,#d8e1dd);border-radius:10px;padding:12px 13px;background:#fff;font:500 14px/1.3 inherit;color:var(--nt-ink,#1f2f28);outline:none;text-transform:none;letter-spacing:0}textarea{min-height:108px;resize:vertical}:is(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]),select,textarea):focus{border-color:var(--focus-accent);box-shadow:0 0 0 3px var(--focus-ring);outline:none}.signature-canvas{display:block;width:100%;height:160px;border:1px solid #d4ddd9;border-radius:10px;background:#fff;touch-action:none}.checkline{display:flex;gap:10px;align-items:flex-start;text-transform:none;letter-spacing:0;font-weight:500;line-height:1.45}.checkline input{width:auto;margin-top:3px}.btn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:12px 16px;font-weight:800;cursor:pointer}.btn.primary{background:var(--green);color:#fff;border-color:var(--green)}.btn.danger{color:#a91b28;border-color:#e3b8bd}.hidden{display:none!important}.muted{color:var(--muted);font-size:13px}.otp-row{display:flex;gap:10px}.otp-row input{flex:1}.admin-login{max-width:540px;margin:0 auto}.admin-login .form-grid{padding:0}.dashboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:20px}.stat{padding:18px;border:1px solid var(--line);border-radius:14px;background:#fff}.stat strong{display:block;font-size:28px;color:var(--green)}.admin-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.admin-tabs button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px 12px;font-weight:700;cursor:pointer}.admin-tabs button.active{background:var(--nt-accent-tint,#edf6f1);color:var(--green);border-color:var(--nt-accent-tint,#bcd8ca)}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px}table{width:100%;border-collapse:collapse;min-width:760px}th,td{padding:12px;border-bottom:1px solid var(--line);text-align:left;font-size:13px}th{background:#f7f9f8;font-size:11px;text-transform:uppercase;letter-spacing:.05em}.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:800;background:#eef5f1;color:var(--green)}.perm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.perm-grid label{display:flex;gap:8px;align-items:center;text-transform:none}.perm-grid input{width:auto}.toast{position:fixed;top:auto;left:auto;margin:0;border:0;overflow:visible;right:20px;bottom:20px;max-width:360px;background:#18251f;color:white;padding:13px 16px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.2);opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s;z-index:99}.toast.show{opacity:1;transform:none}footer{border-top:1px solid var(--line);padding:12px 0;color:var(--nt-muted,#6e7b75);font-size:12px}.footer-wrap{display:flex;justify-content:space-between;gap:12px}
@media(max-width:900px){.menu-btn{display:block}nav{display:none;position:absolute;top:78px;left:16px;right:16px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:10px;align-items:stretch;flex-direction:column}nav.open{display:flex}.dropdown .dropmenu{position:static;box-shadow:none;border:0;padding-left:14px;display:block}.dropbtn{display:none}.brand-en{font-size:10.5px}.portal-cards{grid-template-columns:1fr;max-width:360px}.hero{min-height:760px}.hero-inner{padding-top:50px}.elig-grid,.form-grid,.dashboard-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.tagline{white-space:normal}.brand img{width:52px;height:52px}.brand-copy{max-width:64vw}}
@media(max-width:560px){.brand-en{white-space:normal}.site-header .container{width:min(100% - 20px,1180px)}.hero h1{font-size:30px;white-space:normal}.otp-row{flex-direction:column}.footer-wrap{flex-direction:column}.perm-grid{grid-template-columns:1fr}}

/* V14 Responsive Upgrade: desktop + tablet + mobile */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden}
img{max-width:100%;height:auto}
button,input,select,textarea{font-size:16px}
.menu-btn{font-size:24px;line-height:1;min-width:44px;min-height:44px}
.portal-card,.btn,nav a,.dropbtn{min-height:44px}

@media (min-width:1200px){
  .container{width:min(1240px,calc(100% - 48px))}
  .hero{min-height:610px;background-size:cover;background-position:center 46%}
  .hero-inner{padding:64px 0 128px}
  .portal-cards{width:min(820px,100%)}
  .portal-card{padding:24px 20px 20px}
  .form-container{width:min(1040px,calc(100% - 48px))}
}

@media (max-width:1100px){
  .nav-wrap{gap:18px}
  .brand-en{font-size:11px}
  nav a,.dropbtn{padding:10px 9px;font-size:13px}
}

@media (max-width:900px){
  .site-header{position:sticky;top:0}
  .nav-wrap{min-height:74px;gap:12px}
  .brand img{width:50px!important;height:50px!important;flex:0 0 50px}
  .brand-copy{max-width:calc(100vw - 130px)!important}
  
  .brand-en{font-size:9.5px!important;white-space:normal!important;line-height:1.2;margin-top:4px}
  .menu-btn{display:grid;place-items:center}
  nav{top:70px;max-height:calc(100vh - 90px);overflow:auto}
  nav a{padding:13px 14px}

  .hero{min-height:820px;background-image:linear-gradient(rgba(8,30,22,.16),rgba(8,30,22,.10)),var(--hero-img,url('assets/home-bg.jpg'));background-size:cover;background-position:center top}
  .hero-inner{padding:54px 0 92px}
  .welcome-script{font-size:28px;margin-top:8px}
  .hero h1{font-size:clamp(28px,7vw,40px);line-height:1.08;white-space:normal!important;max-width:680px;padding:0 8px}
  .tagline{font-size:16px;white-space:normal!important;margin-bottom:28px;padding:0 12px}
  .portal-cards{grid-template-columns:repeat(3,1fr);width:min(720px,100%);gap:12px}
  .portal-card{padding:16px 10px 13px;border-radius:13px}
  .portal-card .icon{width:40px;height:40px;font-size:20px;margin-bottom:9px}
  .portal-card strong{font-size:11px}.portal-card small{font-size:10px;margin-top:10px;padding:8px 6px}

  .section-page{padding:40px 0 64px}
  .page-head{margin-bottom:24px}.page-head h1{font-size:34px}
  .form-grid,.elig-grid,.dashboard-grid{grid-template-columns:1fr!important}
  .span-2{grid-column:auto!important}
  .form-grid{padding:18px}
  
  .signature-canvas{height:180px}
  
  .table-wrap{-webkit-overflow-scrolling:touch}
}

@media (max-width:640px){
  .container,.narrow,.form-container{width:min(100% - 22px,1180px)}
  .site-header .container{width:min(100% - 16px,1180px)}
  .nav-wrap{min-height:68px}
  .brand img{width:46px!important;height:46px!important;flex-basis:46px}
  .brand-copy{max-width:calc(100vw - 116px)!important}
  .brand-en{font-size:8.4px!important}
  nav{left:8px;right:8px;top:66px}

  .hero{min-height:auto;background-size:cover;background-position:center top}
  .hero-inner{padding:42px 0 64px}
  .welcome-script{font-size:24px}
  .hero h1{font-size:30px;margin-top:7px}
  .tagline{font-size:15px;margin-bottom:24px}
  .portal-cards{grid-template-columns:1fr;max-width:360px;gap:12px}
  .portal-card{display:grid;grid-template-columns:48px 1fr auto;align-items:center;text-align:left;padding:12px 14px;gap:10px}
  .portal-card .icon{margin:0;width:42px;height:42px}
  .portal-card strong{font-size:12px;line-height:1.25}
  .portal-card small{margin:0;min-width:92px;text-align:center;padding:9px 8px}

  
  .section-page{padding:32px 0 52px}.page-head h1{font-size:29px}.page-head p{font-size:14px}
  .info-card,.panel{padding:18px;border-radius:14px}
  
  .form-grid{padding:15px;gap:14px}
  
  
  .signature-canvas{height:150px}
  
  
  
  
  
  .otp-row{flex-direction:column}
  .otp-row .btn{width:100%}
  .dashboard-grid{gap:10px}.stat{padding:14px}.stat strong{font-size:24px}
  .admin-tabs{display:grid;grid-template-columns:1fr}.admin-tabs button{width:100%}
  .footer-wrap{flex-direction:column;text-align:center;align-items:center}
  .toast{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));max-width:none}
}

@media (max-width:390px){
  .brand-en{font-size:7.8px!important}
  .hero h1{font-size:27px}
  .portal-card{grid-template-columns:42px 1fr;}
  .portal-card small{grid-column:1/-1;width:100%}
}


/* Homepage hero */
#view-home{
  position:relative;
  background-image:
    linear-gradient(rgba(255,255,255,.40), rgba(255,255,255,.52)),
    var(--hero-img,url('assets/home-bg.jpg'));
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
#view-home .hero{background:none !important;min-height:610px;}

.welcome-script{
  font-family:"Brush Script MT","Segoe Script","Lucida Handwriting",cursive !important;
  font-size:clamp(28px,3vw,44px) !important;font-weight:500 !important;color:#8b6427 !important;
  letter-spacing:.01em;text-shadow:0 1px 2px rgba(255,255,255,.85);
}
.hero h1{
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:clamp(38px,4.4vw,64px) !important;font-weight:700 !important;line-height:1.06 !important;
  letter-spacing:-.025em !important;color:#0a5c3a !important;max-width:1180px !important;
  text-shadow:0 2px 0 rgba(255,255,255,.92),0 6px 20px rgba(0,0,0,.10);
}
.tagline{font-size:clamp(16px,1.6vw,21px) !important;text-shadow:0 1px 1px rgba(255,255,255,.9);}
@media (max-width:900px){
  #view-home{background-position:center top;}
  #view-home .hero{min-height:790px;}
  .welcome-script{font-size:clamp(26px,7vw,38px) !important;}
  .hero h1{font-size:clamp(32px,7.8vw,48px) !important;}
  
}
@media (max-width:640px){
  #view-home{background-image:linear-gradient(rgba(255,255,255,.44),rgba(255,255,255,.58)),var(--hero-img,url('assets/home-bg.jpg'));background-size:cover;background-position:center top;}
  #view-home .hero{min-height:auto;}
  .welcome-script{font-size:28px !important;}
  .hero h1{font-size:34px !important;line-height:1.08 !important;}
}

/* V16 membership wording + unified application typography */

.dropmenu{min-width:285px}
@media(max-width:900px){.dropmenu{min-width:0;width:100%}}

/* V18 Personal Information layout */






/* Header and hero typography */
.brand-en-only{
  margin-top:0 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:clamp(16px,1.55vw,22px) !important;
  font-weight:700 !important;
  line-height:1.15 !important;
  letter-spacing:.025em !important;
  color:#263b4a !important;
  white-space:nowrap !important;
}
.brand img{
  width:68px !important;
  height:68px !important;
  flex:0 0 68px !important;
}
.nav-wrap{min-height:90px !important;}

.welcome-script{
  font-family:Georgia,"Times New Roman",serif !important;
  font-style:italic !important;
  font-size:clamp(25px,2.6vw,38px) !important;
  font-weight:500 !important;
  letter-spacing:.01em !important;
  color:#8b5a2b !important;
  transform:none !important;
  text-shadow:0 1px 2px rgba(255,255,255,.9) !important;
}
.hero h1{
  font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif !important;
  font-size:clamp(31px,3.5vw,50px) !important;
  font-weight:800 !important;
  line-height:1.08 !important;
  letter-spacing:.018em !important;
  color:#243f62 !important;
  max-width:1100px !important;
  text-shadow:0 2px 0 rgba(255,255,255,.92),0 5px 18px rgba(0,0,0,.10) !important;
}

@media(max-width:1100px){
  .brand-en-only{font-size:24px !important;white-space:normal !important;max-width:410px;}
  .brand img{width:58px !important;height:58px !important;flex-basis:58px !important;}
}
@media(max-width:900px){
  .nav-wrap{min-height:76px !important;}
  .brand-en-only{font-size:13px !important;line-height:1.15 !important;max-width:calc(100vw - 150px);}
  .brand img{width:50px !important;height:50px !important;flex-basis:50px !important;}
  .welcome-script{font-size:30px !important;}
  .hero h1{font-size:clamp(29px,6.6vw,42px) !important;}
}
@media(max-width:640px){
  .brand-en-only{font-size:11px !important;letter-spacing:.015em !important;max-width:calc(100vw - 118px);}
  .brand img{width:46px !important;height:46px !important;flex-basis:46px !important;}
  .welcome-script{font-size:26px !important;}
  .hero h1{font-size:29px !important;letter-spacing:.01em !important;}
}

/* Membership service cards */
#view-home .hero{
  min-height:calc(100vh - 90px) !important;
  display:flex;
  align-items:flex-start;
}
#view-home .hero-inner{
  padding-top:56px !important;
  padding-bottom:90px !important;
}
.service-intro{
  margin:38px auto 24px;
  text-align:center;
}
.service-title{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(24px,2.3vw,34px);
  line-height:1.15;
  font-weight:700;
  color:#263b4a;
  letter-spacing:.01em;
  text-shadow:0 1px 1px rgba(255,255,255,.85);
}
.service-subtitle{
  margin-top:7px;
  font-size:clamp(12px,1.1vw,15px);
  font-weight:600;
  letter-spacing:.04em;
  color:#5c665f;
  text-transform:none;
}
#view-home .portal-cards{
  margin-top:0 !important;
}
@media(max-width:900px){
  #view-home .hero{min-height:calc(100vh - 76px) !important;}
  #view-home .hero-inner{padding-top:48px !important;padding-bottom:74px !important;}
  .service-intro{margin:30px auto 20px;}
  .service-title{font-size:28px;}
}
@media(max-width:640px){
  #view-home .hero{min-height:calc(100vh - 68px) !important;}
  #view-home .hero-inner{padding-top:38px !important;padding-bottom:54px !important;}
  .service-intro{margin:26px auto 18px;}
  .service-title{font-size:24px;}
  .service-subtitle{font-size:12px;}
}


/* Brand refinements */
.brand-en-only{
  color:#0a6b43 !important;
  font-size:clamp(18px,1.75vw,25px) !important;
  font-weight:800 !important;
  letter-spacing:.02em !important;
}

.welcome-script{
  margin-bottom:18px !important;
}

.hero h1{
  font-size:clamp(29px,3.0vw,43px) !important;
  font-weight:800 !important;
  line-height:1.08 !important;
  letter-spacing:.005em !important;
  color:#28476a !important;
  text-transform:none !important;
}

@media(max-width:1100px){
  .brand-en-only{font-size:17px !important;}
  .hero h1{font-size:clamp(28px,4vw,39px) !important;}
}
@media(max-width:900px){
  .brand-en-only{font-size:14px !important;}
  .welcome-script{margin-bottom:15px !important;}
  .hero h1{font-size:clamp(27px,6vw,37px) !important;}
}
@media(max-width:640px){
  .brand-en-only{font-size:12px !important;}
  .welcome-script{margin-bottom:13px !important;}
  .hero h1{font-size:28px !important;}
}

/* Navigation typography */
#mainNav{
  gap:2px !important;
}
#mainNav > a,
#mainNav > .dropdown > .dropbtn{
  color:#111 !important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  padding:10px 9px !important;
}
#mainNav > a:hover,
#mainNav > .dropdown > .dropbtn:hover,
#mainNav > a:focus,
#mainNav > .dropdown > .dropbtn:focus{
  color:#111 !important;
}
@media (max-width:1100px){
  #mainNav{gap:1px !important;}
  #mainNav > a,
  #mainNav > .dropdown > .dropbtn{
    font-size:13px !important;
    padding:10px 8px !important;
  }
}

/* Production states */
button:disabled,.btn:disabled{opacity:.6;cursor:not-allowed}
.form-turnstile{display:flex;justify-content:center;margin:4px 0 12px}
.admin-head{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}.admin-head h2{margin:0}.admin-actions{display:flex;gap:8px;flex-wrap:wrap}.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.btn.compact{padding:7px 9px;font-size:11px;min-height:34px}.actions-cell{display:flex;gap:6px;flex-wrap:wrap}.role-card{display:grid;gap:14px;border:1px solid var(--line);border-radius:12px;padding:16px;margin:12px 0;background:#fbfcfc}.divider{border:0;border-top:1px solid var(--line);margin:26px 0}.turnstile-slot:empty{display:none}
@media(max-width:640px){.admin-head,.admin-actions{align-items:stretch}.admin-actions{width:100%}.admin-actions .btn{flex:1}.actions-cell{min-width:220px}}


/* Application form styling */
.application-page{background:var(--nt-tint,#f8fbf9)}
.application-page .form-container{width:min(1180px,calc(100% - 28px))}
.reference-form{background:#fff;border:1px solid var(--nt-line,#cfded6);border-radius:13px;box-shadow:0 7px 20px rgba(24,66,48,.06);overflow:hidden}
.reference-form-head{display:flex;justify-content:space-between;gap:22px;align-items:flex-start;padding:24px 28px 20px;border-bottom:1px solid #d8e5de;background:#fff}
.reference-eyebrow{font-size:10px;font-weight:900;letter-spacing:.14em;color:#0a6b45;margin-bottom:7px}
.reference-form-head h2{margin:0 0 7px;font:700 clamp(24px,3vw,36px)/1.08 Georgia,serif;color:#172c24}
.reference-form-head p{margin:0;color:#78847f;font-size:12px}
.type-select-label{display:grid;gap:7px;min-width:210px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--nt-ink-2,#3f5149)}
.type-select{width:100%;min-height:44px;border:1px solid #b7cec2;border-radius:7px;padding:9px 34px 9px 11px;background:#fff;font-weight:700;color:#1c3329}
.form-section-title{padding:13px 28px 9px;font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#0a6b45;background:var(--nt-tint,#f8fbf9);border-top:1px solid var(--nt-line,#e3ebe7)}
.reference-section-card{margin:0 28px 20px;border:1px solid var(--nt-line,#cfded6);border-radius:12px;background:#fff;padding:18px;box-shadow:0 3px 8px rgba(25,62,48,.025)}
.reference-grid{display:grid;gap:14px;margin-bottom:14px}.reference-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.reference-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.reference-grid.no-bottom{margin-bottom:0}
.reference-form label{display:grid;gap:6px;font-size:10px;font-weight:800;letter-spacing:.02em;color:#354840;text-transform:none}
.reference-form input,.reference-form select{width:100%;min-height:39px;border:1px solid #a9c5b8;border-radius:5px;background:#fff;padding:8px 10px;font:500 13px/1.2 Inter,system-ui,sans-serif;color:#14271f}
.reference-address-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:4px}.reference-address-card{border:1px solid var(--nt-line-strong,#bcd2c7);border-radius:10px;overflow:hidden;background:var(--nt-tint,#fbfdfc)}.reference-box-title{padding:10px 12px;background:#f5faf7;color:#087049;font-size:10px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;border-bottom:1px solid #dce8e2}.address-fields{padding:14px;margin:0}
.reference-upload-sign{display:grid;grid-template-columns:1fr 1.25fr;gap:18px}.reference-photo-box,.reference-signature-box{border:1px solid #c3d8ce;border-radius:10px;background:var(--nt-tint,#fbfdfc);padding:12px}.reference-photo-box>.reference-box-title,.reference-signature-box>.reference-box-title{margin:-12px -12px 12px}
.reference-photo-preview{height:auto;border:1px dashed #9dbdae;border-radius:8px;background:#fff;display:grid;place-items:center;overflow:hidden}.reference-photo-preview img{width:100%;height:100%;object-fit:contain}.photo-placeholder{display:grid;place-items:center;gap:8px;color:#9aacb4;font-size:11px}.photo-symbol{font-size:26px;color:#b2c0c7}
.reference-upload-button{display:inline-flex!important;align-items:center;justify-content:center;margin-top:12px;width:auto!important;background:#f1f8f4;border:1px solid var(--nt-line-strong,#bcd2c7);border-radius:6px;padding:8px 12px;color:#0a6b45!important;font-size:11px!important;cursor:pointer}.reference-upload-button input{display:none}.file-name{margin-top:7px;font-size:10px;color:var(--nt-faint,#85918c)}
.signature-tabs{display:flex;gap:5px;margin-bottom:10px}.signature-tab{border:1px solid var(--nt-line-strong,#c4d6cd);background:#fff;color:#44554d;border-radius:6px;padding:7px 13px;font-size:11px;cursor:pointer}.signature-tab.active{background:var(--nt-accent-tint,#eaf5ef);color:#087049;border-color:#9fc4b2}.signature-panel{display:none}.signature-panel.active{display:block}.signature-canvas{display:block;width:100%;height:220px;border:1px dashed #a8c2b6;border-radius:7px;background:#fff;touch-action:none}.sig-actions{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:8px;font-size:10px;color:var(--nt-faint,#85918c)}.sig-actions button{border:1px solid var(--nt-line-strong,#c4d6cd);background:#fff;border-radius:5px;padding:5px 9px;color:#506159}.typed-preview{margin-top:12px;min-height:105px;border:1px dashed var(--nt-line-strong,#b3c9bf);border-radius:7px;background:#fff;display:grid;place-items:center;font:italic 30px Georgia,serif;color:#1d2d26}.signature-upload-preview{margin-top:12px;min-height:72px;border:1px dashed var(--nt-line-strong,#b3c9bf);border-radius:7px;background:#fff;display:grid;place-items:center;font-size:11px;color:#7d8c85;padding:10px;text-align:center}
.reference-agreement{padding:14px 18px}.agreement-text.scrollable{max-height:155px;overflow:auto;border:1px solid #d4e1db;border-radius:8px;background:var(--nt-tint,#fafcfb);padding:13px 15px;font-size:11px;line-height:1.55;color:#5e6e67}.agreement-text p{margin:0 0 9px}.reference-check{display:flex!important;grid-template-columns:auto 1fr;flex-direction:row;gap:10px;align-items:flex-start;margin-top:12px;font-size:11px!important;font-weight:500!important;line-height:1.45}.reference-check input{width:auto;min-height:auto;margin-top:3px}
.reference-payment-box{padding:0 18px 18px}.reference-payment-box>.reference-box-title{margin:0 -18px 15px}.reference-payment-options{display:grid;grid-template-columns:1fr 1fr;gap:14px}.payment-option{display:flex!important;flex-direction:row;align-items:center;gap:10px;border:1px solid #cdded6;border-radius:9px;padding:15px;background:#fff;min-height:72px}.payment-option input{width:auto;min-height:auto;margin:0}.payment-option span{display:grid;gap:4px}.payment-option b{font-size:12px;color:var(--nt-ink,#243a30)}.payment-option small{font-size:10px;font-weight:500;color:#87938e}.payment-option.is-disabled{opacity:.55;background:#f5f6f5}.payment-followup{margin-top:14px;margin-bottom:0}
.form-turnstile{margin:6px 28px 0}.reference-submit-area{text-align:center;padding:15px 28px 28px;border-top:1px solid #e2eae6}.submit-btn{min-width:260px}.submit-note{font-size:10px;color:var(--nt-faint,#8a9691);margin:8px 0 0}.form-message{margin-top:9px;font-size:12px;font-weight:700;color:#0a6b45}.form-message.success{padding:10px 12px;background:var(--nt-accent-tint,#eef8f2);border:1px solid var(--nt-accent-tint,#c5dfd1);border-radius:7px}
@media(max-width:900px){.reference-form-head{flex-direction:column}.type-select-label{min-width:0;width:100%}.reference-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}.reference-address-grid,.reference-upload-sign{grid-template-columns:1fr}}
@media(max-width:640px){.application-page .form-container{width:min(100% - 16px,1180px)}.reference-form-head{padding:18px 16px}.form-section-title{padding:12px 16px 8px}.reference-section-card{margin:0 16px 16px;padding:14px}.reference-grid.three,.reference-grid.two,.reference-payment-options{grid-template-columns:1fr}.reference-grid{gap:11px}.reference-address-grid{gap:14px}.reference-photo-preview{height:220px}.signature-canvas{height:180px}.form-turnstile{margin:4px 16px 0}.reference-submit-area{padding:14px 16px 22px}.submit-btn{width:100%;min-width:0}}


/* Uniform form controls */
.reference-form .reference-grid > label:not(.reference-check):not(.payment-option),
.reference-form .address-fields > label,
.reference-form .payment-followup > label{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:6px;
}
.reference-form input[type="text"],
.reference-form input[type="email"],
.reference-form input[type="tel"],
.reference-form input[type="date"],
.reference-form input:not([type]),
.reference-form input[readonly],
.reference-form select{
  width:100%;
  height:46px !important;
  min-height:46px !important;
  box-sizing:border-box;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.reference-form select{line-height:normal}
@media(max-width:720px){
  .reference-form input[type="text"],
  .reference-form input[type="email"],
  .reference-form input[type="tel"],
  .reference-form input[type="date"],
  .reference-form input:not([type]),
  .reference-form input[readonly],
  .reference-form select{
    height:46px !important;
    min-height:46px !important;
  }
}

/* Final navigation and form alignment */
@media (min-width:901px){
  #mainNav{
    display:flex !important;
    align-items:center !important;
    gap:4px !important;
  }
  #mainNav > a,
  #mainNav > .dropdown > .dropbtn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:44px !important;
    min-height:44px !important;
    margin:0 !important;
    padding:0 9px !important;
    border:0 !important;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif !important;
    font-size:14px !important;
    font-weight:600 !important;
    line-height:1.2 !important;
    letter-spacing:0 !important;
    color:#111 !important;
    vertical-align:middle !important;
    background:transparent;
  }
  #mainNav > .dropdown{
    display:flex !important;
    align-items:center !important;
    height:44px !important;
    margin:0 !important;
    padding:0 !important;
  }
}
@media (min-width:901px) and (max-width:1100px){
  #mainNav > a,
  #mainNav > .dropdown > .dropbtn{
    font-size:13px !important;
    padding:0 8px !important;
  }
}

/* Keep the label text + required asterisk on one line.
   This removes the raised Middle Name / Apt / Country effect. */
.reference-form .reference-grid > label:not(.reference-check):not(.payment-option),
.reference-form .address-fields > label,
.reference-form .payment-followup > label{
  display:block !important;
  min-width:0 !important;
  margin:0 !important;
  line-height:20px !important;
}
.reference-form .reference-grid > label:not(.reference-check):not(.payment-option) > .req,
.reference-form .address-fields > label > .req,
.reference-form .payment-followup > label > .req{
  display:inline !important;
  margin:0 !important;
  padding:0 !important;
}
.reference-form .reference-grid > label:not(.reference-check):not(.payment-option) > input,
.reference-form .reference-grid > label:not(.reference-check):not(.payment-option) > select,
.reference-form .address-fields > label > input,
.reference-form .address-fields > label > select,
.reference-form .payment-followup > label > input,
.reference-form .payment-followup > label > select{
  display:block !important;
  width:100% !important;
  height:46px !important;
  min-height:46px !important;
  max-height:46px !important;
  margin:6px 0 0 !important;
  box-sizing:border-box !important;
}

/* Grid rows align from the same top edge */
.reference-form .reference-grid,
.reference-form .address-fields{
  align-items:start !important;
}
.reference-address-grid{
  align-items:start !important;
}
.reference-address-card{
  align-self:start !important;
}

@media (max-width:900px){
  #mainNav > a,
  #mainNav > .dropdown > .dropbtn{
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif !important;
    font-weight:600 !important;
    line-height:1.2 !important;
    color:#111 !important;
  }
  .reference-form .reference-grid > label:not(.reference-check):not(.payment-option) > input,
  .reference-form .reference-grid > label:not(.reference-check):not(.payment-option) > select,
  .reference-form .address-fields > label > input,
  .reference-form .address-fields > label > select,
  .reference-form .payment-followup > label > input,
  .reference-form .payment-followup > label > select{
    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;
  }
}


/* V28 Member Account */
.link-btn{border:0;background:transparent;color:var(--green);font-weight:700;cursor:pointer;padding:10px 0;text-decoration:underline}.member-account-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.member-profile{display:flex;align-items:center;gap:16px}.member-profile img{width:82px;height:82px;border-radius:50%;object-fit:contain;border:2px solid var(--gold)}.member-profile h2{margin:0 0 6px}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.detail-grid>div{border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--nt-tint,#fafcfb)}.detail-grid span{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}.detail-grid b{font-size:14px;overflow-wrap:anywhere}.member-admin-detail{margin-top:14px}@media(max-width:700px){.member-account-head{align-items:flex-start;flex-direction:column}.member-profile{align-items:flex-start}.detail-grid{grid-template-columns:1fr}}


/* =========================================================
   V29 RESPONSIVE COMPATIBILITY LAYER
   Keeps the existing V28 design/features while improving
   phone, tablet, laptop and desktop usability.
   ========================================================= */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  min-width:320px;
  overflow-x:hidden;
}
img,svg,video,canvas{
  max-width:100%;
}
button,a,input,select,textarea{
  -webkit-tap-highlight-color:transparent;
}
button,.btn,.portal-card,.menu-btn,.signature-tab,.link-btn{
  touch-action:manipulation;
}
.table-wrap{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.turnstile-slot{
  max-width:100%;
  overflow-x:auto;
}
.member-form,
.reference-form,
.reference-section-card,
.reference-address-card,
.reference-photo-box,
.reference-signature-box,
.panel,
.info-card{
  min-width:0;
}
.reference-grid > *,
.address-fields > *,
.form-grid > *,
.detail-grid > *{
  min-width:0;
}

@media (max-width:900px){
  .site-header{
    padding-top:env(safe-area-inset-top);
  }
  .nav-wrap{
    min-height:70px !important;
  }
  .menu-btn{
    display:grid !important;
    place-items:center;
    min-width:46px;
    min-height:46px;
    font-size:22px;
    flex:0 0 auto;
  }
  #mainNav{
    display:none;
    position:absolute;
    top:calc(70px + env(safe-area-inset-top));
    left:10px;
    right:10px;
    max-height:calc(100dvh - 90px - env(safe-area-inset-top));
    overflow:auto;
    padding:10px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff;
    box-shadow:var(--shadow);
    flex-direction:column;
    align-items:stretch;
    z-index:60;
  }
  #mainNav.open{display:flex !important}
  #mainNav > a,
  #mainNav > .dropdown > .dropbtn{
    min-height:46px !important;
    width:100%;
    justify-content:flex-start !important;
    padding:12px 14px !important;
    border-radius:9px !important;
    font-size:14px !important;
  }
  #mainNav .dropdown{
    width:100%;
    height:auto !important;
    display:block !important;
  }
  #mainNav .dropbtn{display:none !important}
  #mainNav .dropmenu{
    display:block !important;
    position:static !important;
    width:100%;
    min-width:0;
    padding:0 0 0 10px;
    border:0;
    box-shadow:none;
    background:transparent;
  }
  #mainNav .dropmenu a{
    min-height:44px;
    display:flex;
    align-items:center;
    padding:10px 14px;
  }

  .section-page{padding:36px 0 58px}
  .page-head{margin-bottom:24px}
  .page-head h1{font-size:clamp(28px,6vw,38px)}
  .panel,.info-card{padding:20px}
  .elig-grid,.dashboard-grid{grid-template-columns:1fr !important}

  .reference-form-head{
    flex-direction:column;
    align-items:stretch;
    padding:20px 20px 18px;
  }
  .type-select-label{
    width:100%;
    min-width:0;
  }
  .reference-grid.three,
  .reference-grid.two{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .reference-address-grid,
  .reference-upload-sign{
    grid-template-columns:1fr;
  }
  .reference-payment-options{
    grid-template-columns:1fr 1fr;
  }
  .reference-photo-preview{
    height:auto;
    min-height:220px;
    max-height:320px;
    aspect-ratio:3/4;
  }
  .signature-canvas{
    height:190px;
  }

  .member-account-head{
    align-items:flex-start;
  }
  .detail-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .admin-tabs{
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
  }
  .admin-tabs button{
    flex:0 0 auto;
    min-height:44px;
  }
  .perm-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:680px){
  .container,.narrow,.form-container,
  .application-page .form-container{
    width:min(100% - 20px,1180px) !important;
  }
  .site-header .container{
    width:min(100% - 14px,1180px) !important;
  }
  .brand{
    gap:9px;
  }
  .brand img{
    width:44px !important;
    height:44px !important;
    flex-basis:44px !important;
  }
  .brand-copy{
    max-width:calc(100vw - 112px) !important;
  }
  .brand-en-only{
    font-size:11px !important;
    line-height:1.15 !important;
    white-space:normal !important;
  }

  #view-home .hero-inner{
    padding:38px 0 48px !important;
  }
  .welcome-script{font-size:25px !important}
  .hero h1{
    font-size:clamp(27px,8vw,33px) !important;
    white-space:normal !important;
    overflow-wrap:anywhere;
  }
  .tagline{
    font-size:14px !important;
    white-space:normal !important;
    padding-inline:8px;
  }
  .service-title{font-size:23px !important}
  .portal-cards{
    grid-template-columns:1fr !important;
    max-width:390px;
  }
  .portal-card{
    min-height:64px;
  }

  .section-page{padding:28px 0 46px}
  .page-head h1{font-size:29px}
  .page-head p{font-size:13px}
  .panel,.info-card{
    padding:16px;
    border-radius:13px;
  }

  .reference-form{
    border-radius:11px;
  }
  .reference-form-head{
    padding:17px 14px 15px;
  }
  .reference-form-head h2{
    font-size:clamp(23px,7vw,30px);
  }
  .form-section-title{
    padding:11px 14px 7px;
  }
  .reference-section-card{
    margin:0 12px 14px;
    padding:12px;
  }
  .reference-grid.three,
  .reference-grid.two,
  .reference-payment-options{
    grid-template-columns:1fr !important;
  }
  .reference-grid{
    gap:10px;
    margin-bottom:10px;
  }
  .address-fields{
    padding:12px;
  }
  .reference-form input,
  .reference-form select,
  .reference-form textarea,
  .form-grid input,
  .form-grid select,
  .form-grid textarea,
  .otp-row input{
    font-size:16px !important; /* prevents iOS auto-zoom */
  }
  .reference-form .reference-grid > label:not(.reference-check):not(.payment-option) > input,
  .reference-form .reference-grid > label:not(.reference-check):not(.payment-option) > select,
  .reference-form .address-fields > label > input,
  .reference-form .address-fields > label > select,
  .reference-form .payment-followup > label > input,
  .reference-form .payment-followup > label > select{
    height:48px !important;
    min-height:48px !important;
    max-height:48px !important;
  }
  .reference-photo-preview{
    min-height:190px;
    max-height:260px;
  }
  .signature-tabs{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
  }
  .signature-tab{
    min-width:0;
    min-height:44px;
    padding:8px 6px;
  }
  .signature-canvas{height:170px}
  .sig-actions{
    align-items:flex-start;
    flex-direction:column;
  }
  .reference-payment-box{
    padding:0 12px 14px;
  }
  .reference-payment-box > .reference-box-title{
    margin:0 -12px 12px;
  }
  .payment-option{
    min-height:68px;
    padding:13px;
  }
  .form-turnstile{
    margin:4px 12px 0;
  }
  .reference-submit-area{
    padding:13px 12px 20px;
  }
  .submit-btn{
    width:100%;
    min-width:0;
    min-height:48px;
  }

  .form-grid{
    grid-template-columns:1fr !important;
    gap:14px;
    padding:16px;
  }
  .form-grid.one-col{padding:0}
  .span-2{grid-column:auto !important}
  .btn{
    min-height:46px;
  }
  .otp-row{
    flex-direction:column;
  }
  .otp-row .btn{
    width:100%;
  }

  .member-account-head{
    flex-direction:column;
    gap:14px;
  }
  .member-profile{
    align-items:flex-start;
    gap:12px;
  }
  .member-profile img{
    width:68px;
    height:68px;
  }
  .detail-grid{
    grid-template-columns:1fr !important;
  }
  
  

  .dashboard-grid{
    gap:10px;
  }
  .admin-head{
    align-items:stretch;
    flex-direction:column;
  }
  .admin-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
  }
  .admin-actions .btn{
    width:100%;
  }
  .admin-tabs{
    display:grid;
    grid-template-columns:1fr;
    overflow:visible;
  }
  .admin-tabs button{
    width:100%;
  }
  .perm-grid{
    grid-template-columns:1fr !important;
  }
  .role-card{
    padding:14px;
  }
  .table-wrap table{
    min-width:680px;
  }
  .actions-cell{
    min-width:190px;
  }

  footer{
    padding-bottom:calc(12px + env(safe-area-inset-bottom));
  }
  .footer-wrap{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .toast{
    left:10px;
    right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    max-width:none;
  }
}

@media (max-width:380px){
  .container,.narrow,.form-container,
  .application-page .form-container{
    width:min(100% - 14px,1180px) !important;
  }
  .brand-en-only{font-size:10px !important}
  .hero h1{font-size:26px !important}
  .reference-section-card{margin-inline:8px}
  .form-section-title{padding-inline:10px}
  .reference-form-head{padding-inline:10px}
  .reference-submit-area{padding-inline:10px}
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}


/* =========================================================
   V30 A-TO-Z RESPONSIVE & MOBILE-FIRST FINAL LAYER
   Base: V29 Responsive Final. Existing functionality is preserved.
   ========================================================= */
:root{
  --content-max:1180px;
  --tap:46px;
}
html{overflow-x:clip}
body{min-width:0;overflow-x:clip}
.container{width:min(var(--content-max),calc(100% - 32px));margin-inline:auto}
.narrow{width:min(880px,calc(100% - 32px));margin-inline:auto}
.form-container{width:min(1000px,calc(100% - 32px));margin-inline:auto}
img,svg,video,canvas{max-width:100%;height:auto}
input,select,textarea,button{max-width:100%}
input[type="file"]{width:100%;min-width:0}
:focus-visible{
  outline:3px solid rgba(13,116,72,.35);
  outline-offset:2px;
}

/* Compact, balanced header: original logo + smaller organization name + navigation */
.nav-wrap{
  min-height:76px !important;
  gap:18px !important;
}
.brand{
  flex:0 1 auto;
  min-width:0;
  gap:10px !important;
}
.brand img{
  width:54px !important;
  height:54px !important;
  flex:0 0 54px !important;
  object-fit:cover;
  aspect-ratio:1/1;
}
.brand-copy{min-width:0;max-width:360px !important}
.brand-en-only{
  margin:0 !important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif !important;
  font-size:clamp(16px,1.25vw,22px) !important;
  line-height:1.12 !important;
  font-weight:750 !important;
  letter-spacing:.01em !important;
  color: #0b5d3b !important;
  white-space:nowrap !important;
}
@media (min-width:901px){
  #mainNav{gap:3px !important;flex:0 0 auto}
  #mainNav>a,#mainNav>.dropdown>.dropbtn{
    height:42px !important;
    min-height:42px !important;
    padding:0 8px !important;
    font-size:clamp(12px,.86vw,14px) !important;
    color:#263b35 !important;
    border-radius:8px !important;
  }
  #mainNav .dropmenu{min-width:255px}
}
@media (min-width:901px) and (max-width:1180px){
  .nav-wrap{gap:10px !important}
  .brand img{width:48px !important;height:48px !important;flex-basis:48px !important}
  .brand-copy{max-width:270px !important}
  .brand-en-only{font-size:10.5px !important}
  #mainNav>a,#mainNav>.dropdown>.dropbtn{font-size:12px !important;padding-inline:7px !important}
}

/* Mobile / tablet header: one row, compact logo, one-line organization name, hamburger */
@media (max-width:900px){
  .site-header{padding-top:env(safe-area-inset-top)}
  .site-header .container{width:min(100% - 16px,var(--content-max)) !important}
  .nav-wrap{
    min-height:64px !important;
    gap:8px !important;
    flex-wrap:nowrap;
  }
  .brand{flex:1 1 auto;overflow:hidden}
  .brand img{
    width:40px !important;
    height:40px !important;
    flex-basis:40px !important;
  }
  .brand-copy{
    max-width:none !important;
    flex:1 1 auto;
    overflow:hidden;
  }
  .brand-en-only{
    font-size:clamp(7.6px,2.45vw,10.5px) !important;
    letter-spacing:-.012em !important;
    white-space:nowrap !important;
    overflow:hidden;
    text-overflow:clip;
  }
  .menu-btn{
    display:grid !important;
    place-items:center;
    width:46px;
    height:46px;
    min-width:46px;
    min-height:46px;
    flex:0 0 46px;
    padding:0 !important;
    font-size:21px;
    color:var(--green);
  }
  #mainNav{
    display:none;
    top:calc(64px + env(safe-area-inset-top)) !important;
    left:8px !important;
    right:8px !important;
    width:auto;
    max-height:calc(100dvh - 82px - env(safe-area-inset-top));
    overflow:auto;
    overscroll-behavior:contain;
    padding:9px !important;
    border-radius:14px;
  }
  #mainNav.open{display:flex !important}
  #mainNav>a,
  #mainNav>.dropdown>.dropbtn{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100%;
    min-height:46px !important;
    padding:11px 13px !important;
    font-size:14px !important;
    color:#263b35 !important;
  }
  #mainNav>.dropdown{display:block !important;width:100%;height:auto !important}
  #mainNav .dropbtn{display:flex !important}
  #mainNav .dropmenu{
    display:none !important;
    position:static !important;
    width:100%;
    min-width:0;
    padding:2px 0 4px 12px !important;
    border:0;
    box-shadow:none;
    background:#f8fbf9;
    border-radius:9px;
  }
  #mainNav .dropdown.open .dropmenu{display:block !important}
  #mainNav .dropmenu a{
    min-height:44px;
    display:flex;
    align-items:center;
    padding:10px 12px !important;
    font-size:13px;
  }
}

/* Fluid type + centered content */
.page-head h1{font-size:clamp(29px,3.5vw,44px)}
.page-head p{font-size:clamp(13px,1.1vw,15px)}
.info-card h2{font-size:clamp(20px,2vw,23px)}
.panel h2,.panel h3{overflow-wrap:anywhere}
.btn,.portal-card small{font-size:clamp(12px,1vw,14px)}
.section-page{padding-block:clamp(32px,4vw,58px) clamp(50px,6vw,80px)}

/* Home: never a miniature desktop layout */
#view-home .hero-inner{
  padding-top:clamp(38px,5vw,58px) !important;
  padding-bottom:clamp(54px,7vw,100px) !important;
}
#view-home .hero h1{
  font-size:clamp(30px,3.4vw,49px) !important;
  white-space:normal !important;
  text-wrap:balance;
}
#view-home .tagline{font-size:clamp(14px,1.35vw,19px) !important}
.portal-cards{width:min(780px,100%)}

/* Forms, photo/signature, previews */
.reference-form,.reference-section-card,.reference-address-card,.reference-photo-box,.reference-signature-box{max-width:100%;overflow:hidden}
.reference-form input,.reference-form select,.reference-form textarea,
.form-grid input,.form-grid select,.form-grid textarea{
  max-width:100%;
}
.reference-photo-preview img,.signature-upload-preview img{max-width:100%;height:auto;object-fit:contain}
.signature-canvas{max-width:100%;touch-action:none}

/* Tablet: intentional tablet grid rather than awkward scaled desktop */
@media (min-width:681px) and (max-width:900px){
  .container,.narrow,.form-container,.application-page .form-container{
    width:min(100% - 30px,var(--content-max)) !important;
  }
  .elig-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .dashboard-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr)) !important}
  .reference-address-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .reference-upload-sign{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .panel,.info-card{padding:20px}
}

/* Mobile-first single-column application layout */
@media (max-width:680px){
  .container,.narrow,.form-container,.application-page .form-container{
    width:min(100% - 18px,var(--content-max)) !important;
  }
  .section-page{padding-top:26px}
  .page-head{margin-bottom:20px}
  .page-head h1{font-size:clamp(27px,8vw,32px)}
  .panel,.info-card{padding:15px;border-radius:13px}
  .elig-grid,
  .reference-grid.three,
  .reference-grid.two,
  .reference-address-grid,
  .reference-upload-sign,
  .reference-payment-options,
  .dashboard-grid,
  .detail-grid,
  .perm-grid{
    grid-template-columns:1fr !important;
  }
  .reference-section-card{
    margin-inline:9px !important;
    padding:11px !important;
  }
  .reference-form-head{padding:16px 11px 14px !important}
  .form-section-title{padding:11px 11px 7px !important}
  .reference-submit-area{padding:13px 10px 19px !important}
  .form-turnstile{margin-inline:10px !important}
  .reference-photo-box,.reference-signature-box{min-width:0}
  .reference-photo-preview{
    width:100%;
    min-height:180px;
    max-height:250px;
    aspect-ratio:4/3;
  }
  .signature-canvas{height:165px !important}
  input,select,textarea{
    font-size:16px !important; /* prevent iOS zoom */
  }
  .reference-form .reference-grid>label:not(.reference-check):not(.payment-option)>input,
  .reference-form .reference-grid>label:not(.reference-check):not(.payment-option)>select,
  .reference-form .address-fields>label>input,
  .reference-form .address-fields>label>select,
  .reference-form .payment-followup>label>input,
  .reference-form .payment-followup>label>select{
    height:48px !important;
    min-height:48px !important;
    max-height:48px !important;
  }
  .btn,.submit-btn,.signature-tab,.link-btn{
    min-height:46px;
  }
  .submit-btn{width:100%}
  .otp-row{flex-direction:column}
  .otp-row .btn{width:100%}
  .member-account-head{flex-direction:column;align-items:stretch;gap:12px}
  .member-profile{align-items:flex-start}
  .member-profile img{width:64px;height:64px}
  .member-account-head>#memberLogoutBtn{width:100%}
  .stat{padding:14px}
  .stat strong{font-size:clamp(23px,7vw,28px)}
  .admin-head{flex-direction:column;align-items:stretch}
  .admin-actions{display:grid;grid-template-columns:1fr;width:100%}
  .admin-actions .btn{width:100%}
  .admin-tabs{display:grid !important;grid-template-columns:1fr !important;overflow:visible !important}
  .admin-tabs button{width:100%;min-height:46px}
  .role-card{padding:13px}
  .actions-cell .btn{min-height:44px}
}

/* Mobile tables become readable stacked cards; tablet/desktop stay tables. */
@media (max-width:680px){
  .table-wrap{
    overflow:visible !important;
    border:0;
    border-radius:0;
    background:transparent;
  }
  .table-wrap table{
    display:block;
    width:100% !important;
    min-width:0 !important;
    border-collapse:separate;
  }
  .table-wrap thead{display:none}
  .table-wrap tbody{display:grid;gap:10px}
  .table-wrap tr{
    display:block;
    width:100%;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
    padding:6px 12px;
    box-shadow:0 4px 14px rgba(18,55,42,.04);
  }
  .table-wrap td{
    display:grid;
    grid-template-columns:minmax(102px,40%) minmax(0,1fr);
    gap:10px;
    align-items:start;
    width:100%;
    padding:9px 0;
    border-bottom:1px solid #edf2ef;
    font-size:13px;
    overflow-wrap:anywhere;
  }
  .table-wrap td:last-child{border-bottom:0}
  .table-wrap td[data-label]::before{
    content:attr(data-label);
    font-size:10px;
    line-height:1.3;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.045em;
    color:#5f7068;
  }
  .table-wrap td[colspan]{
    display:block;
    text-align:center;
  }
  .table-wrap .actions-cell{
    min-width:0 !important;
    display:flex;
    flex-wrap:wrap;
    gap:7px;
  }
  .table-wrap .actions-cell::before{display:none}
  .table-wrap .actions-cell .btn,
  .table-wrap td .btn{
    flex:1 1 120px;
    width:auto;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:normal;
    text-align:center;
  }
}

/* Footer: slim full-width bar (Google style). Desktop / iPad: one row, copyright left, credit right, vertically
   centred, about 40px in total (1px rule + 10px padding + one 19px line + 10px padding). No min-height or fixed
   height: if the text does not fit it wraps and the bar grows. Phones (<=680px): the two lines stack, centred, with
   minimal spacing. The bottom safe area (iPhone home bar) is added to the bottom padding. Normal flow, below content. */
footer{margin:0;padding:10px 0 calc(10px + env(safe-area-inset-bottom));line-height:19px}
.footer-wrap{align-items:center;justify-content:space-between;flex-wrap:wrap;column-gap:16px;row-gap:0;min-height:0}
.footer-wrap>span{min-width:0;overflow-wrap:anywhere}
@media (max-width:680px){
  footer{padding:8px 0 calc(8px + env(safe-area-inset-bottom))}
  .footer-wrap{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:0;
  }
}

/* Back to Top */
.back-to-top{
  position:fixed;
  right:max(14px,env(safe-area-inset-right));
  bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:75;
  display:flex;
  align-items:center;
  gap:6px;
  min-height:40px;
  border:1px solid #c9d9d1;
  border-radius:999px;
  padding:8px 12px;
  background:rgba(255,255,255,.96);
  color:var(--green);
  font:800 12px/1 Inter,ui-sans-serif,system-ui,sans-serif;
  box-shadow:0 8px 24px rgba(11,57,39,.14);
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.back-to-top.show{opacity:1;transform:none;pointer-events:auto}
@media (max-width:480px){
  .back-to-top{right:10px;padding:8px 10px;min-height:40px}
  .back-to-top span{display:none}
}

/* Very small phones */
@media (max-width:380px){
  .site-header .container{width:min(100% - 10px,var(--content-max)) !important}
  .nav-wrap{gap:5px !important}
  .brand{gap:6px !important}
  .brand img{width:36px !important;height:36px !important;flex-basis:36px !important}
  .brand-en-only{font-size:clamp(7.2px,2.35vw,8.8px) !important}
  .menu-btn{width:42px;height:42px;min-width:42px;min-height:42px;flex-basis:42px}
  .portal-card{grid-template-columns:42px minmax(0,1fr)}
  .portal-card small{grid-column:1/-1;width:100%}
}

/* Large desktops: centered, controlled reading width */
@media (min-width:1536px){
  .container{width:min(1220px,calc(100% - 64px))}
  .form-container{width:min(1040px,calc(100% - 64px))}
}



/* V30 Membership navigation final correction
   Member Account is intentionally nested under Membership, not top-level/Home. */
@media (min-width:901px){
  #membershipMenu{
    min-width:245px !important;
  }
  #membershipMenu a{
    white-space:nowrap !important;
  }
}
.portal-cards.portal-cards-membership{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  width:min(520px,100%) !important;
}
@media (max-width:640px){
  .portal-cards.portal-cards-membership{
    grid-template-columns:1fr !important;
    max-width:360px !important;
  }
}
@media (max-width:900px){
  #membershipMenu a{
    white-space:nowrap !important;
  }
}


/* =========================================================
   V33 AUDIT LAYER — readability, iPad/touch, payments
   ========================================================= */

/* Readable minimums: labels and helper text were 10–11px on every device. */
.reference-form label,.reference-box-title,.form-section-title,.reference-eyebrow,.type-select-label{font-size:12px !important}
.payment-option b{font-size:14px}
.payment-option small,.file-name,.sig-actions,.submit-note,.photo-placeholder,.signature-upload-preview{font-size:12px}
.agreement-text.scrollable,.reference-check{font-size:13px !important}
.reference-form-head p{font-size:13px}
.page-head span{font-size:12px}

/* Touch devices (phones AND iPads at any width): 16px controls stop iOS Safari zooming into fields. */
@media (hover:none) and (pointer:coarse){
  input,select,textarea,.reference-form input,.reference-form select{font-size:16px !important}
  .signature-tab,.sig-actions button,.reference-upload-button,.btn.compact{min-height:44px}
}

/* Native file input stays focusable/accessible but is hidden behind the styled button (was display:none). */
.reference-upload-button{position:relative}
.reference-upload-button input[type=file]{display:block !important;position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.reference-upload-button:focus-within{outline:3px solid rgba(13,116,72,.35);outline-offset:2px}

/* Header title: wrap onto two readable lines instead of shrinking to ~8–10px on phones and tablets. */
@media (max-width:1180px) and (min-width:901px){
  .brand-en-only{font-size:12px !important;white-space:normal !important;max-width:230px}
}
@media (max-width:900px){
  .brand-en-only{font-size:clamp(11.5px,3.1vw,14px) !important;letter-spacing:0 !important;white-space:normal !important;line-height:1.2 !important;overflow:hidden;display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}
@media (max-width:380px){
  .brand-en-only{font-size:11px !important}
}

/* Desktop/iPad-landscape Membership menu opens on tap/click as well as hover. */
@media (min-width:901px){
  .dropdown.open .dropmenu{display:block}
}

/* iPad portrait / small tablets: keep 3-up name rows instead of orphaned 2-column wraps. */
@media (min-width:700px) and (max-width:900px){
  .reference-grid.three{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
}


/* Payment amount, Zelle instructions and Stripe return page */
.fee-summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 14px;padding:12px 14px;border:1px solid var(--nt-accent-tint,#c5dfd1);border-radius:9px;background:var(--nt-accent-tint,#eef8f2)}
.fee-summary span{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--nt-ink-2,#3f5149)}
.fee-summary strong{font-size:22px;color:var(--green)}
.fee-summary small{font-size:13px;color:var(--nt-ink-2,#4f5f58)}
.payment-help{margin:14px 0 0;padding:11px 13px;border-left:4px solid var(--gold);background:#fffbf2;border-radius:7px;font-size:13px;line-height:1.55;color:#5a4d31;overflow-wrap:anywhere}
.payment-result h3{margin-top:0;font:700 clamp(20px,2.4vw,26px)/1.2 Georgia,serif;color:var(--green)}
.payment-result p{line-height:1.6}
.payment-back{text-align:center;margin-top:18px}
.btn.compact.primary{background:var(--green);color:#fff;border-color:var(--green)}
.btn.compact.danger{background:#fff}

/* Private image viewer (admin photo/signature) */
.image-viewer{border:0;border-radius:14px;padding:14px;width:min(720px,calc(100vw - 24px));max-height:calc(100dvh - 24px);box-shadow:0 20px 60px rgba(0,0,0,.3)}
.image-viewer::backdrop{background:rgba(10,25,19,.6)}
.image-viewer-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.image-viewer-head h3{margin:0;font-size:16px}
.image-viewer img{display:block;width:100%;max-height:calc(100dvh - 120px);object-fit:contain;background:var(--nt-tint,#f6f8f7);border-radius:8px}
@media (max-width: 640px) {
  .reference-photo-preview {
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }

  .reference-photo-preview img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
  }
}

/* Mobile Header Name - Single Line */
@media (max-width: 640px) {
  .brand-en-only {
    white-space: nowrap !important;
    font-size: clamp(12px, 3.2vw, 15px) !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #0b5d3b !important;
    font-weight: 700 !important;
  }
}
/* Very narrow phones (320–380px): let the name wrap rather than push the page sideways */
@media (max-width: 380px) {
  .brand-en-only { white-space: normal !important; font-size: 11px !important; }
}

/* Admin member photo thumbnail */
.photo-thumb-trigger{padding:2px!important;width:48px;height:48px;min-width:48px;border-radius:8px;overflow:hidden;display:inline-flex;align-items:center;justify-content:center}
.member-photo-thumb{display:block;width:42px;height:42px;object-fit:cover;border-radius:6px;cursor:pointer}
/* Applicant photo that could not be shown (no file, too many requests, no permission): a labelled placeholder, not a blank. */
.photo-thumb-trigger.is-unavailable{font-size:11px;font-weight:700;line-height:1.1;white-space:normal;text-align:center;color:var(--nt-muted,#5f6b66);border-style:dashed}
.ps-photo-note{display:block;margin-top:2px;color:#8a4b00;font-weight:600}
/* Photo is its own normal table cell (not a flex .actions-cell, which the browser would merge with the
   adjacent Action cell); the thumbnail keeps a fixed size at every breakpoint. */
.photo-cell{width:64px;vertical-align:middle}
.table-wrap td .photo-thumb-trigger{flex:none;width:48px;height:48px;min-height:48px}
@media (max-width:680px){.table-wrap td.photo-cell{display:block}}

/* Admin list search (Member Applications / Approved Member Accounts) */
.admin-search{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 4px;max-width:640px}
.admin-search input{flex:1 1 260px;min-width:0;width:auto}
.admin-search .btn{flex:0 0 auto;min-height:42px}
.admin-search-status{margin:4px 0 12px;min-height:1.2em}
.admin-search-status:empty{margin:0 0 8px;min-height:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:680px){
  .admin-search{max-width:none}
  .admin-search input{flex-basis:100%;font-size:16px}
  .admin-search .btn{flex:1 1 0;min-height:44px}
}

/* ===== V35 logged-in portal: shared shell + design system (ps-*) =====
   Applies only after an officer signs in (body.portal-mode); the public site and forms are unchanged. */
:root{--ps-green:#0a5c3a;--ps-green-600:#0d7448;--ps-green-50:#eaf5ef;--ps-bg:#f4f7f5;--ps-line:#e2e9e5;--ps-ink:#17231f;--ps-muted:#5c6b65;--ps-radius:14px;--ps-shadow:0 1px 2px rgba(16,40,30,.05),0 6px 18px rgba(16,40,30,.05);--ps-top-h:80px}
body.portal-mode{background:var(--ps-bg)}
body.portal-mode .site-header,body.portal-mode footer,body.portal-mode #view-admin>.container>.page-head{display:none!important}
body.portal-mode #view-admin{padding:0!important;min-height:100vh;background:var(--ps-bg)}
body.portal-mode #view-admin>.container{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
.ps-shell :focus-visible{outline:3px solid rgba(13,116,72,.45);outline-offset:2px}
.ps-ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Header */
.ps-top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;min-height:var(--ps-top-h);padding:10px clamp(16px,2.5vw,28px);padding-top:max(10px,env(safe-area-inset-top));background:#fff;border-bottom:1px solid var(--ps-line);box-shadow:0 2px 10px rgba(16,40,30,.04)}
.ps-brand{display:flex;align-items:center;gap:14px;min-width:0;border:0;background:none;padding:0;cursor:pointer;text-align:left;color:var(--ps-green)}
.ps-brand img{width:58px;height:58px;border-radius:50%;object-fit:cover;flex:none;border:2px solid #dfb35e;box-shadow:0 3px 10px rgba(0,0,0,.08)}
.ps-brand span{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:clamp(17px,1.9vw,27px);line-height:1.15;color:var(--ps-green)}
.ps-user{margin-left:auto;display:flex;align-items:center;gap:12px;min-width:0}
.ps-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--ps-green);color:#fff;font-weight:800;font-size:14px;flex:none}
.ps-user-text{display:grid;line-height:1.25;min-width:0}
.ps-user-text b{font-size:14px;color:var(--ps-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-user-text small{font-size:12px;color:var(--ps-muted);text-transform:capitalize}
.ps-shell .ps-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:9px 14px;border-radius:10px;text-decoration:none;color:var(--ps-ink);font-size:14px;font-weight:700}
.ps-shell .ps-menu-btn{display:none;margin-left:auto;flex:none;align-items:center;gap:8px;min-height:46px;padding:10px 16px;border-radius:10px;font-size:16px;font-weight:700;color:#fff}

/* Layout + navigation */
.ps-body{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:calc(100vh - var(--ps-top-h))}
.ps-nav{background:#fff;border-right:1px solid var(--ps-line);padding:16px 12px;display:flex;flex-direction:column;gap:4px;position:sticky;top:var(--ps-top-h);height:calc(100vh - var(--ps-top-h));overflow:auto}
.ps-nav-item{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:10px 14px;border:0;border-radius:10px;background:none;color:var(--nt-ink,#2b3a34);font-size:15px;font-weight:600;line-height:1.2;text-align:left;text-decoration:none;cursor:pointer}
.ps-nav-item:hover{background:var(--ps-green-50);color:var(--ps-green)}
.ps-nav-item[aria-current="page"]{background:var(--ps-green);color:#fff}
.ps-nav-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--ps-line);display:grid;gap:4px}
.ps-nav .ps-signout{color:#b42318}
.ps-nav-user{display:none}
.ps-main{--g:clamp(16px,2.5vw,32px);--gt:24px;min-width:0;padding:var(--gt) var(--g) 48px}
.ps-pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.ps-pagehead h1{display:flex;align-items:center;gap:12px;margin:0;font-size:clamp(24px,2.3vw,32px);font-weight:800;line-height:1.15;color:var(--ps-ink)}
.ps-pagehead h1 .ps-ico{width:30px;height:30px;color:var(--ps-green)}
.ps-crumb{margin:6px 0 0;color:var(--ps-muted);font-size:15px}
.ps-page-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Cards, stats, badges (tones are shared by tiles, badges and quick actions) */
#adminDashboard .ps-main .panel{border-color:var(--ps-line);border-radius:var(--ps-radius);box-shadow:var(--ps-shadow)}
.ps-card{background:#fff;border:1px solid var(--ps-line);border-radius:var(--ps-radius);box-shadow:var(--ps-shadow);padding:18px 20px;min-width:0}
.ps-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.ps-card-head h2{display:flex;align-items:center;gap:10px;margin:0;font-size:17px;font-weight:700;color:var(--ps-ink)}
.ps-card-head h2 .ps-ico{color:var(--ps-green)}
.ps-link{border:0;background:none;color:var(--ps-green-600);font-weight:700;font-size:13px;cursor:pointer;padding:8px 4px;min-height:40px}
.ps-link:hover{text-decoration:underline}
.ps-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:16px;margin-bottom:20px}
.ps-stat{display:flex;align-items:center;gap:14px;min-width:0;background:#fff;border:1px solid var(--ps-line);border-radius:var(--ps-radius);box-shadow:var(--ps-shadow);padding:18px}
.ps-tile{display:grid;place-items:center;width:58px;height:58px;border-radius:14px;flex:none}
.ps-tile .ps-ico{width:28px;height:28px}
.ps-stat-label{display:block;font-size:14px;color:var(--ps-muted)}
.ps-stat strong{display:block;font-size:28px;line-height:1.2;color:var(--ps-ink);margin:2px 0;overflow-wrap:anywhere}
.ps-stat small{display:block;font-size:12.5px;color:var(--ps-muted)}
.ps-green{background:#e7f5ec;color:#157a43}
.ps-amber{background:#fff3d9;color:#8a5300}
.ps-red{background:#fdeaea;color:#b42318}
.ps-blue{background:#e7effd;color:#1d4ed8}
.ps-purple{background:#f0eafd;color:#6b3fcf}
.ps-rose{background:#fde9ea;color:#cf3f45}
.ps-slate{background:#eceff3;color:#475569}
.ps-gray{background:#eff2f1;color:#46524d}
.ps-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.3;text-transform:capitalize;white-space:nowrap}
.ps-sub{display:block;color:var(--ps-muted);font-size:12px;margin-top:2px}

/* Dashboard grids, charts, lists */
.ps-grid{display:grid;gap:20px;margin-bottom:20px}
.ps-grid-cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.ps-grid-lists{grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr))}
.ps-legend{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--ps-muted);margin-bottom:10px}
.ps-legend-note{margin-left:auto}
.ps-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.ps-dot-a,.ps-bar-a{background:#22a35a}.ps-dot-b,.ps-bar-b{background:#3b82f6}
.ps-chart{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;align-items:end;height:170px;border-bottom:1px solid var(--ps-line)}
.ps-bars{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:100%}
.ps-bar{width:min(12px,42%);min-height:2px;border-radius:4px 4px 0 0}
.ps-chart-labels{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;margin-top:6px;font-size:11px;color:var(--ps-muted);text-align:center}
.ps-chart-max{margin:10px 0 0}
.ps-donut-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.ps-donut{display:grid;place-items:center;width:150px;height:150px;border-radius:50%;flex:none}
.ps-donut>div{display:grid;place-content:center;width:98px;height:98px;border-radius:50%;background:#fff;text-align:center}
.ps-donut strong{font-size:26px;line-height:1}.ps-donut small{color:var(--ps-muted);font-size:12px}
.ps-legend-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14px;flex:1;min-width:170px}
.ps-legend-list li{display:flex;justify-content:space-between;gap:12px}
.ps-legend-list small{color:var(--ps-muted);font-weight:500}
.ps-kv{margin:0;display:grid;gap:0}
.ps-kv>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--ps-line)}
.ps-kv>div:last-child{border-bottom:0}
.ps-kv dt{color:var(--ps-muted);font-size:14px}.ps-kv dd{margin:0;font-weight:700;text-align:right}
.ps-table table{min-width:0}
.ps-table th{background:var(--nt-tint,#f6f8f7);font-size:12px;text-transform:none;letter-spacing:0;color:var(--nt-ink-2,#33433c)}
.ps-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:14px}
.ps-quick-btn{display:flex;align-items:center;gap:12px;min-height:64px;padding:14px 16px;border:1px solid rgba(0,0,0,.04);border-radius:12px;font-size:14px;font-weight:700;line-height:1.25;text-align:left;cursor:pointer;transition:transform .15s,box-shadow .15s}
.ps-quick-btn:hover{transform:translateY(-2px);box-shadow:var(--ps-shadow)}
.ps-quick-btn .ps-ico{width:26px;height:26px}

/* Tablet + phone: header "Menu" opens the same navigation as a drop-down panel */
@media (max-width:1023px){
  .ps-user{display:none}
  .ps-shell .ps-menu-btn{display:inline-flex}
  .ps-body{display:block;min-height:0}
  .ps-nav{display:none;position:fixed;left:12px;right:12px;top:var(--ps-top-h);height:auto;max-height:calc(100dvh - var(--ps-top-h) - 20px);z-index:60;border:1px solid var(--ps-line);border-radius:14px;box-shadow:0 18px 40px rgba(16,40,30,.18);padding:10px}
  .ps-nav.open{display:flex}
  .ps-nav-user{display:flex;align-items:center;gap:10px;padding:6px 10px 12px;margin-bottom:6px;border-bottom:1px solid var(--ps-line)}
  .ps-nav-foot{margin-top:6px}
  .ps-pagehead{margin:calc(var(--gt)*-1) calc(var(--g)*-1) 18px;padding:18px var(--g);background:var(--nt-tint,#eef2f0);border-bottom:1px solid var(--ps-line)}
}
@media (min-width:600px) and (max-width:1023px){.ps-nav{left:auto;width:340px}}
@media (max-width:599px){
  .ps-top{gap:10px;padding:8px 14px;padding-top:max(8px,env(safe-area-inset-top))}
  .ps-brand{gap:10px}
  .ps-brand img{width:48px;height:48px}
  .ps-brand span{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-size:16px;font-weight:800}
  .ps-main{--g:14px;--gt:16px;padding-bottom:40px}
  .ps-pagehead h1{font-size:25px}
  .ps-pagehead h1 .ps-ico{display:none}
  .ps-crumb{font-size:14px}
  .ps-page-actions,.ps-page-actions .ps-btn{width:100%}
  .ps-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ps-stat{flex-direction:column;align-items:flex-start;gap:8px;padding:14px}
  .ps-tile{width:42px;height:42px;border-radius:12px}
  .ps-tile .ps-ico{width:22px;height:22px}
  .ps-stat strong{font-size:22px}
  .ps-card{padding:14px}
  .ps-grid{gap:14px;margin-bottom:14px}
  .ps-chart{height:140px;gap:3px}.ps-chart-labels{gap:3px;font-size:10px}
  .ps-donut{width:130px;height:130px}.ps-donut>div{width:84px;height:84px}
  .ps-quick{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ps-quick-btn{min-height:56px;padding:12px}
}
@media (max-width:380px){.ps-brand span{font-size:14.5px}.ps-shell .ps-menu-btn{padding:10px 12px}}
.ps-stat strong{white-space:nowrap;font-size:clamp(22px,1.75vw,28px)}
.ps-stat>div{min-width:0}
.ps-table td:first-child,.ps-table td:last-child{white-space:nowrap}
.ps-note{margin:14px 0 0}
@media (min-width:1024px){.ps-tile{width:50px;height:50px}.ps-tile .ps-ico{width:25px;height:25px}.ps-stat{padding:16px;gap:12px}}


/* ---- V35 shared components: page frame for every signed-in view (Admin + Member Account) ---- */
body.portal-mode .view.active{padding:0!important;min-height:100vh;background:var(--ps-bg)}
body.portal-mode .view.active>.container{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
body.portal-mode .view.active>.container>.page-head{display:none!important}
#portalPage>.ps-card,#portalPage>.ps-stats,#portalPage>.ps-grid,#portalPage>details,#portalPage>.member-admin-detail>.ps-card{margin-bottom:20px}
#portalPage .ps-grid>.ps-card{margin-bottom:0}
.ps-card{scroll-margin-top:96px}
.ps-card-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ps-chip{text-transform:none}
.ps-h3{font-size:15px;margin:22px 0 10px;color:var(--ps-ink)}
.ps-lead{margin:0 0 16px}
.ps-shell .btn{border-radius:10px}
.ps-shell .btn.compact{min-height:38px;padding:8px 12px}
.btn.danger-fill{background:#c62828;border-color:#c62828;color:#fff}

/* Search + filters (compact, icon-led, wrap on phones) */
.ps-filters{display:grid;gap:10px;margin-bottom:14px}
.ps-search{position:relative}
.ps-search .ps-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ps-muted);pointer-events:none}
.ps-shell .ps-search input{min-height:48px;padding:12px 14px 12px 44px;border-radius:10px;font-size:15px}
.ps-filter-row{display:flex;flex-wrap:wrap;gap:10px}
.ps-shell .ps-select{display:flex;align-items:center;gap:8px;flex:1 1 160px;min-width:0;min-height:46px;padding:0 12px;border:1px solid var(--nt-line,#d8e1dd);border-radius:10px;background:#fff;text-transform:none;letter-spacing:0;font-size:14px;font-weight:600;color:var(--nt-ink-2,#33433c)}
.ps-select .ps-ico{color:var(--nt-ink-2,#46564f)}
.ps-shell .ps-select select,.ps-shell .ps-select input{flex:1;min-width:0;min-height:44px;padding:10px 0;border:0;box-shadow:none;background:transparent;font-weight:600}
.ps-select-label{color:var(--ps-muted);white-space:nowrap}
.ps-shell .ps-clear{flex:1 1 110px;min-height:46px;background:var(--nt-tint,#f4f7f5)}
.ps-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.ps-shell .ps-toolbar .ps-period{flex:1 1 180px;max-width:340px}
.ps-custom{display:flex;flex-wrap:wrap;gap:10px;flex:1 1 100%;order:3}
.ps-custom[hidden]{display:none}
.ps-toolbar>.btn{margin-left:auto;min-height:46px}

/* Tables (tablet/desktop) and record cards (phones) */
.ps-shell .ps-table{overflow:visible;border-color:var(--ps-line);border-radius:12px}
.ps-shell .ps-table table{min-width:0}
.ps-shell .ps-table th{background:var(--nt-tint,#f6f8f7);font-size:12.5px;font-weight:700;text-transform:none;letter-spacing:0;color:var(--nt-ink-2,#33433c);white-space:nowrap}
.ps-shell .ps-table th:first-child{border-top-left-radius:12px}.ps-shell .ps-table th:last-child{border-top-right-radius:12px}
.ps-shell .ps-table tr:last-child td{border-bottom:0}
.ps-shell .ps-table td{font-size:14px;vertical-align:middle}
.ps-shell .ps-table tbody tr:hover{background:var(--nt-tint,#fafcfb)}
.ps-table td.nowrap{white-space:nowrap}
.ps-table td.num,.ps-table th.num{text-align:right;white-space:nowrap}
.ps-table td.ps-break{overflow-wrap:anywhere;max-width:300px}
.ps-shell .ps-table td.actions-cell{display:table-cell;min-width:0;white-space:nowrap}
.ps-shell .ps-table td.actions-cell .btn+.btn{margin-left:6px}
.ps-mcards{display:none;list-style:none;margin:0;padding:0}
.ps-mcard{border:1px solid var(--ps-line);border-radius:12px;padding:14px;background:#fff;margin-bottom:10px}
.ps-mcard-head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 12px}
.ps-mcard-title{flex:1 1 9rem;min-width:0}   /* a wide badge (several chips) moves below the title instead of squeezing it */
.ps-mcard-title b{display:block;font-size:15px;color:var(--ps-ink);overflow-wrap:anywhere}
.ps-mcard-title small{display:block;margin-top:3px;font-size:12.5px;color:var(--ps-muted);overflow-wrap:anywhere}
.ps-mcard-kv{margin:12px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
.ps-mcard-kv dt{font-size:12px;color:var(--ps-muted)}
.ps-mcard-kv dd{margin:2px 0 0;font-size:14px;overflow-wrap:anywhere}
.ps-mcard-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ps-shell .ps-mcard-actions .btn{flex:1 1 auto;min-height:44px}
.ps-shell .ps-mcard .photo-thumb-trigger{flex:none;width:52px;height:52px;min-height:52px;padding:0;overflow:hidden}
@media (max-width:680px){.ps-shell .ps-table{display:none}.ps-mcards{display:block}}

/* Pagination */
.ps-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;color:var(--ps-muted);font-size:14px}
.ps-pages{display:flex;gap:6px;flex-wrap:wrap}
.ps-pages button{min-width:42px;height:42px;border:1px solid var(--ps-line);border-radius:10px;background:#fff;font-weight:700;font-size:15px;color:var(--ps-ink);cursor:pointer}
.ps-pages button[aria-current="page"]{background:var(--ps-green);border-color:var(--ps-green);color:#fff}
.ps-pages button:disabled{opacity:.4;cursor:default}

/* Row action menu (⋮) */
.ps-menu{position:relative;display:inline-block}
.ps-menu summary{list-style:none;display:grid;place-items:center;width:42px;height:42px;border-radius:10px;cursor:pointer;color:var(--nt-ink-2,#33433c)}
.ps-menu summary::-webkit-details-marker{display:none}
.ps-menu summary:hover,.ps-menu[open] summary{background:var(--nt-tint,#eef2f0)}
.ps-menu summary .ps-ico{width:22px;height:22px}
.ps-menu-list{position:absolute;right:0;top:calc(100% + 4px);z-index:30;display:grid;min-width:180px;padding:6px;background:#fff;border:1px solid var(--ps-line);border-radius:12px;box-shadow:0 12px 30px rgba(16,40,30,.16)}
.ps-menu-item{min-height:42px;padding:10px 12px;border:0;border-radius:8px;background:none;text-align:left;font-size:14px;font-weight:600;color:var(--ps-ink);cursor:pointer}
.ps-menu-item:hover,.ps-menu-item:focus-visible{background:var(--nt-tint,#f2f7f4)}
.ps-menu-item.danger{color:#b42318}
.ps-mcard-actions .ps-menu-list{right:auto;left:0}

/* Dialog */
.ps-dialog{width:min(460px,calc(100% - 32px));padding:0;border:0;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.25)}
.ps-dialog::backdrop{background:rgba(16,30,24,.45)}
.ps-dialog form{display:grid;gap:14px;padding:22px}
.ps-dialog h2{margin:0;font-size:19px;color:var(--ps-ink)}
.ps-dialog p{margin:0;color:var(--nt-ink-2,#46564f);line-height:1.5}
.ps-field{display:grid;gap:6px;text-transform:none;letter-spacing:0;font-size:14px;font-weight:600;color:var(--nt-ink-2,#33433c)}
.ps-field-error{color:#b42318;font-size:13px}
.ps-dialog-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.ps-dialog .ps-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:10px;font-weight:700}
@media (max-width:480px){.ps-dialog-actions .btn{flex:1}}

/* Forms inside the portal */
.ps-shell .ps-form{padding:0;gap:14px 16px;margin:6px 0 16px}
.ps-shell .ps-form label{gap:6px;text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:600;color:var(--nt-ink-2,#33433c)}
.ps-shell .ps-form input,.ps-shell .ps-form select{min-height:46px}
.ps-form-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ps-collapse{margin-bottom:16px;padding:16px;border:1px solid var(--nt-accent-tint,#cfe3d7);border-radius:12px;background:#f7fbf8}
.ps-collapse:not([open]){display:none}
.ps-collapse>summary{list-style:none}

/* KPI variants, info lists, states */
.ps-stats-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ps-val-green{color:#157a43}.ps-val-red{color:#c62828}.ps-val-blue{color:#1d4ed8}
.ps-more>summary{display:flex;align-items:center;gap:10px;min-height:40px;font-weight:700;cursor:pointer;list-style:none}
.ps-more>summary::-webkit-details-marker{display:none}
.ps-more>summary .ps-ico{color:var(--ps-green)}
.ps-more>summary small{margin-left:auto;color:var(--ps-muted);font-weight:500}
.ps-more[open]>summary{margin-bottom:12px}
.ps-info{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px}
.ps-info>div{min-width:0;padding:10px 12px;border:1px solid var(--ps-line);border-radius:10px;background:var(--nt-tint,#fafcfb)}
.ps-info dt{font-size:12.5px;color:var(--ps-muted)}
.ps-info dd{margin:4px 0 0;font-weight:700;overflow-wrap:anywhere}
.ps-info-1{grid-template-columns:1fr;gap:0}
.ps-info-1>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border:0;border-bottom:1px solid var(--ps-line);border-radius:0;background:none}
.ps-info-1 dd{margin:0;text-align:right}
.ps-info-1 .ps-total dt{color:var(--ps-ink);font-weight:700}
.ps-empty{display:grid;justify-items:center;gap:8px;padding:32px 16px;text-align:center;color:var(--ps-muted);border:1px dashed #d3ddd8;border-radius:12px;background:var(--nt-tint,#fbfcfb)}
.ps-empty .ps-ico{width:30px;height:30px;color:var(--nt-faint,#9aa8a2)}
.ps-empty p{margin:0}
.ps-error .ps-ico{color:#b42318}
.ps-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:28px;color:var(--ps-muted)}
.ps-spinner{width:20px;height:20px;border-radius:50%;border:3px solid #d6e5dc;border-top-color:var(--ps-green);animation:ps-spin .8s linear infinite}
@keyframes ps-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ps-spinner{animation-duration:2.4s}}

/* Member profile, roles, reports */
.ps-profile{display:flex;align-items:center;gap:18px}
.ps-profile img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:2px solid #dfb35e;flex:none}
.ps-profile h2{margin:0 0 8px;font-size:22px}
.ps-profile p{margin:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ps-avatar-lg{width:84px;height:84px;font-size:26px}
.ps-role-list{display:grid;gap:16px;margin-bottom:20px}
.ps-shell .role-card{display:block;margin:0;padding:18px 20px;background:#fff;border-color:var(--ps-line);border-radius:var(--ps-radius)}
.ps-role-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ps-role-who{flex:1;min-width:180px}
.ps-role-who b{display:block;font-size:16px}
.ps-role-who small{color:var(--ps-muted);overflow-wrap:anywhere}
.ps-perm-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px}
.ps-perm-group{margin:0;padding:8px 14px 10px;border:1px solid var(--ps-line);border-radius:12px}
.ps-perm-group legend{padding:0 6px;font-size:13px;font-weight:700;color:var(--ps-green)}
.ps-shell .ps-check{display:flex;align-items:center;gap:10px;min-height:40px;text-transform:none;letter-spacing:0;font-size:14px;font-weight:500;color:var(--ps-ink)}
.ps-shell .ps-check input{width:18px;height:18px;flex:none;accent-color:var(--ps-green)}
.ps-role-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.ps-report-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px}
.ps-report-link{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--ps-line);border-radius:12px;background:var(--nt-tint,#fbfcfb);color:var(--ps-ink);text-decoration:none}
.ps-report-link:hover{border-color:var(--nt-accent-tint,#bcd8ca);background:var(--ps-green-50)}
.ps-report-link .ps-ico{width:24px;height:24px;color:var(--ps-green)}
.ps-report-link b{display:block}.ps-report-link small{color:var(--ps-muted)}
.ps-print-period{margin:-4px 0 14px}

@media (max-width:599px){
  .ps-stats-3{gap:8px}
  .ps-stats-3 .ps-stat{align-items:center;text-align:center;padding:12px 6px}
  .ps-stats-3 .ps-tile,.ps-stats-3 .ps-stat small{display:none}
  .ps-stats-3 .ps-stat-label{font-size:12.5px}
  .ps-stats-3 .ps-stat strong{font-size:clamp(14px,4.4vw,19px)}
  .ps-shell .ps-select{flex-basis:calc(50% - 5px)}
  .ps-shell .ps-toolbar .ps-period{max-width:none}
  .ps-pager{justify-content:center;text-align:center}
  .ps-profile{align-items:flex-start}
  .ps-profile img,.ps-avatar-lg{width:64px;height:64px}
  .ps-card-head{flex-wrap:wrap}
}
@media print{
  body.portal-mode .ps-top,body.portal-mode .ps-nav,body.portal-mode .ps-toolbar,body.portal-mode .ps-card-actions,.back-to-top,.toast{display:none!important}
  body.portal-mode .ps-body{display:block}
  body.portal-mode,body.portal-mode .view.active,.ps-main{background:#fff!important}
  .ps-card,.ps-stat{box-shadow:none;break-inside:avoid}
  .ps-shell .ps-table{display:block!important}.ps-mcards{display:none!important}
}
.ps-shell .btn.primary.ps-btn,.ps-shell .btn.primary{color:#fff}
.ps-shell .ps-clear{flex:0 0 auto;padding-inline:18px}
.ps-shell .ps-select{flex-basis:150px}
.ps-shell .ps-select.ps-date{flex:1 1 210px}
@media (max-width:599px){.ps-shell .ps-select.ps-date{flex-basis:100%}.ps-shell .ps-clear{flex:1 1 calc(50% - 5px)}}
.ps-shell a.btn{color:var(--ps-ink);text-decoration:none}.ps-shell a.btn.primary{color:#fff}

/* =========================================================
   V36 Home + Mobile UI: public Home page (all widths) + Member Account (phones up to 640px)
   Member Account and admin desktop/tablet are untouched: their rules sit inside the 640px query.
   The public header uses the Menu button up to 900px (where the inline links collapse).
   Change one thing by changing one token:
     logo .......... the file public/assets/logo.jpg (header, portal header and favicon all point to it)
     hero photo .... public/assets/home-bg.jpg (the single <img class="m-hero-img"> in index.html points to it)
     Menu button ... --m-menu-bg / --m-menu-fg / --m-menu-radius
     icons ......... data-icon="..." on that one element (index.html) or its icon('...') name (app.js ICONS)
   ========================================================= */
:root{
  --m-font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --m-brand:#0a5c3a;                 /* primary brand green */
  --m-brand-soft:#e9f4ee;
  --m-accent:#1f9d55;                /* bright green for primary calls to action */
  --m-page-bg:#f4f7f5;
  --m-header-bg:#fff;
  --m-header-border:#e6ece9;
  --m-logo-size:50px;
  --m-logo-ring:#dfb35e;
  --m-org-name-color:var(--m-brand);
  --m-org-name-size:clamp(15px,4.3vw,18px);
  --m-org-name-weight:800;
  --m-menu-bg:var(--m-brand);        /* Menu button background (public header and portal header) */
  --m-menu-fg:#fff;                  /* Menu button text + icon */
  --m-menu-radius:12px;
  --m-menu-shadow:0 4px 12px rgba(10,92,58,.22);
  --m-menu-panel-bg:#fff;
  --m-menu-item-active-bg:var(--m-brand-soft);
  --m-hero-height:460px;
  --m-hero-position:center 35%;
  --m-hero-desktop-height:clamp(420px,40vw,520px);
  --m-hero-text:#fff;
  /* The hero photo is shown exactly as uploaded (no overlay, tint or filter). Text-only shadows help white text on light areas. */
  --m-hero-text-shadow:0 1px 2px rgba(0,0,0,.45),0 1px 6px rgba(0,0,0,.35);
  --m-hero-title-shadow:0 1px 3px rgba(0,0,0,.45),0 2px 10px rgba(0,0,0,.35);
  /* Dark hero text (Settings → Homepage Hero Text): a crisp 1 px light edge, no blur. Colors come from --hero-c-* (app.js). */
  --m-hero-shadow-dark-text:0 1px 0 rgba(255,255,255,.55);
  --m-card-bg:#fff;
  --m-card-border:#e6ece9;
  --m-card-radius:16px;
  --m-card-shadow:0 4px 14px rgba(16,52,38,.07);
  --m-card-icon:var(--m-brand);
  --m-text:#14231c;
  --m-text-muted:#5f6d67;
  --m-link:var(--m-brand);
  --m-btn-radius:10px;
  --m-btn-primary-bg:var(--m-accent);
  --m-btn-primary-fg:#fff;
  --m-welcome-bg:#e3efe8;
  --m-tabbar-bg:#fff;
  --m-tabbar-active:var(--m-brand);
  --m-gutter:14px;
}
/* Hero height follows the real viewport height (small-viewport units stay stable while mobile toolbars move): the
   whole homepage fits when the screen is tall enough, never below a readable minimum or above the design size. */
@supports (height:100svh){:root{--m-hero-height:clamp(340px,calc(100svh - 300px),460px);--m-hero-desktop-height:clamp(320px,min(40vw,calc(100svh - 450px)),520px)}}
.m-home,.m-only,.m-tabbar,.menu-btn-label{display:none}
#portalPage>.d-only>.ps-card{margin-bottom:20px} /* keeps the desktop member overview spacing identical */

@media (max-width:900px){
  /* ---- Brand + header (public site) ---- */
  .site-header{background:var(--m-header-bg)!important;border-bottom:1px solid var(--m-header-border)!important;backdrop-filter:none}
  .site-header .nav-wrap{min-height:72px!important;gap:10px!important}
  .site-header .brand{gap:10px!important;flex:1 1 auto;min-width:0;overflow:visible}
  .site-header .brand img{width:var(--m-logo-size)!important;height:var(--m-logo-size)!important;flex:0 0 var(--m-logo-size)!important;border:2px solid var(--m-logo-ring)!important}
  .site-header .brand-copy{max-width:none!important;flex:1 1 auto;min-width:0;overflow:visible}
  .site-header .brand-en.brand-en-only{display:block!important;margin:0!important;max-width:none!important;font-family:var(--m-font)!important;font-size:var(--m-org-name-size)!important;font-weight:var(--m-org-name-weight)!important;line-height:1.2!important;letter-spacing:0!important;text-transform:none!important;color:var(--m-org-name-color)!important;white-space:normal!important;overflow:visible!important;-webkit-line-clamp:unset!important;text-overflow:clip}

  /* ---- Menu button + drop-down panel ---- */
  .site-header .menu-btn{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;width:auto!important;height:auto!important;min-width:0!important;min-height:46px!important;flex:0 0 auto!important;padding:10px 16px!important;border:0!important;border-radius:var(--m-menu-radius)!important;background:var(--m-menu-bg)!important;color:var(--m-menu-fg)!important;font:700 16px/1 var(--m-font)!important;box-shadow:var(--m-menu-shadow)}
  .site-header .menu-btn-icon{font-size:19px;line-height:1}
  .site-header .menu-btn-label{display:inline}
  .site-header #mainNav{top:calc(78px + env(safe-area-inset-top))!important;left:var(--m-gutter)!important;right:var(--m-gutter)!important;padding:8px!important;background:var(--m-menu-panel-bg)!important;border:1px solid var(--m-card-border)!important;border-radius:var(--m-card-radius)!important;box-shadow:0 18px 40px rgba(16,40,30,.18)!important;gap:2px!important}
  .site-header #mainNav>a,.site-header #mainNav>.dropdown>.dropbtn,.site-header #mainNav .dropmenu a{min-height:48px!important;padding:12px 14px!important;border-radius:10px!important;font:600 15px/1.2 var(--m-font)!important;color:var(--m-text)!important}
  .site-header #mainNav>a:hover,.site-header #mainNav>.dropdown>.dropbtn:hover,.site-header #mainNav .dropmenu a:hover,.site-header #mainNav a:focus-visible{background:var(--m-menu-item-active-bg)!important;color:var(--m-brand)!important}

}

/* ---- Home page ---- */
#view-home{background:var(--m-page-bg)!important;background-image:none!important}
#view-home .hero{display:none!important}
.m-home{display:block;padding-bottom:20px;font-family:var(--m-font)}
.m-hero{position:relative;height:var(--m-hero-height);overflow:hidden;background:var(--m-brand);color:var(--m-hero-text)}
/* The hero picture is a decorative background, not an <img>: no image save / share menu on a long-press, no dragging; touches pass
   through to the hero (its text stays selectable, its buttons and links work). Before the saved hero is known: a plain background. */
.m-hero-img{position:absolute;inset:0;width:100%;height:100%;background-color:var(--m-hero-placeholder,#cfdcd5);background-image:var(--m-hero-src,none);background-size:cover;background-repeat:no-repeat;background-position:var(--m-hero-position);pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html.hero-pending .m-hero-img{background-image:none}
.m-hero-body{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:22px 20px 26px}
.m-hero-kicker{margin:0 0 4px;font-size:18px;font-weight:500;color:var(--hero-c-welcome,inherit);text-shadow:var(--hero-s-welcome,var(--m-hero-text-shadow))}
.m-hero-title{margin:0 0 8px;font:800 clamp(28px,8.2vw,34px)/1.12 var(--m-font);letter-spacing:-.01em;color:var(--hero-c-title,var(--m-hero-text));text-shadow:var(--hero-s-title,var(--m-hero-title-shadow))}
.m-hero-text{margin:0 0 18px;font-size:16px;line-height:1.4;color:var(--hero-c-subtitle,inherit);text-shadow:var(--hero-s-subtitle,var(--m-hero-text-shadow))}
.m-hero-actions{display:grid;gap:10px;max-width:260px}
.m-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 18px;border-radius:var(--m-btn-radius);font:700 15px/1.1 var(--m-font);text-decoration:none}
.m-btn .ps-ico{width:18px;height:18px}
/* Hero buttons: colors from Settings → Homepage Hero Text & Buttons (--hero-c-*), else the theme. The Become a Member border is an
   inset ring so choosing one never changes the button size. */
.m-btn-primary{background:var(--hero-c-join-bg,var(--m-btn-primary-bg));color:var(--hero-c-join-text,var(--m-btn-primary-fg));box-shadow:inset 0 0 0 1.5px var(--hero-c-join-border,transparent),0 4px 14px rgba(0,0,0,.18)}
.m-btn-ghost{border:1.5px solid var(--hero-c-login-border,rgba(255,255,255,.92));color:var(--hero-c-login-text,#fff);background:var(--hero-c-login-bg,rgba(0,0,0,.12))}
.m-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px var(--m-gutter) 0}
.m-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;min-width:0;padding:18px 10px 16px;background:var(--m-card-bg);border:1px solid var(--m-card-border);border-radius:var(--m-card-radius);box-shadow:var(--m-card-shadow);color:var(--m-text);text-decoration:none}
.m-card-icon{display:grid;place-items:center;margin-bottom:6px;color:var(--m-card-icon)}
.m-card-icon .ps-ico{width:36px;height:36px;stroke-width:1.7}
.m-card strong{font-size:15px;line-height:1.25}
.m-card small{font-size:13px;line-height:1.35;color:var(--m-text-muted)}
.m-card-link{display:inline-flex;align-items:center;gap:4px;margin-top:auto;padding-top:8px;font-size:14px;font-weight:700;color:var(--m-link);text-decoration:underline;text-underline-offset:3px}
.m-card-link .ps-ico{width:15px;height:15px}

@media (max-width:640px){
  /* ---- Portal header Menu shares the same Menu tokens ---- */
  .ps-shell .ps-menu-btn{background:var(--m-menu-bg)!important;border-color:var(--m-menu-bg)!important;color:var(--m-menu-fg)!important;border-radius:var(--m-menu-radius);box-shadow:var(--m-menu-shadow)}
  .ps-brand img{border-color:var(--m-logo-ring)}

  /* ---- Member Account (phone) ---- */
  .m-member .m-only{display:block}
  .m-member .d-only{display:none}
  .m-member.m-tab-overview .ps-pagehead{display:none}
  .m-member .ps-main{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  .m-welcome{display:flex;align-items:center;gap:14px;padding:16px;margin-bottom:12px;background:var(--m-welcome-bg);border-radius:var(--m-card-radius)}
  .m-welcome img,.m-welcome-avatar{width:84px;height:84px;flex:none;border-radius:50%;border:4px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.08);object-fit:cover}
  .m-welcome-avatar{display:grid;place-items:center;background:var(--m-brand);color:#fff;font-size:28px;font-weight:800}
  .m-welcome>div{min-width:0}
  .m-welcome-hi{font-size:15px;color:var(--m-text)}
  .m-welcome h2{margin:2px 0 4px;font:800 20px/1.2 var(--m-font);color:var(--m-text);overflow-wrap:anywhere}
  .m-welcome p{margin:0 0 2px;font-size:14px;color:#34443d}
  .m-welcome .ps-badge{margin-top:8px;padding:6px 12px;font-size:13px;text-transform:capitalize}
  .m-welcome .ps-badge.ps-green{background:var(--m-accent);color:#fff}
  .m-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
  .m-tile{display:flex;align-items:center;gap:10px;min-width:0;padding:14px 12px;background:var(--m-card-bg);border:1px solid var(--m-card-border);border-radius:var(--m-card-radius);box-shadow:var(--m-card-shadow)}
  .m-tile-icon{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%}
  .m-tile-icon .ps-ico{width:22px;height:22px;color:currentColor}
  .m-tile>div{min-width:0}
  .m-tile span:not(.m-tile-icon){display:block;font-size:13px;line-height:1.25;color:var(--m-text-muted)}
  .m-tile strong{display:block;margin-top:3px;font-size:16px;line-height:1.2;color:var(--m-text);overflow-wrap:anywhere}
  .m-panel{margin-bottom:12px;padding:14px;background:var(--m-card-bg);border:1px solid var(--m-card-border);border-radius:var(--m-card-radius);box-shadow:var(--m-card-shadow)}
  .m-panel h2{margin:0 0 10px;font:800 17px/1.2 var(--m-font);color:var(--m-text)}
  .m-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .m-panel-head h2{margin-bottom:6px}
  .m-link{border:0;background:none;padding:8px 0;min-height:40px;font:700 15px/1 var(--m-font);color:var(--m-link);cursor:pointer}
  .m-actions{display:grid;grid-template-columns:1fr;gap:8px}
  .m-action{display:flex;align-items:center;gap:10px;width:100%;min-height:50px;padding:8px 12px;border:0;border-radius:12px;font:600 15px/1.2 var(--m-font);color:var(--m-text);text-align:left;text-decoration:none;cursor:pointer}
  .m-action>span:nth-child(2){flex:1;min-width:0}
  .m-action>.ps-ico{width:18px;height:18px;color:var(--m-text-muted)}
  .m-action-icon{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:8px;color:#fff}
  .m-action-icon .ps-ico{width:18px;height:18px;color:currentColor}
  .m-action-green{background:var(--nt-accent-tint,#eaf5ef)}.m-action-green .m-action-icon{background:#1f8a4c}
  .m-action-blue{background:#eaf1fd}.m-action-blue .m-action-icon{background:#2f6fde}
  .m-action-purple{background:#f1edfd}.m-action-purple .m-action-icon{background:#7a52d6}
  .m-action-red{background:#fdeeee}.m-action-red .m-action-icon{background:#d93a3a}
  .m-list{list-style:none;margin:0;padding:0}
  .m-list li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--m-card-border)}
  .m-list li:first-child{border-top:0}
  .m-list-icon{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:50%;background:#eaf1fd;color:#2f6fde}
  .m-list-icon .ps-ico{width:20px;height:20px;color:currentColor}
  .m-list div{flex:1;min-width:0}
  .m-list b{display:block;font-size:14px;font-weight:600;color:var(--m-text);overflow-wrap:anywhere}
  .m-list small{display:block;margin-top:2px;font-size:13px;color:var(--m-text-muted)}
  .m-list .ps-badge{flex:none;text-transform:capitalize}
  .m-empty{margin:4px 0 0;color:var(--m-text-muted);font-size:14px}
  .m-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:grid;grid-template-columns:repeat(4,1fr);padding:6px 4px calc(6px + env(safe-area-inset-bottom));background:var(--m-tabbar-bg);border-top:1px solid var(--m-card-border);box-shadow:0 -4px 16px rgba(16,40,30,.08)}
  .m-tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:54px;padding:4px 2px;border:0;background:none;font:600 12px/1.1 var(--m-font);color:var(--m-text-muted);cursor:pointer}
  .m-tabbar .ps-ico{width:24px;height:24px;color:currentColor}
  .m-tabbar [aria-current="page"]{color:var(--m-tabbar-active)}
  .m-tabbar [aria-current="page"] span{text-decoration:underline;text-underline-offset:3px}
  body:has(.m-tabbar) .back-to-top{bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media print{.m-tabbar{display:none!important}}

/* ---- Home page: tablet + desktop adaptation of the same design (768px and wider) ----
   The photo fills the whole rounded hero (object-fit: cover); the text sits over its left side
   with text-only shadows (no overlay on the photo), so any replacement image keeps the layout and its own colours. */
@media (min-width:768px){
  .m-home{padding:28px 0 56px}
  .m-hero{width:min(1180px,calc(100% - 48px));height:var(--m-hero-desktop-height);margin:0 auto;border-radius:24px;box-shadow:0 18px 40px rgba(10,60,38,.18)}
  .m-hero-body{top:50%;bottom:auto;right:auto;width:min(760px,68%);transform:translateY(-50%);padding:40px clamp(28px,4.5vw,64px)}
  .m-hero-kicker{font-size:clamp(18px,1.6vw,22px)}
  .m-hero-title{font-size:clamp(32px,3.7vw,50px);margin-bottom:12px}
  .m-hero-text{font-size:clamp(16px,1.4vw,19px);margin-bottom:26px;opacity:.95}
  .m-hero-actions{grid-auto-flow:column;grid-auto-columns:max-content;max-width:none;gap:12px}
  .m-btn{min-height:50px;padding:12px 24px;font-size:16px}
  .m-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;width:min(1180px,calc(100% - 48px));margin:0 auto;padding:24px 0 0}
  .m-card{padding:28px 18px 24px;gap:6px;transition:transform .18s,box-shadow .18s}
  .m-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(16,52,38,.12)}
  .m-card-icon .ps-ico{width:42px;height:42px}
  .m-card strong{font-size:17px}
  .m-card small{font-size:14px}
  .m-card-link{font-size:15px;padding-top:12px}
}
@media (min-width:768px) and (max-width:900px){
  .m-hero-body{padding:32px 28px;width:70%}
  .m-cards{gap:12px}
  .m-card{padding:22px 12px 20px}
  .m-card strong{font-size:15px}
}
/* ---- Desktop header (inline links, wider than 900px): same logo + green organization name as the phone header ---- */
@media (min-width:901px){
  .site-header{background:var(--m-header-bg)!important;border-bottom:1px solid var(--m-header-border)!important}
  .site-header .brand img{width:60px!important;height:60px!important;flex:0 0 60px!important;border:2px solid var(--m-logo-ring)!important}
  .site-header .brand-copy{max-width:none!important}
  .site-header .brand-en.brand-en-only{margin:0!important;font-family:var(--m-font)!important;font-size:clamp(15px,1.55vw,22px)!important;font-weight:var(--m-org-name-weight)!important;line-height:1.2!important;letter-spacing:0!important;text-transform:none!important;color:var(--m-org-name-color)!important;white-space:nowrap!important}
  .site-header #mainNav>a,.site-header #mainNav>.dropdown>.dropbtn{font-family:var(--m-font)!important;font-weight:600!important;color:var(--m-text)!important}
  .site-header #mainNav>a:hover,.site-header #mainNav>.dropdown>.dropbtn:hover{background:var(--m-menu-item-active-bg)!important;color:var(--m-brand)!important}
}

/* ---- V38 Member: My Profile, Events, Support (all widths; same portal design family) ---- */
.mp-flash{display:flex;align-items:center;gap:10px;margin:0 0 16px;padding:12px 14px;border:1px solid #b9dcc8;border-radius:12px;background:#eaf6ef;color:#14532d;font-weight:600}
.mp-flash .ps-ico{width:20px;height:20px;color:currentColor}
.mp-head{display:flex;align-items:center;gap:18px;margin-bottom:20px}
.mp-photo{width:96px;height:96px;flex:none;border-radius:50%;object-fit:cover;border:3px solid var(--m-logo-ring,#dfb35e);font-size:30px}
.mp-head-text{min-width:0;flex:1}
.mp-head-text h2{margin:0 0 4px;font-size:22px;overflow-wrap:anywhere}
.mp-head-text p{margin:0 0 4px}
.mp-chips{display:flex;flex-wrap:wrap;gap:6px}
.mp-photo-btn{display:inline-flex;align-items:center;gap:8px;margin-top:8px;cursor:pointer;position:relative}
.mp-photo-btn:focus-within{outline:3px solid rgba(31,157,85,.45);outline-offset:2px}
.mp-file{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mp-hint{display:block;margin-top:6px}
.mp-cols{display:grid;gap:20px}
.mp-cols>div{min-width:0}
.mp-cols .ps-card{margin-bottom:20px}
@media (min-width:1024px){.mp-cols{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}}
.mp-rows{margin:0}
.mp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--ps-line)}
.mp-row:first-child{border-top:0;padding-top:0}
.mp-row>div,.mp-row>dl{min-width:0;margin:0}
.mp-row dt{font-size:12.5px;color:var(--ps-muted)}
.mp-row dd{margin:4px 0 0;font-weight:700;overflow-wrap:anywhere}
.mp-form{display:grid;gap:12px;padding:14px;margin:6px 0;border:1px solid var(--ps-line);border-radius:12px;background:var(--nt-tint,#fafcfb)}
.mp-form h3{margin:0;font-size:16px}
.mp-form p.muted{margin:0}
.mp-grid{grid-template-columns:repeat(2,minmax(0,1fr));border:0;padding:0;background:none}
.mp-span{grid-column:1/-1}
.mp-field{display:grid;gap:6px;text-transform:none;letter-spacing:0;font-size:13px;font-weight:700;color:var(--ps-ink)}
.mp-field input{min-height:46px;font-size:16px}
.mp-field input:invalid:not(:placeholder-shown):not(:focus){border-color:#e3b8bd}
.mp-error{margin:0;min-height:0;color:#b42318;font-weight:600;font-size:14px}
.mp-error:empty{display:none}
.mp-actions{display:flex;flex-wrap:wrap;gap:10px}
.mp-actions .btn{min-height:46px;display:inline-flex;align-items:center;gap:8px}
.mp-note{display:flex;gap:8px;align-items:flex-start;margin:0 0 14px}
.mp-note .ps-ico{width:18px;height:18px;flex:none;margin-top:1px}
.mp-helps{list-style:none;margin:0;padding:0}
.mp-help{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-top:1px solid var(--ps-line)}
.mp-help:first-child{border-top:0;padding-top:0}
.mp-help>.ps-ico{width:24px;height:24px;flex:none;color:var(--ps-green)}
.mp-help>div{flex:1;min-width:0}
.mp-help p{margin:4px 0 0;color:var(--ps-muted);line-height:1.5}
.mp-help .btn{flex:none}
@media (max-width:640px){
  .m-tabbar{grid-template-columns:repeat(5,minmax(0,1fr))}
  .m-tabbar button{font-size:11.5px;padding:4px 1px}
  .m-member.m-tab-profile .ps-pagehead h1 .ps-ico{display:none}
  .mp-head{flex-direction:column;text-align:center;gap:10px}
  .mp-chips{justify-content:center}
  .mp-photo{width:104px;height:104px}
  .mp-grid{grid-template-columns:1fr}
  .mp-actions .btn{flex:1 1 140px;justify-content:center}
  .mp-row{flex-wrap:wrap}
  .mp-help{flex-wrap:wrap}
  .mp-help .btn{margin-left:36px}
}
.mp-photo-btn{text-transform:none;letter-spacing:0;font-size:14px;font-weight:700}
.mp-actions .btn,.mp-row .btn,.mp-help .btn,.mp-photo-btn{font-family:inherit}
@media (max-width:640px){.m-member .mp-cols .ps-info{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.mp-help{display:grid;grid-template-columns:24px minmax(0,1fr);gap:4px 12px}.mp-help .btn{grid-column:2;justify-self:start;margin:6px 0 0}}
@media (max-width:640px){.m-member.m-tab-payments .ps-info{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Member Donate flow + admin donation queue (uses the portal tokens; one column on phones). */
.ps-donate{display:grid;gap:14px}
.ps-don-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 4px;padding:0;counter-reset:don}
.ps-don-steps li{counter-increment:don;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--muted);padding:8px 10px;border-radius:10px;background:var(--soft);min-width:0}
.ps-don-steps li::before{content:counter(don);display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--nt-line,#e3ebe7);color:var(--muted);font-size:12px}
.ps-don-steps li.is-on{color:var(--green);background:var(--nt-accent-tint,#edf6f1)}.ps-don-steps li.is-on::before{background:var(--green);color:#fff}
.ps-donate .form-grid.ps-form{padding:0}
.ps-money{display:flex;align-items:center;border:1px solid var(--nt-line,#d8e1dd);border-radius:10px;background:#fff;padding-left:13px;font-size:18px;font-weight:700;color:var(--green)}
.ps-money input{border:0;box-shadow:none!important;font-size:20px;font-weight:700;padding-left:6px}
.ps-pay-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:10px}
.ps-pay-method{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:14px;min-height:60px;cursor:pointer;text-transform:none;letter-spacing:0;font-size:15px;font-weight:700;color:var(--ink);background:#fff}
.ps-pay-method input{width:20px;height:20px;margin:0;accent-color:var(--green)}
.ps-pay-method small{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:2px}
.ps-pay-method:has(input:checked){border-color:var(--green);background:#f3f9f6;box-shadow:0 0 0 2px rgba(10,92,58,.12)}
.ps-pay-method.is-off{opacity:.55;cursor:not-allowed;background:var(--soft)}
.ps-zelle-box{border:1px dashed var(--gold);background:#fffbf2;border-radius:12px;padding:16px 18px}
.ps-zelle-box .ps-h3{margin-top:0}
.ps-zelle-steps{margin:0;padding-left:20px;line-height:1.7}
.ps-zelle-to{display:flex;flex-direction:column;margin:6px 0;padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:10px;overflow-wrap:anywhere;font-size:16px}
.ps-zelle-to span{font-size:13px;color:var(--muted)}
.ps-zelle-qr{display:block;width:min(180px,60%);margin:12px 0 0;border-radius:10px;border:1px solid var(--line)}
.ps-don-summary{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--soft)}
.ps-don-summary .ps-h3{margin-top:0}
.ps-donate .ps-form-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.ps-don-done{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--nt-accent-tint,#bcd8ca);background:var(--nt-accent-tint,#edf6f1);border-radius:12px;padding:14px 16px;margin-bottom:14px;color:var(--ink)}
.ps-don-done .ps-ico{flex:0 0 22px;color:var(--green)}.ps-don-done p{margin:4px 0 0;line-height:1.5}
.ps-don-note{padding:12px 14px;border-left:4px solid var(--gold);background:#fffbf2;border-radius:8px}
.ps-don-reason{display:block;margin-top:4px;color:var(--muted);font-size:12px;max-width:260px}
.ps-row-actions{display:flex;flex-wrap:wrap;gap:6px}
@media (max-width:640px){
  .ps-don-steps li{justify-content:center;padding:8px 4px;font-size:11px;flex-direction:column;gap:4px;text-align:center}
  .ps-donate .ps-form-actions{flex-direction:column-reverse}.ps-donate .ps-form-actions .btn{width:100%;min-height:48px}
  .ps-row-actions .btn{flex:1 1 auto;min-height:44px}
}
/* Central Payment Settings (Zelle) — shared Zelle display (application form + Member Donate) and the admin editor */
.ps-zelle-to small{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.ps-zelle-to b{font-size:17px;color:var(--ink)}
.ps-zelle-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:start}
.ps-zelle-payee,.ps-zelle-amount{margin:0 0 8px}.ps-zelle-amount b{font-size:18px;color:var(--green)}
/* Official QR: square white frame (quiet zone), image kept whole with object-fit:contain, never cropped or stretched. */
.ps-zelle-qrfig{margin:0;width:clamp(180px,24vw,240px);max-width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.ps-zelle-qrfig figcaption{display:flex;flex-direction:column;gap:2px;line-height:1.3}
.ps-zelle-qrfig figcaption b{font-size:15px;color:var(--green)}
.ps-zelle-qrfig figcaption small{font-size:12px;color:var(--muted)}
.ps-zelle-qrframe{display:block;position:relative;width:100%;aspect-ratio:1/1;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 3px rgba(16,40,30,.08)}
.ps-zelle-qrfig .ps-zelle-qr{display:block;position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);max-width:none;margin:0;border:0;border-radius:0;object-fit:contain;background:#fff}
.zelle-help{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:start}
.zelle-help>div,.ps-zelle-grid>div{min-width:0}
.ps-pay-method>span{flex:1 1 auto}
.ps-pay-tag{flex:none;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:4px 8px;border-radius:999px}
.ps-pay-tag.is-on{background:#e3f3ea;color:var(--green)}.ps-pay-tag.is-soon{background:#fdf1dc;color:#8a5a12}
.ps-seg{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}
.ps-seg-btn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;min-height:36px}
.ps-seg-btn.is-on{background:var(--green);border-color:var(--green);color:#fff}
.ps-pay-settings{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:22px;align-items:start}
.ps-pay-settings .form-grid.ps-form{padding:0}
.ps-qr-admin{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--soft)}
.ps-qr-admin .ps-h3{margin-top:0}
.ps-qr-preview{display:grid;place-items:center;min-height:160px;background:#fff;border:1px dashed var(--line);border-radius:10px;padding:10px}
.ps-qr-preview img{max-width:200px;max-height:240px;width:100%;object-fit:contain}
.ps-qr-admin input[type=file]{width:100%;max-width:100%}
.ps-qr-admin .ps-form-actions{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:900px){.ps-pay-settings{grid-template-columns:1fr}}
@media (max-width:640px){
  .ps-zelle-grid,.zelle-help{grid-template-columns:1fr}
  .ps-zelle-qrfig{width:min(260px,100%);margin:4px auto 0}
  .ps-qr-admin .ps-form-actions .btn{flex:1 1 auto;min-height:44px}
}
/* Member Donation History has 7 columns: use the record cards up to small-laptop width so nothing runs off-screen. */
@media (max-width:900px){.ps-shell .ps-don-history .ps-table{display:none}.ps-shell .ps-don-history .ps-mcards{display:block}}
/* Duplicate Membership Application: applicant message and admin review flag */
.form-message.is-duplicate{display:flex;flex-direction:column;gap:4px;max-width:640px;margin:12px auto 0;padding:12px 14px;text-align:left;font-weight:500;font-size:13px;line-height:1.5;color:#7a2a12;background:#fff5ef;border:1px solid #f0c9b3;border-left:4px solid #d9692c;border-radius:8px;overflow-wrap:anywhere}
.form-message.is-duplicate strong{font-size:15px;color:#8f2f0f}
.ps-dup-flag{display:inline-flex;align-items:center;gap:5px;margin-top:5px;padding:3px 9px;border-radius:12px;white-space:normal;background:#fdf1dc;color:#8a5a12;font-size:11.5px;font-weight:700;line-height:1.3;max-width:100%}
.ps-dup-flag .ps-ico{width:14px;height:14px;flex:none}
.ps-dup-of{display:block;margin-top:3px;color:var(--muted);font-size:11.5px;overflow-wrap:anywhere}
/* Applications list: 9 columns do not fit below ~1300px (tablets, small laptops); use the existing record cards there. */
@media (max-width:1299px){.ps-shell .ps-apps-list .ps-table{display:none}.ps-shell .ps-apps-list .ps-mcards{display:block}}

/* =========================================================
   Stage 1 — Theme (Admin → Settings → Appearance & Theme)
   app.js sets data-ps-theme on <html> plus the --th-* colors (contrast-checked) for the chosen theme.
   Without data-ps-theme (public pages, unless "Apply to Login Page" is on) nothing below applies.
   ========================================================= */
html[data-ps-theme]{--ps-green:var(--th-accent);--ps-green-600:var(--th-accent);--green:var(--th-accent);--m-brand:var(--th-accent);--m-accent:var(--th-accent)}
html[data-ps-theme] .ps-top{background:var(--th-top-bg);border-bottom-color:color-mix(in srgb,var(--th-top-fg) 14%,transparent)}
html[data-ps-theme] .ps-top .ps-brand,html[data-ps-theme] .ps-top .ps-brand span,html[data-ps-theme] .ps-top .ps-user-text b{color:var(--th-top-fg)}
html[data-ps-theme] .ps-top .ps-user-text small{color:color-mix(in srgb,var(--th-top-fg) 72%,transparent)}
html[data-ps-theme] .ps-nav{background:var(--th-side-bg);border-right-color:color-mix(in srgb,var(--th-side-fg) 14%,transparent)}
html[data-ps-theme] .ps-nav-item{color:var(--th-side-fg)}
html[data-ps-theme] .ps-nav-item:hover{background:var(--th-side-hover);color:var(--th-side-fg)}
html[data-ps-theme] .ps-nav-item[aria-current="page"]{background:var(--th-side-active-bg);color:var(--th-side-active-fg)}
html[data-ps-theme] .ps-nav-foot,html[data-ps-theme] .ps-nav-user{border-color:color-mix(in srgb,var(--th-side-fg) 16%,transparent)}
html[data-ps-theme] .ps-nav-user .ps-user-text b{color:var(--th-side-fg)}
html[data-ps-theme] .ps-nav-user .ps-user-text small{color:color-mix(in srgb,var(--th-side-fg) 72%,transparent)}
html[data-ps-theme] .ps-nav .ps-signout{color:var(--th-signout,#b42318)}
html[data-ps-theme] .btn.primary,html[data-ps-theme] .ps-shell .btn.primary,html[data-ps-theme] .ps-shell .btn.primary.ps-btn,html[data-ps-theme] .ps-shell a.btn.primary{background:var(--th-accent);border-color:var(--th-accent);color:var(--th-accent-fg)}
html[data-ps-theme] .ps-avatar,html[data-ps-theme] .ps-pages button[aria-current="page"]{background:var(--th-accent);border-color:var(--th-accent);color:var(--th-accent-fg)}
html[data-ps-theme] .ps-shell :focus-visible{outline-color:color-mix(in srgb,var(--th-accent) 55%,transparent)}

/* Dark theme: the page content switches to dark surfaces too. */
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]){--ps-bg:#0b1220;--ps-line:#253247;--ps-ink:#e6ebf2;--ps-muted:#9aa6b6;--ps-green-50:#13241d;--ink:#e6ebf2;--muted:#9aa6b6;--line:#253247;
  --m-page-bg:#0b1220;--m-card-bg:#111a2b;--m-card-border:#253247;--m-text:#e6ebf2;--m-text-muted:#9aa6b6;--m-header-bg:#111827;--m-header-border:#253247;--m-tabbar-bg:#111827;--m-welcome-bg:#13241d;--m-brand-soft:#13241d;--m-menu-panel-bg:#111a2b}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) body.portal-mode{color:var(--ps-ink);background:var(--ps-bg)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) body.portal-mode :is(.ps-card,.ps-stat,.ps-mcard,.ps-menu-list,.panel,.ps-shell .role-card,.ps-donut>div,.ps-pages button,.ps-shell .ps-select,.ps-set-card,.ps-theme-card,.ps-logo-admin){background:var(--dk-surface,#111a2b);color:var(--ps-ink);border-color:var(--ps-line)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-dialog{background:var(--dk-surface,#111a2b);color:var(--dk-ink,#e6ebf2)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-dialog p,html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-dialog .ps-field{color:var(--dk-ink-2,#c8d1dd)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) body.portal-mode :is(input,select,textarea){background:var(--dk-field,#0e1626);color:var(--ps-ink);border-color:var(--dk-control-line,#34435a)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) body.portal-mode .ps-shell .ps-select :is(select,input){background:transparent}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) body.portal-mode :is(label,.ps-shell .ps-form label,.ps-shell .ps-check,.ps-shell .ps-color,.ps-field,.ps-select .ps-ico,.ps-menu summary,.ps-shell .ps-table th,.ps-menu-item){color:var(--dk-ink-2,#c8d1dd)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) body.portal-mode .ps-shell .ps-table th,html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) body.portal-mode .ps-table th{background:var(--dk-surface-2,#16213a)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) body.portal-mode :is(th,td){border-color:var(--ps-line)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) body.portal-mode .ps-shell .ps-table tbody tr:hover{background:var(--dk-surface-2,#16213a)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) body.portal-mode :is(.ps-info>div,.ps-empty,.ps-report-link,.ps-collapse,.ps-shell .ps-clear,.ps-format-sample){background:var(--dk-field,#0e1626);border-color:var(--ps-line);color:var(--ps-ink)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) body.portal-mode :is(.ps-menu summary:hover,.ps-menu[open] summary,.ps-menu-item:hover){background:var(--dk-hover,#1a2741)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) body.portal-mode .btn:not(.primary):not(.danger-fill){background:var(--dk-surface-2,#16213a);color:var(--ps-ink);border-color:var(--dk-control-line,#34435a)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) body.portal-mode .ps-shell a.btn:not(.primary){color:var(--ps-ink)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) body.portal-mode .ps-link{color:var(--dk-accent-text,#4ade80)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) body.portal-mode :is(.ps-card-head h2 .ps-ico,.ps-pagehead h1 .ps-ico){color:var(--dk-accent-text,#4ade80)}
@media (max-width:1023px){html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) body.portal-mode .ps-pagehead{background:var(--dk-field,#0e1626);border-color:var(--ps-line)}}

/* ---- Settings (hub, organization, appearance, formats) ---- */
.ps-settings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.ps-set-card{display:flex;align-items:center;gap:14px;width:100%;min-height:84px;padding:16px;border:1px solid var(--ps-line);border-radius:var(--ps-radius);background:#fff;box-shadow:var(--ps-shadow);text-align:left;font:inherit;color:var(--ps-ink);cursor:pointer}
.ps-set-card:hover{border-color:color-mix(in srgb,var(--ps-green) 40%,var(--ps-line))}
.ps-set-card>.ps-ico{color:var(--ps-muted);margin-left:auto}
.ps-set-card .ps-tile{width:48px;height:48px}
.ps-set-text{display:grid;gap:3px;min-width:0;flex:1}
.ps-set-text b{font-size:15px}.ps-set-text small{color:var(--ps-muted);font-size:13px}
.ps-set-card.is-planned{cursor:default;opacity:.72;box-shadow:none}
.ps-crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:-6px 0 12px;color:var(--ps-muted);font-size:14px}
.ps-crumbs .ps-link{padding:8px 2px;font-size:14px}
.ps-hint{display:block;font-weight:500;font-size:12.5px;color:var(--ps-muted);line-height:1.4}
.ps-org-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);gap:24px;align-items:start}
.ps-logo-admin{border:1px solid var(--ps-line);border-radius:12px;padding:16px;min-width:0}
.ps-logo-admin .ps-h3{margin-top:0}
.ps-brand-preview{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:var(--th-top-bg,#fff);border:1px solid var(--ps-line);color:var(--th-top-fg,var(--ps-green));min-width:0}
.ps-brand-preview img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;border:2px solid #dfb35e;background:#fff}
.ps-brand-preview span{font:700 15px/1.25 Georgia,serif;overflow-wrap:anywhere;min-width:0}
@media (max-width:1100px){.ps-org-layout{grid-template-columns:1fr}}
.ps-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;border-bottom:1px solid var(--ps-line)}
.ps-tabs button{min-height:46px;padding:10px 16px;border:0;border-bottom:3px solid transparent;background:none;font:700 15px/1.2 inherit;color:var(--ps-muted);cursor:pointer}
.ps-tabs button[aria-selected="true"]{color:var(--ps-green);border-bottom-color:var(--ps-green)}
.ps-theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr));gap:14px;margin:6px 0 18px}
.ps-shell .ps-theme-card{position:relative;display:grid;gap:4px;padding:10px 10px 12px;border:2px solid var(--ps-line);border-radius:14px;background:#fff;text-align:center;cursor:pointer;text-transform:none;letter-spacing:0;font-weight:500;color:var(--ps-ink)}
.ps-theme-card input{position:absolute;opacity:0;width:1px;height:1px}
.ps-shell .ps-theme-card:has(input:checked){border-color:var(--ps-green);box-shadow:0 0 0 3px color-mix(in srgb,var(--ps-green) 18%,transparent)}
.ps-theme-card:has(input:checked)::after{content:"\2713";position:absolute;top:6px;right:8px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ps-green);color:#fff;font-size:13px;font-weight:800}
.ps-theme-card:has(input:focus-visible){outline:3px solid color-mix(in srgb,var(--ps-green) 50%,transparent);outline-offset:2px}
.ps-theme-card b{font-size:14.5px;margin-top:6px}.ps-theme-card small{color:var(--ps-muted);font-size:12.5px}
.ps-mini{display:grid;grid-template-columns:26% 1fr;height:84px;border-radius:9px;overflow:hidden;border:1px solid rgba(0,0,0,.08);background:var(--nt-tint,#f4f7f5)}
.ps-mini.is-dark{background:#0b1220}
.ps-mini-side{background:var(--th-side-bg);display:grid;align-content:start;gap:5px;padding:8px 6px}
.ps-mini-side i{display:block;height:6px;border-radius:3px;background:color-mix(in srgb,var(--th-side-fg) 35%,transparent)}
.ps-mini-side i.on{background:var(--th-side-active-bg)}
.ps-mini-top{height:16px;background:var(--th-top-bg);border-bottom:1px solid rgba(0,0,0,.08);display:flex;align-items:center;padding:0 8px;color:var(--th-top-fg);font-size:11px;overflow:hidden;white-space:nowrap}
.ps-mini-body{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:7px}
.ps-mini-body span{height:22px;border-radius:5px;background:#fff;border:1px solid rgba(0,0,0,.06)}
.ps-mini.is-dark .ps-mini-body span{background:#111a2b;border-color:#253247}
.ps-mini-body em{grid-column:1/-1;height:8px;width:40%;border-radius:4px;background:var(--th-accent)}
.ps-mini-system,.ps-mini-custom{display:grid;place-items:center;grid-template-columns:1fr;color:#fff}
.ps-mini-system{background:linear-gradient(135deg,#0b4f33 0 50%,#1d4ed8 50%)}
.ps-mini-custom{background:conic-gradient(from 90deg,#ef4444,#f59e0b,#22c55e,#06b6d4,#6366f1,#ec4899,#ef4444)}
.ps-mini-system .ps-ico,.ps-mini-custom .ps-ico{width:34px;height:34px;padding:7px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--nt-ink,#17231f)}
.ps-mini-big{height:210px;grid-template-columns:22% 1fr;max-width:640px}
.ps-mini-big .ps-mini-top{height:34px;font-size:13px;font-weight:700}
.ps-mini-big .ps-mini-side{gap:9px;padding:14px 10px}.ps-mini-big .ps-mini-side i{height:10px}
.ps-mini-big .ps-mini-body{gap:10px;padding:14px}.ps-mini-big .ps-mini-body span{height:64px}.ps-mini-big .ps-mini-body em{height:14px}
.ps-colors{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px;margin:0 0 18px;padding:14px;border:1px solid var(--ps-line);border-radius:12px;min-width:0}
.ps-colors legend{padding:0 6px;font-weight:700;color:var(--ps-ink)}.ps-colors legend small{font-weight:500;color:var(--ps-muted)}
.ps-colors[disabled]{opacity:.55}
.ps-shell .ps-color{display:grid;gap:6px;text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:600;color:var(--nt-ink-2,#33433c);min-width:0}
.ps-color-row{display:flex;gap:8px;align-items:center;min-width:0}
.ps-shell .ps-color-row input[type=color]{width:52px;height:46px;min-height:46px;padding:3px;flex:none;cursor:pointer}
.ps-shell .ps-color-row input:not([type=color]){min-height:46px;min-width:0;font-family:ui-monospace,Consolas,monospace;text-transform:lowercase}
.ps-colors .ps-field-error{grid-column:1/-1;margin:0}
.ps-switches{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px;margin-bottom:8px}
.ps-shell .ps-switch{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--ps-line);border-radius:12px;text-transform:none;letter-spacing:0;font-weight:500;cursor:pointer;color:var(--ps-ink)}
.ps-switch input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:46px!important;height:26px;min-height:0!important;margin-top:2px;padding:0!important;border-radius:999px;background:#c9d3cf!important;border:0!important;cursor:pointer;transition:background .15s}
.ps-switch input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.ps-switch input:checked{background:var(--ps-green)!important}.ps-switch input:checked::after{transform:translateX(20px)}
.ps-switch input:focus-visible{outline:3px solid color-mix(in srgb,var(--ps-green) 50%,transparent);outline-offset:2px}
.ps-switch span{display:grid;gap:2px}.ps-switch b{font-size:14.5px}.ps-switch small{color:var(--ps-muted);font-size:12.5px}
.ps-format-sample{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;padding:12px 14px;border:1px dashed var(--ps-line);border-radius:12px;background:var(--nt-tint,#fafcfb)}
.ps-format-sample span{color:var(--ps-muted);font-size:13px}.ps-format-sample b{overflow-wrap:anywhere}
@media (prefers-reduced-motion:reduce){.ps-switch input,.ps-switch input::after{transition:none}}
@media (max-width:599px){.ps-theme-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ps-mini{height:70px}.ps-mini-big{height:170px}.ps-set-card{min-height:72px;padding:14px}}
#appearanceForm>.ps-form-actions{margin-top:16px}
.ps-mini{grid-template-columns:26% minmax(0,1fr)}.ps-mini-big{grid-template-columns:22% minmax(0,1fr)}.ps-mini-main{min-width:0}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) body.portal-mode :is(.m-action-green,.m-action-blue,.m-action-purple,.m-action-red){background:var(--dk-surface-2,#16213a)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) body.portal-mode .m-welcome p{color:var(--dk-ink-3,#b8c3d1)}
html[data-ps-theme] .ps-top .ps-avatar{background:var(--th-top-avatar-bg);color:var(--th-top-avatar-fg)}
@media (max-width:599px){.ps-brand span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) body.portal-mode .ps-money{background:var(--dk-field,#0e1626);border-color:var(--dk-control-line,#34435a);color:var(--dk-accent-text,#4ade80)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) body.portal-mode .ps-money input{background:transparent}

/* =========================================================
   Stage 2 — Roles & Permissions (tabs, admin list, role cards, matrix, side drawer, permission accordion)
   ========================================================= */
.ps-tabs button{display:inline-flex;align-items:center;gap:8px}
.ps-tabs button .ps-ico{width:18px;height:18px}
.ps-person{display:flex;align-items:center;gap:10px;min-width:0}
.ps-person b{overflow-wrap:anywhere}
.ps-person .ps-avatar,.ps-mcard-head>.ps-avatar{width:36px;height:36px;font-size:13px}
.ps-dotmark{font-size:9px;margin-right:5px;vertical-align:1px}
.ps-badge.ps-chip .ps-ico{width:14px;height:14px;margin-right:4px}
.ps-pager-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ps-pager-row .ps-pager{flex:1}
.ps-shell .ps-size{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:14px;font-weight:500;color:var(--ps-muted);margin-top:14px}
.ps-shell .ps-size select{width:auto;min-height:40px;padding:6px 10px}
.ps-role-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:12px}
.ps-role-card{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--ps-line);border-radius:12px;background:#fff;min-width:0}
.ps-role-card-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ps-role-card-head .ps-tile{width:38px;height:38px;border-radius:10px}.ps-role-card-head .ps-tile .ps-ico{width:20px;height:20px}
.ps-role-card-head b{font-size:15px}
.ps-role-card p{margin:0;flex:1}
.ps-role-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;color:var(--ps-muted);font-size:13.5px}
.ps-role-card-foot>span{display:inline-flex;align-items:center;gap:6px}.ps-role-card-foot .ps-ico{width:16px;height:16px}
.ps-matrix-wrap{position:relative;overflow-x:auto;border:1px solid var(--ps-line);border-radius:12px}
.ps-matrix-wrap:focus-visible{outline:3px solid color-mix(in srgb,var(--ps-green) 45%,transparent)}
.ps-matrix{width:100%;min-width:640px;border-collapse:collapse}
.ps-matrix th,.ps-matrix td{padding:10px 12px;border-bottom:1px solid var(--ps-line);font-size:13.5px;text-align:center;white-space:nowrap}
.ps-matrix thead th{background:var(--nt-tint,#f6f8f7);font-size:12.5px}
.ps-matrix th[scope=row],.ps-matrix thead th:first-child{text-align:left;font-weight:600;background:#fff;white-space:normal;min-width:180px}
.ps-matrix thead th:first-child{background:var(--nt-tint,#f6f8f7)}
.ps-matrix-group th{text-align:left!important;background:var(--nt-tint,#f3f8f5)!important;color:var(--ps-green);font-weight:700}
.ps-matrix-group .ps-ico{width:16px;height:16px;margin-right:6px;vertical-align:-3px}
.ps-yes{color:#157a43;font-weight:800}.ps-no{color:var(--nt-faint,#9aa8a2)}
/* Side drawer (right side; full screen on phones) */
.ps-drawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(480px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;padding:0;border:0;border-radius:16px 0 0 16px;box-shadow:-12px 0 40px rgba(0,0,0,.2);display:flex;flex-direction:column;background:#fff;color:var(--ps-ink)}
.ps-drawer:not([open]){display:none}
.ps-drawer.is-wide{width:min(620px,100vw)}
.ps-drawer::backdrop{background:rgba(16,30,24,.45)}
.ps-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--ps-line)}
.ps-drawer-head h2{margin:0;font-size:18px;overflow-wrap:anywhere}
.ps-icon-btn{display:grid;place-items:center;width:42px;height:42px;flex:none;border:0;border-radius:10px;background:none;color:var(--ps-ink);cursor:pointer}
.ps-icon-btn:hover{background:var(--nt-tint,#eef2f0)}
.ps-drawer-body{flex:1;overflow:auto;padding:16px 20px 24px}
.ps-drawer-body .ps-tabs{margin-top:4px}
.ps-drawer-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding:12px 20px;padding-bottom:max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--ps-line);background:inherit}
.ps-drawer .ps-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:10px;font-weight:700}
.ps-spacer{flex:1}
.ps-drawer-who{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.ps-drawer-who>span:nth-child(2){display:grid;flex:1;min-width:0}.ps-drawer-who small{color:var(--ps-muted);overflow-wrap:anywhere}
.ps-drawer .ps-form label{display:grid;gap:6px;text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:600;color:var(--nt-ink-2,#33433c)}
.ps-drawer .ps-form{padding:0;gap:14px;margin:4px 0 12px}
.ps-drawer .ps-form input{min-height:46px}
.ps-drawer .ps-check{display:flex;align-items:flex-start;gap:10px;min-height:40px;text-transform:none;letter-spacing:0;font-size:14px;font-weight:500;color:var(--ps-ink);cursor:pointer}
.ps-drawer .ps-check input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--ps-green)}
.ps-drawer .ps-switch{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--ps-line);border-radius:12px;text-transform:none;letter-spacing:0;font-weight:500;cursor:pointer;color:var(--ps-ink);margin-bottom:10px}
.ps-drawer .ps-switch input:disabled{cursor:not-allowed;opacity:.6}
.ps-callout{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;background:var(--nt-tint,#f3f8f5);border:1px solid var(--nt-accent-tint,#cfe3d7);color:#24443a;font-size:14px;line-height:1.45;margin:8px 0 12px}
.ps-callout .ps-ico{flex:none;color:var(--ps-green)}
.ps-role-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:4px 14px;margin-bottom:10px}
.ps-role-pick b{font-weight:600}
.ps-perm-head{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.ps-perm-head .ps-switch{flex:1 1 260px}
.ps-perm-acc{display:grid;gap:10px}
.ps-acc{border:1px solid var(--ps-line);border-radius:12px;background:#fff}
.ps-acc>summary{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;list-style:none;min-height:56px}
.ps-acc>summary::-webkit-details-marker{display:none}
.ps-acc>summary .ps-tile{width:36px;height:36px;border-radius:10px}.ps-acc>summary .ps-tile .ps-ico{width:19px;height:19px}
.ps-acc-text{display:grid;flex:1;min-width:0}.ps-acc-text small{color:var(--ps-muted);font-size:12.5px}
.ps-acc-count{font-size:12.5px;color:var(--ps-muted);white-space:nowrap}
.ps-acc>summary>.ps-ico:last-child{transition:transform .15s;color:var(--ps-muted);transform:rotate(90deg)}
.ps-acc[open]>summary>.ps-ico:last-child{transform:rotate(-90deg)}
.ps-acc-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:2px 14px;padding:4px 14px 12px}
.ps-perm-acc.is-locked .ps-acc-body{opacity:.75}
.ps-activity{list-style:none;margin:0;padding:0;display:grid}
.ps-activity li{display:grid;gap:2px;padding:10px 0;border-bottom:1px solid var(--ps-line)}
.ps-activity b{text-transform:capitalize;font-size:14px}.ps-activity small{color:var(--ps-muted);font-size:12.5px;overflow-wrap:anywhere}
@media (max-width:599px){
  .ps-drawer,.ps-drawer.is-wide{width:100vw;border-radius:0}
  .ps-drawer-head,.ps-drawer-body,.ps-drawer-foot{padding-left:14px;padding-right:14px}
  .ps-drawer-foot .btn{flex:1 1 auto}
  .ps-spacer{display:none}
  .ps-tabs button{padding:10px 10px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){.ps-acc>summary>.ps-ico:last-child{transition:none}}
/* Dark theme for the new pieces */
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) :is(.ps-drawer,.ps-acc,.ps-role-card){background:var(--dk-surface,#111a2b);color:var(--ps-ink);border-color:var(--ps-line)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-drawer :is(input,select,textarea){background:var(--dk-field,#0e1626);color:var(--ps-ink);border-color:var(--dk-control-line,#34435a)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-drawer :is(.ps-form label,.ps-check,.ps-switch){color:var(--dk-ink-2,#c8d1dd)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-drawer .btn:not(.primary):not(.danger-fill){background:var(--dk-surface-2,#16213a);color:var(--ps-ink);border-color:var(--dk-control-line,#34435a)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-callout{background:var(--dk-accent-bg,#13241d);border-color:var(--dk-accent-line,#24533e);color:var(--dk-accent-ink,#cfe9da)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-icon-btn{color:var(--ps-ink)}html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-icon-btn:hover{background:var(--dk-hover,#1a2741)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-matrix thead th,html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-matrix th[scope=row]{background:var(--dk-surface-2,#16213a)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-matrix-group th{background:var(--dk-accent-bg,#13241d)!important;color:var(--dk-accent-text,#4ade80)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-yes{color:var(--dk-accent-text,#4ade80)}
@media (max-width:1279px){.ps-shell #rbAdminRows .ps-table{display:none}.ps-shell #rbAdminRows .ps-mcards{display:block}}
.ps-scroll-hint{display:none;margin:-6px 0 10px}@media (max-width:1100px){.ps-scroll-hint{display:block}}
@media (max-width:599px){.ps-tabs button .ps-ico{display:none}.ps-drawer .ps-tabs{gap:0}.ps-drawer .ps-tabs button{padding:10px 8px;font-size:13.5px}}

/* =========================================================
   Stage 3 — navigation sub-menu, header search, dashboard charts, Members / Applications panels
   ========================================================= */
.ps-nav-group{position:relative;display:grid}
.ps-nav-group>.ps-nav-item{padding-right:48px}
.ps-nav-toggle{position:absolute;right:4px;top:4px;display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:8px;background:none;color:inherit;cursor:pointer;color:var(--th-side-fg,var(--nt-ink,#2b3a34))}
.ps-nav-group>.ps-nav-item[aria-current="page"]~.ps-nav-toggle{color:var(--th-side-active-fg,#fff)}
.ps-nav-toggle:hover{background:var(--th-side-hover,rgba(16,40,30,.06))}
.ps-nav-toggle .ps-ico{width:18px;height:18px;transform:rotate(90deg);transition:transform .15s}
.ps-nav-group.is-open .ps-nav-toggle .ps-ico{transform:rotate(-90deg)}
.ps-nav-sub{display:grid;gap:2px;margin:4px 0 6px 22px;padding-left:12px;border-left:2px solid color-mix(in srgb,var(--th-side-fg,var(--nt-ink,#2b3a34)) 18%,transparent)}
.ps-nav-sub[hidden]{display:none}
.ps-nav-subitem{display:flex;align-items:center;min-height:40px;padding:8px 12px;border:0;border-radius:8px;background:none;color:var(--th-side-fg,var(--nt-ink,#2b3a34));font-family:inherit;font-size:14px;font-weight:600;line-height:1.25;text-align:left;cursor:pointer}
.ps-nav-subitem:hover{background:var(--th-side-hover,rgba(16,40,30,.06))}
.ps-nav-subitem[aria-current="page"]{background:var(--th-side-hover,rgba(16,40,30,.08));box-shadow:inset 3px 0 0 var(--th-accent,#0a5c3a)}
@media (prefers-reduced-motion:reduce){.ps-nav-toggle .ps-ico{transition:none}}
/* Header search */
.ps-gsearch{position:relative;flex:1 1 auto;max-width:460px;margin-left:auto}
.ps-gsearch>span{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ps-muted);display:flex}
.ps-gsearch>span .ps-ico{width:18px;height:18px}
.ps-shell .ps-gsearch input{width:100%;min-height:44px;padding:10px 14px 10px 42px;border-radius:12px;background:var(--nt-tint,#f4f7f5);border:1px solid var(--ps-line);font-size:14.5px}
.ps-gsearch-results{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:70;display:grid;max-height:min(420px,70vh);overflow:auto;padding:6px;background:#fff;border:1px solid var(--ps-line);border-radius:12px;box-shadow:0 14px 34px rgba(16,40,30,.18)}
.ps-gsearch-results[hidden]{display:none}
.ps-gsearch-results p{margin:6px 10px 2px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ps-muted)}
.ps-gsearch-results button{display:grid;gap:2px;width:100%;padding:9px 10px;border:0;border-radius:8px;background:none;text-align:left;cursor:pointer;color:var(--ps-ink);font:inherit}
.ps-gsearch-results button:hover,.ps-gsearch-results button:focus-visible{background:var(--ps-green-50)}
.ps-gsearch-results small{color:var(--ps-muted);font-size:12.5px;text-transform:capitalize}
.ps-gsearch-empty{text-transform:none!important;font-weight:500!important;letter-spacing:0!important;padding:8px 0}
.ps-gsearch~.ps-user{margin-left:16px}
@media (max-width:1023px){.ps-gsearch{display:none}}
/* Dashboard */
.ps-datecard{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--ps-line);border-radius:12px;background:#fff;color:var(--ps-ink)}
.ps-datecard .ps-ico{color:var(--ps-green)}.ps-datecard span{display:grid;line-height:1.3}.ps-datecard small{color:var(--ps-muted);font-size:12.5px}
.ps-trend{font-weight:700}.ps-trend.up{color:#157a43}.ps-trend.down{color:#b42318}
.ps-stats-dash{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.ps-stats-5{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.ps-grid-charts,.ps-grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))}
.ps-grid-bottom{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.ps-svgchart{display:block;width:100%;height:auto;overflow:visible}
.ps-svgchart text{font-size:12px;fill:var(--ps-muted)}
.ps-grid-line{stroke:var(--ps-line);stroke-width:1}
.ps-line{fill:none;stroke:var(--ps-green);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.ps-line-area{fill:color-mix(in srgb,var(--ps-green) 14%,transparent)}
.ps-line-dot{fill:var(--ps-green);stroke:#fff;stroke-width:2}
.ps-bar-paid,.ps-bar-income{fill:#1f9d55;background:#1f9d55}
.ps-bar-pending{fill:#cfd8dd;background:#cfd8dd}
.ps-bar-expense{fill:#e5484d;background:#e5484d}
.ps-quick-tiles{grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}
.ps-quick-tiles .ps-quick-btn{flex-direction:column;justify-content:center;text-align:center;min-height:92px;gap:8px}
/* Members / Applications */
.ps-person .photo-thumb-trigger{flex:none;width:44px;height:44px;min-height:44px;padding:0;overflow:hidden;border-radius:50%}
.ps-members-list .photo-thumb-trigger{width:42px;height:42px;min-height:42px;padding:0;overflow:hidden;border-radius:50%}
.ps-name-link{padding:0;min-height:0;font-size:14.5px;color:var(--ps-ink);text-align:left}
.ps-photo-slot{width:64px;height:64px;font-size:20px;overflow:hidden}
.ps-photo-slot.has-photo{background:none;border:2px solid #dfb35e}
.ps-photo-slot img{width:100%;height:100%;object-fit:cover}
.ps-tabs-scroll{flex-wrap:wrap}
.ps-doc-list{display:flex;flex-wrap:wrap;gap:10px}
.ps-note-form{display:grid;gap:10px;margin-bottom:14px}
.ps-shell .ps-note-form textarea,.ps-drawer .ps-note-form textarea{min-height:90px;text-transform:none;letter-spacing:0;font-family:inherit;font-size:14px;font-weight:500;line-height:1.45}
.ps-note-body{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;color:var(--ps-ink)}
.ps-drawer .ps-info-1 dd{max-width:62%;overflow-wrap:anywhere}
.ps-drawer .ps-table table{min-width:0}
.ps-drawer .ps-form label{text-transform:none}
@media (max-width:1279px){.ps-shell .ps-members-list .ps-table{display:none}.ps-shell .ps-members-list .ps-mcards{display:block}}
@media (max-width:1099px){.ps-drawer .ps-table{display:none}.ps-drawer .ps-mcards{display:block}}
@media (max-width:599px){.ps-datecard{width:100%}.ps-quick-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.ps-drawer .ps-tabs button{padding:10px 8px}}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) :is(.ps-datecard,.ps-gsearch-results){background:var(--dk-surface,#111a2b);border-color:var(--ps-line);color:var(--ps-ink)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-shell .ps-gsearch input{background:var(--dk-field,#0e1626);border-color:var(--dk-control-line,#34435a);color:var(--ps-ink)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-bar-pending{fill:var(--dk-chart-muted,#3a4a63)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-line-dot{stroke:var(--dk-surface,#111a2b)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-name-link{color:var(--ps-ink)}
/* Dashboard layout: 6 summary cards as 3 + 3 (6 in a row on very wide screens), 2 per row on phones;
   the three "Recent" lists use compact record cards until there is room for their tables. */
@media (min-width:1024px){.ps-stats-dash{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1700px){.ps-stats-dash{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:1699px){.ps-shell .ps-grid-3 .ps-table{display:none}.ps-shell .ps-grid-3 .ps-mcards{display:block}}
@media (max-width:599px){.ps-stats-dash,.ps-stats-5{grid-template-columns:repeat(2,minmax(0,1fr))}.ps-stats-dash .ps-stat,.ps-stats-5 .ps-stat{padding:12px}.ps-stats-dash .ps-stat strong,.ps-stats-5 .ps-stat strong{font-size:clamp(17px,5vw,22px)}}

/* =========================================================
   Stage 4 — Payments & Dues, Finance tabs, Reports
   ========================================================= */
.ps-stat-ring{gap:14px}
.ps-ring{--p:0;--c:#1f9d55;position:relative;display:grid;place-items:center;flex:none;width:64px;height:64px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*1%),var(--nt-line,#e6ece9) 0)}
.ps-ring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff}
.ps-ring b{position:relative;font-size:14px;color:var(--ps-ink)}
.ps-bar-ward{fill:#3b82f6;background:#3b82f6}
.ps-tabs-page{margin-top:-4px}
.ps-grid-fin{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
@media (max-width:1199px){.ps-grid-fin{grid-template-columns:1fr}}
.ps-stack{display:grid;gap:20px;align-content:start;min-width:0}
.ps-stats-fin{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
@media (min-width:1024px){.ps-stats-fin{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1500px){.ps-stats-fin{grid-template-columns:repeat(5,minmax(0,1fr))}}
.ps-bank-mini{list-style:none;margin:0;padding:0;display:grid}
.ps-bank-mini li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--ps-line)}
.ps-bank-mini li:last-child{border-bottom:0}
.ps-bank-mini li>span{display:flex;align-items:center;gap:10px;min-width:0}
.ps-bank-mini li>span:last-child{display:grid;justify-items:end;text-align:right}
.ps-bank-mini small{display:block;color:var(--ps-muted);font-size:12.5px}
.ps-bank-mini .ps-ico{color:var(--ps-muted)}
.ps-remind-list{display:grid;gap:4px;margin-top:10px}
.ps-drawer .ps-remind{padding:8px 10px;border:1px solid var(--ps-line);border-radius:10px}
.ps-drawer .ps-remind input:disabled+span{opacity:.6}
/* Payments list: 11 columns need a wide screen; record cards below that. */
@media (max-width:1499px){.ps-shell .ps-pay-list .ps-table{display:none}.ps-shell .ps-pay-list .ps-mcards{display:block}}
/* Reports */
.ps-report-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:12px;margin-bottom:16px}
.ps-report-tile{display:flex;align-items:center;gap:12px;min-height:72px;padding:12px 14px;border:1px solid var(--ps-line);border-radius:12px;background:#fff;color:var(--ps-ink);text-align:left;font:inherit;cursor:pointer}
.ps-report-tile .ps-ico{width:26px;height:26px;flex:none;color:var(--ps-green)}
.ps-report-tile span{display:grid;min-width:0}.ps-report-tile b{font-size:14.5px}.ps-report-tile small{color:var(--ps-muted);font-size:12.5px}
.ps-report-tile:hover{border-color:color-mix(in srgb,var(--ps-green) 40%,var(--ps-line))}
.ps-report-tile.is-active{background:var(--ps-green);border-color:var(--ps-green);color:var(--th-accent-fg,#fff)}
.ps-report-tile.is-active .ps-ico,.ps-report-tile.is-active small{color:inherit;opacity:.92}
.ps-report-filters{margin-bottom:20px}
.ps-filter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr));gap:12px;align-items:end}
.ps-shell .ps-filter-grid label{display:grid;gap:6px;text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:600;color:var(--nt-ink-2,#33433c);min-width:0}
.ps-shell .ps-filter-grid select,.ps-shell .ps-filter-grid input{min-height:44px}
.ps-filter-grid .ps-form-actions{grid-column:1/-1}
.ps-filter-grid [hidden]{display:none}
.ps-export-green .ps-ico{color:#157a43}.ps-export-blue .ps-ico{color:#1d4ed8}.ps-export-amber .ps-ico{color:#8a5300}.ps-export-purple .ps-ico{color:#6b3fcf}.ps-export-rose .ps-ico{color:#cf3f45}
@media print{.ps-report-tiles,.ps-report-filters .ps-form-actions{display:none!important}}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-report-tile{background:var(--dk-surface,#111a2b);color:var(--ps-ink);border-color:var(--ps-line)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-ring::before{background:var(--dk-surface,#111a2b)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-shell .ps-filter-grid label{color:var(--dk-ink-2,#c8d1dd)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-report-tile.is-active{background:var(--ps-green);color:var(--th-accent-fg,#fff)}
/* Admin donation tables (queue + history): record cards until there is room for every column. */
@media (max-width:1279px){.ps-shell :is(.ps-don-wide,#donHistory,#finZelleDonations) .ps-table{display:none}.ps-shell :is(.ps-don-wide,#donHistory,#finZelleDonations) .ps-mcards{display:block}}
@media (max-width:1699px){.ps-shell #finRecent .ps-table{display:none}.ps-shell #finRecent .ps-mcards{display:block}}
@media (max-width:1279px){.ps-gsearch{display:none}}
@media (max-width:599px){.ps-stats-fin{grid-template-columns:repeat(2,minmax(0,1fr))}.ps-stats-fin .ps-stat{padding:12px}.ps-stats-fin .ps-stat strong{font-size:clamp(16px,4.8vw,22px)}}
/* Stage 5 contrast fixes (WCAG AA 4.5:1 for normal text). */
.ps-rose{background:#fde9ea;color:#b4232a}
footer{color:#56625d}
html[data-ps-theme] .ps-top .ps-user-text small{color:var(--th-top-fg);opacity:.9}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-tabs button[aria-selected="true"]{color:var(--dk-accent-text,#4ade80);border-bottom-color:var(--dk-accent-text,#4ade80)}
/* Public application form: secondary text at AA contrast. */
.reference-form-head p{color:var(--nt-muted,#5f6b66)}.payment-option small{color:var(--nt-muted,#5f6b66)}.submit-note{color:var(--nt-muted,#5f6b66)}
.agreement-text.scrollable:focus-visible{outline:3px solid rgba(13,116,72,.45);outline-offset:2px}
.photo-placeholder span,.file-name{color:var(--nt-muted,#5f6b66)}
.sig-actions span{color:var(--nt-muted,#5f6b66)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]){--m-tabbar-active:#4ade80}
/* Admin phone tab bar (Mobile App Suite reference): Home / Members / Applications / Payments / More. */
.ps-admin-tabbar{grid-template-columns:repeat(auto-fit,minmax(0,1fr))!important}
@media (max-width:640px){.ps-admin .ps-main{padding-bottom:calc(92px + env(safe-area-inset-bottom))}}
@media (max-width:1279px){.ps-shell .ps-don-history .ps-table{display:none}.ps-shell .ps-don-history .ps-mcards{display:block}}
/* Homepage hero image from Settings → Appearance & Theme: one image for every width, cropped by CSS; Left / Center / Right
   keeps that side of the picture in view. Without a custom image the built-in picture is used. */
#view-home,#view-home .hero{background-position-x:var(--hero-x,center)!important}
/* Homepage hero image settings: one image previewed in desktop / tablet / phone proportions (CSS crop, no extra files). */
.ps-hero-admin{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:1100px){.ps-hero-admin{grid-template-columns:1fr}}
.ps-hero-preview-wrap{display:grid;gap:10px;min-width:0}
.ps-hero-preview{position:relative;overflow:hidden;width:100%;margin:0 auto;border-radius:12px;border:1px solid var(--ps-line);background-color:#20352c;background-size:cover;background-repeat:no-repeat;aspect-ratio:16/7}
.ps-hero-preview[data-mode="tablet"]{max-width:420px;aspect-ratio:4/3}
.ps-hero-preview[data-mode="mobile"]{max-width:240px;aspect-ratio:9/14}
.ps-hero-shade{display:none}   /* Settings preview matches the homepage: the image untinted */
.ps-hero-text{position:absolute;left:6%;bottom:12%;right:6%;display:grid;gap:2px;color:#fff;text-shadow:var(--m-hero-text-shadow)}
.ps-hero-text small{font-size:11px;opacity:.9;color:var(--hero-c-welcome,#fff);text-shadow:var(--hero-s-welcome,var(--m-hero-text-shadow))}.ps-hero-text b{font-size:clamp(13px,1.6vw,20px);line-height:1.2;color:var(--hero-c-title,#fff);text-shadow:var(--hero-s-title,var(--m-hero-title-shadow))}.ps-hero-text span{font-size:11px;color:var(--hero-c-subtitle,#fff);text-shadow:var(--hero-s-subtitle,var(--m-hero-text-shadow))}
/* Settings preview buttons: the homepage Become a Member (theme button color) and Member Login (Homepage Hero Text color). */
.ps-hero-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.ps-hero-btns i{font:700 10px/1 var(--m-font);font-style:normal;padding:6px 9px;border-radius:6px;text-shadow:none}
.ps-hero-join{background:var(--hero-c-join-bg,var(--ps-hero-join-default,var(--m-btn-primary-bg)));color:var(--hero-c-join-text,var(--m-btn-primary-fg));box-shadow:inset 0 0 0 1px var(--hero-c-join-border,transparent)}
.ps-hero-login{border:1px solid var(--hero-c-login-border,rgba(255,255,255,.92));color:var(--hero-c-login-text,#fff);background:var(--hero-c-login-bg,rgba(0,0,0,.12))}
.ps-hero-color{display:grid;grid-template-columns:minmax(150px,1fr) auto auto;align-items:center;gap:6px 14px}
@media (max-width:640px){.ps-hero-color{grid-template-columns:1fr}}
.ps-hero-group{display:grid;gap:8px;margin:0 0 14px;padding:10px 14px 12px;border:1px solid var(--ps-line,var(--nt-line,#dfe7e3));border-radius:12px;min-width:0}
.ps-hero-group legend{padding:0 6px;font-weight:700}
.ps-hero-contrast{margin:2px 0 0;font-size:13px;line-height:1.45;color:#0b4a2f}.ps-hero-contrast.is-warn{color:#9a3412;font-weight:600}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-hero-contrast{color:#86efac}html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-hero-contrast.is-warn{color:#fdba74}
.ps-hero-form{display:grid;gap:12px;min-width:0}
.ps-hero-form .ps-perm-group{display:flex;flex-wrap:wrap;gap:4px 16px}

/* ===== Sign-in verification card, password helper and inline auth messages ===== */
.otp-card{max-width:460px;margin:0 auto}
.otp-card h3{margin:0 0 6px;font:700 22px/1.25 Georgia,serif;color:var(--green)}
.otp-sent{margin:0 0 16px;color:#3f4f48;line-height:1.5;overflow-wrap:anywhere}
.otp-form{display:grid;gap:8px}
.otp-form label{display:block}
.otp-input{font:700 26px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.45em;text-align:center;padding:12px 8px 12px calc(8px + .45em)}
.otp-hint{margin:0;color:var(--muted);font-size:13px}
.otp-submit{width:100%;min-height:46px;margin-top:4px}
.otp-resend{margin:14px 0 0;color:var(--nt-ink-2,#46564f);font-size:14px;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px}
.otp-resend .link-btn,.otp-back{min-height:44px}
.link-btn:disabled{color:var(--nt-muted,#5c6b65);text-decoration:none;cursor:default}
.field-error{color:#a3121e;font-size:13.5px;font-weight:600;margin:0;line-height:1.45}
.field-error:empty{display:none}
.form-error{color:#a3121e;background:#fff4f4;border:1px solid #f1c6ca;border-radius:9px;padding:10px 12px;margin:0;font-size:13.5px;font-weight:600;line-height:1.45}
.form-note{color:#0b4a2f;background:#eef7f2;border:1px solid var(--nt-accent-tint,#bcd8ca);border-radius:9px;padding:10px 12px;margin:0 0 12px;font-size:14px;line-height:1.45}
#forgotPanel .form-note{margin:0 22px 8px}
.pw-help{margin:-8px 0 0;font-size:13px;color:var(--nt-ink-2,#46564f);line-height:1.45}
.pw-help p{margin:2px 0}
.pw-rule{font-weight:700}
.pw-example code{font:600 13px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#f2f5f4;border-radius:5px;padding:1px 5px}
.pw-example span{color:var(--muted);font-size:12px}
.pw-live{font-weight:700;color:#8a1520}
.pw-live.is-ok{color:#0b5b3a}
@media (max-width:480px){.otp-card{padding:18px 16px}.otp-input{font-size:22px;letter-spacing:.35em;padding-left:calc(8px + .35em)}}
.otp-form label.otp-trust{display:flex;gap:10px;margin:6px 0 2px;font-size:14px;color:#26352f;align-items:flex-start}
.otp-trust input{width:20px;height:20px;margin:1px 0 0;flex:none}
.otp-trust b{display:block;font-weight:700}
.otp-trust small{display:block;margin-top:2px;color:var(--nt-ink-2,#4f5f58);font-size:12.5px;line-height:1.45}

/* ===== Currency amount field (.ps-money: "$" prefix + number) — one control, one border, one focus ring =====
   The portal-wide ".ps-shell :focus-visible" outline used to draw a second ring around the inner input, on top of
   the "$" and the field's own border. The inner input is now borderless and outline-free; the whole field shows a
   single focus indicator instead: the shared ring of the "Field focus" section at the end of this file. */
.ps-money{position:relative;gap:4px;min-height:48px;padding:0 0 0 14px;overflow:hidden}
.ps-money>span{flex:none;line-height:1;user-select:none}
.ps-money input{flex:1 1 auto;min-width:0;margin:0;border:0!important;border-radius:0;background:transparent;outline:none!important;-webkit-appearance:none;appearance:none;padding:11px 14px 11px 2px}

/* ===== Sidebar (desktop ≥1024 px; the same list is the drawer below that) =====
   Finance / Reports / Settings open one at a time (accordion, app.js). The list scrolls only when it is genuinely
   taller than the screen: a slim, theme-coloured scrollbar, scrolling kept inside the sidebar, and slightly tighter
   rows on short screens. Every item stays reachable; nothing is hidden. */
.ps-nav{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--th-side-fg,var(--nt-ink,#2b3a34)) 30%,transparent) transparent}
.ps-nav::-webkit-scrollbar{width:8px}
.ps-nav::-webkit-scrollbar-track{background:transparent}
.ps-nav::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--th-side-fg,var(--nt-ink,#2b3a34)) 30%,transparent);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
/* Compact desktop sidebar (≥1024 px, mouse/trackpad). Finance has 8 and Reports 7 sub-pages, so the expanded list
   uses short 32 px rows (13.5 px text, ≥24 px target per WCAG 2.5.8) while the main items stay full size. The drawer
   below 1024 px and touch screens keep the larger 40 px rows. */
@media (min-width:1024px) and (pointer:fine){
  .ps-nav{gap:2px}
  .ps-nav-item{min-height:42px;padding-top:9px;padding-bottom:9px}
  .ps-nav-toggle{top:2px}
  .ps-nav-sub{gap:1px;margin:2px 0 6px 23px;padding-left:9px}
  .ps-nav-subitem{min-height:32px;padding:5px 10px;font-size:13.5px;font-weight:500;line-height:1.3;border-radius:7px}
  .ps-nav-subitem[aria-current="page"]{font-weight:700}
}
@media (min-width:1024px) and (max-height:860px){
  .ps-nav{padding-top:10px;padding-bottom:10px;gap:2px}
  .ps-nav-item{min-height:40px;padding-top:8px;padding-bottom:8px}
  .ps-nav-toggle{top:1px}
  .ps-nav-foot{padding-top:8px}
}
@media (min-width:1024px) and (max-height:860px) and (pointer:fine){
  .ps-nav-sub{margin:1px 0 4px 23px}
  .ps-nav-subitem{min-height:30px;padding-top:4px;padding-bottom:4px}
}
/* Very short windows (e.g. a 1366×768 laptop once the browser toolbar is taken off): the main list down to Settings
   still fits with Finance or Reports open; only the Public Website / Sign Out links below it may need a scroll. */
@media (min-width:1024px) and (max-height:700px){
  .ps-nav-item{min-height:38px;padding-top:7px;padding-bottom:7px}
  .ps-nav-toggle{top:0}
}
@media (min-width:1024px) and (max-height:700px) and (pointer:fine){
  .ps-nav-subitem{min-height:28px;padding-top:3px;padding-bottom:3px}
}


/* ===== Settings: Member Settings, Security & Access, Backup ===== */
.ps-two-lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px 24px}
.ps-list{margin:6px 0 0;padding-left:20px;line-height:1.55}
.ps-list li{margin:2px 0}
.ps-callout.ps-warn{background:#fff7e6;border-color:#f1d29a;color:#6b4300}
.ps-callout.ps-warn .ps-ico{color:#a86500}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-callout.ps-warn{background:#2b2210;border-color:#6b5320;color:#f3dfb4}
.ps-secret-row{display:flex;gap:8px;align-items:stretch;margin-top:6px}
.ps-secret-row input{flex:1 1 auto;min-width:0;min-height:44px}
.ps-secret-row .btn{flex:none;min-height:44px}
.ps-secret-label{display:block;margin-top:4px;font-weight:700;font-size:14px}
.ps-secret-label .req{color:#b42318}
.ps-backup-table .ps-table td:first-child{white-space:normal;overflow-wrap:anywhere;min-width:14ch}
.ps-backup-table .ps-table td:nth-child(2){min-width:12ch}
/* Member Settings / Security & Access: sentence-length values read left-aligned in a label | value grid. */
.ps-readonly .ps-info-1>div{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:4px 18px;align-items:baseline}
.ps-readonly .ps-info-1 dt{font-weight:700;color:var(--ps-ink,var(--nt-ink,#17231f))}
.ps-readonly .ps-info-1 dd{text-align:left;font-weight:400;line-height:1.5}
.ps-readonly .ps-info-1 dd .ps-sub{display:block;margin-top:2px}
@media (max-width:599px){.ps-readonly .ps-info-1>div{grid-template-columns:1fr}}
html[data-ps-theme] .ps-readonly .ps-info-1 dt{color:inherit}
/* ===== Member Login + Admin Login: one shared design =====
   Everything follows the central settings. The background is the Homepage Hero Image (Appearance & Theme, --hero-img;
   the built-in picture otherwise) at its saved Left / Center / Right position (--hero-x), under a light overlay.
   The card itself is always clean white with dark text, whatever the theme. When "Apply to Login Page" is on,
   html[data-ps-theme] is set and the accent (Portal Title, Sign In, links, focus ring, checkbox) follows the selected
   theme (Green, Light / White, Dark, Blue or Custom: --th-accent); otherwise the built-in green (--green).
   Only the public sign-in screens: everything here is switched off once a portal is open (body.portal-mode). */
body:not(.portal-mode) .auth-view{--lg-accent:var(--green);--lg-accent-fg:#fff;--lg-ink:var(--nt-ink,#17231f);--lg-muted:var(--nt-muted,#66736d);--lg-line:var(--nt-line,#dfe7e3);--lg-input-line:var(--nt-line,#d8e1dd);
  --lg-veil:rgba(246,248,247,.30);
  background:linear-gradient(var(--lg-veil),var(--lg-veil)),var(--hero-img,url('assets/home-bg.jpg')) var(--hero-x,center) center/cover no-repeat;
  padding-block:clamp(12px,3svh,40px)}
/* Viewport fit: on a sign-in screen the page is one column (header, main, footer) at least as tall as the small
   viewport; the sign-in area takes the free height and centers the card in it, so the footer sits at the bottom when
   everything fits and the page scrolls normally when it does not. Browsers without :has() keep the plain flow. */
@supports selector(:has(*)){
  body:not(.portal-mode):has(> main > .auth-view.active){display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
  body:not(.portal-mode):has(> main > .auth-view.active)>main{flex:1 0 auto;display:flex;flex-direction:column}
  body:not(.portal-mode) .auth-view.active{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center}
}
html[data-ps-theme] body:not(.portal-mode) .auth-view{--lg-accent:var(--th-accent);--lg-accent-fg:var(--th-accent-fg)}
html[data-ps-theme="light"] body:not(.portal-mode) .auth-view{--lg-veil:rgba(255,255,255,.32)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) body:not(.portal-mode) .auth-view{--lg-veil:rgba(11,18,32,.35)}
body:not(.portal-mode) .auth-view .panel{width:100%;max-width:360px;margin-inline:auto;background:#fff;border-color:var(--lg-line);color:var(--lg-ink)}
/* Space only between two panels that are both shown (a hidden panel before the card must not push it down). */
body:not(.portal-mode) .auth-view .panel:not(.hidden)+.panel{margin-top:16px}
.login-card{padding:22px 24px 14px;border-radius:16px;box-shadow:0 18px 48px rgba(11,57,39,.14);overflow-wrap:anywhere}
.login-brand{text-align:center}
/* The logo: the circle-cut copy (transparent outside the emblem) at 50 px (46 px on phones); a logo that is not a clear circle keeps its
   whole outline at the same height. Never stretched (object-fit), never redrawn. */
.login-brand .login-logo{display:block;width:auto;height:50px;max-width:min(160px,60%);margin:0 auto;object-fit:contain}
html:not(.brand-ready) .login-brand :is(.login-logo,.login-portal-name,.login-tagline){visibility:hidden}
/* Portal Title: one line where it fits, otherwise balanced wrapping; sized by its length (never below 16px). */
.login-portal-name{margin:10px 0 0;font-size:clamp(19px,5vw,22px);font-weight:800;line-height:1.2;letter-spacing:.005em;color:var(--lg-accent,var(--green));overflow-wrap:anywhere;text-wrap:balance}
.login-portal-name[data-len=long]{font-size:clamp(17px,4.4vw,19px)}
.login-portal-name[data-len=xl]{font-size:clamp(16px,4vw,17px);line-height:1.3}
.login-tagline{margin:3px 0 0;font-size:13px;line-height:1.45;color:var(--lg-muted,var(--muted));overflow-wrap:anywhere;text-wrap:balance}
.login-title{margin:12px 0 10px;text-align:center;font:700 21px/1.2 Georgia,serif;color:var(--lg-ink,var(--ink))}
.login-card .login-form{gap:12px;padding:0}
.login-card .login-form>label{gap:5px;font-size:14px;text-transform:none;letter-spacing:0;font-weight:700;color:var(--lg-ink,var(--ink))}
.login-card .login-form input:not([type=checkbox]){min-height:44px;padding-block:10px;font-size:16px;background:#fff;color:var(--lg-ink,var(--ink));border-color:var(--lg-input-line,var(--nt-line,#d8e1dd))}
.login-card .login-form input::placeholder{color:var(--nt-faint,#8a9691);opacity:1}
/* Show / hide password. */
.pw-field{position:relative;display:block}
.login-card .pw-field input{padding-right:52px}
.pw-toggle{position:absolute;top:50%;right:2px;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:40px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--lg-muted,var(--muted));cursor:pointer}
.pw-toggle:hover{color:var(--lg-accent,var(--green))}
.pw-toggle:focus-visible{outline:2px solid var(--lg-accent,var(--green));outline-offset:-2px}
.pw-toggle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pw-toggle .pw-slash{display:none}.pw-toggle[aria-pressed="true"] .pw-slash{display:inline}
.login-row{display:flex;align-items:center;justify-content:space-between;gap:0 12px;flex-wrap:wrap;margin-block:-6px}
.login-card .login-remember{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--lg-ink,var(--ink));cursor:pointer}
.login-remember input{width:18px;height:18px;margin:0;accent-color:var(--lg-accent,var(--green));flex:none}
.login-card .link-btn{color:var(--lg-accent,var(--green))}
.login-row .link-btn{min-height:44px;padding:0;font-size:14px}
.login-card .login-help{margin:0}
/* Cloudflare Turnstile (a fixed 300 x 65 px widget; the card keeps at least 300 px inside, even on 360 px phones).
   When Turnstile is configured, app.js marks the slot ts-reserve so its height is kept from the start (no jump when the
   widget appears); without Turnstile the empty slot takes no space (.turnstile-slot:empty{display:none} above). */
.login-card .turnstile-slot:not(:empty),.login-card .turnstile-slot.ts-reserve{display:flex;justify-content:center}
.login-card .turnstile-slot.ts-reserve{min-height:65px}
.login-submit{width:100%;min-height:46px;font-size:16px}
body:not(.portal-mode) .auth-view .login-submit{background:var(--lg-accent);border-color:var(--lg-accent);color:var(--lg-accent-fg)}
.login-back{margin:4px 0 0;text-align:center}
.login-back a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 8px;font-weight:700;color:var(--lg-accent,var(--green));text-decoration:none}
.login-back a:hover{text-decoration:underline}
@media (max-width:480px){
  .login-card{padding:18px 18px 12px}
  .login-brand .login-logo{height:46px}
  .login-title{margin:12px 0 10px;font-size:20px}
}
/* Settings → Organization Information: Service Portal Information preview. */
.ps-portal-info{margin-top:18px}
.ps-portal-info .ps-sub{display:block;margin-top:2px;font-weight:400}
.ps-portal-preview{display:flex;align-items:center;gap:14px;margin:10px 0 12px}
.ps-portal-preview img{width:72px;height:72px;object-fit:contain;flex:none}
.ps-portal-preview p{margin:0}

/* =========================================================
   Member Eligibility — PROPOSED guidelines (public #view-eligibility only; every rule is scoped to .elig-*).
   Two cards side by side on desktop and tablet (existing .elig-grid breakpoints), stacked at <=680px; the two
   sections below use the same grid. Cards are always white, so text uses the fixed brand green (readable under any
   portal theme). Membership fees are highlighted in green, voting rights in the portal's gold accent.
   ========================================================= */
.elig-wrap{--elig-green:#0a5c3a;width:min(1040px,calc(100% - 32px));margin-inline:auto}
.page-head .elig-subtitle{color:var(--elig-green);font-weight:700;line-height:1.5}
.elig-card{display:flex;flex-direction:column;gap:16px;overflow-wrap:break-word}
.elig-head h2{margin:6px 0 10px}
.elig-tag{display:inline-block;padding:4px 10px;border-radius:999px;background:#eaf4ee;color:var(--elig-green);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.elig-fee-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:0;padding:10px 14px;border:1px solid #cfe3d8;border-radius:12px;background:#f3f9f5;color:var(--ink);font-weight:700;line-height:1.35}
.elig-fee-line strong{font:700 clamp(24px,3vw,30px)/1.1 Georgia,serif;color:var(--elig-green)}
.elig-card h3{margin:0 0 6px;font-size:15px;font-weight:800;line-height:1.35;color:var(--elig-green)}
.elig-card ul,.elig-section ul{margin:0;padding-left:20px}
.elig-card li,.elig-section li{margin:7px 0;line-height:1.55;color:var(--nt-ink-2,#4f5f58)}
.elig-fee{padding:12px 14px;border:1px solid #cfe3d8;border-radius:12px;background:#f3f9f5}
.elig-vote{padding:12px 14px;border-left:4px solid var(--gold);border-radius:10px;background:#fffbf2}
.elig-vote h3{color:#6b4f12}
.elig-more{margin-top:20px}
.elig-section{overflow-wrap:break-word}
.elig-section h2{margin-bottom:8px}
.elig-notice{margin-top:20px}
/* Two columns: the four parts of both cards (title + fee, requirements, fee details, voting) line up across cards. */
@supports (grid-template-rows:subgrid){
  @media (min-width:681px){
    .elig-card{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:16px;align-content:start}
  }
}
@media (max-width:680px){
  .elig-wrap{width:calc(100% - 24px)}
  .elig-fee,.elig-vote,.elig-fee-line{padding:10px 12px}
}

/* =========================================================
   Member Login card: Sign In and Reset Password are two panes of ONE card (app.js shows one at a time; the logo /
   header above them is shared). Every rule is scoped to .login-card / its panes.
   ========================================================= */
.login-card .login-intro{margin:0 0 12px;font-size:14px;line-height:1.5;text-align:center}
.login-card .login-pane>.form-note{margin:12px 0 0}
.login-card .login-switch{margin:6px 0 0;text-align:center}
.login-card .login-switch .link-btn{min-height:44px;padding:0 8px;font-size:14px;font-weight:700}
/* Phones narrower than 356 px: Cloudflare's compact widget (150 x 140 px) is used there, so reserve its height. */
.login-card .turnstile-slot.ts-reserve.ts-compact{min-height:140px}

/* =========================================================
   Digital Membership Card (member portal + admin preview) and public verification page. Scoped to .mc-* / .vf-*.
   Bangladesh flag green band with the red disc; white details panel; the QR always on plain white with its quiet zone.
   ========================================================= */
.mc-wrap{--mc-green:#006a4e;--mc-green-d:#004b37;--mc-red:#f42a41;--mc-red-text:#c8102e;--mc-ok:#0b6b3a;display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:20px;align-items:start}
/* Approved refined design ("Refined membership card with smaller logo", 2026-10-11). Everything is scoped to .mc-card. */
.mc-card{container-type:inline-size;--mc-green:#006a4e;--mc-green-d:#004b37;--mc-red:#f42a41;--mc-red-text:#d0121e;--mc-ok:#0b7a3a;--mc-ink:#0d3b2b;--mc-muted:#4f5d56;--mc-line:#e1e7e3;position:relative;max-width:420px;width:100%;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 14px 34px rgba(0,75,55,.24);color:#10251c}
.mc-card .mc-band{position:relative;overflow:hidden;display:flex;align-items:center;min-height:176px;padding:22px 98px 52px 22px;background:linear-gradient(170deg,#0a6a45 0%,#0b5a3c 55%,#084a31 100%);color:#fff}
.mc-card .mc-brand{position:relative;z-index:1;display:flex;align-items:center;gap:14px;min-width:0}
.mc-card .mc-logo{flex:none;width:64px;height:64px;object-fit:cover;clip-path:circle(48.5% at 50% 50%);background:#fff;border-radius:50%}
.mc-card .mc-sep{flex:none;width:1.5px;align-self:stretch;margin:6px 0;background:rgba(255,255,255,.7)}
.mc-card .mc-org-name{margin:0;font-weight:600;font-size:20px;line-height:1.2;overflow-wrap:anywhere;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.mc-card .mc-disc{position:absolute;z-index:0;width:64px;height:64px;border-radius:50%;background:var(--mc-red);right:26px;top:26px;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.mc-card .mc-skyline{position:absolute;left:0;bottom:0;width:100%;height:auto;aspect-ratio:400/48;display:block}
.mc-card .mc-sky-far{fill:#000;opacity:.13}.mc-card .mc-sky-near{fill:#000;opacity:.2}.mc-card .mc-sky-water{fill:#000;opacity:.12}
.mc-card .mc-label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--mc-muted)}
.mc-card .mc-body{position:relative;padding:18px 22px 18px;background:#fff}
.mc-card .mc-who{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:14px}
.mc-card .mc-who-txt{min-width:0}
.mc-card .mc-name.mc-name-long{font-size:21px}
.mc-card .mc-name{margin:6px 0 0;font-size:26px;line-height:1.15;font-weight:800;color:var(--mc-ink);overflow-wrap:anywhere}
/* Circular photo: the member's own photo, scaled evenly to fill the circle (object-fit: cover, never stretched). */
.mc-card .mc-photo{flex:none;width:108px;height:108px;border-radius:50%;border:2px solid var(--mc-green);background:#eef3f0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.mc-card .mc-photo-img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.mc-card .mc-photo-ph{width:64%;height:auto}.mc-card .mc-photo-ph circle,.mc-card .mc-photo-ph path{fill:#b4c4bb}
.mc-card .mc-grid{margin:0;display:grid;grid-template-columns:minmax(0,1fr) max-content;border-top:1px solid var(--mc-line);border-bottom:1px solid var(--mc-line)}
.mc-card .mc-grid>div{min-width:0;padding:12px 0}
.mc-card .mc-grid>div:first-child{padding-right:12px}
.mc-card .mc-grid>div+div{padding:4px 0 4px 16px;margin:8px 0;border-left:1px solid var(--mc-line)}
.mc-card .mc-grid dd{margin:6px 0 0;font-weight:800;color:var(--mc-ink);overflow-wrap:anywhere}
.mc-card .mc-id{font-size:22px;line-height:1.15}
.mc-card .mc-pill{display:inline-block;padding:5px 16px;border-radius:999px;background:var(--mc-red-text);color:#fff;font-size:16px;font-weight:700;line-height:1.2;white-space:nowrap}
.mc-card .mc-strow{padding:10px 0 12px;border-bottom:1px solid var(--mc-line)}
.mc-card .mc-st{display:flex;align-items:center;gap:10px;margin:6px 0 0;font-size:22px;font-weight:800;line-height:1.15;color:var(--mc-ok)}
.mc-card .mc-st-ic{flex:none;width:28px;height:28px}.mc-card .mc-st-ic circle{fill:currentColor}.mc-card .mc-st-ic path{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mc-card .mc-st-suspended .mc-st{color:#8a5300}.mc-card .mc-st-suspended .mc-st-ic circle{fill:#d98a00}
.mc-card .mc-st-inactive .mc-st{color:#4b5563;font-size:19px}.mc-card .mc-st-inactive .mc-st-ic circle{fill:#6b7280}
.mc-card .mc-qr{margin:14px auto 0;width:184px;max-width:100%;background:#fff;border:1px solid var(--mc-line);border-radius:12px;padding:6px;color:#10251c}
.mc-card .mc-qr svg{display:block;width:100%;height:auto}
.mc-card .mc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mc-card .mc-issued{margin:8px 0 0;text-align:center;font-size:14px;font-weight:600;color:var(--nt-ink-2,#33433c)}
@container (max-width:360px){.mc-card .mc-band{min-height:150px;padding:18px 74px 42px 16px}.mc-card .mc-brand{gap:10px}.mc-card .mc-logo{width:52px;height:52px}.mc-card .mc-org-name{font-size:16.5px}
  .mc-card .mc-disc{width:50px;height:50px;right:16px;top:18px}.mc-card .mc-body{padding:16px}.mc-card .mc-name{font-size:22px}.mc-card .mc-name.mc-name-long{font-size:18px}.mc-card .mc-photo{width:86px;height:86px}
  .mc-card .mc-id{font-size:19px}.mc-card .mc-pill{font-size:14.5px;padding:4px 12px}.mc-card .mc-st{font-size:20px}.mc-card .mc-label{font-size:11px}}
@container (max-width:300px){.mc-card .mc-grid{grid-template-columns:minmax(0,1fr)}.mc-card .mc-grid>div+div{padding:10px 0;margin:0;border-left:0;border-top:1px solid var(--mc-line)}
  .mc-card .mc-band{padding-right:62px}.mc-card .mc-disc{width:42px;height:42px}.mc-card .mc-photo{width:76px;height:76px}}
.mc-side{display:grid;gap:16px;min-width:0}
.mc-notes{margin:0 0 12px;padding-left:20px;display:grid;gap:6px}
.mc-wallet{display:grid;gap:10px}.mc-wallet-item{display:grid;gap:4px}.mc-wallet .btn{justify-content:center}
.mc-qr-large{max-width:340px;margin:0 auto 10px;background:#fff;padding:8px;border-radius:12px}.mc-qr-large svg{display:block;width:100%;height:auto}
.mc-preview{margin-top:14px}.mc-preview summary{cursor:pointer;font-weight:700}
.mc-pass-preview{position:relative;margin-top:10px;max-width:320px;border-radius:14px;padding:30px 16px 14px;color:#fff;background:#006a4e;border:2px dashed #f42a41}
.mc-pp-tag{position:absolute;top:8px;left:12px;right:12px;font-size:10.5px;font-weight:800;letter-spacing:.08em;color:#4a0d16;background:#ffe1e5;border-radius:6px;padding:2px 6px;text-align:center}
.mc-pp-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}.mc-pp-top img{border-radius:50%;clip-path:circle(48.5% at 50% 50%);background:#fff}
.mc-pp-l{margin:0;font-size:10px;letter-spacing:.1em;color:#ffcdd2;font-weight:700}.mc-pp-v{margin:0 0 8px;font-size:18px;font-weight:700}
.mc-pp-row{display:flex;gap:18px;margin-bottom:10px}.mc-pp-row p{margin:0}
.mc-pp-qr{width:120px;margin:0 auto;background:#fff;border-radius:8px;padding:4px;opacity:.55}.mc-pp-qr svg{display:block;width:100%;height:auto}
.mc-admin-preview{margin:4px 0 14px}.mc-admin-preview .mc-card{max-width:360px}
.vf-card{max-width:520px;margin:24px auto;border-radius:16px;border-top:6px solid #6b7280}
.vf-green{border-top-color:#006a4e}.vf-amber{border-top-color:#b7791f}.vf-red{border-top-color:#b42318}
.vf-head{display:flex;align-items:center;gap:10px}.vf-head h1{margin:0;font:700 22px/1.25 Georgia,serif}.vf-head svg{width:26px;height:26px;flex:none}
.vf-green .vf-head{color:#006a4e}.vf-amber .vf-head{color:#8a5a00}.vf-red .vf-head{color:#b42318}
.vf-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}.vf-dl dt{font-size:12px;color:#56645d;font-weight:700}.vf-dl dd{margin:2px 0 0;font-weight:700;overflow-wrap:anywhere}
.vf-dl .mc-status{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12.5px;font-weight:800}
.vf-dl .mc-status.mc-active{background:#e3f4ea;color:#0b6b3a}.vf-dl .mc-status.mc-suspended{background:#fff3d6;color:#7a4b00}
.vf-notice{display:flex;gap:8px;align-items:flex-start;margin:14px 0 0;padding:10px 12px;border-radius:10px;background:#fff8e6;color:#5c4400;font-size:14px}.vf-notice svg{width:18px;height:18px;flex:none;margin-top:2px}
@media (max-width:900px){.mc-wrap{grid-template-columns:minmax(0,1fr)}.mc-wrap>.mc-card{justify-self:center}}
@media (max-width:420px){.vf-dl{grid-template-columns:minmax(0,1fr)}}

/* =========================================================
   Dashboard (pending work first), Admin profile menu, Events, staff check-in and member Events.
   Colors come only from the shared theme variables (--ps-green follows Settings → Appearance & Theme, --th-* for the
   header and menu), so every theme, Dark included, applies here as it does on the other portal pages.
   New surfaces use --ps-surface / --ps-surface-2, which the Dark theme redefines below.
   ========================================================= */
:root{--ps-surface:#fff;--ps-surface-2:#f6f8f7}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]){--ps-surface:#111a2b;--ps-surface-2:#0e1626}

/* Profile menu (Admin Panel, top right; inside "Menu" on tablets and phones) */
.ps-user-dd{position:relative}
.ps-user-btn{display:flex;align-items:center;gap:10px;min-height:48px;max-width:min(340px,34vw);padding:4px 8px 4px 4px;border:1px solid transparent;border-radius:12px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.ps-user-btn:hover,.ps-user-btn[aria-expanded="true"]{background:color-mix(in srgb,var(--ps-green) 8%,transparent);border-color:color-mix(in srgb,var(--ps-green) 16%,transparent)}
.ps-user-chev{display:inline-flex}
.ps-user-chev .ps-ico{width:18px;height:18px;color:var(--ps-muted);transform:rotate(90deg);transition:transform .15s}
.ps-user-btn[aria-expanded="true"] .ps-user-chev .ps-ico{transform:rotate(-90deg)}
html[data-ps-theme] .ps-top .ps-user-chev .ps-ico{color:var(--th-top-fg)}
.ps-user-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:70;display:grid;gap:2px;min-width:250px;max-width:min(320px,92vw);padding:8px;background:var(--ps-surface);border:1px solid var(--ps-line);border-radius:14px;box-shadow:0 18px 40px rgba(16,40,30,.18)}
.ps-user-pop[hidden]{display:none}
.ps-user-pop-head{display:grid;margin:0 0 4px;padding:8px 10px 10px;border-bottom:1px solid var(--ps-line);line-height:1.3}
.ps-user-pop-head b{font-size:14px;color:var(--ps-ink)}
.ps-user-pop-head small{font-size:12.5px;color:var(--ps-muted);overflow-wrap:anywhere}
.ps-user-item{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 10px;border:0;border-radius:10px;background:none;color:var(--ps-ink);font:600 14px/1.2 inherit;text-align:left;cursor:pointer}
.ps-user-item:hover,.ps-user-item[aria-current="page"]{background:var(--ps-green-50);color:var(--ps-green)}
.ps-user-item.ps-signout{color:#b42318}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-user-item.ps-signout{color:#fca5a5}
.ps-user-sep{display:block;height:1px;margin:4px 6px;background:var(--ps-line)}
.ps-nav-acct{display:inline-flex;align-items:center;gap:6px;margin-left:auto;min-height:40px;padding:6px 10px;border:1px solid var(--ps-line);border-radius:10px;background:none;color:inherit;font:600 13px/1.2 inherit;cursor:pointer;flex:none}
.ps-nav-acct .ps-ico{width:16px;height:16px}
.ps-nav-acct[aria-current="page"]{border-color:var(--ps-green);color:var(--ps-green)}
html[data-ps-theme] .ps-nav-acct{color:var(--th-side-fg);border-color:color-mix(in srgb,var(--th-side-fg) 24%,transparent)}

/* Dashboard: needs attention, figures that open their page, recent applications + upcoming events */
.ps-attn{margin-bottom:20px;padding:16px 20px;background:var(--ps-surface);border:1px solid var(--ps-line);border-radius:var(--ps-radius);box-shadow:var(--ps-shadow)}
.ps-attn-kicker{margin:0 0 10px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ps-muted)}
.ps-attn-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:12px}
.ps-attn-item{display:flex;align-items:center;gap:12px;min-width:0;padding:10px;border-radius:12px;background:var(--ps-surface-2)}
.ps-attn-item .ps-tile{width:46px;height:46px;border-radius:12px}
.ps-attn-item .ps-tile .ps-ico{width:24px;height:24px}
.ps-attn-item{flex-wrap:wrap}
.ps-attn-text{display:grid;flex:1 1 170px;min-width:0;line-height:1.3}
.ps-attn-text b{font-size:15.5px;color:var(--ps-ink)}
.ps-attn-text small{font-size:13px;color:var(--ps-muted)}
.ps-attn-item .ps-btn{flex:none;margin-left:auto;white-space:nowrap}
.ps-attn-item .ps-btn .ps-ico{width:16px;height:16px}
.ps-attn.is-clear{display:flex;align-items:center;gap:10px;color:var(--ps-ink);font-size:14.5px}
.ps-attn.is-clear>.ps-ico{color:var(--ps-green)}
.ps-stat-link{width:100%;font:inherit;text-align:left;color:inherit;cursor:pointer;transition:transform .15s,box-shadow .15s}
.ps-stat-link:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(16,40,30,.06),0 10px 24px rgba(16,40,30,.08)}
.ps-stat-link>.ps-stat-text{display:block;flex:1;min-width:0}
.ps-stat-link>.ps-ico{width:18px;height:18px;color:var(--ps-muted)}
/* Seven key figures (Net Balance added to the six): 4 + 3 on wide screens instead of 3 + 3 + 1. */
@media (min-width:1200px){.ps-stats-dash.ps-stats-n7{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ps-grid-work{grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr))}
.ps-up-events{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ps-up-ev{display:flex;align-items:flex-start;gap:14px;padding:12px;border:1px solid var(--ps-line);border-radius:12px;min-width:0}
.ps-up-ev-body{display:grid;gap:4px;flex:1;min-width:0}
.ps-up-ev-meta{display:flex;align-items:center;gap:8px;min-width:0;font-size:13.5px;color:var(--ps-muted);overflow-wrap:anywhere}
.ps-up-ev-meta .ps-ico{width:16px;height:16px;color:var(--ps-green)}
.ps-up-ev-meta b{color:var(--ps-ink)}
@media (max-width:599px){.ps-attn{padding:14px}.ps-attn-item{flex-wrap:wrap}.ps-attn-item .ps-btn{width:100%}.ps-stat-link>.ps-ico{display:none}}

/* Events: cards, detail, counts */
.ps-ev-date{display:grid;align-content:center;justify-items:center;flex:none;width:62px;height:66px;border-radius:14px;background:var(--ps-green-50);color:var(--ps-green);line-height:1.05;text-align:center}
.ps-ev-date small{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.ps-ev-date b{font-size:26px;font-weight:800}
.ps-ev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));gap:16px}
.ps-ev-card,.ps-ev-hero,.ps-ci-event{display:flex;align-items:flex-start;gap:16px}
.ps-ev-body{display:grid;gap:8px;flex:1;min-width:0}
.ps-ev-title{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ps-ev-title h2,.ps-ev-h{margin:0;font-size:18px;line-height:1.25;color:var(--ps-ink);overflow-wrap:anywhere}
.ps-ev-hero .ps-ev-title h2{font-size:clamp(20px,2vw,26px)}
.ps-ev-open{padding:0;border:0;background:none;font:inherit;font-weight:800;color:inherit;text-align:left;cursor:pointer;overflow-wrap:anywhere}
.ps-ev-open:hover{color:var(--ps-green);text-decoration:underline}
.ps-up-ev .ps-ev-open{font-size:16px}
.ps-ev-meta{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px;color:var(--ps-muted)}
.ps-ev-meta li{display:flex;align-items:flex-start;gap:8px;min-width:0;overflow-wrap:anywhere}
.ps-ev-meta .ps-ico{width:18px;height:18px;margin-top:1px;color:var(--ps-green)}
.ps-ev-counts{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;color:var(--ps-ink)}
.ps-ev-counts .ps-ico{width:18px;height:18px;color:var(--ps-green)}
.ps-ev-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.ps-ev-desc{margin:4px 0 0;max-width:75ch;line-height:1.55;white-space:pre-line;color:var(--ps-ink)}
.ps-ev-fine{margin:0;font-size:13px}
.ps-ev-hero{margin-bottom:20px}
.ps-ev-stats{margin-bottom:12px}
.ps-ev-breakdown{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-bottom:20px;padding:12px 16px;background:var(--ps-surface);border:1px solid var(--ps-line);border-radius:12px;font-size:14px;color:var(--ps-muted)}
.ps-ev-breakdown b{color:var(--ps-ink)}
.ps-ev-bd-title{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--ps-ink)}
.ps-ev-bd-title .ps-ico{width:18px;height:18px;color:var(--ps-green)}
.ps-tabs button[aria-pressed="true"]{color:var(--ps-green);border-bottom-color:var(--ps-green)}
.ps-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--ps-green-50);color:var(--ps-green);font-size:12px}
@media (max-width:599px){.ps-ev-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.ps-ev-stats .ps-stat{padding:10px;gap:6px}.ps-ev-stats .ps-tile{width:34px;height:34px;border-radius:10px}.ps-ev-stats .ps-tile .ps-ico{width:18px;height:18px}.ps-ev-stats .ps-stat-label{font-size:12px;line-height:1.25}.ps-ev-stats .ps-stat small{display:none}
  .ps-ev-card,.ps-ev-hero,.ps-ci-event{gap:12px}.ps-ev-date{width:52px;height:56px}.ps-ev-date b{font-size:22px}.ps-ev-actions :is(.ps-btn,a.btn){flex:1 1 100%}}

/* Staff check-in: find a family (QR / name), tick who is arriving, confirm */
.ps-ci-event{margin-bottom:16px}
.ps-ci-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px;align-items:start}
.ps-ci-find .ps-h3{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.ps-ci-find .ps-h3 .ps-ico{color:var(--ps-green)}
.ps-ci-find #ciNameTitle{margin-top:22px}
.ps-ci-scan label{display:block;margin-bottom:6px;font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ps-ink)}
.ps-ci-scanrow{display:flex;gap:8px}
.ps-ci-scanrow input{flex:1;min-width:0;min-height:46px}
.ps-ci-tip{margin:8px 0 0;font-size:13px}
.ps-ci-results{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.ps-ci-result{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 12px;background:var(--ps-surface);border:1px solid var(--ps-line);border-radius:12px;color:var(--ps-ink);font:inherit;text-align:left;cursor:pointer}
.ps-ci-result:hover{border-color:var(--ps-green)}
.ps-ci-result b{flex:1;min-width:0;overflow-wrap:anywhere}
.ps-ci-result small{color:var(--ps-muted)}
.ps-ci-result .ps-ico{width:18px;height:18px;color:var(--ps-muted)}
.ps-ci-found{display:flex;align-items:center;gap:14px;margin:-4px -4px 14px;padding:14px 16px;border-radius:12px;background:var(--ps-green-50);color:var(--ps-ink)}
.ps-ci-found>.ps-ico{width:34px;height:34px;color:var(--ps-green)}
.ps-ci-found h2{margin:0;font-size:20px;color:var(--ps-ink)}
.ps-ci-found p{margin:2px 0 0;font-size:14px;color:var(--ps-muted)}
.ps-ci-fs{min-width:0;margin:0;padding:0;border:0}
.ps-roster{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ps-roster-row{background:var(--ps-surface);border:1px solid var(--ps-line);border-radius:12px}
.ps-roster-row>label,.me-roster .ps-roster-row{display:flex;align-items:center;gap:12px;min-height:60px;margin:0;padding:10px 14px;font-size:15px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ps-ink)}
.ps-roster-row>label{cursor:pointer}
.ps-roster-row input{flex:none;width:24px;height:24px;margin:0;accent-color:var(--ps-green)}
.ps-roster-row:has(input:checked:not(:disabled)){border-color:var(--ps-green);background:var(--ps-green-50)}
.ps-roster-row.is-in{background:var(--ps-surface-2)}
.ps-roster-row.is-in>label{cursor:default}
.ps-roster-av{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--ps-surface-2);border:1px solid var(--ps-line);font-size:13px;font-weight:800;color:var(--ps-ink)}
.ps-roster-name{display:grid;flex:1;min-width:0;line-height:1.3}
.ps-roster-name b{color:var(--ps-ink);overflow-wrap:anywhere}
.ps-roster-name small{font-size:13px;color:var(--ps-muted)}
.ps-ci-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.ps-shell .ps-ci-go{flex:1 1 220px;min-height:52px;font-size:16px}
.ps-ci-note{margin:10px 0 0;font-size:13px}
.ps-ci-alert{align-items:center;flex-wrap:wrap}
.ps-ci-alert>span{flex:1 1 240px}
@media (max-width:1023px){.ps-ci-grid{grid-template-columns:1fr}}
@media (max-width:599px){.ps-ci-scanrow{flex-direction:column}.ps-ci-actions .ps-btn{width:100%}}

/* Member Account → Events */
.me-ev-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.me-ev-cols>div{display:grid;gap:20px;min-width:0}
.me-qr{display:grid;place-items:center;padding:12px;background:#fff;border-radius:12px}
.me-qr svg{display:block;width:min(260px,100%);height:auto}
.me-form{display:grid;gap:12px}
.ps-shell .me-self{align-items:flex-start;padding:10px 12px;border:1px solid var(--ps-line);border-radius:12px}
.me-self input{flex:none;width:22px;height:22px;margin:2px 0 0;accent-color:var(--ps-green)}
.me-self span{display:grid;gap:2px}
.me-self small{color:var(--ps-muted)}
.me-guests{display:grid;gap:8px}
.me-guest{display:flex;align-items:center;gap:8px}
.me-guest .ps-badge{flex:none;justify-content:center;min-width:96px}
.me-guest input{flex:1;min-width:0;min-height:46px}
.me-add{display:flex;flex-wrap:wrap;gap:10px}
.me-fine{margin:0;font-size:13px}
@media (max-width:899px){.me-ev-cols{grid-template-columns:1fr}}
@media (max-width:599px){.me-guest{flex-wrap:wrap}.me-guest .ps-badge{min-width:0}.me-guest input{order:2;flex:1 1 calc(100% - 52px)}.me-guest .ps-icon-btn{order:3}.me-add .ps-btn{flex:1 1 100%}}

/* ===== Admin Menu (phones / tablets): account identity on its own line, the Account Security button on the line below,
   so the name is not truncated to make room for the button. Scoped to the admin account area of the Menu only. ===== */
.ps-nav-user:has(.ps-nav-acct){flex-wrap:wrap;row-gap:10px}
.ps-nav-user:has(.ps-nav-acct) .ps-user-text{flex:1 1 0}
.ps-nav-user:has(.ps-nav-acct) .ps-user-text b{white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ps-nav-user .ps-nav-acct{flex:1 1 100%;margin-left:0;justify-content:center;font-family:inherit}
.ps-nav-user .ps-nav-acct:focus-visible{outline:3px solid currentColor;outline-offset:2px}

/* ---- Membership Fees & Billing (migration 019) ---- */
.fee-summary .fee-next{margin:.5rem 0 0;font-size:.9rem;line-height:1.45}
.fee-summary .fee-note{display:block;margin-top:.35rem;opacity:.8}
.activation-fee{border:1px solid var(--line,#d8e2dc);border-radius:10px;padding:.75rem .9rem;margin:.5rem 0 1rem;display:grid;gap:.4rem}
.activation-fee p{margin:0}
.activation-fee .activation-fee-change{font-weight:500}
.activation-accept{align-items:flex-start}
.ps-fee-now{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px;margin:12px 0}
.ps-fee-now>div{border:1px solid var(--line,#d8e2dc);border-radius:10px;padding:10px 12px;display:grid;gap:2px;min-width:0}
.ps-fee-now b{font-size:1.25rem;font-variant-numeric:tabular-nums}
.ps-fee-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:14px}
.ps-callout.ps-fee-next,.ps-callout.ps-fee-review{border-left:3px solid currentColor;padding:8px 12px;border-radius:0 8px 8px 0;margin:8px 0}
.ps-fee-cutoff{margin-top:16px;display:grid;gap:8px}
.ps-inline-fields{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.ps-inline-fields label{display:grid;gap:4px;min-width:min(100%,140px)}
.ps-row-actions{display:flex;flex-wrap:wrap;gap:6px}
@media (max-width:1279px){.ps-shell .ps-fee-list .ps-table{display:none}.ps-shell .ps-fee-list .ps-mcards{display:block}}
@media (max-width:1099px){.ps-shell .ps-standing-list .ps-table{display:none}.ps-shell .ps-standing-list .ps-mcards{display:block}}

/* ---- Accounting (A-1 ledger foundation) ---- */
.ps-jline{border:1px solid var(--ps-line);border-radius:12px;padding:10px 12px 12px;margin:0 0 12px;min-width:0}
.ps-jline legend{font-weight:700;font-size:13px;padding:0 6px}
.ps-jline .form-grid{padding:0}
.ps-jtotals{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:10px 0}
.ps-acct-banner{margin:0 0 14px}
.ps-select-wide{flex:1 1 280px;min-width:0}
.ps-select-wide select{width:100%;min-width:0;text-overflow:ellipsis}
.ps-inline{display:flex;align-items:center;gap:8px}
.ps-inline input{width:110px}

/* A-2M: cash details dialog; automatic posting screens */
.ps-cash-dialog{width:min(520px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto}
.ps-cash-dialog .ps-field input,.ps-cash-dialog .ps-field select{min-height:44px;width:100%}
.ps-cash-dialog .ps-hint{font-weight:400;color:var(--ps-muted,#5c6b64)}
.ps-state-line{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:2px 0 10px}
.ps-json{width:100%;min-height:260px;font:13px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;padding:10px;border:1px solid #cfdcd5;border-radius:10px;background:#fff;color:#1d2b25;resize:vertical;box-sizing:border-box}
.ps-json-sm{min-height:180px}
.ps-pre{white-space:pre-wrap;word-break:break-word;font:12.5px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;background:#f5f8f6;border:1px solid var(--nt-line,#dde8e2);border-radius:10px;padding:10px;max-height:360px;overflow:auto;margin:8px 0}
.ps-list-plain{margin:4px 0 12px;padding-left:20px;line-height:1.5}
.ps-rulecheck{border:1px solid var(--nt-line,#dde8e2);border-radius:12px;padding:10px 14px;margin:8px 0}
.ps-rulecheck h4{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 6px;font-size:15px}
.ps-details{margin:10px 0}.ps-details>summary{cursor:pointer;font-weight:700;padding:6px 0}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) :is(.ps-pre,.ps-json){background:var(--dk-field,#0f1726);border-color:var(--dk-line,#253247);color:var(--dk-ink,#e6ebf2)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-rulecheck{border-color:var(--dk-line,#253247)}

/* A-3: opening balances */
.ps-obitem{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0;padding:8px 10px;border:1px solid var(--nt-line,#dde8e2);border-radius:10px}
.ps-obitem span{flex:1 1 220px;font-size:13.5px}
.ps-obitem input{flex:1 1 140px;min-height:40px}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-obitem{border-color:var(--dk-line,#253247)}

/* A-8: Accounts & Finance — overview, approvals, guided forms, report navigation (phone, tablet, desktop) */
.ps-tabs-fin{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.ps-tabs-fin button{flex:none;white-space:nowrap}
.ps-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#b42318;color:#fff;font-size:12px;font-weight:800}
.ps-fin-quick{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));margin-bottom:16px}
.ps-fin-quick .ps-quick-btn span{display:grid;gap:2px}.ps-fin-quick .ps-quick-btn small{font-weight:500;opacity:.85}
.ps-grid-hub{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));margin-bottom:16px}
.ps-stats-ie{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.ps-hub-pending{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ps-hub-pending li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--ps-line)}
.ps-hub-pending li:last-child{border-bottom:0}.ps-hub-pending li>span{min-width:0;overflow-wrap:anywhere}
.ps-hub-pending .ps-link,.ps-report-nav .ps-link{min-height:44px;display:inline-flex;align-items:center;flex:none}
.ps-range .ps-filter-row{align-items:flex-end}
.ps-chipbar{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.ps-chipbtn{min-height:40px;padding:6px 12px;border:1px solid var(--ps-line);border-radius:20px;background:var(--ps-surface);color:var(--ps-ink);font:600 13.5px/1.2 inherit;cursor:pointer}
.ps-chipbtn[aria-pressed="true"]{border-color:var(--ps-green);background:var(--ps-green-50);color:var(--ps-green-600);box-shadow:inset 0 0 0 1px var(--ps-green)}
.ps-report-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.ps-report-group{margin-top:18px}.ps-report-group>.ps-h3{margin:0 0 4px}.ps-report-group>.ps-note{margin:0 0 10px}
/* guided forms */
.ps-wizard .ps-drawer-body{display:grid;gap:14px;align-content:start}
.ps-steps{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:0;list-style:none;font-size:13px;color:var(--ps-muted)}
.ps-steps li{display:flex;align-items:center;gap:6px}
.ps-steps li span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:2px solid var(--ps-line);font-weight:800;font-size:12px}
.ps-steps li.is-now{color:var(--ps-ink);font-weight:700}.ps-steps li.is-now span{border-color:var(--ps-green);background:var(--ps-green);color:#fff}
.ps-steps li.is-done span{border-color:var(--ps-green);color:var(--ps-green)}
.ps-steps li.is-done span::after{content:"";}
.ps-wiz-main{display:grid;gap:14px}
.ps-field{display:grid;gap:6px;font-weight:600;font-size:14.5px}
.ps-field input,.ps-field select{min-height:46px;font-size:16px;padding:10px 12px;border:1px solid var(--ps-line);border-radius:10px;background:var(--ps-surface);color:var(--ps-ink);width:100%;box-sizing:border-box}
.ps-field input[readonly]{background:var(--ps-surface-2)}
.ps-field [aria-invalid="true"],.ps-wiz-main [aria-invalid="true"]{border-color:#b42318;box-shadow:0 0 0 1px #b42318}
.ps-hint{font-weight:400;font-size:13px;color:var(--ps-muted)}
.ps-wiz-main .ps-field-error,.ps-range .ps-field-error{margin:-4px 0 0;font-weight:600}
.ps-wiz-main .ps-field-error::before,.ps-range .ps-field-error::before{content:"⚠ ";}
.ps-choice{border:0;margin:0;padding:0;display:grid;gap:10px}
.ps-choice legend{font-weight:700;font-size:15.5px;margin-bottom:8px;padding:0}
.ps-choice-item{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--ps-line);border-radius:12px;cursor:pointer;background:var(--ps-surface)}
.ps-choice-item:has(input:checked){border-color:var(--ps-green);box-shadow:inset 0 0 0 1px var(--ps-green);background:var(--ps-green-50)}
.ps-choice-item input{width:22px;height:22px;margin:2px 0 0;flex:none}
.ps-choice-item span{display:grid;gap:3px}.ps-choice-item small{color:var(--ps-muted);font-size:13.5px}
.ps-choice-inline{display:flex;flex-wrap:wrap;gap:8px 18px}.ps-choice-inline label{display:flex;align-items:center;gap:8px;min-height:44px}
.ps-choice-inline input{width:20px;height:20px}
.ps-wiz-pick{display:grid;gap:6px}
.ps-wiz-option{display:grid;gap:2px;text-align:left;min-height:52px;padding:10px 12px;border:1px solid var(--ps-line);border-radius:10px;background:var(--ps-surface);color:var(--ps-ink);font:inherit;cursor:pointer}
.ps-wiz-option[aria-selected="true"]{border-color:var(--ps-green);box-shadow:inset 0 0 0 1px var(--ps-green);background:var(--ps-green-50)}
.ps-wiz-option small{color:var(--ps-muted)}
.ps-wiz-who{display:flex;align-items:center;gap:8px;margin:0}
.ps-more-fields{border:1px dashed var(--ps-line);border-radius:12px;padding:10px 14px}.ps-more-fields>summary{cursor:pointer;font-weight:700;min-height:40px;display:flex;align-items:center}
.ps-more-fields[open]{display:grid;gap:12px}
.ps-review{display:grid;gap:0;margin:0;border:1px solid var(--ps-line);border-radius:12px;overflow:hidden}
.ps-review>div{display:grid;grid-template-columns:minmax(110px,34%) 1fr;gap:12px;padding:10px 14px;border-bottom:1px solid var(--ps-line)}
.ps-review>div:last-child{border-bottom:0}.ps-review dt{color:var(--ps-muted);font-weight:600}.ps-review dd{margin:0;overflow-wrap:anywhere}
.ps-callout.ps-ok{background:#ecf8f1;border-color:#9fd5b6;color:#13432b}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-callout.ps-ok{background:#12291d;border-color:#2f6b49;color:var(--dk-accent-ink,#cfe9da)}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-choice-item:has(input:checked),html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-wiz-option[aria-selected="true"],html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-chipbtn[aria-pressed="true"]{background:var(--dk-accent-bg,#13241d)}
.ps-drawer-foot{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.ps-drawer-foot .btn{min-height:46px}
@media (max-width:599px){
  .ps-review>div{grid-template-columns:1fr;gap:2px}
  .ps-drawer-foot .btn{flex:1 1 140px}
  .ps-hub-pending li{flex-wrap:wrap}
  .ps-page-actions{flex-wrap:wrap}.ps-page-actions .btn{flex:1 1 calc(50% - 8px);justify-content:center}
}
@media print{.ps-tabs-fin,.ps-fin-quick,.ps-report-nav,.ps-page-actions,[data-iedl]{display:none!important}}
.ps-stats-ie{grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr))}
@media (max-width:599px){
  .ps-fin-quick{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ps-fin-quick .ps-quick-btn{min-height:84px;padding:12px}
  .ps-fin-quick .ps-quick-btn small{font-size:12px}
  .ps-range .ps-filter-row>label,.ps-range .ps-filter-row>.ps-select{flex:1 1 100%;min-width:0}
  .ps-range .ps-filter-row>.btn{flex:1 1 calc(50% - 6px);justify-content:center}
}
.ps-range .ps-filter-row{flex-wrap:wrap}
.ps-range .ps-filter-row>.ps-select{flex:1 1 220px;min-width:0}
.ps-range .ps-filter-row>.ps-select :is(input,select){flex:1 1 auto;min-width:0;width:auto}
.ps-range .ps-filter-row>.ps-select.ps-date{flex-basis:230px}
/* Settings › Financial Settings › Accounting Setup (AUTH-2026-10-20-F4): numbered steps, each with its status; one column on phones */
.ps-setup-bar{height:8px;border-radius:99px;background:var(--ps-line,#e5e7eb);overflow:hidden;margin:4px 0 14px}
.ps-setup-bar>span{display:block;height:100%;background:var(--ps-green,#0a5c3a)}
.ps-setup-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ps-setup-step{border:1px solid var(--ps-line,#e5e7eb);border-radius:12px;padding:12px 14px;min-width:0}
.ps-setup-step.is-done{border-color:#bfe3cf}
.ps-setup-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:6px}
.ps-setup-head .ps-h3{flex:1 1 12rem;min-width:0;margin:0}
.ps-setup-no{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#eef2f6;font-weight:700}
.ps-setup-step.is-done .ps-setup-no{background:#dff3e8;color:#0a5c3a}
.ps-setup-no svg{width:16px;height:16px}
.ps-setup-item{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.ps-setup-step .ps-list li{overflow-wrap:anywhere}
.ps-setup-step .ps-list small{display:block;margin-top:2px}
.ps-setup-links{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px}
.ps-setup-logo{vertical-align:middle;border-radius:50%;object-fit:cover}
.ps-setup-item .ps-badge{white-space:normal;max-width:100%;text-align:left;overflow-wrap:anywhere}
/* F5: membership application in four steps (details → review & fee → payment method → pay & submit), styled like Member Donate */
.reference-form .app-steps{margin:0 28px 4px}
.reference-form [data-app-step]{display:grid;gap:18px}
.app-step-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;padding:0 28px}
.reference-submit-area .app-step-actions{justify-content:center;padding:0;margin-bottom:6px}
.app-step-actions .btn{min-height:44px}
.app-review{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px;margin:0}
.app-review div{min-width:0;border-bottom:1px solid #e9efec;padding-bottom:8px}
.app-review dt{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--nt-muted,#6e7b75)}
.app-review dd{margin:3px 0 0;font-size:14px;color:var(--nt-ink,#1f2f28);overflow-wrap:anywhere}
.app-review-note{margin:12px 0 0}
.app-pay-amount{margin:0 0 12px;font-size:14px;color:var(--nt-ink,#243a30)}
.reference-form .field-help{font-size:11px;font-weight:500;text-transform:none;letter-spacing:0;color:#7a8781}
@media(max-width:640px){.reference-form .app-steps{margin:0 16px 4px}.app-step-actions{padding:0 16px}.app-review{grid-template-columns:1fr}.app-step-actions .btn{flex:1 1 140px}}
/* F5a: the Zelle information panel (applications and member dues) — details and Copy buttons on the left, our QR code on the right,
   stacked on phones. It opens under the payment-method choice; Continue sits below it. */
.app-zelle-panel{margin-top:14px}
.zelle-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start;border:1px solid var(--line);border-left:4px solid var(--green);background:#f6fbf8;border-radius:12px;padding:16px 18px}
.zelle-panel-info{min-width:0;display:grid;gap:10px}
.zelle-panel-title{margin:0;font-weight:700;font-size:16px;color:var(--green)}
.zelle-panel-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.zelle-panel-row>span{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.zelle-panel-row small{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.zelle-panel-row b{font-size:16px;color:var(--ink)}
.zelle-copy{flex:none;min-height:40px;min-width:72px}
.zelle-panel-verify{margin:0;font-size:13px;line-height:1.5;color:#5a4410;background:#fffbf2;border:1px dashed var(--gold);border-radius:10px;padding:10px 12px}
@media (max-width:640px){
  .zelle-panel{grid-template-columns:1fr;padding:14px}
  .zelle-panel .ps-zelle-qrfig{width:min(240px,100%);margin:4px auto 0}
  .zelle-copy{min-height:44px}
}
.zelle-setup-error{margin:0;border:1px solid #e3b4ad;border-left:4px solid #b3261e;background:#fdf2f1;color:#5c1712;border-radius:10px;padding:12px 14px;font-size:14px;line-height:1.5}

/* ===== Field focus — ONE treatment for every field in the portal (UI-2, extends UI-1) =====
   Every text-like field (text, search, email, tel, password, number, date, textarea, select …) shows a single ring drawn ON its own border
   (border in the accent colour + a 3px ring that follows its size and rounded corners; no gap, no second layer, no size change). The ring
   replaces the browser / portal outline for these fields only (rule on line 1); buttons, links, checkboxes, radios, switches and file
   controls keep their own-shape :focus-visible outline. Composite boxes (icon / label / "$" + a borderless control) show the ring on the
   OUTER box and none on the inner control. Colours are tokens: the portal theme accent, the sign-in accent, red for fields in error, and
   the system Highlight colour in Windows high-contrast mode. */
html[data-ps-theme]{--focus-accent:var(--th-accent,#1b7a4f);--focus-ring:color-mix(in srgb,var(--th-accent,#1b7a4f) 55%,transparent)}   /* the fallback keeps a ring if a theme ever has no accent */
.login-card{--focus-accent:var(--lg-accent,var(--green));--focus-ring:color-mix(in srgb,var(--lg-accent,var(--green)) 45%,transparent)}
/* composite boxes: the ring on the box, nothing on the inner control */
:is(.ps-select,.ps-money):focus-within{border-color:var(--focus-accent);box-shadow:0 0 0 3px var(--focus-ring);outline:none}
:is(.ps-select,.ps-money) :is(input,select,textarea):focus{box-shadow:none;outline:none}
/* the sign-in fields set their own border colour: the focused one takes the accent like every other field */
.login-card .login-form input:not([type=checkbox]):focus{border-color:var(--focus-accent)}
/* the top-bar member search sets its own border colour (and a dark one): the focused box takes the accent too */
.ps-shell .ps-gsearch input:focus,html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-shell .ps-gsearch input:focus{border-color:var(--focus-accent)}
/* a dropdown whose box has no visible label text fills the WHOLE box, so a click / tap anywhere opens the native list (the icon and the
   arrow are decorative and let clicks through); text position and box size stay as before */
.ps-shell .ps-select:is(.ps-select-native,:has(> select):not(:has(> .ps-select-label))){position:relative;padding:0;gap:0}
.ps-shell .ps-select:is(.ps-select-native,:has(> select):not(:has(> .ps-select-label)))>.ps-ico{position:absolute;left:12px;top:50%;margin-top:-10px;pointer-events:none}
.ps-shell .ps-select:is(.ps-select-native,:has(> select):not(:has(> .ps-select-label)))>select{flex:1 1 auto;align-self:stretch;width:100%;min-width:0;min-height:44px;margin:0;padding:10px 36px 10px 44px;border:0;border-radius:inherit;background:transparent;box-shadow:none;cursor:pointer;text-overflow:ellipsis;-webkit-appearance:none;appearance:none}
.ps-shell .ps-select:is(.ps-select-native,:has(> select):not(:has(> .ps-select-label)))::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;margin-top:-6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);pointer-events:none;opacity:.8}
/* fields in error stay red while focused */
:is(input,select,textarea)[aria-invalid="true"]:focus,:is(.ps-select,.ps-money):has([aria-invalid="true"]):focus-within{border-color:var(--focus-error);box-shadow:0 0 0 3px var(--focus-error-ring)}
/* Windows high contrast: box-shadow is not drawn there, so the field / box gets a system-colour outline instead */
@media (forced-colors:active){
  :is(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]),select,textarea):focus,:is(.ps-select,.ps-money):focus-within{outline:2px solid Highlight;outline-offset:0}
  :is(.ps-select,.ps-money) :is(input,select,textarea):focus{outline:none}
}

/* ===== Neutral theme (Stage 2): clean neutral grays, blue accent, system fonts with Bangla support ===================================
   Stored theme values: "neutral" (System: follows the device's light / dark setting, live), "neutral_light", "neutral_dark". app.js sets
   html[data-ps-theme="neutral"] and html[data-ps-mode="light|dark"]. Only tokens are set here; the portal's existing rules use them, and the
   Dark theme's rules serve Neutral Dark (with neutral values). Status colours (success / warning / error) keep their own hues. Like the
   Dark theme, the public and sign-in pages keep the light palette. */
html[data-ps-theme="neutral"]{
  --ps-bg:#fcfcfc;--ps-ink:#0d0d0d;--ps-muted:#5d5d5d;--ps-line:#e3e3e3;--ps-surface:#ffffff;--ps-surface-2:#f7f7f7;--ps-green-50:#eaf2fd;
  --ps-shadow:0 1px 2px rgba(0,0,0,.05),0 1px 3px rgba(0,0,0,.04);
  --ink:#0d0d0d;--muted:#5d5d5d;--line:#e3e3e3;--soft:#f7f7f7;
  --nt-ink:#0d0d0d;--nt-ink-2:#2f2f2f;--nt-muted:#5d5d5d;--nt-faint:#6b6b6b;--nt-line:#e3e3e3;--nt-line-strong:#8f8f8f;--nt-tint:#f7f7f7;--nt-accent-tint:#eaf2fd;
  --nt-font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Noto Sans Bengali","Nirmala UI",Vrinda,sans-serif;
}
html[data-ps-theme="neutral"] body{font-family:var(--nt-font);background:var(--ps-bg);color:var(--ps-ink)}
html[data-ps-theme="neutral"] :is(input,select,textarea,button){font-family:var(--nt-font)}
/* form controls: a visible boundary (3:1 against the surface), like the screenshot's clean rounded fields */
html[data-ps-theme="neutral"] body.portal-mode :is(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color]),select,textarea),
html[data-ps-theme="neutral"] body.portal-mode :is(.ps-select,.ps-money){border-color:#8f8f8f}
html[data-ps-theme="neutral"] body.portal-mode .ps-select :is(select,input),html[data-ps-theme="neutral"] body.portal-mode .ps-money input{border-color:transparent}
html[data-ps-theme="neutral"][data-ps-mode="dark"]{
  --ps-bg:#212121;--ps-ink:#ececec;--ps-muted:#b4b4b4;--ps-line:#3a3a3a;--ps-surface:#2a2a2a;--ps-surface-2:#262626;--ps-green-50:#1c2a3d;
  --ps-shadow:0 1px 2px rgba(0,0,0,.4);
  --ink:#ececec;--muted:#b4b4b4;--line:#3a3a3a;--soft:#262626;
  --dk-surface:#2a2a2a;--dk-field:#1f1f1f;--dk-surface-2:#303030;--dk-hover:#363636;--dk-control-line:#8a8a8a;--dk-line:#3a3a3a;
  --dk-ink:#ececec;--dk-ink-2:#d0d0d0;--dk-ink-3:#b4b4b4;--dk-accent-text:#8ab8ff;--dk-accent-bg:#1c2a3d;--dk-accent-line:#2f4c74;--dk-accent-ink:#dbe7fb;--dk-chart-muted:#5a5a5a;
  --nt-ink:#ececec;--nt-ink-2:#d0d0d0;--nt-muted:#b4b4b4;--nt-faint:#9a9a9a;--nt-line:#3a3a3a;--nt-line-strong:#8a8a8a;--nt-tint:#262626;--nt-accent-tint:#1c2a3d;
}
html[data-ps-theme="neutral"][data-ps-mode="dark"] body.portal-mode :is(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color]),select,textarea),
html[data-ps-theme="neutral"][data-ps-mode="dark"] body.portal-mode :is(.ps-select,.ps-money){border-color:var(--dk-control-line)}
/* printing never uses dark screen colours */
@media print{
  html[data-ps-mode="dark"],html[data-ps-mode="dark"] body{--ps-bg:#fff;--ps-ink:#000;--ps-muted:#333;--ps-line:#ccc;--ps-surface:#fff;--ps-surface-2:#fff;--ink:#000;--muted:#333;--line:#ccc;
    --dk-surface:#fff;--dk-field:#fff;--dk-surface-2:#f3f3f3;--dk-hover:#fff;--dk-control-line:#999;--dk-line:#ccc;--dk-ink:#000;--dk-ink-2:#222;--dk-ink-3:#333;--dk-accent-text:#0b57b0;--dk-accent-bg:#fff;--dk-accent-line:#ccc;--dk-accent-ink:#000;
    --nt-ink:#000;--nt-ink-2:#222;--nt-muted:#333;--nt-faint:#555;--nt-line:#ccc;--nt-line-strong:#999;--nt-tint:#fff;--nt-accent-tint:#fff;background:#fff;color:#000}
}
/* Neutral and Dark: on focus the accent border wins over their own field border; fields in error stay red */
html:is([data-ps-theme="neutral"],[data-ps-theme="dark"],[data-ps-mode="dark"]) body.portal-mode :is(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]),select,textarea):focus,
html:is([data-ps-theme="neutral"],[data-ps-theme="dark"],[data-ps-mode="dark"]) body.portal-mode :is(.ps-select,.ps-money):focus-within{border-color:var(--focus-accent)}
html:is([data-ps-theme="neutral"],[data-ps-theme="dark"],[data-ps-mode="dark"]) body.portal-mode :is(input,select,textarea)[aria-invalid="true"]:focus,
html:is([data-ps-theme="neutral"],[data-ps-theme="dark"],[data-ps-mode="dark"]) body.portal-mode :is(.ps-select,.ps-money):has([aria-invalid="true"]):focus-within{border-color:var(--focus-error)}
/* Neutral Dark: status colours keep their hue (green = received / up, red = paid out / down) but are lightened to read on dark surfaces */
html[data-ps-theme="neutral"][data-ps-mode="dark"] body.portal-mode :is(.ps-val-green,.ps-trend.up){color:#6fd08f}
html[data-ps-theme="neutral"][data-ps-mode="dark"] body.portal-mode :is(.ps-val-red,.ps-trend.down){color:#ff8f87}
html[data-ps-theme="neutral"][data-ps-mode="dark"] body.portal-mode .ps-val-blue{color:#8ab8ff}
html[data-ps-theme="neutral"][data-ps-mode="dark"] body.portal-mode .back-to-top{background:#2a2a2a;border-color:#3a3a3a;color:#8ab8ff}
html[data-ps-theme="neutral"][data-ps-mode="dark"] body.portal-mode .ps-seg-btn{background:var(--dk-surface-2);color:var(--ps-ink);border-color:var(--dk-line)}
html[data-ps-theme="neutral"][data-ps-mode="dark"] body.portal-mode .ps-seg-btn.is-on{background:var(--th-accent);border-color:var(--th-accent);color:var(--th-accent-fg)}
/* the homepage-hero preview shows the PUBLIC page, which uses Neutral Light; the QR preview stays a white panel (the QR is never recoloured) */
html[data-ps-theme="neutral"][data-ps-mode="dark"] .ps-hero-preview .ps-hero-join{background:#0b62c4}
html[data-ps-theme="neutral"][data-ps-mode="dark"] .ps-qr-preview .muted{color:#5d5d5d}
html[data-ps-theme="neutral"] .reference-form .field-help{color:#5d5d5d}

/* ===== Events completion (052): reservation headcount, group check-in, committee access ===== */
.me-count{display:grid;gap:6px;max-width:420px;font-weight:700}
.me-count input{min-height:48px;font-size:18px;max-width:180px}
.ps-ci-count{display:grid;gap:6px;margin-top:14px}
.ps-ci-count label{font-weight:700}
.ps-ci-count input{max-width:140px}
.ps-ev-hist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ps-ev-hist li{display:grid;gap:2px;padding:8px 10px;border:1px solid var(--ps-line);border-radius:10px;background:var(--ps-surface-2,#f7f9f8)}
.ps-ev-hist small{color:var(--ps-muted)}
.ps-ev-staff{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px}
.ps-ev-staff li{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid var(--ps-line);border-radius:10px}
.ps-ev-staff li>div{display:grid;gap:4px;min-width:0}
.ps-ev-staff small{color:var(--ps-muted)}
.ps-check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:8px;border:1px solid var(--ps-line);border-radius:10px;padding:10px 12px;margin:0}
.ps-check-grid legend{font-weight:700;padding:0 4px}

/* Event Report (054): one block per event - received, paid out with the cash result, and the amounts that are not cash */
.ps-er-event{border:1px solid var(--ps-line);border-radius:12px;padding:14px 16px;margin:0 0 14px}
.ps-er-event [data-er-expenses]{margin-top:10px}
.ps-dialog.ps-exp-dialog{width:min(640px,calc(100% - 32px))}
/* The expense description opens its details: its own text colour (readable in every theme), underlined; hover / keyboard focus make the
   underline solid in the theme accent (plus the theme's focus outline) */
.ps-exp-open{display:inline;margin:0;padding:2px 0;border:0;background:none;font:inherit;line-height:inherit;text-align:left;color:inherit;cursor:pointer;text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.ps-exp-open:hover,.ps-exp-open:focus-visible{text-decoration:underline solid var(--th-accent,var(--ps-green-600));text-decoration-thickness:2px}
.ps-exp-dialog .ps-h3{margin:6px 0 0;font-size:15px}
.ps-exp-dialog .ps-list{margin:0;padding-left:20px;display:grid;gap:6px}
.ps-er-event h4{margin:0 0 10px;font-size:16px}
.ps-er-cols{display:grid;gap:12px 20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.ps-er-cols h5{margin:0 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--ps-muted)}
.ps-er-result{display:flex;justify-content:space-between;gap:12px;margin:10px 0 0;padding:10px 12px;border-radius:10px;background:var(--nt-accent-tint,#eef6f1);font-size:15px}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .ps-er-result{background:var(--dk-surface-2,#13241d);color:var(--ps-ink)}
/* UI audit (2026-10-23): while a modal dialog or drawer is open the page behind it does not scroll (wheel, touch or keyboard), and
   scrolling that reaches the end of a dialog stops there instead of moving the page. Busy controls show they are working. */
html:has(dialog[open]:modal){overflow:hidden}
.ps-dialog,.ps-drawer,.ps-drawer-body,.ps-cash-dialog,.image-viewer{overscroll-behavior:contain}
[aria-busy="true"]{cursor:progress}

/* Owner requirement (UI audit): the sign-in code step is a modal dialog above the dimmed, inert sign-in page. */
.otp-dialog{border:0;padding:0;background:transparent;color:inherit;width:min(460px,calc(100% - 24px));max-width:none;max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
.otp-dialog::backdrop{background:rgba(16,30,24,.6);backdrop-filter:blur(2px)}
.otp-dialog .otp-card{margin:0;max-width:none;box-shadow:0 24px 60px rgba(0,0,0,.32)}

/* 057 Emergency Contact (application forms and member profile): the existing section, grid, field and focus styles; only the phone
   combo (calling code + number) and the small "Optional" tag are new. Stacks on phones (the two-column grid already does). */
.section-optional{margin-left:8px;padding:2px 8px;border-radius:999px;font-size:9.5px;letter-spacing:.08em;font-weight:800;color:var(--nt-ink-2,#46564f);background:var(--nt-surface-2,#eef3f0);vertical-align:1px}
.emergency-card .section-help,.mp-ec .section-help{margin:0 0 12px;color:var(--nt-ink-2,#46564f);font-size:14px}
.emergency-row{margin-bottom:0}
/* Composite field = a label + a group of controls (here: calling code + phone number). It follows the shared field pattern of the
   application form exactly: label text on one 20px line, the controls 6px below it, as tall as every single field (46px; 48px
   at <=680px), so its label and controls line up with the neighbouring fields in the same row. */
.reference-form .reference-grid > .field-composite{display:block;min-width:0;margin:0}
.reference-form .reference-grid > .field-composite > label{display:block !important;line-height:20px !important;margin:0 !important}
.phone-combo{display:grid;grid-template-columns:minmax(0,11.5rem) minmax(0,1fr);gap:8px;min-width:0;margin-top:6px}
.phone-combo>select,.phone-combo>input{min-width:0;width:100%;margin:0 !important;box-sizing:border-box}
.reference-form .phone-combo>select,.reference-form .phone-combo>input{height:46px !important;min-height:46px !important;max-height:46px !important}
.field-help{display:block;margin-top:4px;color:var(--nt-ink-2,#5b6a63);font-size:12.5px;line-height:1.4;font-weight:400}
.reference-form input::placeholder,.mp-form input::placeholder{color:var(--nt-placeholder,#9aa6a0);opacity:1}
.app-review-edit{margin-left:8px;font-size:13px}
.mp-ec{border:1px solid var(--line,#dfe7e3);border-radius:12px;padding:12px 14px;margin:4px 0 0;min-width:0}
.mp-ec legend{padding:0 6px;font-weight:700}
@media (max-width:680px){.reference-form .phone-combo>select,.reference-form .phone-combo>input{height:48px !important;min-height:48px !important;max-height:48px !important}}
@media (max-width:640px){.phone-combo{grid-template-columns:minmax(0,1fr);gap:11px}}
html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .reference-form input::placeholder,html:is([data-ps-theme="dark"],[data-ps-mode="dark"]) .mp-form input::placeholder{color:#8b97a8}

/* ===== Alignment corrections (portal-wide rendered audit, 2026-10-23). Shared rules; nothing is hidden or offset. ===== */
/* 1. Portal form grids (pages, drawers, dialogs): every field lays out from the top - label text, control, then any hint. A taller
   neighbour in the same row (a hint, an error, a two-line label) no longer stretches this field's input / select or moves it down. */
.ps-shell .ps-form>label,.ps-drawer .ps-form>label,.ps-dialog .ps-form>label{align-self:start;align-content:start}
/* 2. Checkbox rows inside those forms stay rows (box beside its text, on the first line) - the general form-label rule above used
   to turn them into a grid with an input-sized checkbox on its own line. */
.ps-shell .ps-form>label.ps-check,.ps-drawer .ps-form>label.ps-check,.ps-dialog .ps-form>label.ps-check,
.ps-shell .ps-form>label.ps-switch,.ps-drawer .ps-form>label.ps-switch{display:flex;align-items:flex-start;gap:10px}
.ps-form label.ps-check>input[type=checkbox],.ps-form label.ps-check>input[type=radio]{width:18px;height:18px;min-height:0;max-height:none;padding:0;margin:2px 0 0;flex:none}
/* 3. Buttons that share a row with inputs (filter bars, inline settings, a form's action cell) are as tall as those inputs and sit
   on the same bottom line. */
.ps-filter-row>.btn{min-height:44px}
.ps-inline-fields>.btn{min-height:46px}
.ps-shell .ps-form>.ps-form-actions:not(.span-2){align-self:end}
.ps-shell .ps-form>.ps-form-actions:not(.span-2)>.btn{min-height:46px}
/* 4. Application forms, Current / Permanent address side by side: the two card titles share one row, so a title that wraps onto a
   second line ("Permanent Address — Bangladesh / Sonaimuri") no longer pushes that card's fields below the other card's. */
@supports (grid-template-rows:subgrid){
  .reference-address-grid{grid-template-rows:auto auto}
  .reference-address-card{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
}
/* 5. Native date / time pickers in portal forms are as tall as the text fields beside them (browsers add their own picker height). */
.ps-shell .ps-form>label>input:is([type=date],[type=time],[type=datetime-local],[type=month]),
.ps-drawer .ps-form>label>input:is([type=date],[type=time],[type=datetime-local],[type=month]){height:46px;min-height:46px;box-sizing:border-box}
/* 6. Settings → Appearance preview: a long organization name in the small preview header ends with "…" instead of being cut. */
.ps-mini-top>b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 7. Member profile → Edit Profile → Emergency Contact: the same field pattern as the application form (label, then the control 6px
   below; name, calling code and phone all 46px), in every theme. */
.mp-ec .emergency-row>label,.mp-ec .emergency-row>.field-composite{display:grid;gap:6px;align-content:start;align-self:start;min-width:0;margin:0}
.mp-ec .emergency-row>.field-composite>label{display:block;margin:0}
.mp-ec .phone-combo{margin-top:0}
.mp-ec .emergency-row :is(input,select){height:46px;min-height:46px;max-height:46px;box-sizing:border-box;margin:0}