/* ============================================================
   FARAAN ALUMNI NETWORK — Mobile-first premium design system
   Reconnect. Contribute. Grow together.
   ============================================================ */

:root{
  --emerald-50:#ecfdf5; --emerald-100:#d1fae5; --emerald-300:#6ee7b7;
  --emerald-500:#10b981; --emerald-600:#059669; --emerald-700:#047857; --emerald-800:#065f46;
  --navy-50:#f1f5f9; --navy-100:#e2e8f0; --navy-300:#94a3b8; --navy-500:#64748b;
  --navy-700:#334155; --navy-800:#1e293b; --navy-900:#0f172a;
  --gold-100:#fef3c7; --gold-400:#f59e0b; --gold-500:#d4af37; --gold-600:#b45309;
  --rose-500:#ef4444;
  --bg:#f6f8fa; --surface:#ffffff; --surface-2:#f8fafc; --line:#eef0f3;
  --text:#0f172a; --text-muted:#64748b;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.03);
  --shadow:    0 6px 18px -8px rgba(15,23,42,.10), 0 2px 6px -2px rgba(15,23,42,.06);
  --shadow-lg: 0 18px 40px -16px rgba(4,120,87,.25), 0 6px 16px -8px rgba(15,23,42,.10);
  --radius-sm:10px; --radius:16px; --radius-lg:22px; --radius-xl:28px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
  --nav-h: 78px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220; --surface:#0f172a; --surface-2:#111b30; --line:#1e293b;
    --text:#f1f5f9; --text-muted:#94a3b8;
    --shadow:    0 8px 22px -10px rgba(0,0,0,.5), 0 2px 6px -2px rgba(0,0,0,.4);
    --shadow-lg: 0 22px 50px -18px rgba(4,120,87,.45);
  }
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:'Plus Jakarta Sans','Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-feature-settings:'cv11','ss01';
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overscroll-behavior-y:none;
  /* CRITICAL: lock the body to the viewport so only the .scroll-area
     inside the active screen scrolls. Without this, mobile browsers
     scroll the body itself, the URL bar toggles on every scroll, and
     fixed/absolute children (header, bottom-nav) drift in and out of
     the visible area. dvh accounts for the URL bar's collapse state. */
  height:100vh; height:100dvh;
  overflow:hidden;
  position:fixed;
  inset:0;
}
button{ font-family:inherit; cursor:pointer; border:0; background:transparent; color:inherit; }
input,textarea,select{ font-family:inherit; color:inherit; }
a{ color:var(--emerald-700); text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:var(--emerald-100); color:var(--emerald-800); }

