/* ============================================================
   ACS MEMBER PORTAL — "Apple Glass" Design System
   Brand: crimson #9f1a28 · navy #26283b · cream #f2f2e8 · sage #d6d5b8
   Glassmorphism · animated aurora backdrop · Cera Pro
   ============================================================ */

/* ---------- Cera Pro (official ACS brand font) ---------- */
@font-face { font-family:"Cera Pro"; src:url("assets/fonts/cera-pro-thin.otf") format("opentype"); font-weight:100; font-style:normal; font-display:swap; }
@font-face { font-family:"Cera Pro"; src:url("assets/fonts/cera-pro-thin-italic.otf") format("opentype"); font-weight:100; font-style:italic; font-display:swap; }
@font-face { font-family:"Cera Pro"; src:url("assets/fonts/cera-pro-light.otf") format("opentype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Cera Pro"; src:url("assets/fonts/cera-pro-light-italic.otf") format("opentype"); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:"Cera Pro"; src:url("assets/fonts/cera-pro-regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Cera Pro"; src:url("assets/fonts/cera-pro-regular-italic.otf") format("opentype"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Cera Pro"; src:url("assets/fonts/cera-pro-medium.otf") format("opentype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Cera Pro"; src:url("assets/fonts/cera-pro-medium-italic.otf") format("opentype"); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:"Cera Pro"; src:url("assets/fonts/cera-pro-bold.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Cera Pro"; src:url("assets/fonts/cera-pro-bold-italic.otf") format("opentype"); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:"Cera Pro"; src:url("assets/fonts/cera-pro-black.otf") format("opentype"); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:"Cera Pro"; src:url("assets/fonts/cera-pro-black-italic.otf") format("opentype"); font-weight:900; font-style:italic; font-display:swap; }

:root{
  --crimson:#9f1a28; --crimson-dark:#821522; --crimson-soft:#f3e3e5; --crimson-glow:rgba(159,26,40,.55);
  --navy:#26283b; --navy-soft:#3c3f58; --navy-glow:rgba(38,40,59,.5);
  --cream:#f2f2e8; --sage:#d6d5b8; --sage-soft:#e8e7d6; --sage-glow:rgba(214,213,184,.6);
  --white:#fff;
  --ink:#26283b; --ink-soft:#5a5c70; --ink-faint:#8a8c9d;
  --ok:#2e7d52; --ok-soft:#e2f0e8; --warn:#b97e1f; --warn-soft:#f7ecd8;

  /* glass tokens */
  --glass:rgba(255,255,255,.55);
  --glass-strong:rgba(255,255,255,.74);
  --glass-tint:rgba(255,255,255,.38);
  --glass-navy:rgba(38,40,59,.42);
  --glass-border:rgba(255,255,255,.7);
  --glass-border-soft:rgba(255,255,255,.45);
  --glass-line:rgba(38,40,59,.10);
  --blur:22px;
  --shadow-glass:0 10px 40px rgba(38,40,59,.16), inset 0 1px 0 rgba(255,255,255,.65);
  --shadow-soft:0 6px 22px rgba(38,40,59,.10);
  --shadow-lg:0 28px 70px rgba(38,40,59,.28);

  --radius:22px; --radius-sm:14px; --radius-xs:10px;
  --font-head:"Cera Pro","Poppins","Segoe UI",sans-serif;
  --font-body:"Cera Pro","Source Sans 3","Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body); color:var(--ink); font-size:16px; line-height:1.55;
  min-height:100vh; background:var(--cream); position:relative; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--font-head); color:var(--navy); line-height:1.2; font-weight:700; }
a{ color:var(--crimson); text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
img{ max-width:100%; display:block; }

/* ============================================================
   ANIMATED AURORA BACKDROP
   ============================================================ */
#bg{ position:fixed; inset:0; z-index:-2; overflow:hidden; background:
     radial-gradient(120% 120% at 12% 8%, #fbfbf4 0%, #f2f2e8 46%, #eceadb 100%); }
#bg .orb{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; will-change:transform; }
#bg .o1{ width:46vw; height:46vw; left:-8vw; top:-10vw; background:radial-gradient(circle at 30% 30%, var(--crimson-glow), transparent 70%); animation:drift1 26s var(--ease) infinite alternate; }
#bg .o2{ width:42vw; height:42vw; right:-10vw; top:-6vw; background:radial-gradient(circle at 60% 40%, var(--navy-glow), transparent 70%); opacity:.4; animation:drift2 32s var(--ease) infinite alternate; }
#bg .o3{ width:50vw; height:50vw; left:18vw; bottom:-22vw; background:radial-gradient(circle at 50% 50%, var(--sage-glow), transparent 70%); animation:drift3 30s var(--ease) infinite alternate; }
#bg .o4{ width:30vw; height:30vw; right:6vw; bottom:-8vw; background:radial-gradient(circle at 50% 50%, var(--crimson-glow), transparent 72%); opacity:.32; animation:drift1 38s var(--ease) infinite alternate-reverse; }
@keyframes drift1{ to{ transform:translate(8vw,6vw) scale(1.15); } }
@keyframes drift2{ to{ transform:translate(-6vw,8vw) scale(1.1); } }
@keyframes drift3{ to{ transform:translate(-7vw,-6vw) scale(1.12); } }
/* faint brand motif */
#bg .motif{ position:absolute; inset:0; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><g fill='none' stroke='%2326283b' stroke-width='2'><circle cx='300' cy='300' r='230'/></g></svg>");
  background-size:680px 680px; background-position:80% -120px; background-repeat:no-repeat; }
@media (prefers-reduced-motion:reduce){ #bg .orb{ animation:none !important; } }

/* ============================================================
   GLASS PRIMITIVES
   ============================================================ */
.glass{
  background:var(--glass); backdrop-filter:blur(var(--blur)) saturate(165%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(165%);
  border:1px solid var(--glass-border); border-radius:var(--radius);
  box-shadow:var(--shadow-glass);
}
.glass-strong{ background:var(--glass-strong); }
.glass-navy{
  background:linear-gradient(160deg, rgba(38,40,59,.86), rgba(38,40,59,.72));
  backdrop-filter:blur(var(--blur)) saturate(150%); -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
  border:1px solid rgba(255,255,255,.14); color:#fff; box-shadow:var(--shadow-glass);
}
.glass-navy h1,.glass-navy h2,.glass-navy h3{ color:#fff; }

.card{ padding:26px; }
.card.glass,.card.glass-strong{ position:relative; }

/* sheen on hover for interactive glass cards */
.lift{ transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.lift:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:999px; padding:12px 26px; font-size:15px; font-weight:600;
  font-family:var(--font-head); transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s, filter .18s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-primary{ background:linear-gradient(135deg,var(--crimson),var(--crimson-dark)); color:#fff; box-shadow:0 8px 22px rgba(159,26,40,.34); }
.btn-primary:hover{ box-shadow:0 12px 30px rgba(159,26,40,.42); }
.btn-navy{ background:linear-gradient(135deg,var(--navy-soft),var(--navy)); color:#fff; box-shadow:0 8px 22px rgba(38,40,59,.28); }
.btn-glass{ background:var(--glass-strong); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:var(--navy); border:1px solid var(--glass-border); box-shadow:var(--shadow-soft); }
.btn-glass:hover{ background:#fff; }
.btn-outline{ background:transparent; color:var(--navy); border:1.5px solid rgba(38,40,59,.35); }
.btn-outline:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }
.btn-ghost{ background:transparent; color:var(--crimson); padding:8px 14px; }
.btn-ghost:hover{ background:var(--crimson-soft); }
.btn-sm{ padding:8px 16px; font-size:13.5px; }
.btn-lg{ padding:15px 38px; font-size:16.5px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.btn .ic{ font-size:1.05em; line-height:1; }

/* ============================================================
   FORMS
   ============================================================ */
.field{ margin-bottom:18px; }
.field label{ display:block; font-family:var(--font-head); font-weight:600; font-size:13px; color:var(--navy); margin-bottom:7px; letter-spacing:.01em; }
.field input,.field select,.field textarea{
  width:100%; padding:12px 15px; font-size:15px; font-family:var(--font-body);
  border:1.5px solid rgba(38,40,59,.14); border-radius:var(--radius-xs);
  background:rgba(255,255,255,.7); color:var(--ink); transition:border-color .18s, box-shadow .18s, background .18s;
}
.field textarea{ min-height:84px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--crimson); background:#fff; box-shadow:0 0 0 4px rgba(159,26,40,.12);
}
.field .hint, .hint{ font-size:12.5px; color:var(--ink-soft); margin-top:6px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field-row-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }

/* glassy checkbox / toggle */
.check{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--radius-xs);
  border:1.5px solid rgba(38,40,59,.12); background:rgba(255,255,255,.55); cursor:pointer; transition:all .15s; font-size:13.5px; font-weight:600; color:var(--navy); }
.check:hover{ background:#fff; border-color:rgba(159,26,40,.4); }
.check input{ width:18px; height:18px; accent-color:var(--crimson); }
.check.on{ background:var(--crimson-soft); border-color:var(--crimson); }

.toggle{ position:relative; width:46px; height:26px; flex-shrink:0; }
.toggle input{ opacity:0; width:0; height:0; }
.toggle .track{ position:absolute; inset:0; background:#aeb0bd; border-radius:999px; transition:background .2s; box-shadow:inset 0 1px 2px rgba(0,0,0,.22); }
.toggle .track::before{ content:""; position:absolute; left:3px; top:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.3); transition:transform .22s var(--ease); }
.toggle input:checked + .track{ background:var(--ok); box-shadow:inset 0 1px 2px rgba(0,0,0,.18); }
.toggle input:checked + .track::before{ transform:translateX(20px); }

/* ============================================================
   PILLS / BADGES
   ============================================================ */
.pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 13px; border-radius:999px; font-size:12px; font-weight:700; font-family:var(--font-head); letter-spacing:.02em; }
.pill-member{ background:rgba(46,125,82,.15); color:var(--ok); }
.pill-nonmember{ background:rgba(185,126,31,.16); color:var(--warn); }
.pill-pending{ background:var(--warn-soft); color:var(--warn); }
.pill-active{ background:var(--ok-soft); color:var(--ok); }
.pill-crimson{ background:var(--crimson-soft); color:var(--crimson); }
.pill-navy{ background:rgba(38,40,59,.1); color:var(--navy); }
.pill-open{ background:var(--crimson-soft); color:var(--crimson); }
.pill-closed{ background:rgba(38,40,59,.08); color:var(--ink-soft); }
.dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }

/* ============================================================
   LOGO
   ============================================================ */
.logo{ display:inline-flex; align-items:center; }
.logo img{ height:46px; width:auto; object-fit:contain; display:block; }
.logo.sm img{ height:34px; }
.logo.hdr img{ height:42px; }
.logo.card-logo{ display:flex; justify-content:center; margin-bottom:12px; }
.logo.card-logo img{ height:72px; }
.logo.lg img{ height:84px; }
.logo.on-dark{ background:rgba(255,255,255,.92); padding:8px 14px; border-radius:14px; display:inline-block; box-shadow:var(--shadow-soft); }
.appbar .logo{ flex-shrink:0; }

/* ============================================================
   SLIDING NAV (used in headers + sub-navs)
   ============================================================ */
.snav{ position:relative; display:inline-flex; gap:2px; padding:5px; border-radius:999px;
  background:rgba(255,255,255,.5); border:1px solid var(--glass-border-soft); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.snav .slider{ position:absolute; top:5px; bottom:5px; border-radius:999px;
  background:linear-gradient(135deg,var(--navy-soft),var(--navy)); box-shadow:0 6px 16px rgba(38,40,59,.3);
  transition:left .32s var(--ease), width .32s var(--ease); z-index:0; }
.snav button{ position:relative; z-index:1; border:none; background:transparent; padding:10px 22px; border-radius:999px;
  font-family:var(--font-head); font-size:14px; font-weight:600; color:var(--ink-soft); transition:color .2s; white-space:nowrap; }
.snav button.active{ color:#fff; }
.snav.crimson .slider{ background:linear-gradient(135deg,var(--crimson),var(--crimson-dark)); box-shadow:0 6px 16px rgba(159,26,40,.34); }
.snav.sub{ background:rgba(255,255,255,.4); }
.snav.sub button{ padding:9px 18px; font-size:13.5px; }

/* ============================================================
   VIEW SWITCHER / ANIMATIONS
   ============================================================ */
.view{ min-height:100vh; }
.view{ display:none; }
.view.show{ display:block; animation:viewIn .5s var(--ease); }
@keyframes viewIn{ from{ opacity:0; transform:translateY(14px) scale(.99); } to{ opacity:1; transform:none; } }

.tab-pane{ display:none; }
.tab-pane.active{ display:block; animation:fadeUp .4s var(--ease); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.stagger > *{ opacity:0; animation:fadeUp .5s var(--ease) forwards; }
.stagger > *:nth-child(1){ animation-delay:.04s; }
.stagger > *:nth-child(2){ animation-delay:.10s; }
.stagger > *:nth-child(3){ animation-delay:.16s; }
.stagger > *:nth-child(4){ animation-delay:.22s; }
.stagger > *:nth-child(5){ animation-delay:.28s; }
.stagger > *:nth-child(6){ animation-delay:.34s; }

/* ============================================================
   AUTH (login / register) — glass over aurora
   ============================================================ */
.auth-stage{ min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; }
.auth-brandside{ position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center;
  padding:54px 56px; color:#fff;
  background:linear-gradient(150deg, rgba(38,40,59,.92), rgba(38,40,59,.7) 55%, rgba(159,26,40,.55)); }
.auth-brandside .bs-foot{ position:absolute; left:56px; bottom:46px; }
.auth-brandside::after{ content:""; position:absolute; right:-160px; top:-120px; width:560px; height:560px; border-radius:50%;
  border:90px solid rgba(159,26,40,.4); filter:blur(2px); }
.auth-brandside .bs-top{ position:relative; z-index:2; }
.auth-brandside .bs-mid{ position:relative; z-index:2; max-width:460px; }
.auth-brandside .eyebrow{ display:inline-block; padding:11px 24px; border-radius:999px;
  background:linear-gradient(135deg,var(--crimson),var(--crimson-dark));
  border:1px solid rgba(255,255,255,.22); color:#fff; font-family:var(--font-head); font-size:16.5px; font-weight:700;
  letter-spacing:.14em; margin-bottom:26px; box-shadow:0 10px 26px rgba(159,26,40,.4); }
.auth-brandside h2{ color:#fff; font-size:40px; line-height:1.1; margin-bottom:18px; font-weight:700; }
.auth-brandside h2 em{ color:var(--sage); font-style:normal; }
.auth-brandside p{ color:#d4d4de; font-size:16.5px; max-width:430px; }
.auth-brandside .bs-modules{ position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.auth-brandside .bs-modules span{ font-size:12.5px; font-family:var(--font-head); font-weight:600; color:#e7e7ef;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:7px 15px; }

.auth-formside{ display:flex; align-items:center; justify-content:center; padding:40px 28px; }
.auth-card{ width:100%; max-width:440px; padding:38px 38px 32px; }
.auth-card h1{ font-size:27px; margin:18px 0 6px; }
.auth-card .lede{ color:var(--ink-soft); font-size:15px; margin-bottom:24px; }
.auth-switch{ font-size:14px; color:var(--ink-soft); margin-top:20px; text-align:center; }
.auth-switch a{ font-weight:600; cursor:pointer; }
.seg{ display:flex; gap:6px; padding:5px; background:rgba(255,255,255,.5); border:1px solid var(--glass-border-soft); border-radius:14px; margin-bottom:22px; }
.seg button{ flex:1; border:none; background:transparent; padding:11px; border-radius:10px; font-family:var(--font-head); font-weight:600; font-size:14px; color:var(--ink-soft); transition:all .2s; }
.seg button.active{ background:#fff; color:var(--navy); box-shadow:var(--shadow-soft); }
.pending-box{ text-align:center; padding:30px 20px; border-radius:var(--radius-sm); background:rgba(255,255,255,.5); border:1px solid var(--glass-border-soft); }
.pending-box .icon{ font-size:42px; margin-bottom:10px; }

/* type chooser for register */
.typepick{ display:grid; gap:12px; margin-bottom:8px; }
.typepick .opt{ display:flex; gap:14px; align-items:flex-start; padding:16px; border-radius:var(--radius-sm);
  border:1.5px solid rgba(38,40,59,.14); background:rgba(255,255,255,.55); cursor:pointer; transition:all .18s; }
.typepick .opt:hover{ border-color:var(--crimson); background:#fff; }
.typepick .opt.sel{ border-color:var(--crimson); background:var(--crimson-soft); box-shadow:0 0 0 3px rgba(159,26,40,.12); }
.typepick .opt .em{ font-size:24px; }
.typepick .opt b{ font-family:var(--font-head); color:var(--navy); font-size:15px; }
.typepick .opt p{ font-size:12.8px; color:var(--ink-soft); margin-top:2px; }

/* ============================================================
   PORTAL / ADMIN SHELL
   ============================================================ */
.appbar{ position:sticky; top:0; z-index:60; padding:12px 0; }
.appbar .wrap{ max-width:1260px; margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:22px; }
.appbar .bar{ flex:1; display:flex; align-items:center; gap:22px; padding:10px 16px; border-radius:999px;
  background:var(--glass-strong); backdrop-filter:blur(var(--blur)) saturate(160%); -webkit-backdrop-filter:blur(var(--blur)) saturate(160%);
  border:1px solid var(--glass-border); box-shadow:var(--shadow-soft); }
.appbar .bar .grow{ flex:1; display:flex; justify-content:center; }
.appbar.admin .bar{ border-top:3px solid var(--crimson); }

.account{ position:relative; display:flex; align-items:center; gap:10px; cursor:pointer; padding:4px 6px 4px 4px; border-radius:999px; transition:background .15s; }
.account:hover{ background:rgba(255,255,255,.6); }
.account .avatar{ width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:700; font-size:14px; color:#fff; background:linear-gradient(135deg,var(--navy-soft),var(--navy)); }
.account.is-admin .avatar{ background:linear-gradient(135deg,var(--crimson),var(--crimson-dark)); }
.account .who{ line-height:1.2; }
.account .who .nm{ font-family:var(--font-head); font-weight:700; font-size:13.5px; color:var(--navy); }
.account .who .rl{ font-size:11.5px; color:var(--ink-soft); }
.account .caret{ color:var(--ink-soft); font-size:11px; margin-left:2px; }
.menu{ position:absolute; right:0; top:54px; width:230px; padding:8px; border-radius:16px; z-index:80; display:none; }
.menu.open{ display:block; animation:fadeUp .2s var(--ease); }
.menu a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; font-size:14px; color:var(--navy); font-weight:600; cursor:pointer; }
.menu a:hover{ background:rgba(159,26,40,.08); }
.menu .sep{ height:1px; background:var(--glass-line); margin:6px 4px; }

.page{ max-width:1260px; margin:0 auto; padding:30px 24px 90px; }
.page-head{ margin-bottom:26px; }
.page-title{ font-size:28px; margin-bottom:5px; }
.page-sub{ color:var(--ink-soft); max-width:740px; font-size:15px; }
.crumbs{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-family:var(--font-head); font-weight:600; color:var(--ink-soft); margin-bottom:12px; letter-spacing:.02em; }
.crumbs a{ cursor:pointer; }
.crumbs .ch{ color:var(--ink-faint); }

.section-head{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.section-head .grow{ flex:1; }
.section-head h3{ font-size:19px; }

/* ============================================================
   MODULE LAUNCHER (portal home)
   ============================================================ */
.hero-welcome{ padding:34px 38px; margin-bottom:26px; position:relative; overflow:hidden; }
.hero-welcome .eyebrow{ font-family:var(--font-head); font-weight:700; font-size:12.5px; letter-spacing:.1em; color:var(--crimson); text-transform:uppercase; }
.hero-welcome h1{ font-size:32px; margin:6px 0 8px; }
.hero-welcome p{ color:var(--ink-soft); max-width:620px; }
.hero-welcome .deco{ position:absolute; right:-40px; top:-40px; width:240px; height:240px; border-radius:50%;
  border:46px solid rgba(159,26,40,.1); }

.module-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; }
.module-card{ padding:0; overflow:hidden; cursor:pointer; display:flex; flex-direction:column; min-height:230px; }
.module-card .mc-top{ padding:26px 26px 18px; display:flex; align-items:flex-start; gap:16px; }
.module-card .mc-icon{ width:56px; height:56px; border-radius:16px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:26px; color:#fff;
  background:linear-gradient(135deg,var(--crimson),var(--crimson-dark)); box-shadow:0 8px 20px rgba(159,26,40,.3); }
.module-card.navy .mc-icon{ background:linear-gradient(135deg,var(--navy-soft),var(--navy)); box-shadow:0 8px 20px rgba(38,40,59,.3); }
.module-card .mc-top h3{ font-size:20px; }
.module-card .mc-top p{ font-size:13.8px; color:var(--ink-soft); margin-top:4px; }
.module-card .mc-foot{ margin-top:auto; padding:14px 26px; display:flex; flex-wrap:wrap; gap:8px; border-top:1px solid var(--glass-line); background:rgba(255,255,255,.3); }
.module-card .mc-foot .chip{ font-size:11.5px; font-family:var(--font-head); font-weight:600; color:var(--ink-soft); background:rgba(255,255,255,.6); border:1px solid var(--glass-border-soft); padding:5px 12px; border-radius:999px; }
.module-card .mc-foot .go{ margin-left:auto; color:var(--crimson); font-weight:700; font-family:var(--font-head); font-size:13.5px; transition:transform .2s; }
.module-card:hover .mc-foot .go{ transform:translateX(4px); }
.module-card.locked{ cursor:not-allowed; }
.module-card.locked .mc-icon{ filter:grayscale(.7); opacity:.7; background:linear-gradient(135deg,#9a9bab,#6f7184); box-shadow:none; }
.lock-note{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; font-family:var(--font-head); color:var(--warn); background:var(--warn-soft); padding:5px 12px; border-radius:999px; }

/* stat strip */
.stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-bottom:26px; }
.stat{ padding:18px 20px; }
.stat .lab{ font-size:11.5px; font-family:var(--font-head); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); }
.stat .val{ font-size:28px; font-family:var(--font-head); font-weight:700; color:var(--navy); margin-top:3px; }
.stat .val small{ font-size:14px; color:var(--ink-soft); font-weight:600; }
.stat .sub{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.stat.accent{ border-left:4px solid var(--crimson); }

/* ============================================================
   DATA TABLES (glass)
   ============================================================ */
.tablewrap{ overflow:hidden; border-radius:var(--radius); }
table.data{ width:100%; border-collapse:collapse; font-size:14px; }
table.data thead th{ background:rgba(38,40,59,.92); color:#fff; font-family:var(--font-head); font-size:12px; letter-spacing:.03em;
  text-align:left; padding:14px 16px; font-weight:600; white-space:nowrap; }
table.data td{ padding:13px 16px; border-bottom:1px solid var(--glass-line); vertical-align:middle; }
table.data tbody tr{ transition:background .15s; }
table.data tbody tr:hover{ background:rgba(255,255,255,.5); }
table.data tbody tr:last-child td{ border-bottom:none; }
table.data .nm{ font-family:var(--font-head); font-weight:700; color:var(--navy); display:block; font-size:14px; }
table.data .sub{ font-size:12.5px; color:var(--ink-soft); }
table.data .right{ text-align:right; }
table.data .center{ text-align:center; }
.row-actions{ display:flex; gap:6px; justify-content:flex-end; }

/* approval banner */
.approve-banner{ display:flex; align-items:center; gap:16px; padding:16px 22px; margin-bottom:22px; border-radius:var(--radius-sm);
  background:rgba(247,236,216,.7); border:1px solid #ecd9ae; }
.approve-banner .ic{ font-size:24px; }
.approve-banner .txt{ flex:1; font-size:14px; }
.approve-banner .txt b{ font-family:var(--font-head); color:var(--navy); }

/* archive list */
.archive-row{ display:flex; align-items:center; gap:16px; padding:16px 18px; border-radius:var(--radius-sm); margin-bottom:12px;
  background:rgba(255,255,255,.5); border:1px solid var(--glass-border-soft); transition:all .2s var(--ease); }
.archive-row:hover{ background:#fff; box-shadow:var(--shadow-soft); transform:translateY(-2px); }
.archive-row .per{ width:88px; height:64px; border-radius:12px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--navy-soft),var(--navy)); color:#fff; font-family:var(--font-head); }
.archive-row .per .mo{ font-size:13px; font-weight:700; letter-spacing:.04em; }
.archive-row .per .yr{ font-size:18px; font-weight:700; }
.archive-row .meta{ flex:1; }
.archive-row .meta .t{ font-family:var(--font-head); font-weight:700; color:var(--navy); }
.archive-row .meta .d{ font-size:12.8px; color:var(--ink-soft); }
.archive-row .nums{ display:flex; gap:22px; text-align:center; }
.archive-row .nums .n{ font-family:var(--font-head); font-weight:700; font-size:20px; color:var(--crimson); }
.archive-row .nums .nl{ font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; }

/* window status banner */
.window-banner{ display:flex; align-items:center; gap:18px; padding:20px 24px; margin-bottom:22px; }
.window-banner .icon{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:24px; color:#fff; flex-shrink:0;
  background:linear-gradient(135deg,var(--crimson),var(--crimson-dark)); }
.window-banner.closed .icon{ background:linear-gradient(135deg,#7f8194,#5a5c70); }
.window-banner .wt{ flex:1; }
.window-banner .wt h3{ font-size:17px; }
.window-banner .wt p{ font-size:13.5px; color:var(--ink-soft); }

/* staff permission chips inside table */
.perm-chips{ display:flex; flex-wrap:wrap; gap:5px; }
.perm-chips .pc{ font-size:10.5px; font-family:var(--font-head); font-weight:700; letter-spacing:.02em; padding:3px 9px; border-radius:999px;
  background:rgba(38,40,59,.08); color:var(--navy); }
.perm-chips .pc.on{ background:var(--crimson-soft); color:var(--crimson); }

/* resources cards */
.res-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; }
.res-card{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.res-card .rc-banner{ height:120px; position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:16px 20px;
  background:linear-gradient(135deg,var(--navy),var(--navy-soft)); }
.res-card .rc-banner.crimson{ background:linear-gradient(135deg,var(--crimson),var(--crimson-dark)); }
.res-card .rc-banner.sage{ background:linear-gradient(135deg,#9fa07f,#c4c3a3); }
.res-card .rc-banner .rb-icon{ font-size:30px; }
.res-card .rc-banner::after{ content:""; position:absolute; right:-30px; top:-30px; width:120px; height:120px; border-radius:50%; border:26px solid rgba(255,255,255,.12); }
.res-card .rc-banner .tagpill{ position:absolute; top:14px; left:20px; font-size:10.5px; font-weight:700; font-family:var(--font-head); letter-spacing:.05em;
  background:rgba(255,255,255,.85); color:var(--navy); padding:4px 11px; border-radius:999px; }
.res-card .rc-body{ padding:18px 22px 22px; flex:1; display:flex; flex-direction:column; }
.res-card .rc-body h3{ font-size:18px; }
.res-card .rc-body p{ font-size:13.5px; color:var(--ink-soft); margin:5px 0 16px; flex:1; }
.res-card .rc-body .btn{ align-self:flex-start; }
.res-card.soon{ opacity:.96; }

/* reminder roles checklist */
.role-checklist{ display:flex; flex-wrap:wrap; gap:8px; }
.req-flag{ font-size:10.5px; font-family:var(--font-head); font-weight:700; color:var(--crimson); background:var(--crimson-soft); padding:2px 8px; border-radius:999px; margin-left:6px; }

/* module-access toggle list (admin) */
.access-list{ display:grid; gap:10px; }
.access-row{ display:flex; align-items:center; gap:14px; padding:12px 16px; border-radius:var(--radius-xs);
  background:rgba(255,255,255,.5); border:1px solid var(--glass-border-soft); }
.access-row .ai{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; color:#fff; background:linear-gradient(135deg,var(--navy-soft),var(--navy)); flex-shrink:0; }
.access-row .at{ flex:1; }
.access-row .at b{ font-family:var(--font-head); color:var(--navy); font-size:14px; }
.access-row .at span{ font-size:12.3px; color:var(--ink-soft); display:block; }

/* mini chart bars */
.barchart{ display:flex; align-items:flex-end; gap:12px; height:180px; padding-top:10px; }
.barchart .bc{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; }
.barchart .bc .bar{ width:100%; max-width:48px; border-radius:8px 8px 0 0; background:linear-gradient(180deg,var(--crimson),var(--crimson-dark)); transition:height .6s var(--ease); }
.barchart .bc .bar.navy{ background:linear-gradient(180deg,var(--navy-soft),var(--navy)); }
.barchart .bc .lab{ font-size:11.5px; color:var(--ink-soft); font-family:var(--font-head); font-weight:600; }
.barchart .bc .v{ font-size:12.5px; font-weight:700; color:var(--navy); font-family:var(--font-head); }

.insight{ border-left:4px solid var(--sage); background:rgba(255,255,255,.5); padding:13px 16px; border-radius:0 var(--radius-xs) var(--radius-xs) 0; margin-bottom:12px; }
.insight.hot{ border-left-color:var(--crimson); }
.insight.good{ border-left-color:var(--ok); }
.insight h5{ font-family:var(--font-head); font-size:13.5px; color:var(--navy); margin-bottom:3px; }
.insight p{ font-size:13.3px; color:var(--ink-soft); }
.ai-flag{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; color:var(--ink-soft); font-family:var(--font-head); font-weight:600; margin-top:8px; }
.ai-flag .d{ width:7px; height:7px; border-radius:50%; background:var(--crimson); box-shadow:0 0 0 3px rgba(159,26,40,.18); }

/* ============================================================
   MODAL
   ============================================================ */
.modal-back{ position:fixed; inset:0; background:rgba(38,40,59,.5); z-index:120; display:none; align-items:center; justify-content:center; padding:24px;
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
.modal-back.show{ display:flex; animation:fadeUp .22s var(--ease); }
.modal{ width:100%; max-width:560px; max-height:88vh; overflow:hidden; border-radius:var(--radius); display:flex; flex-direction:column;
  background:var(--glass-strong); backdrop-filter:blur(26px) saturate(170%); -webkit-backdrop-filter:blur(26px) saturate(170%);
  border:1px solid var(--glass-border); box-shadow:var(--shadow-lg); }
.modal.wide{ max-width:760px; }
.modal .m-head{ padding:20px 26px; background:linear-gradient(135deg,var(--navy),var(--navy-soft)); color:#fff; position:relative; flex-shrink:0; }
.modal .m-head .crumb{ font-size:12px; letter-spacing:.05em; font-family:var(--font-head); font-weight:600; color:var(--sage); text-transform:uppercase; margin-bottom:4px; }
.modal .m-head h3{ color:#fff; font-size:20px; padding-right:34px; }
.modal .m-close{ position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%; border:none; background:rgba(255,255,255,.14); color:#fff; font-size:15px; transition:background .15s; }
.modal .m-close:hover{ background:var(--crimson); }
.modal .m-body{ padding:24px 26px; overflow-y:auto; }
.modal .m-foot{ padding:16px 26px; border-top:1px solid var(--glass-line); display:flex; gap:10px; justify-content:flex-end; flex-shrink:0; background:rgba(255,255,255,.4); }

/* linkbox */
.linkbox{ display:flex; gap:8px; margin-top:14px; }
.linkbox input{ flex:1; padding:11px 14px; font-size:12.8px; border:1.5px solid rgba(38,40,59,.14); border-radius:var(--radius-xs);
  background:rgba(255,255,255,.7); color:var(--ink-soft); font-family:ui-monospace,monospace; }

/* ============================================================
   TOAST
   ============================================================ */
.toast-wrap{ position:fixed; bottom:84px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:10px; align-items:center; }
.toast{ display:flex; align-items:center; gap:10px; padding:13px 20px; border-radius:999px; font-size:14px; font-weight:600; font-family:var(--font-head); color:#fff;
  background:linear-gradient(135deg,var(--navy-soft),var(--navy)); box-shadow:var(--shadow-lg); animation:toastIn .35s var(--ease); }
.toast.ok{ background:linear-gradient(135deg,#349a64,#256f48); }
.toast.crimson{ background:linear-gradient(135deg,var(--crimson),var(--crimson-dark)); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

/* ============================================================
   DEMO PERSONA BAR (prototype only)
   ============================================================ */
.demo-bar{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:210; display:flex; align-items:center; gap:4px; padding:6px 8px;
  border-radius:999px; background:rgba(38,40,59,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.12); }
.demo-bar .lab{ color:var(--sage); font-family:var(--font-head); font-size:10px; font-weight:700; letter-spacing:.1em; padding:0 10px; text-transform:uppercase; }
.demo-bar button{ border:none; background:transparent; color:#c9c9d6; font-family:var(--font-head); font-size:12.5px; font-weight:600; padding:8px 15px; border-radius:999px; transition:all .15s; }
.demo-bar button.active,.demo-bar button:hover{ background:var(--crimson); color:#fff; }

/* utility */
.grow{ flex:1; }
.muted{ color:var(--ink-soft); }
.center-t{ text-align:center; }
.mt0{ margin-top:0; } .mb0{ margin-bottom:0; }
.spread{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.stack-16 > * + *{ margin-top:16px; }
.divider{ height:1px; background:var(--glass-line); margin:20px 0; }
.empty{ text-align:center; padding:40px 20px; color:var(--ink-soft); }
.empty .big{ font-size:40px; margin-bottom:10px; }

/* ============================================================
   SVG ICONS
   ============================================================ */
.ico, .ic svg, [data-ic] svg{ width:1em; height:1em; display:inline-block; vertical-align:-0.14em; flex-shrink:0; }
.ic{ display:inline-flex; align-items:center; }
.ico-lg{ font-size:1.5em; } .ico-xl{ font-size:2.4em; }
.menu a [data-ic]{ color:var(--crimson); display:inline-flex; }
.typepick .opt .em{ color:var(--crimson); font-size:23px; display:flex; align-items:center; }
.pending-box .icon{ color:var(--crimson); display:flex; justify-content:center; }
.lock-note [data-ic], .lock-note .ic{ display:inline-flex; }

/* swatch chips (resource representation without emoji) */
.swatch{ background:linear-gradient(135deg,var(--navy-soft),var(--navy)); }
.swatch.crimson{ background:linear-gradient(135deg,var(--crimson),var(--crimson-dark)); }
.swatch.sage{ background:linear-gradient(135deg,#9fa07f,#c4c3a3); }
.swatch.img{ background-size:cover !important; background-position:center !important; }

/* resource banner: image override */
.res-card .rc-banner{ height:128px; }
.res-card .rc-banner.has-img{ background-size:cover; background-position:center; }
.res-card .rc-banner.has-img::after{ display:none; }

/* admin module icon as swatch/image */
.module-card .mc-icon.swatch{ font-size:0; }
.module-card .mc-icon.img{ background-size:cover; background-position:center; box-shadow:var(--shadow-soft); }
.access-row .ai.img{ background-size:cover; background-position:center; }

/* banner image picker (modal) */
.bimg-preview{ height:120px; border-radius:var(--radius-sm); border:1px solid var(--glass-border-soft); background:linear-gradient(135deg,var(--navy-soft),var(--navy)); background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-head); font-size:13px; margin-bottom:14px; }
.bimg-preview.crimson{ background:linear-gradient(135deg,var(--crimson),var(--crimson-dark)); }
.bimg-preview.sage{ background:linear-gradient(135deg,#9fa07f,#c4c3a3); }
.filebtn{ position:relative; overflow:hidden; }
.filebtn input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }

.appbar .bar .back-btn{ flex-shrink:0; }

/* Keeping Faith Matrix — embedded module view */
#view-kfm.show{ display:flex; flex-direction:column; height:100vh; }
.kfm-frame-wrap{ flex:1; min-height:0; }
.kfm-frame-wrap iframe{ width:100%; height:100%; border:0; display:block; background:var(--cream); }
/* while inside the matrix, hide the portal's own demo bar so it doesn't overlap the matrix's */
#view-kfm.show ~ .demo-bar{ display:none; }

/* ACS Together promo (Professional Development + Events & Networking) */
.together-card{ display:block; max-width:980px; margin:0 auto; padding:14px; overflow:hidden; }
.together-card img{ width:100%; height:auto; border-radius:var(--radius-sm); display:block; }
.together-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:24px auto 0; max-width:980px; }
@media (max-width:560px){ .together-actions .btn{ width:100%; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .auth-stage{ grid-template-columns:1fr; }
  .auth-brandside{ display:none; }
  .module-grid,.res-grid{ grid-template-columns:1fr; }
  .appbar .bar{ flex-wrap:wrap; }
  .field-row,.field-row-3{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .page{ padding:22px 14px 100px; }
  .snav button{ padding:9px 13px; font-size:12.5px; }
  .account .who{ display:none; }
  .archive-row{ flex-wrap:wrap; }
  .hero-welcome h1{ font-size:25px; }
}