/* ================ APP CONTAINER ================ */
.app{
  position:relative; width:100%;
  max-width:480px; margin:0 auto;
  min-height:100vh; min-height:100dvh;
  background:var(--bg);
  overflow:hidden;
}
@media(min-width:520px){
  body{ background:radial-gradient(1200px 600px at 50% -200px, rgba(16,185,129,.12), transparent 60%), #eef2f7; }
  .app{ box-shadow:var(--shadow-lg); border-radius:32px; margin-top:24px; margin-bottom:24px; overflow:hidden; min-height:calc(100dvh - 48px); }
}

.screen{ position:absolute; inset:0; display:flex; flex-direction:column; background:var(--bg); }
.hidden{ display:none !important; }

/* ================ SPLASH ================ */
.splash{
  background:linear-gradient(160deg, #047857 0%, #065f46 60%, #064e3b 100%);
  color:#fff; align-items:center; justify-content:center; overflow:hidden;
}
.splash-bg{ position:absolute; inset:0; pointer-events:none; }
.splash-bg .orb{ position:absolute; border-radius:50%; filter:blur(40px); opacity:.55; }
.orb-1{ width:280px; height:280px; background:#10b981; top:-80px; left:-60px; animation:float 9s ease-in-out infinite; }
.orb-2{ width:220px; height:220px; background:#f59e0b; bottom:120px; right:-50px; animation:float 11s ease-in-out -3s infinite; }
.orb-3{ width:200px; height:200px; background:#0ea5e9; bottom:-40px; left:20%; animation:float 13s ease-in-out -5s infinite; }
@keyframes float{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(20px,-30px) scale(1.05);} }

.splash-inner{ position:relative; z-index:1; text-align:center; padding:0 32px; animation:rise .9s var(--ease) both; }
@keyframes rise{ from{ opacity:0; transform:translateY(20px);} to{ opacity:1; transform:none;} }

.brand-mark{ display:flex; gap:14px; align-items:center; justify-content:center; margin-bottom:18px; }
.brand-mark__logo{ width:72px; height:72px; border-radius:20px; background:rgba(255,255,255,.08); display:grid; place-items:center; box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 18px 40px -10px rgba(0,0,0,.35); backdrop-filter:blur(6px); }
.brand-mark__text{ text-align:left; }
.brand-mark__text h1{ font-size:26px; line-height:1; margin:0 0 4px; font-weight:800; letter-spacing:-.02em; }
.brand-mark__text span{ font-size:13px; opacity:.7; letter-spacing:.18em; text-transform:uppercase; }

.splash-tagline{ font-size:15px; opacity:.85; margin:14px 0 30px; font-weight:500; letter-spacing:.01em; }
.splash-loader{ width:160px; height:3px; background:rgba(255,255,255,.15); border-radius:99px; margin:0 auto; overflow:hidden; }
.splash-loader span{ display:block; height:100%; width:40%; background:linear-gradient(90deg, transparent, #fff, transparent); animation:slide 1.4s ease-in-out infinite; }
@keyframes slide{ 0%{ transform:translateX(-100%);} 100%{ transform:translateX(300%);} }
.splash-foot{ position:absolute; bottom:30px; left:0; right:0; font-size:12px; opacity:.6; letter-spacing:.1em; text-transform:uppercase; }

/* ================ ONBOARDING ================ */
.onboarding{ background:var(--surface); padding:max(20px, var(--safe-top)) 0 calc(20px + var(--safe-bot)); }
.onb-skip{ align-self:flex-end; margin:8px 18px 0; padding:10px 16px; font-weight:600; font-size:14px; color:var(--text-muted); border-radius:99px; }
.onb-skip:active{ background:var(--surface-2); }

.onb-slides{ flex:1; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.onb-slides::-webkit-scrollbar{ display:none; }
.onb-slide{ min-width:100%; scroll-snap-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 28px; text-align:center; }
.onb-slide h2{ font-size:26px; font-weight:800; margin:24px 0 10px; letter-spacing:-.02em; }
.onb-slide p{ color:var(--text-muted); font-size:15px; line-height:1.6; max-width:300px; }

.onb-art{ width:260px; height:240px; position:relative; }
.onb-art--reconnect .face{
  position:absolute; width:64px; height:64px; border-radius:50%;
  background-size:cover; background-position:center; border:4px solid var(--surface); box-shadow:var(--shadow);
}
/* Initial-letter avatars on the onboarding "reconnect" screen.
   Locally-rendered SVG (no external image, no faces) so the art
   reads as Faraan-flavoured Indian alumni rather than random stock
   photos that often skew Western. */
.onb-art--reconnect .f1{ top:30px; left:30px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='g1' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%2310b981'/><stop offset='1' stop-color='%23047857'/></linearGradient></defs><rect width='100' height='100' rx='50' fill='url(%23g1)'/><text x='50' y='66' font-family='system-ui' font-size='44' font-weight='800' text-anchor='middle' fill='white'>F</text></svg>");
  animation:bob 4s ease-in-out infinite; }
.onb-art--reconnect .f2{ top:20px; right:30px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='g2' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%231d4ed8'/><stop offset='1' stop-color='%230f172a'/></linearGradient></defs><rect width='100' height='100' rx='50' fill='url(%23g2)'/><text x='50' y='66' font-family='system-ui' font-size='44' font-weight='800' text-anchor='middle' fill='white'>A</text></svg>");
  animation:bob 4s ease-in-out -1s infinite; }
.onb-art--reconnect .f3{ bottom:30px; left:50px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='g3' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23f59e0b'/><stop offset='1' stop-color='%23b45309'/></linearGradient></defs><rect width='100' height='100' rx='50' fill='url(%23g3)'/><text x='50' y='66' font-family='system-ui' font-size='44' font-weight='800' text-anchor='middle' fill='white'>R</text></svg>");
  animation:bob 4s ease-in-out -2s infinite; }
.onb-art--reconnect .f4{ bottom:40px; right:40px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='g4' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23be185d'/><stop offset='1' stop-color='%23831843'/></linearGradient></defs><rect width='100' height='100' rx='50' fill='url(%23g4)'/><text x='50' y='66' font-family='system-ui' font-size='44' font-weight='800' text-anchor='middle' fill='white'>N</text></svg>");
  animation:bob 4s ease-in-out -3s infinite; }
.onb-art--reconnect .ring{
  position:absolute; inset:60px; border-radius:50%;
  border:2px dashed var(--emerald-300); animation:spin 14s linear infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
@keyframes spin{ to{ transform:rotate(360deg);} }

/* Memory polaroids — neutral local SVGs (no foreign stock photos).
   Each shows a small icon + gradient evoking the kind of moment
   (school group, classroom, certificate) without depicting real
   people. Keeps the art culturally agnostic. */
.onb-art--memories .polaroid{ position:absolute; width:120px; height:140px; background:var(--surface); border-radius:12px; box-shadow:var(--shadow-lg); padding:8px 8px 24px; }
.onb-art--memories .polaroid::before{ content:''; display:block; width:100%; height:100%; border-radius:6px; background-size:cover; background-position:center; }
.onb-art--memories .p1{ left:30px; top:30px; transform:rotate(-8deg); }
.onb-art--memories .p1::before{ background:linear-gradient(135deg,#10b981,#047857); display:grid; place-items:center; }
.onb-art--memories .p1::after{ content:'🎓'; position:absolute; inset:8px 8px 24px; display:grid; place-items:center; font-size:38px; pointer-events:none; }
.onb-art--memories .p2{ left:80px; top:60px; transform:rotate(4deg); }
.onb-art--memories .p2::before{ background:linear-gradient(135deg,#1d4ed8,#0f172a); display:grid; place-items:center; }
.onb-art--memories .p2::after{ content:'📚'; position:absolute; inset:8px 8px 24px; display:grid; place-items:center; font-size:38px; pointer-events:none; }
.onb-art--memories .p3{ right:30px; top:40px; transform:rotate(10deg); }
.onb-art--memories .p3::before{ background:linear-gradient(135deg,#f59e0b,#b45309); display:grid; place-items:center; }
.onb-art--memories .p3::after{ content:'🏏'; position:absolute; inset:8px 8px 24px; display:grid; place-items:center; font-size:38px; pointer-events:none; }

.onb-art--grow .heart{ position:absolute; left:50%; top:50%; width:90px; height:90px; transform:translate(-50%,-50%); background:linear-gradient(135deg,#10b981,#047857); border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; box-shadow:var(--shadow-lg); animation:beat 1.6s ease-in-out infinite; }
.onb-art--grow .heart::before{ content:'💚'; font-size:36px; position:absolute; inset:0; display:grid; place-items:center; }
.onb-art--grow .leaf{ position:absolute; width:30px; height:30px; border-radius:50% 0; background:var(--emerald-300); }
.onb-art--grow .l1{ top:40px; left:40px; transform:rotate(20deg); animation:bob 4s -.5s infinite; }
.onb-art--grow .l2{ bottom:50px; right:40px; transform:rotate(120deg); animation:bob 4s -1.5s infinite; }
.onb-art--grow .l3{ top:80px; right:50px; transform:rotate(240deg); animation:bob 4s -2.5s infinite; }
@keyframes beat{ 0%,100%{ transform:translate(-50%,-50%) scale(1);} 50%{ transform:translate(-50%,-50%) scale(1.08);} }

.onb-foot{ padding:0 22px; display:flex; flex-direction:column; gap:16px; align-items:center; }
.onb-dots{ display:flex; gap:8px; }
.onb-dots .dot{ width:8px; height:8px; border-radius:50%; background:var(--navy-100); transition:all .3s var(--ease); }
.onb-dots .dot.active{ width:24px; background:var(--emerald-600); border-radius:99px; }

/* ================ BUTTONS ================ */
.btn-primary, .btn-ghost, .btn-mini, .btn-google, .btn-text{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; letter-spacing:-.01em; border-radius:14px;
  transition:transform .15s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
  user-select:none;
}
.btn-primary{
  background:linear-gradient(135deg, var(--emerald-600), var(--emerald-700));
  color:#fff; padding:14px 22px; font-size:15px;
  box-shadow:0 10px 24px -10px rgba(4,120,87,.55), inset 0 -2px 0 rgba(0,0,0,.08);
}
.btn-primary.soft{ box-shadow:0 6px 16px -8px rgba(4,120,87,.4); }
.btn-primary:active{ transform:scale(.97); }
.btn-block{ display:flex; width:100%; }
.btn-ghost{
  background:var(--surface-2); color:var(--text); padding:13px 20px; font-size:15px; border:1px solid var(--line);
}
.btn-ghost:active{ background:var(--navy-100); }
.btn-mini{
  background:var(--emerald-50); color:var(--emerald-700); padding:8px 14px; font-size:13px; border-radius:99px;
}
.btn-mini.ghost{ background:transparent; color:var(--text); border:1px solid var(--line); }
.btn-mini:active{ transform:scale(.96); }
.btn-google{
  background:var(--surface); color:var(--text); border:1px solid var(--line);
  padding:13px 18px; width:100%; font-size:15px; box-shadow:var(--shadow-sm);
}
.btn-google:active{ background:var(--surface-2); }
.btn-text{ background:transparent; color:var(--emerald-700); padding:10px; font-size:14px; font-weight:600; }
.btn-text.full{ width:100%; justify-content:flex-start; padding:14px 0 0; }

.icon-btn{
  width:42px; height:42px; border-radius:14px; background:var(--surface); display:grid; place-items:center;
  color:var(--text); position:relative; box-shadow:var(--shadow-sm); border:1px solid var(--line);
}
.icon-btn.ghost{ background:transparent; border:0; box-shadow:none; }
.icon-btn.primary{ background:linear-gradient(135deg, var(--emerald-500), var(--emerald-700)); color:#fff; border:0; box-shadow:0 8px 18px -8px rgba(4,120,87,.6); }
.icon-btn.small{ width:34px; height:34px; }
.icon-btn:active{ transform:scale(.94); }
.dot-red{ position:absolute; top:8px; right:8px; width:8px; height:8px; background:#ef4444; border-radius:50%; box-shadow:0 0 0 2px var(--surface); }
.notif .dot-red{ animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1;} 50%{ opacity:.5;} }

/* ================ AUTH ================ */
.auth{ background:var(--surface); }
.auth-head{ padding:max(14px,var(--safe-top)) 16px 0; }
.auth-inner{ flex:1; padding:8px 26px 26px; display:flex; flex-direction:column; }
.auth-emblem{ width:72px; height:72px; border-radius:22px; display:grid; place-items:center; background:var(--emerald-50); margin:8px 0 24px; box-shadow:0 14px 30px -14px rgba(4,120,87,.4); }
.auth-title{ font-size:28px; font-weight:800; margin:0 0 6px; letter-spacing:-.025em; }
.auth-sub{ color:var(--text-muted); font-size:15px; margin:0 0 28px; line-height:1.5; }
.divider{ display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--text-muted); font-size:12px; }
.divider::before, .divider::after{ content:''; flex:1; height:1px; background:var(--line); }
.phone-input{
  display:flex; align-items:center; gap:8px; padding:14px 18px;
  background:var(--surface-2); border-radius:14px; border:1px solid var(--line); margin-bottom:12px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.phone-input:focus-within{ border-color:var(--emerald-500); box-shadow:0 0 0 4px rgba(16,185,129,.12); }
.phone-input .cc{ font-weight:700; color:var(--text); padding-right:8px; border-right:1px solid var(--line); }
.phone-input input{ flex:1; border:0; background:transparent; outline:0; font-size:16px; padding:0 0 0 6px; letter-spacing:.04em; font-weight:600; }
.otp-wrap{ margin-top:24px; padding:24px; background:var(--emerald-50); border-radius:18px; }
.otp-hint{ font-size:14px; color:var(--text); margin:0 0 14px; text-align:center; }
.otp-inputs{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin-bottom:16px; }
.otp-inputs input{ width:100%; min-width:0; padding:0; aspect-ratio:1/1.1; text-align:center; font-size:20px; font-weight:700; border-radius:12px; border:1px solid var(--line); background:var(--surface); outline:0; }
.otp-inputs input:focus{ border-color:var(--emerald-500); box-shadow:0 0 0 4px rgba(16,185,129,.12); }
.auth-foot{ margin-top:auto; padding-top:24px; font-size:12px; color:var(--text-muted); text-align:center; line-height:1.6; }

/* ================ APP SHELL ================ */
.app-shell{ position:absolute; inset:0; display:flex; flex-direction:column; background:var(--bg); }
.tab{ position:absolute; inset:0; display:none; flex-direction:column; }
.tab.active{ display:flex; animation:fadeUp .35s var(--ease); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }

.scroll-area{
  flex:1; overflow-y:auto;
  /* Reserve room for the floating bottom-nav so the last item of any
     feed isn't hidden behind it. Header sticky already covers the top. */
  padding:0 16px calc(var(--nav-h) + 28px + var(--safe-bot));
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
  /* Stop scroll momentum from bleeding into the body — important now
     that the body itself is locked. */
  overscroll-behavior:contain;
}
.scroll-area::-webkit-scrollbar{ width:0; }
.bottom-padding{ height:calc(var(--nav-h) + 28px + var(--safe-bot)); }

/* ================ APP HEADER ================ */
.app-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:max(14px,var(--safe-top)) 16px 12px;
  background:var(--surface); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
.app-header.simple h1{ font-size:22px; font-weight:800; margin:0; letter-spacing:-.02em; }
.app-header.transparent{ background:transparent; border:0; }
.header-left{ display:flex; align-items:center; gap:12px; }
.header-left .greeting{ display:block; font-size:15px; font-weight:700; letter-spacing:-.01em; }
.header-left .muted{ display:block; font-size:11px; color:var(--text-muted); font-weight:500; }
.header-right{ display:flex; gap:8px; }

.avatar{ width:42px; height:42px; border-radius:50%; overflow:hidden; background:var(--surface-2); border:2px solid var(--surface); box-shadow:var(--shadow-sm); padding:0; }
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar-sm{ width:38px; height:38px; }

/* ================ HERO ================ */
.hero{
  position:relative; margin:16px 0 18px; padding:22px 22px 20px;
  border-radius:var(--radius-lg); color:#fff; overflow:hidden;
  background:linear-gradient(135deg, #064e3b 0%, #047857 55%, #10b981 110%);
  box-shadow:0 20px 50px -25px rgba(4,120,87,.6);
}
.hero-deco{ position:absolute; inset:0; pointer-events:none; }
.hero-deco span{ position:absolute; border-radius:50%; filter:blur(30px); opacity:.4; }
.hero-deco span:nth-child(1){ width:160px; height:160px; background:#f59e0b; top:-50px; right:-30px; }
.hero-deco span:nth-child(2){ width:140px; height:140px; background:#10b981; bottom:-40px; left:-30px; }
.hero-deco span:nth-child(3){ width:120px; height:120px; background:#fff; opacity:.08; top:30%; left:40%; }
.hero h2{ font-size:22px; line-height:1.25; margin:8px 0 8px; font-weight:800; letter-spacing:-.02em; position:relative; }
.hero h2 em{ font-style:normal; color:#fde68a; }
.hero p{ font-size:14px; opacity:.85; margin:0 0 16px; line-height:1.5; position:relative; }
.hero-faces{ display:flex; align-items:center; margin-bottom:16px; position:relative; }
.hero-faces img{ width:34px; height:34px; border-radius:50%; border:2px solid #047857; margin-left:-10px; object-fit:cover; }
.hero-faces img:first-child{ margin-left:0; }
.hero-faces .more{ margin-left:10px; font-size:12px; font-weight:700; opacity:.85; padding:4px 10px; background:rgba(255,255,255,.15); border-radius:99px; }
.hero-cta{ display:flex; gap:8px; position:relative; }
.hero-cta .btn-primary{ background:#fff; color:var(--emerald-800); box-shadow:0 6px 14px -8px rgba(0,0,0,.5); padding:11px 18px; font-size:14px; }
.hero-cta .btn-ghost{ background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.25); padding:11px 18px; font-size:14px; }
.badge-soft{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; background:rgba(255,255,255,.18); border-radius:99px; color:#d1fae5; }
.badge-soft.small{ font-size:10px; padding:4px 8px; letter-spacing:.04em; }
.badge-soft.gold{ background:rgba(245,158,11,.18); color:#fde68a; }
.badge-soft.light{ background:rgba(255,255,255,.85); color:var(--navy-800); }

/* ================ STATS ================ */
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.stat-card{ background:var(--surface); border-radius:var(--radius); padding:14px 8px; text-align:center; box-shadow:var(--shadow-sm); border:1px solid var(--line); }
.stat-card .counter{ display:block; font-size:18px; font-weight:800; letter-spacing:-.02em; margin:4px 0 0; }
.stat-card small{ display:block; font-size:11px; color:var(--text-muted); font-weight:500; margin-top:2px; }
.stat-icon{ width:36px; height:36px; border-radius:12px; display:grid; place-items:center; margin:0 auto; }
.stat-icon.emerald{ background:#ecfdf5; color:#047857; }
.stat-icon.navy{ background:#e0e7ff; color:#1d4ed8; }
.stat-icon.gold{ background:#fef3c7; color:#b45309; }
.stat-icon.teal{ background:#ccfbf1; color:#0f766e; }

/* ================ SECTION TITLES ================ */
.section-title{ display:flex; align-items:baseline; justify-content:space-between; margin:24px 4px 12px; }
.section-title h3{ font-size:16px; font-weight:800; margin:0; letter-spacing:-.01em; }
.section-title .link{ font-size:13px; font-weight:600; color:var(--emerald-700); }
/* Button styled like a link — avoids <a href="#"> hash side-effects */
.link-btn{ background:none; border:0; padding:4px 0; cursor:pointer; }

/* ================ QA ================ */
.qa-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.qa-card{ background:var(--surface); border-radius:var(--radius); padding:14px 6px; display:flex; flex-direction:column; align-items:center; gap:8px; box-shadow:var(--shadow-sm); border:1px solid var(--line); transition:transform .15s var(--ease); }
.qa-card:active{ transform:scale(.96); }
.qa-icon{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; }
.qa-card span{ font-size:12px; font-weight:600; color:var(--text); }

/* ================ H-SCROLL PEOPLE ================ */
.hscroll{ display:flex; gap:12px; overflow-x:auto; padding:0 0 6px; margin:0 -16px; padding-left:16px; padding-right:16px; scroll-snap-type:x mandatory; }
.hscroll::-webkit-scrollbar{ display:none; }
.person-card{ flex:0 0 144px; background:var(--surface); border-radius:var(--radius); padding:14px 12px; text-align:center; box-shadow:var(--shadow-sm); border:1px solid var(--line); scroll-snap-align:start; }
.person-card img{ width:64px; height:64px; border-radius:50%; margin:0 auto 8px; object-fit:cover; box-shadow:0 4px 12px -6px rgba(0,0,0,.2); }
.person-card strong{ display:block; font-size:13px; font-weight:700; }
.person-card small{ display:block; font-size:11px; color:var(--text-muted); margin-top:2px; }
.person-card .city{ margin-bottom:10px; }
.person-card .btn-mini{ width:100%; justify-content:center; }

/* ================ INITIATIVES ================ */
.initiative-card{ background:var(--surface); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); margin-bottom:14px; }
.ini-img{ height:150px; background-size:cover; background-position:center; position:relative; }
.ini-img .badge-soft{ position:absolute; left:12px; top:12px; }
.ini-body{ padding:14px 16px 16px; }
.ini-body h4{ font-size:16px; font-weight:800; margin:8px 0 4px; letter-spacing:-.01em; }
.ini-body p{ font-size:13px; color:var(--text-muted); margin:0 0 12px; line-height:1.5; }
.progress{ height:8px; background:var(--surface-2); border-radius:99px; overflow:hidden; margin:6px 0; }
.progress .bar{ height:100%; background:linear-gradient(90deg, var(--emerald-500), var(--emerald-700)); border-radius:99px; transition:width .8s var(--ease); }
.progress .bar.gold{ background:linear-gradient(90deg, #f59e0b, #b45309); }
.progress .bar.navy{ background:linear-gradient(90deg, #4f46e5, #1e3a8a); }
.progress .bar.muted{ background:var(--navy-300); }
.ini-foot{ display:flex; justify-content:space-between; font-size:13px; margin:8px 0 14px; }
.ini-foot strong{ font-weight:800; letter-spacing:-.01em; }
.muted{ color:var(--text-muted); }
.initiative-card.membership .ini-body{ padding:18px 16px 16px; }
.member-tier-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0 14px; }
.tier{ background:var(--surface-2); border:1.5px solid var(--line); border-radius:14px; padding:12px 8px; text-align:center; position:relative; transition:all .2s var(--ease); }
.tier small{ display:block; font-size:11px; color:var(--text-muted); font-weight:600; margin-bottom:4px; text-transform:uppercase; letter-spacing:.05em; }
.tier strong{ display:block; font-size:14px; font-weight:800; letter-spacing:-.01em; }
.tier.active{ border-color:var(--emerald-600); background:var(--emerald-50); }
.tier.active small{ color:var(--emerald-700); }
.tier.active strong{ color:var(--emerald-800); }
.tier .popular{ position:absolute; top:-8px; left:50%; transform:translateX(-50%); background:var(--gold-400); color:#fff; font-size:9px; font-weight:800; padding:2px 8px; border-radius:99px; letter-spacing:.05em; text-transform:uppercase; }
.micro{ font-size:11px; }
.micro.center{ text-align:center; }
.micro.muted{ margin-top:8px; }

/* ================ MEMORY WALL ================ */
.story-strip{ display:flex; gap:14px; overflow-x:auto; padding:14px 4px 8px; margin:0 -16px; padding-left:16px; padding-right:16px; }
.story-strip::-webkit-scrollbar{ display:none; }
.story{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:0; }
.story-img{ width:62px; height:62px; border-radius:50%; padding:3px; background:linear-gradient(135deg,#10b981,#f59e0b); display:grid; place-items:center; }
.story-img img{ width:100%; height:100%; border-radius:50%; object-fit:cover; border:2px solid var(--surface); }
.story-add .story-img{ background:var(--surface); border:2px dashed var(--emerald-500); color:var(--emerald-600); }
.story small{ font-size:11px; color:var(--text); font-weight:500; }

.composer-prompt{ display:flex; align-items:center; gap:12px; background:var(--surface); border-radius:var(--radius); padding:12px 14px; margin:6px 0 16px; box-shadow:var(--shadow-sm); border:1px solid var(--line); }
.composer-prompt span{ flex:1; color:var(--text-muted); font-size:14px; }

.memory-card{ background:var(--surface); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); margin-bottom:14px; }
.memory-card.compact{ margin-bottom:0; }
.memory-card header{ display:flex; align-items:center; gap:10px; padding:12px 14px 8px; }
.memory-card header div{ flex:1; }
.memory-card header strong{ display:block; font-size:14px; font-weight:700; }
.memory-card header small{ font-size:11px; color:var(--text-muted); }
.memory-text{ padding:0 14px 12px; font-size:14px; line-height:1.55; margin:0; }
.memory-photo{ height:280px; background-size:cover; background-position:center; }
.memory-photo.tall{ height:340px; }
.memory-card footer{ display:flex; gap:6px; padding:10px 12px; border-top:1px solid var(--line); }
.reaction{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; font-size:13px; color:var(--text-muted); border-radius:10px; font-weight:600; transition:all .15s var(--ease); }
.reaction:active{ background:var(--surface-2); }
.reaction.liked{ color:var(--rose-500); }

.memory-card.voice .voice-player{ display:flex; align-items:center; gap:12px; padding:12px 14px 14px; background:var(--emerald-50); margin:0 14px 14px; border-radius:14px; }
.vp-play{ width:42px; height:42px; border-radius:50%; background:var(--emerald-700); color:#fff; font-size:14px; display:grid; place-items:center; box-shadow:0 6px 14px -6px rgba(4,120,87,.6); }
.vp-wave{ flex:1; display:flex; align-items:center; gap:3px; height:32px; }
.vp-wave span{ flex:1; background:var(--emerald-600); border-radius:99px; opacity:.7; animation:wave 1.2s ease-in-out infinite; }
.vp-wave span:nth-child(odd){ animation-delay:.1s; }
.vp-wave span:nth-child(3n){ animation-delay:.2s; }
@keyframes wave{ 0%,100%{ transform:scaleY(.3);} 50%{ transform:scaleY(1);} }
.voice-player small{ color:var(--emerald-700); font-weight:600; font-size:12px; }

.then-now-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:0 14px 12px; }
.tn-item{ position:relative; aspect-ratio:1/1; border-radius:14px; overflow:hidden; }
.tn-img{ width:100%; height:100%; background-size:cover; background-position:center; filter:saturate(.9); }
.tn-tag{ position:absolute; top:8px; left:8px; background:rgba(0,0,0,.6); color:#fff; padding:3px 8px; font-size:11px; font-weight:700; border-radius:99px; letter-spacing:.04em; }
.tn-tag.tn-now{ background:var(--emerald-700); }

/* ================ COMMUNITY ================ */
.search-pill{ display:flex; align-items:center; gap:10px; background:var(--surface); border-radius:14px; padding:12px 14px; margin:12px 0; border:1px solid var(--line); box-shadow:var(--shadow-sm); color:var(--text-muted); }
.search-pill input{ flex:1; border:0; outline:0; background:transparent; font-size:14px; color:var(--text); }

.chip-row{ display:flex; gap:8px; overflow-x:auto; padding:4px 0 12px; margin:0 -16px; padding-left:16px; padding-right:16px; }
.chip-row::-webkit-scrollbar{ display:none; }
.chip{ flex-shrink:0; padding:8px 14px; background:var(--surface); border:1px solid var(--line); border-radius:99px; font-size:13px; font-weight:600; color:var(--text); transition:all .2s var(--ease); }
.chip.active{ background:var(--emerald-700); color:#fff; border-color:var(--emerald-700); box-shadow:0 6px 14px -8px rgba(4,120,87,.5); }
.chip:active{ transform:scale(.95); }

.group-list{ display:flex; flex-direction:column; gap:10px; }
.group-card{ display:flex; align-items:center; gap:12px; background:var(--surface); border-radius:var(--radius); padding:12px; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.group-emblem{ width:48px; height:48px; border-radius:14px; color:#fff; display:grid; place-items:center; font-weight:800; font-size:15px; letter-spacing:-.02em; box-shadow:var(--shadow-sm); }
.group-body{ flex:1; }
.group-body strong{ display:block; font-size:14px; font-weight:700; }
.group-body small{ display:block; font-size:11px; color:var(--text-muted); margin-top:2px; }

.shoutout-card{ background:var(--surface); border-radius:var(--radius); padding:14px; border:1px solid var(--line); box-shadow:var(--shadow-sm); margin-bottom:10px; }
.shoutout-card header{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.shoutout-card header div{ flex:1; }
.shoutout-card header strong{ display:block; font-size:14px; font-weight:700; }
.shoutout-card header small{ font-size:11px; color:var(--text-muted); }
.tag-soft{ font-size:11px; font-weight:600; padding:4px 10px; border-radius:99px; background:var(--emerald-50); color:var(--emerald-700); }
.tag-soft.gold{ background:var(--gold-100); color:var(--gold-600); }
.shoutout-card p{ font-size:14px; line-height:1.5; margin:0 0 12px; }
.shoutout-actions{ display:flex; gap:8px; }
.like-strip{ display:flex; align-items:center; }
.like-strip img{ width:24px; height:24px; border-radius:50%; border:2px solid var(--surface); margin-left:-6px; }
.like-strip img:first-child{ margin-left:0; }
.like-strip span{ margin-left:10px; font-size:12px; color:var(--text-muted); font-weight:500; }

/* ================ INITIATIVES TAB EXTRA ================ */
.trans-card{ background:var(--surface); border-radius:var(--radius-lg); padding:18px; border:1px solid var(--line); box-shadow:var(--shadow); margin:16px 0 14px; position:relative; overflow:hidden; }
.trans-card::after{ content:''; position:absolute; right:-30px; top:-30px; width:120px; height:120px; background:radial-gradient(closest-side, rgba(16,185,129,.18), transparent); border-radius:50%; pointer-events:none; }
.trans-head .badge-soft{ background:var(--emerald-50); color:var(--emerald-700); }
.trans-head h3{ font-size:18px; font-weight:800; margin:10px 0 4px; letter-spacing:-.02em; }
.trans-head small{ font-size:11px; }
.trans-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:16px 0 14px; padding:12px; background:var(--surface-2); border-radius:14px; }
.trans-stats > div{ text-align:center; }
.trans-stats strong{ display:block; font-size:18px; font-weight:800; letter-spacing:-.02em; color:var(--emerald-800); }
.trans-stats small{ display:block; font-size:11px; color:var(--text-muted); margin-top:2px; }
.trans-bars{ display:flex; flex-direction:column; gap:10px; }
.tb-row{ display:flex; justify-content:space-between; font-size:12px; font-weight:600; margin-bottom:4px; }

.impact-card{ display:flex; gap:12px; background:var(--surface); border-radius:var(--radius); padding:10px; border:1px solid var(--line); margin-bottom:10px; box-shadow:var(--shadow-sm); }
.impact-img{ width:80px; height:80px; border-radius:12px; background-size:cover; background-position:center; flex-shrink:0; }
.impact-body{ flex:1; }
.impact-body strong{ display:block; font-size:14px; font-weight:700; }
.impact-body small{ display:block; font-size:11px; color:var(--text-muted); margin:2px 0 6px; }
.impact-body p{ font-size:12px; color:var(--text); margin:0; opacity:.8; }

/* ================ PROFILE ================ */
.id-card{ position:relative; margin:16px 0 16px; padding:18px 18px 80px; border-radius:var(--radius-xl); color:#fff; overflow:hidden; box-shadow:0 20px 50px -25px rgba(4,120,87,.55); }
.id-card-bg{ position:absolute; inset:0; background:linear-gradient(135deg, #064e3b 0%, #047857 60%, #10b981 110%); }
.id-card-bg::before{ content:''; position:absolute; right:-60px; top:-60px; width:200px; height:200px; background:radial-gradient(closest-side, rgba(245,158,11,.4), transparent); border-radius:50%; }
.id-card-bg::after{ content:''; position:absolute; left:-30px; bottom:-30px; width:160px; height:160px; background:radial-gradient(closest-side, rgba(255,255,255,.15), transparent); border-radius:50%; }
.id-card > *:not(.id-card-bg):not(.id-card-qr){ position:relative; }
.id-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.id-emblem{ display:flex; align-items:center; gap:10px; }
.id-emblem small{ display:block; font-size:10px; opacity:.7; letter-spacing:.1em; text-transform:uppercase; }
.id-emblem strong{ display:block; font-size:14px; font-weight:800; }
.verified{ font-size:11px; font-weight:700; padding:4px 10px; background:rgba(255,255,255,.18); border-radius:99px; letter-spacing:.04em; }
.id-card-body{ text-align:center; padding:8px 0 0; }
.id-avatar{ width:80px; height:80px; border-radius:50%; margin:0 auto 12px; border:3px solid rgba(255,255,255,.4); object-fit:cover; }
.id-card-body h2{ font-size:22px; font-weight:800; margin:0 0 4px; letter-spacing:-.02em; }
.id-card-body p{ font-size:12px; opacity:.85; margin:0 0 16px; }
.id-meta{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:12px 12px; background:rgba(255,255,255,.1); border-radius:14px; backdrop-filter:blur(8px); margin-right:84px; }
.id-meta > div{ text-align:left; }
.id-meta small{ display:block; font-size:9px; opacity:.7; letter-spacing:.05em; text-transform:uppercase; margin-bottom:2px; }
.id-meta strong{ display:block; font-size:11px; font-weight:700; }
.id-card-qr{ position:absolute; right:18px; bottom:18px; width:64px; height:64px; padding:5px; background:#fff; border-radius:12px; line-height:0; box-sizing:content-box; box-shadow:0 8px 20px -10px rgba(0,0,0,.4); }
.id-card-qr svg{ width:100%; height:100%; display:block; }

.profile-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; background:var(--surface); border-radius:var(--radius); padding:14px 0; border:1px solid var(--line); box-shadow:var(--shadow-sm); margin-bottom:14px; }
.profile-stats > div{ text-align:center; border-right:1px solid var(--line); padding:0 8px; }
.profile-stats > div:last-child{ border-right:0; }
.profile-stats strong{ display:block; font-size:18px; font-weight:800; letter-spacing:-.02em; }
.profile-stats small{ display:block; font-size:11px; color:var(--text-muted); margin-top:2px; }

.profile-completion{ display:flex; align-items:center; gap:14px; background:var(--surface); border-radius:var(--radius); padding:14px; border:1px solid var(--line); box-shadow:var(--shadow-sm); margin-bottom:14px; }
.profile-completion > div:first-child{ flex:1; }
.profile-completion strong{ display:block; font-size:14px; font-weight:700; }
.profile-completion small{ display:block; font-size:11px; color:var(--text-muted); margin-top:2px; }
.ring-progress{
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center; flex-shrink:0;
  background:conic-gradient(var(--emerald-600) calc(var(--p)*1%), var(--surface-2) 0);
  position:relative;
}
.ring-progress::before{ content:''; position:absolute; inset:5px; border-radius:50%; background:var(--surface); }
.ring-progress strong{ position:relative; font-size:13px; font-weight:800; color:var(--emerald-700); }

.badge-row{ display:flex; gap:8px; overflow-x:auto; padding:0 0 6px; margin:0 -16px; padding-left:16px; padding-right:16px; }
.badge-row::-webkit-scrollbar{ display:none; }
.badge-pill{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:99px; font-size:13px; font-weight:700; flex-shrink:0; border:1px solid var(--line); }
.badge-pill span{ font-size:14px; }
.badge-pill.emerald{ background:var(--emerald-50); color:var(--emerald-800); border-color:#a7f3d0; }
.badge-pill.gold{ background:var(--gold-100); color:var(--gold-600); border-color:#fcd34d; }
.badge-pill.navy{ background:#e0e7ff; color:#1e3a8a; border-color:#c7d2fe; }
.badge-pill.light{ background:var(--surface); color:var(--text); }

.profile-menu{ margin-top:18px; background:var(--surface); border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow-sm); overflow:hidden; }
.profile-menu .row{ display:flex; align-items:center; gap:14px; padding:14px 16px; width:100%; text-align:left; border-bottom:1px solid var(--line); font-size:14px; font-weight:600; }
.profile-menu .row:last-child{ border-bottom:0; }
.profile-menu .row:active{ background:var(--surface-2); }
.profile-menu .row span{ flex:1; }
.profile-menu .row em{ font-style:normal; font-size:12px; color:var(--text-muted); font-weight:600; }
.profile-menu .row em.ok{ color:var(--emerald-700); }
.profile-menu .row.danger{ color:#dc2626; }
.version{ text-align:center; font-size:11px; color:var(--text-muted); margin:18px 0 8px; letter-spacing:.05em; }

/* ================ BOTTOM NAV ================ */
.bottom-nav{
  /* Fixed to the viewport — survives any layout reflow and stays put
     when the URL bar toggles. */
  position:fixed; left:50%; bottom:max(14px,var(--safe-bot)); transform:translateX(-50%);
  display:flex; align-items:center; justify-content:space-around;
  background:var(--surface); padding:8px 6px; border-radius:30px;
  width:calc(100% - 24px); max-width:456px;
  box-shadow:0 12px 32px -12px rgba(15,23,42,.18), 0 2px 6px -2px rgba(15,23,42,.08), 0 0 0 1px var(--line);
  z-index:20;
}
.nav-item{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 6px; color:var(--text-muted); border-radius:18px; flex:1; transition:all .2s var(--ease); position:relative; }
.nav-item small{ font-size:10px; font-weight:600; letter-spacing:.02em; }
.nav-item.active{ color:var(--emerald-700); }
.nav-item.active::before{ content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:24px; height:3px; background:var(--emerald-600); border-radius:99px; }
.nav-item.fab-spot{ position:relative; }
.nav-item.fab-spot .fab{
  position:absolute; top:-22px; left:50%; transform:translateX(-50%); width:54px; height:54px; border-radius:50%;
  background:linear-gradient(135deg,#10b981,#047857); color:#fff; display:grid; place-items:center;
  box-shadow:0 12px 26px -10px rgba(4,120,87,.7), 0 0 0 4px var(--surface);
  transition:transform .2s var(--ease);
}
.nav-item.fab-spot small{ opacity:0; pointer-events:none; }
.nav-item.fab-spot::before{ display:none; }
.nav-item.fab-spot:active .fab{ transform:translateX(-50%) scale(.95); }
.nav-item.fab-spot.active .fab{ box-shadow:0 14px 28px -8px rgba(4,120,87,.85), 0 0 0 4px var(--surface); }

/* ================ SHEETS ================ */
.sheet{ position:fixed; inset:0; z-index:50; display:none; }
.sheet.open{ display:block; }
/* Paused — sheet is open in the stack but hidden behind a deeper sheet.
   Keeps DOM/scroll state intact so we can restore it on back navigation. */
.sheet.open.paused{ visibility:hidden; pointer-events:none; }
.sheet-scrim{ position:absolute; inset:0; background:rgba(15,23,42,.45); backdrop-filter:blur(2px); animation:fadeIn .25s ease; }
@keyframes fadeIn{ from{ opacity:0;} to{ opacity:1;} }
.sheet-panel{
  position:absolute; left:50%; bottom:0; width:100%; max-width:480px;
  transform:translateX(-50%); background:var(--surface);
  border-radius:24px 24px 0 0; max-height:90vh; overflow-y:auto;
  animation:slideUp .35s var(--ease);
  padding-bottom:calc(16px + var(--safe-bot));
}
.sheet-panel.small{ max-height:70vh; }
@keyframes slideUp{ from{ transform:translate(-50%,100%);} to{ transform:translate(-50%,0);} }
.sheet-grip{ width:44px; height:4px; background:var(--navy-100); border-radius:99px; margin:10px auto 6px; }
.sheet-head{ padding:8px 22px 14px; }
.sheet-head.center{ text-align:center; }
.sheet-head h2{ font-size:20px; font-weight:800; margin:0 0 4px; letter-spacing:-.02em; }
.sheet-head p{ font-size:13px; color:var(--text-muted); margin:0; line-height:1.5; }
.sheet-body{ padding:8px 22px 8px; }
.sheet-foot{ display:flex; gap:10px; padding:14px 22px 8px; border-top:1px solid var(--line); }
.sheet-foot .btn-primary{ flex:1; }
.sheet-foot .btn-ghost{ flex:1; }

.vol-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.vol-item{ position:relative; padding:14px 12px; background:var(--surface-2); border:1.5px solid var(--line); border-radius:14px; cursor:pointer; transition:all .2s var(--ease); }
.vol-item input{ position:absolute; opacity:0; pointer-events:none; }
.vol-item:has(input:checked){ border-color:var(--emerald-600); background:var(--emerald-50); }
.vi-icon{ width:36px; height:36px; border-radius:12px; display:grid; place-items:center; margin-bottom:8px; font-size:18px; }
.vol-item strong{ display:block; font-size:13px; font-weight:700; }
.vol-item small{ display:block; font-size:11px; color:var(--text-muted); margin-top:2px; }

.field{ display:block; margin-bottom:10px; }
.field > span{ display:block; font-size:12px; font-weight:600; color:var(--text-muted); margin-bottom:6px; padding-left:4px; }
.field input{ width:100%; padding:13px 14px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line); outline:0; font-size:14px; transition:all .2s var(--ease); }
.field input:focus{ border-color:var(--emerald-500); box-shadow:0 0 0 4px rgba(16,185,129,.12); background:var(--surface); }

.support-emblem{ width:54px; height:54px; margin:6px auto 10px; background:var(--emerald-50); border-radius:18px; display:grid; place-items:center; font-size:26px; box-shadow:0 10px 22px -12px rgba(4,120,87,.5); }
.amount-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.amt{ padding:14px 0; background:var(--surface-2); border:1.5px solid var(--line); border-radius:14px; font-weight:800; font-size:15px; transition:all .2s var(--ease); }
.amt.active{ background:var(--emerald-50); border-color:var(--emerald-600); color:var(--emerald-800); }
.amt.custom{ color:var(--text-muted); font-weight:600; font-size:13px; }
.check-row{ display:flex; align-items:center; gap:10px; padding:10px 0; font-size:13px; }
.check-row input{ width:18px; height:18px; accent-color:var(--emerald-600); }

.composer-row{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.composer-row strong{ display:block; font-size:14px; font-weight:700; }
.audience-select{ font-size:11px; padding:3px 8px; border:1px solid var(--line); border-radius:99px; background:var(--surface); outline:0; margin-top:2px; }
.sheet-body textarea{ width:100%; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); outline:0; font-size:14px; resize:none; line-height:1.5; transition:all .2s var(--ease); }
.sheet-body textarea:focus{ border-color:var(--emerald-500); background:var(--surface); box-shadow:0 0 0 4px rgba(16,185,129,.12); }
.composer-tools{ display:flex; gap:6px; overflow-x:auto; padding:10px 0 4px; }
.composer-tools::-webkit-scrollbar{ display:none; }
.tool{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; background:var(--surface-2); border-radius:10px; font-size:13px; font-weight:600; flex-shrink:0; border:1px solid var(--line); cursor:pointer; }

/* Attached preview (photo + voice) — shown after media picked. */
.composer-attached{
  position:relative; margin-top:10px; padding:10px 12px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:12px;
  display:flex; align-items:center; gap:10px;
}
.composer-attached.hidden{ display:none; }
.composer-attached img{
  width:100%; max-height:200px; object-fit:cover; border-radius:8px; display:block;
}
.composer-attached.voice{ padding:10px 14px; }
.composer-attached .voice-play-btn{
  width:38px; height:38px; border-radius:50%;
  background:var(--emerald-700); color:#fff; font-size:14px; font-weight:700;
  display:grid; place-items:center; flex-shrink:0; cursor:pointer; border:0;
}
.composer-attached.voice .voice-meta{ flex:1; min-width:0; }
.composer-attached.voice .voice-meta strong{ display:block; font-size:13px; font-weight:700; }
.composer-attached.voice .voice-meta small{ display:block; font-size:11px; color:var(--text-muted); }
.attached-remove{
  position:absolute; top:6px; right:6px;
  width:24px; height:24px; border-radius:50%;
  background:rgba(15,23,42,.7); color:#fff; font-size:11px; font-weight:700;
  display:grid; place-items:center; cursor:pointer; border:0;
}
.composer-attached.voice .attached-remove{ position:relative; top:auto; right:auto; }

/* Recording panel — replaces nothing visually but draws attention while
   the mic is on. Big timer + pulsing waveform + Stop/Cancel. */
.recording-panel{
  margin-top:12px; padding:16px 14px;
  background:linear-gradient(180deg, #fef2f2, #fff);
  border:1.5px solid #fecaca; border-radius:14px;
  animation:fadeIn .2s ease;
}
.recording-panel.hidden{ display:none; }
.rec-head{
  display:flex; align-items:center; gap:8px;
  font-size:14px; font-weight:800; color:#991b1b;
}
.rec-head strong{ flex:1; }
.rec-dot{
  width:10px; height:10px; border-radius:50%; background:#dc2626;
  box-shadow:0 0 0 0 rgba(220,38,38,.7);
  animation:rec-pulse 1.2s ease-in-out infinite;
}
@keyframes rec-pulse{
  0%{ box-shadow:0 0 0 0 rgba(220,38,38,.7);}
  70%{ box-shadow:0 0 0 10px rgba(220,38,38,0);}
  100%{ box-shadow:0 0 0 0 rgba(220,38,38,0);}
}
.rec-timer{ font-variant-numeric:tabular-nums; font-size:18px; font-weight:800; color:#dc2626; }
.rec-wave{
  display:flex; align-items:center; gap:3px; height:36px; margin:14px 0;
  justify-content:center;
}
.rec-wave span{
  width:3px; background:#dc2626; border-radius:3px;
  animation:rec-bar 1s ease-in-out infinite;
  height:14px;
}
.rec-wave span:nth-child(2n){  animation-delay: -.4s; height:22px; }
.rec-wave span:nth-child(3n){  animation-delay: -.6s; height:30px; }
.rec-wave span:nth-child(4n){  animation-delay: -.2s; height:18px; }
.rec-wave span:nth-child(5n){  animation-delay: -.8s; height:26px; }
@keyframes rec-bar{ 0%,100%{ transform:scaleY(.5);} 50%{ transform:scaleY(1.4);} }
.rec-actions{ display:flex; gap:8px; }
.rec-actions .btn-primary.danger{ background:#dc2626; }
.rec-actions .btn-primary.danger:hover{ background:#b91c1c; }
.rec-actions .btn-ghost, .rec-actions .btn-primary{ flex:1; }

/* Engagement row — "❤️ 5 likes · 💬 3 comments" tappable summary
   sits between the reactions row and the comments block. Hidden when
   both counters are zero. */
.engagement-row{
  display:flex; gap:14px;
  padding:4px 14px 8px;
  font-size:12px; color:var(--text-muted);
  border-bottom:1px solid var(--line);
}
.engagement-row .eng-link{
  background:none; border:0; padding:2px 0;
  color:var(--text-muted); font-size:12px; cursor:pointer;
  display:inline-flex; align-items:center; gap:4px;
}
.engagement-row .eng-link strong{ color:var(--text); font-weight:700; }
.engagement-row .eng-link:hover{ color:var(--emerald-700); }

/* Voice player inside a posted memory card. Inline mini-player. */
.memory-voice{
  display:flex; align-items:center; gap:10px;
  margin:8px 0 0; padding:10px 12px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:12px;
}
.memory-voice .voice-play-btn{
  width:38px; height:38px; border-radius:50%;
  background:var(--emerald-700); color:#fff;
  display:grid; place-items:center; font-size:14px; font-weight:700;
  flex-shrink:0; border:0; cursor:pointer;
}
.memory-voice .voice-meta{ flex:1; min-width:0; }
.memory-voice .voice-meta strong{ display:block; font-size:13px; font-weight:700; }
.memory-voice .voice-meta small{ display:block; font-size:11px; color:var(--text-muted); font-variant-numeric:tabular-nums; }

/* Audience chip on memory cards: ‘🎓 Batch 2010’ on batch-only posts. */
.audience-chip{
  display:inline-block; margin-left:6px;
  padding:1px 7px; border-radius:99px;
  background:var(--emerald-50); color:var(--emerald-800);
  font-size:10px; font-weight:700;
}
.audience-chip.batch{ background:#fef3c7; color:#92400e; }

/* ================ CAUSE CHIPS (Profile tab) ================ */
/* Wrapping grid of opt-in causes the user can pick (max 3). Selected
   chips are filled emerald; unselected are outlined. Each chip has a
   small (i) info button that opens the cause info bottom sheet. */
.cause-chip-grid{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:0 0 14px;
}
.cause-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px 8px 10px;
  background:var(--surface); border:1.5px solid var(--line); border-radius:99px;
  font-size:13px; font-weight:600; color:var(--text);
  cursor:pointer; transition:all .15s var(--ease);
  position:relative;
}
.cause-chip:hover{ border-color:var(--navy-300); }
.cause-chip .cc-icon{ font-size:15px; line-height:1; }
.cause-chip .cc-info{
  width:18px; height:18px; border-radius:50%;
  background:rgba(15,23,42,.08); color:var(--text-muted);
  font-size:10px; font-weight:800; line-height:1;
  display:grid; place-items:center; flex-shrink:0;
  margin-left:2px; border:0; cursor:pointer;
}
.cause-chip .cc-info:hover{ background:rgba(15,23,42,.16); color:var(--text); }
.cause-chip.active{
  background:var(--emerald-700); border-color:var(--emerald-700); color:#fff;
}
.cause-chip.active .cc-info{ background:rgba(255,255,255,.22); color:#fff; }
.cause-chip.inactive-not-mine{ opacity:.45; cursor:not-allowed; }

/* Cold-first-visit skeleton — same shape & size as a real chip so the
   layout doesn't jump when real data arrives. Shimmer is purely
   decorative — animation is GPU-cheap (transform/background only). */
.cause-chip.skeleton{
  background:linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 45%, #f1f5f9 80%);
  background-size:200% 100%;
  border-color:transparent;
  color:transparent;
  pointer-events:none;
  user-select:none;
  min-width:90px;
  animation:cause-shimmer 1.1s linear infinite;
}
.cause-chip.skeleton .cc-icon,
.cause-chip.skeleton .cc-name{ visibility:hidden; }
@keyframes cause-shimmer {
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}

/* Info-sheet header emblem */
.cause-info-icon{
  width:54px; height:54px; margin:0 auto 10px;
  background:var(--emerald-50); border-radius:18px;
  display:grid; place-items:center; font-size:28px;
  box-shadow:0 10px 22px -12px rgba(4,120,87,.5);
}
.tool:active{ background:var(--emerald-50); }

/* ================ TOAST ================ */
.toast{
  position:fixed; left:50%; bottom:120px; transform:translateX(-50%) translateY(20px);
  padding:12px 20px; background:var(--navy-900); color:#fff; border-radius:99px;
  font-size:13px; font-weight:600; box-shadow:var(--shadow-lg);
  opacity:0; pointer-events:none; transition:all .3s var(--ease); z-index:60;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ================ MISC ================ */
.link{ font-weight:600; }
.scroll-area > .section-title:first-child{ margin-top:14px; }

/* small screens */
@media(max-width:360px){
  .stats-grid, .qa-grid{ gap:8px; }
  .stat-card .counter{ font-size:16px; }
  .hero h2{ font-size:20px; }
}

/* ================ EMPTY INLINE ================ */
.empty-inline{
  padding:18px 14px; background:var(--surface); border:1px dashed var(--line); border-radius:var(--radius);
  text-align:center; color:var(--text-muted); font-size:13px; line-height:1.5;
}

/* ================ PULL TO REFRESH ================ */
.ptr-indicator{
  position:absolute; top:0; left:50%; transform:translateX(-50%) translateY(-44px);
  width:36px; height:36px; border-radius:50%; background:var(--surface);
  box-shadow:0 6px 14px -6px rgba(15,23,42,.18), 0 0 0 1px var(--line);
  display:grid; place-items:center; color:var(--emerald-700);
  transition:transform .25s var(--ease), opacity .2s var(--ease); opacity:0;
  z-index:5; pointer-events:none;
}
.ptr-indicator.visible{ opacity:1; }
.ptr-indicator.loading svg{ animation:spin 1s linear infinite; }
.ptr-indicator svg{ transition:transform .15s; }
.scroll-area{ position:relative; }

/* ================ AVATAR EDIT ROW ================ */
.avatar-edit-row{ display:flex; align-items:center; gap:14px; margin-bottom:16px; padding:14px; background:var(--surface-2); border-radius:var(--radius); }
.avatar.avatar-lg{ width:72px; height:72px; border-radius:50%; }
.avatar.avatar-lg img{ width:100%; height:100%; object-fit:cover; }

/* avatar with camera badge (clickable to open photo menu) */
.avatar-edit-photo{ position:relative; width:72px; height:72px; padding:0; border-radius:50%; background:transparent; }
.avatar-edit-photo img{ width:100%; height:100%; border-radius:50%; object-fit:cover; box-shadow:var(--shadow-sm); border:2px solid var(--surface); }
.avatar-edit-photo .cam{ position:absolute; right:-2px; bottom:-2px; width:26px; height:26px; border-radius:50%; background:var(--emerald-700); color:#fff; display:grid; place-items:center; border:2px solid var(--surface); box-shadow:0 4px 10px -4px rgba(4,120,87,.5); }

/* same camera badge on the digital ID card */
.id-avatar-wrap{ position:relative; display:inline-block; padding:0; background:transparent; border:0; cursor:pointer; }
.id-avatar-wrap .id-avatar-cam{ position:absolute; right:-2px; bottom:8px; width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.95); color:var(--emerald-700); display:grid; place-items:center; border:2px solid rgba(4,120,87,.4); }

/* section header inside sheet */
.sheet-section{ font-size:11px; font-weight:700; color:var(--text-muted); letter-spacing:.08em; text-transform:uppercase; margin:18px 4px 8px; }
.sheet-section:first-child{ margin-top:6px; }

/* photo menu */
.photo-menu{ display:flex; flex-direction:column; gap:8px; }
.photo-menu-row{ display:flex; align-items:center; gap:14px; padding:14px 14px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); text-align:left; }
.photo-menu-row:active{ background:var(--surface); }
.photo-menu-row.danger strong{ color:#dc2626; }
.photo-menu-row .pm-icon{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-size:18px; }
.photo-menu-row strong{ flex:1; font-size:14px; font-weight:700; }
.photo-menu-row em{ font-style:normal; font-size:14px; color:var(--text-muted); }

/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; padding:24px; animation:fadeIn .2s ease; overflow:hidden; }
.lightbox.hidden{ display:none; }
.lightbox img{
  max-width:96%; max-height:96%; border-radius:12px; box-shadow:0 30px 70px -20px rgba(0,0,0,.8);
  /* Smooth zoom; instant during pinch (no transition) so the gesture
     feels responsive. We toggle .transitioning when not dragging. */
  transition: transform .2s cubic-bezier(.2,.8,.2,1);
  transform-origin: center center;
  /* Tell the browser NOT to handle pinch / pan natively on this image —
     we route those touches to JS pointer handlers instead. */
  touch-action: none;
  user-select: none; -webkit-user-drag: none;
  will-change: transform;
}
.lightbox img:active{ transition:none; }
.lightbox-close{ position:absolute; top:14px; right:14px; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:24px; font-weight:300; z-index:2; }
.lightbox::before{
  /* Hint text — shown only at 1x. Disappears once the user zooms in. */
  content: 'Double-tap to zoom · Pinch · Drag to pan';
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.5); color:rgba(255,255,255,.75);
  padding:6px 14px; border-radius:99px;
  font-size:11px; font-weight:600; letter-spacing:.04em;
  pointer-events:none;
}

/* ================ NOTIF / CONTRIB LISTS ================ */
.notif-list, .contrib-list{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.notif-item, .contrib-item{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  background:var(--surface-2); border-radius:var(--radius); border:1px solid var(--line);
}
.notif-item.unread{ background:var(--emerald-50); border-color:#a7f3d0; }
.notif-item .ni-body{ flex:1; }
.notif-item .ni-body strong{ display:block; font-size:13px; font-weight:700; }
.notif-item .ni-body small{ display:block; font-size:11px; color:var(--text-muted); margin-top:2px; }
.contrib-item .ci-amt{ font-size:15px; font-weight:800; color:var(--emerald-800); letter-spacing:-.01em; }
.contrib-item .ci-body{ flex:1; }
.contrib-item .ci-body strong{ display:block; font-size:13px; font-weight:700; }
.contrib-item .ci-body small{ display:block; font-size:11px; color:var(--text-muted); margin-top:2px; }

/* ================ DARK MODE OVERRIDE ================ */
html[data-theme="dark"]{ color-scheme:dark; }
html[data-theme="dark"]:root, html[data-theme="dark"] body{
  --bg:#0b1220; --surface:#0f172a; --surface-2:#111b30; --line:#1e293b;
  --text:#f1f5f9; --text-muted:#94a3b8;
}
html[data-theme="dark"] body{ background:var(--bg); color:var(--text); }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ================ COUNTRY PICKER ================ */
.cc-picker{
  display:flex; align-items:center; gap:6px;
  padding:0 8px 0 0; border:0; background:transparent; cursor:pointer;
  color:var(--text);
}
.cc-picker .cc-flag{ font-size:18px; line-height:1; }
.cc-picker .cc-code{ font-weight:700; }
.cc-picker:active{ opacity:.7; }
.country-list{ display:flex; flex-direction:column; gap:2px; max-height:55vh; overflow-y:auto; }
.country-row{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:11px 12px; background:transparent; border:0; border-radius:10px; text-align:left;
}
.country-row:hover{ background:var(--surface-2); }
.country-row.active{ background:var(--emerald-50); }
.country-row .flag{ font-size:20px; line-height:1; }
.country-row strong{ flex:1; font-size:13px; font-weight:600; color:var(--text); }
.country-row small{ font-size:13px; color:var(--text-muted); font-weight:600; font-variant-numeric:tabular-nums; }

/* ================ PHASE BANNER ================ */
.phase-banner{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; margin:14px 0 0;
  background:linear-gradient(90deg, #fef3c7, #fde68a);
  color:#92400e; border-radius:99px;
  font-size:12px; font-weight:700; letter-spacing:.02em;
  box-shadow:0 4px 12px -6px rgba(245,158,11,.4);
}
.phase-banner.hidden{ display:none; }
.phase-banner .pb-dot{ width:8px; height:8px; border-radius:50%; background:#d97706; animation:pulse 1.6s ease-in-out infinite; }
.phase-banner > svg{ margin-left:auto; opacity:.7; }
.phase-banner:active{ opacity:.85; }

/* ================ INSTALL BANNER ================ */
.install-banner{
  display:flex; align-items:center; gap:10px;
  margin:14px 0 4px; padding:10px 10px 10px 12px;
  background:linear-gradient(135deg, #ecfdf5, #d1fae5);
  border:1px solid #a7f3d0; border-radius:var(--radius);
  box-shadow:0 4px 12px -8px rgba(4,120,87,.25);
}
.install-banner.hidden{ display:none; }
.ib-icon{ width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.6); color:var(--emerald-700); display:grid; place-items:center; flex-shrink:0; }
.ib-body{ flex:1; min-width:0; }
.ib-body strong{ display:block; font-size:13px; font-weight:800; color:var(--emerald-800); }
.ib-body small{ display:block; font-size:11px; color:var(--emerald-700); margin-top:1px; opacity:.85; }
.install-banner .icon-btn.ghost{ width:28px; height:28px; color:var(--emerald-700); }

/* ================ MY BATCH CARD ================ */
.my-batch-card{
  display:flex; align-items:center; gap:14px;
  margin:14px 0 6px; padding:14px 16px;
  background:linear-gradient(135deg, var(--surface), var(--surface-2));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); text-decoration:none; color:var(--text);
  transition:transform .15s var(--ease), box-shadow .2s var(--ease);
}
.my-batch-card:active{ transform:scale(.99); }
.my-batch-card:hover{ box-shadow:var(--shadow); }
.my-batch-card.hidden{ display:none; }
.mbc-icon{
  width:48px; height:48px; border-radius:14px; flex-shrink:0;
  display:grid; place-items:center; font-size:22px;
  background:linear-gradient(135deg, var(--emerald-50), #fef3c7);
  box-shadow:inset 0 0 0 1px var(--line);
}
.mbc-body{ flex:1; min-width:0; }
.mbc-body small{ display:block; font-size:10px; color:var(--text-muted); font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.mbc-body strong{ display:block; font-size:15px; font-weight:800; letter-spacing:-.01em; margin-top:2px; }
.mbc-body em{ display:block; font-size:11px; color:var(--text-muted); font-style:normal; margin-top:2px; }
.mbc-arrow{ font-size:24px; color:var(--text-muted); line-height:1; }

/* Yours-badge for the user's own batch chip in Community */
.batch-chip.yours{
  background:linear-gradient(135deg, var(--emerald-50), #fef3c7);
  border-color:var(--emerald-600);
}
.batch-chip .yours-pill{
  display:inline-block; margin-top:4px;
  padding:2px 7px; border-radius:99px;
  background:var(--emerald-700); color:#fff;
  font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
}
/* Admin shortcut pill in the home header — visible only when the
   signed-in user has the admin or super-admin custom claim. */
.admin-pill{
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 11px; border-radius:99px;
  background:linear-gradient(135deg, #0f172a, #1e293b);
  color:#fff; font-size:11px; font-weight:800; letter-spacing:.03em;
  text-decoration:none; line-height:1;
  box-shadow:0 4px 12px -4px rgba(15,23,42,.4);
}
.admin-pill svg{ flex-shrink:0; }
.admin-pill:hover{ background:linear-gradient(135deg, #1e293b, #334155); }
.admin-pill.hidden{ display:none; }
/* PUC label inside the year cap of a PUC batch chip — explicit so it
   never gets confused with an SSLC batch of the same year. */
.batch-chip .bc-level{
  display:inline-block; margin-left:6px;
  padding:1px 6px; border-radius:99px;
  background:rgba(255,255,255,.25); color:#fff;
  font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  vertical-align:middle;
}
.batch-chip .bc-level.puc{ background:#0f172a; }

/* ================ DESIGNER CREDIT FOOTER ================ */
.designer-credit{
  display:inline-flex; align-items:center; gap:6px;
  margin:18px auto 8px; padding:8px 14px;
  font-size:11px; color:var(--text-muted);
  text-decoration:none; border-radius:99px;
  background:var(--surface); border:1px solid var(--line);
  width:max-content; min-width:fit-content;
}
.designer-credit em{ font-style:normal; }
.designer-credit strong{
  background:linear-gradient(90deg, #10b981, #f59e0b);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:800; letter-spacing:.01em;
}

/* ────────────────────────────────────────────────────────────
   Builder credit + bug report — replaces the old loud gradient
   "Designed by zaheerx.com" pill. Intentionally muted:
     • No bright colours, no gradient, no animation
     • Sits as plain text — credit is a small subtitle, bug-report
       is a quietly-emerald link people only notice when they need it
     • Two purposes (attribution + bug channel) in one tidy block
   The goal: alumni feel the dev is reachable, not promotional.
   ──────────────────────────────────────────────────────────── */
.builder-credit{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  margin:22px auto 8px;
  text-align:center;
  width:max-content;
}
.builder-credit small{
  font-size:11px; color:var(--text-muted); letter-spacing:.01em;
}
.builder-credit .bc-name{
  color:var(--text-muted); text-decoration:none; font-weight:600;
}
.builder-credit .bc-name:hover{ color:var(--text); text-decoration:underline; text-underline-offset:3px; }
.builder-credit .bc-bug{
  font-size:11px; color:var(--emerald-700); text-decoration:none;
  font-weight:600; padding:2px 4px; opacity:.7;
  transition:opacity .15s var(--ease);
}
.builder-credit .bc-bug:hover{ opacity:1; }
.designer-credit .dc-eye{
  display:grid; place-items:center; width:18px; height:18px;
  background:linear-gradient(135deg, #10b981, #047857);
  color:#fff; border-radius:50%; flex-shrink:0;
  box-shadow:0 0 0 2px rgba(16,185,129,.18), 0 4px 10px -3px rgba(4,120,87,.45);
  animation:eyeBlink 6s infinite;
}
@keyframes eyeBlink{
  0%, 92%, 100% { transform:scale(1); }
  94% { transform:scale(1, 0.1); }
  96% { transform:scale(1); }
}
.scroll-area > .designer-credit{ display:flex; }

/* ================ BATCH ONBOARDING ================ */
.batch-onb{ background:var(--surface); }
.batch-onb-inner{ flex:1; padding:8px 22px 24px; overflow-y:auto; }
.batch-onb-inner h1{ font-size:22px; font-weight:800; margin:12px 0 6px; letter-spacing:-.02em; }
.batch-onb-inner > p.muted{ font-size:14px; line-height:1.5; margin:0 0 8px; }
.batch-onb-foot{ padding:14px 22px max(14px, var(--safe-bot)); border-top:1px solid var(--line); background:var(--surface); }

.pill-grid{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:6px;
}
/* Compact variant for inline use inside the edit-profile sheet */
.pill-grid--compact{ margin:6px 0 14px; }
.pill-grid--compact .pill{ padding:7px 12px; font-size:12px; }
/* Inline label that sits above pill groups (matches the look of .field > span) */
.field-label{
  display:block; font-size:12px; font-weight:600; color:var(--text-muted);
  margin:8px 0 0; padding-left:4px;
}
.pill-scroll{
  display:flex; gap:8px; overflow-x:auto; padding:6px 0 8px;
  margin:0 -22px; padding-left:22px; padding-right:22px;
  scroll-snap-type:x mandatory;
}
.pill-scroll::-webkit-scrollbar{ display:none; }
.pill{
  flex-shrink:0; padding:9px 16px; background:var(--surface);
  border:1.5px solid var(--line); border-radius:99px;
  font-size:13px; font-weight:600; color:var(--text);
  transition:all .15s var(--ease); white-space:nowrap;
  scroll-snap-align:start;
}
.pill:hover{ border-color:var(--navy-300); }
.pill.active{
  background:var(--emerald-50); border-color:var(--emerald-600);
  color:var(--emerald-800); font-weight:700;
}
.pill.other{
  background:var(--surface-2); border-style:dashed; color:var(--text-muted);
}

/* ================ ROLE FORK CARDS ================ */
.role-card{
  display:flex; align-items:center; gap:14px;
  width:100%; padding:18px 16px;
  background:var(--surface); border:2px solid var(--line);
  border-radius:18px; cursor:pointer;
  text-align:left; transition:all .15s var(--ease);
}
.role-card:hover{ border-color:var(--emerald-600); transform:translateY(-1px); box-shadow:var(--shadow); }
.role-card:active{ transform:translateY(0); background:var(--emerald-50); }
.role-card .role-emoji{
  width:54px; height:54px; flex:0 0 54px;
  display:grid; place-items:center; font-size:28px;
  background:var(--emerald-50); border-radius:14px;
}
.role-card div:nth-of-type(2){ flex:1; min-width:0; }
.role-card strong{ display:block; font-size:15px; font-weight:800; color:var(--text); letter-spacing:-.01em; }
.role-card small{ display:block; font-size:12px; color:var(--text-muted); margin-top:2px; line-height:1.4; }
.role-card em{ font-style:normal; color:var(--text-muted); font-size:22px; font-weight:300; flex:0 0 auto; }

/* ================ SUPPORTER-ROLE GATING ================
   Hide alumni-only UI from supporters: composer, reactions, comments,
   community/alumni-directory tab. Pure presentation — server rules
   still enforce write gating. */
body.role-supporter .composer-prompt,
body.role-supporter .memory-composer,
body.role-supporter .memory-card > footer,
body.role-supporter .memory-card .engagement-row,
body.role-supporter .memory-card .comments-block,
body.role-supporter .bottom-nav [data-tab="community"],
body.role-supporter [data-action="post-shoutout"],
body.role-supporter .shoutout-composer{
  display:none !important;
}
/* Banner so supporters know why composer is hidden. */
body.role-supporter .tab-memories::before{
  content:"You're a supporter — read & contribute mode. Reach out to an admin if you're actually an alumnus.";
  display:block; font-size:12px; color:var(--emerald-800);
  background:var(--emerald-50); border:1px solid var(--emerald-200, #a7f3d0);
  border-radius:12px; padding:10px 14px; margin:12px;
  line-height:1.5;
}

/* ================ PUBLIC PROFILE SHEET ================ */
.pp-head{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:6px 0 16px; text-align:center;
}
.pp-head img, .pp-head .pp-avatar{
  width:80px; height:80px; border-radius:50%;
  object-fit:cover; border:3px solid var(--surface); box-shadow:var(--shadow);
}
.pp-head h2{ font-size:20px; font-weight:800; margin:6px 0 0; letter-spacing:-.02em; }
.pp-head .pp-nickname{ color:var(--emerald-700); font-size:13px; font-weight:600; font-style:italic; margin-top:2px; }
.pp-head small{ color:var(--text-muted); font-size:12px; }
.pp-row{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 0; border-bottom:1px solid var(--line);
}
.pp-row:last-child{ border-bottom:0; }
.pp-row .pp-icon{
  width:32px; height:32px; border-radius:10px; background:var(--surface-2);
  display:grid; place-items:center; color:var(--emerald-700); flex-shrink:0;
}
.pp-row .pp-body{ flex:1; min-width:0; }
.pp-row .pp-body small{ display:block; font-size:11px; color:var(--text-muted); font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-bottom:2px; }
.pp-row .pp-body strong, .pp-row .pp-body a{ display:block; font-size:14px; font-weight:600; color:var(--text); word-break:break-word; }
.pp-row .pp-body a{ color:var(--emerald-700); }
.pp-badges{ display:flex; gap:6px; justify-content:center; margin-top:6px; flex-wrap:wrap; }
.pp-badge{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:99px; background:var(--surface-2); color:var(--text-muted); }
.pp-badge.verified{ background:var(--emerald-50); color:var(--emerald-700); }
.pp-badge.role{ background:#e0e7ff; color:#1e3a8a; }
/* ⭐ Member badge — tiered. Member badge appears on the public profile
   sheet next to Verified, and admin can see the tier at a glance. */
.pp-badge.member{ background:#fef3c7; color:#92400e; }
.pp-badge.member.member-bronze{ background:#fed7aa; color:#7c2d12; }
.pp-badge.member.member-silver{ background:#e2e8f0; color:#334155; }
.pp-badge.member.member-gold{ background:linear-gradient(135deg,#fde68a,#f59e0b); color:#78350f; box-shadow:0 0 0 1px #fcd34d; }

/* Inline ⭐ next to author names on memory / shoutout cards — tiny,
   gold, sits as a discreet star. Members feel recognised without the
   chip overpowering the layout. */
.inline-member-badge{
  display:inline-flex; align-items:center; justify-content:center;
  margin-left:5px; vertical-align:middle;
  width:18px; height:18px; border-radius:50%;
  background:linear-gradient(135deg,#fde68a,#f59e0b);
  font-size:10px; line-height:1; box-shadow:0 0 0 1.5px #fff, 0 0 0 2.5px #f59e0b;
}

/* ⭐ Member pill on the user's own ID card — sits next to "✓ Verified".
   Tier drives the background tint so the user feels their level. */
.member-pill{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:700; padding:4px 10px;
  background:rgba(255,255,255,.18); color:#fff;
  border-radius:99px; letter-spacing:.04em; margin-left:6px;
}
.member-pill.tier-bronze{ background:rgba(254,215,170,.30); color:#fff7ed; }
.member-pill.tier-silver{ background:rgba(226,232,240,.30); color:#fff; }
.member-pill.tier-gold{ background:linear-gradient(135deg,rgba(252,211,77,.5),rgba(245,158,11,.5)); color:#fff; box-shadow:0 0 0 1px rgba(252,211,77,.6); }

/* ================ COMMENTS ================ */
.comments-block{ border-top:1px solid var(--line); padding:10px 14px 12px; background:var(--surface-2); }
.comments-block.hidden{ display:none; }
.comments-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; max-height:240px; overflow-y:auto; }
.comment-item{ display:flex; gap:8px; align-items:flex-start; position:relative; }
.comment-item img{ width:28px; height:28px; border-radius:50%; flex-shrink:0; object-fit:cover; }
.comment-item > div{ flex:1; min-width:0; }
.comment-item strong{ display:block; font-size:12px; font-weight:700; }
.comment-item p{ margin:2px 0 0; font-size:13px; line-height:1.4; color:var(--text); word-break:break-word; }
.comment-item.pending{ opacity:.6; }
.comment-item .comment-edited{ font-style:italic; font-size:11px; color:var(--text-muted); margin-left:4px; }
/* Inline edit/delete buttons shown to admin / staff / author on each
   comment row. Sit on the right with subtle hover state. */
.comment-actions{ display:flex; gap:2px; flex-shrink:0; opacity:.55; transition:opacity .15s; }
.comment-item:hover .comment-actions{ opacity:1; }
.comment-actions .cmt-act{
  width:24px; height:24px; border-radius:6px;
  background:none; border:0; cursor:pointer; line-height:1;
  font-size:12px; color:var(--text-muted);
  display:grid; place-items:center;
}
.comment-actions .cmt-act:hover{ background:var(--surface-2); color:var(--text); }
.comment-actions .cmt-act.danger:hover{ background:#fee2e2; color:#b91c1c; }
/* Inline edit textarea — replaces the comment body in place. */
.comment-edit-form textarea{
  width:100%; padding:8px 10px; border-radius:8px; border:1px solid var(--line);
  background:var(--surface); font-family:inherit; font-size:13px; line-height:1.4;
  outline:0; resize:vertical;
}
.comment-edit-form textarea:focus{ border-color:var(--emerald-500); box-shadow:0 0 0 3px rgba(16,185,129,.15); }
.comment-edit-form .btn-mini.ok{ background:var(--emerald-700); color:#fff; }
.comment-form{ display:flex; gap:6px; }
.comment-form input{
  flex:1; padding:10px 12px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface); font-size:13px; outline:0;
}
.comment-form input:focus{ border-color:var(--emerald-500); box-shadow:0 0 0 3px rgba(16,185,129,.15); }
.comment-form .btn-mini{ padding:8px 14px; }

.load-more{ display:block; }

/* ================ PAYMENT COMING SOON ================ */
.payment-soon{
  padding:14px 16px; background:linear-gradient(135deg,#fef3c7,#fde68a);
  border-radius:var(--radius); border:1px solid #fcd34d;
}
.payment-soon .ps-tag{
  display:inline-block; padding:3px 9px; border-radius:99px;
  background:#92400e; color:#fff; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  margin-bottom:8px;
}
.payment-soon strong{ display:block; font-size:14px; color:#78350f; font-weight:700; margin-bottom:4px; }
.payment-soon small{ display:block; font-size:12px; color:#92400e; line-height:1.45; }

.trustee-card{
  display:flex; align-items:center; gap:12px;
  padding:12px; background:var(--surface-2); border-radius:var(--radius); border:1px solid var(--line);
}
.tc-avatar img{ width:48px; height:48px; border-radius:50%; }
.tc-body{ flex:1; min-width:0; }
.tc-body strong{ display:block; font-size:14px; font-weight:700; }
.tc-body small{ display:block; font-size:11px; color:var(--text-muted); }
.tc-body small.mono{ font-family:ui-monospace,monospace; margin-top:4px; color:var(--text); font-weight:600; font-size:13px; letter-spacing:.02em; }
.trustee-actions{ margin-top:12px; }
.trustee-actions a, .trustee-actions button{ text-decoration:none; }

/* ================ PICK CHIPS (Support sheet amount picker) ================ */
.pick-chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 8px; }
.pick-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px; font-size:13px; font-weight:700;
  background:var(--surface); border:1.5px solid var(--line); color:var(--text);
  border-radius:99px; cursor:pointer; transition:all .15s var(--ease);
  white-space:nowrap; line-height:1;
}
.pick-chip:hover{ border-color:var(--emerald-600); color:var(--emerald-700); }
.pick-chip:active{ transform:scale(.97); }
.pick-chip.active{
  background:var(--emerald-700); border-color:var(--emerald-700); color:#fff;
  box-shadow:0 4px 12px -4px rgba(4,120,87,.5);
}
.pick-chip.custom{ border-style:dashed; }
.pick-chip.custom input{
  border:0; background:transparent; color:inherit; font-weight:700;
  width:80px; padding:0; font-size:13px; outline:none; font-family:inherit;
  -moz-appearance:textfield;
}
.pick-chip.custom input::-webkit-outer-spin-button,
.pick-chip.custom input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.pick-chip.custom input::placeholder{ color:var(--text-muted); font-weight:500; }

/* ================ UPI DETAILS CARD (Membership pay sheet) ================ */
.upi-details{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px; margin:0 0 14px;
}
.upi-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:8px 0;
}
.upi-row + .upi-row{ border-top:1px dashed var(--line); }
.upi-row small{ display:block; font-size:11px; color:var(--text-muted); margin-bottom:2px; }
.upi-row strong{ font-size:14px; font-weight:700; color:var(--text); }
.upi-row strong.mono{ font-family:ui-monospace,monospace; letter-spacing:.02em; }
/* QR-hero block — used in Support + Membership sheets as the primary
   payment path because UPI apps reject app-launched intents to
   personal handles. Scan always works, so we lead with it. */
.upi-qr-hero{
  display:flex; flex-direction:column; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:18px 12px 14px; margin:4px 0 0;
  box-shadow:0 8px 22px -14px rgba(15,23,42,.15);
}
.upi-qr-hero img{
  width:220px; height:220px; max-width:80%; border-radius:12px;
  background:#fff; padding:6px;
  display:block;
}
.upi-qr-wrap{ margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); }
.upi-qr-wrap summary{
  cursor:pointer; font-size:12px; font-weight:600; color:var(--emerald-700);
  list-style:none; padding:6px 0;
}
.upi-qr-wrap summary::-webkit-details-marker{ display:none; }
.upi-qr-wrap summary::after{ content:' ›'; transition:transform .15s; display:inline-block; }
.upi-qr-wrap[open] summary::after{ transform:rotate(90deg); }
.upi-qr-wrap img{ display:block; margin:10px auto 4px; max-width:200px; width:100%; border-radius:10px; background:#fff; padding:8px; box-shadow:0 4px 14px -8px rgba(0,0,0,.2); }

/* ================ LINKED ACCOUNTS ================ */
.linked-accounts{ display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
.linked-row{
  display:flex; align-items:center; gap:12px;
  padding:12px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--radius);
}
.la-icon{
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center; font-size:18px;
  flex-shrink:0;
}
.la-body{ flex:1; min-width:0; }
.la-body strong{ display:block; font-size:13px; font-weight:700; }
.la-body small{ display:block; font-size:11px; color:var(--text-muted); margin-top:1px; word-break:break-all; }
.linked-row[data-connected="1"]{ border-color:#a7f3d0; background:var(--emerald-50); }
.linked-row[data-connected="1"] .btn-mini{ background:transparent; color:var(--text-muted); border:1px solid var(--line); }

/* ================ VERIFICATION SHEET ================ */
.verify-hero{
  padding:18px 22px 14px; text-align:center;
  background:linear-gradient(180deg, rgba(16,185,129,.10), transparent 80%);
}
.verify-emblem{
  width:54px; height:54px; border-radius:18px; margin:0 auto 10px;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg, #f59e0b, #b45309);
  box-shadow:0 12px 24px -12px rgba(245,158,11,.6);
}
.verify-hero h2{ font-size:22px; font-weight:800; margin:0 0 4px; letter-spacing:-.02em; }
.verify-hero p{ font-size:13px; color:var(--text-muted); margin:0; line-height:1.5; }

.verify-status-pill{
  display:inline-flex; align-items:center; gap:8px;
  margin:0 22px 6px;
  padding:6px 12px 6px 10px; border-radius:99px;
  background:var(--surface-2); font-size:12px; font-weight:600; color:var(--text-muted);
}
.vsp-dot{ width:8px; height:8px; border-radius:50%; background:var(--text-muted); }
.verify-status-pill[data-status="verified"]{ background:var(--emerald-50); color:var(--emerald-700); }
.verify-status-pill[data-status="verified"] .vsp-dot{ background:var(--emerald-600); }
.verify-status-pill[data-status="pending"]{ background:#fef3c7; color:#92400e; }
.verify-status-pill[data-status="pending"] .vsp-dot{ background:#d97706; animation:pulse 1.6s ease-in-out infinite; }
.verify-status-pill[data-status="rejected"]{ background:#fee2e2; color:#991b1b; }
.verify-status-pill[data-status="rejected"] .vsp-dot{ background:#dc2626; }

.verify-methods{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.verify-card{
  position:relative; display:flex; gap:12px; align-items:center;
  padding:14px; background:var(--surface-2); border:1.5px solid var(--line);
  border-radius:var(--radius); cursor:pointer; transition:all .15s var(--ease);
}
.verify-card input{ position:absolute; opacity:0; pointer-events:none; }
.verify-card:has(input:checked){ border-color:var(--emerald-600); background:var(--emerald-50); box-shadow:0 6px 14px -8px rgba(4,120,87,.35); }
.vc-emoji{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:20px; flex-shrink:0; }
.vc-body{ flex:1; min-width:0; }
.vc-body strong{ display:block; font-size:14px; font-weight:700; }
.vc-body small{ display:block; font-size:12px; color:var(--text-muted); margin-top:2px; line-height:1.4; }
.vc-check{
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface); border:1.5px solid var(--line);
  color:transparent; font-weight:800; font-size:13px;
  transition:all .2s var(--ease); flex-shrink:0;
}
.verify-card:has(input:checked) .vc-check{
  background:var(--emerald-600); border-color:var(--emerald-600); color:#fff;
}

.verify-panel{ padding:0; }
.verify-panel[hidden]{ display:none; }

/* ================ BATCH DETAIL ================ */
.batch-sheet-list{ display:flex; flex-direction:column; gap:8px; }
.batch-member-row{
  display:flex; align-items:center; gap:12px; padding:10px 12px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  cursor:pointer; transition:transform .15s var(--ease);
}
.batch-member-row:active{ transform:scale(.99); }
.batch-member-row img, .batch-member-row .bmr-avatar{
  width:42px; height:42px; border-radius:50%; object-fit:cover; flex-shrink:0;
}
.batch-member-row .bmr-body{ flex:1; min-width:0; }
.batch-member-row .bmr-body strong{ display:block; font-size:14px; font-weight:700; }
.batch-member-row .bmr-body small{ display:block; font-size:11px; color:var(--text-muted); margin-top:1px; }
.batch-member-row em{ font-style:normal; color:var(--text-muted); }