/* Shared styles: donor portal + admin console (crystal theme) */
:root,:root[data-theme="dark"]{
  --bg:#070a16;--bg2:#0d1226;--panel:rgba(255,255,255,.05);--panel2:rgba(255,255,255,.09);--edge:rgba(255,255,255,.12);
  --ink:#eef3ff;--muted:#9aa6c8;--faint:#6b7699;--c1:#5ef2ff;--c2:#a78bfa;--c3:#ff7ad9;--gold:#ffd27a;
  --ok:#43d39e;--warn:#ffc35a;--bad:#ff7a7a;--info:#6cc6ff;--violet:#b79bff;
  --iri:linear-gradient(120deg,var(--c1),var(--c2) 40%,var(--c3) 75%,var(--gold));
  --shadow:0 18px 50px rgba(0,0,0,.4);--chart:#8f7cf7;--grid:rgba(255,255,255,.08)
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;min-height:100vh;transition:background .4s,color .4s}
body:before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;background:radial-gradient(40vw 40vw at 15% 10%,rgba(167,139,250,.22),transparent 60%),radial-gradient(35vw 35vw at 90% 30%,rgba(94,242,255,.15),transparent 60%),radial-gradient(30vw 30vw at 50% 100%,rgba(255,122,217,.14),transparent 60%);animation:drift 24s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(4vw,-3vh) scale(1.08)}}
h1,h2,h3,h4{font-family:Sora,Inter,sans-serif;letter-spacing:-.02em;line-height:1.15}
a{color:var(--c1);text-decoration:none}
.iri{background:var(--iri);background-size:250%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 6s linear infinite}
@keyframes flow{to{background-position:250% 0}}
.muted{color:var(--muted)}.small{font-size:.82rem}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.row.end{justify-content:flex-end}.grow{flex:1}
.glass{background:var(--panel);border:1px solid var(--edge);border-radius:20px;backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;font:600 .9rem Sora,Inter,sans-serif;padding:11px 18px;border-radius:13px;color:#0a0d1d;background:var(--iri);background-size:220%;transition:transform .2s,background-position .6s;white-space:nowrap}
.btn:hover{transform:translateY(-2px);background-position:100% 0}
.btn:disabled{opacity:.6;cursor:wait;transform:none}
.btn.ghost{background:var(--panel);color:var(--ink);border:1px solid var(--edge)}
.btn.danger{background:var(--bad);color:#fff}
.btn.ok{background:var(--ok);color:#04150d}
.btn.sm{padding:7px 12px;font-size:.78rem;border-radius:10px}
.ib{width:40px;height:40px;border-radius:12px;border:1px solid var(--edge);background:var(--panel);color:var(--ink);cursor:pointer;display:inline-grid;place-items:center;font-size:1rem}
.spin{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
label.f{display:flex;flex-direction:column;gap:6px;font-size:.8rem;font-weight:600;color:var(--muted)}
.f input,.f select,.f textarea,input.in,select.in{padding:11px 13px;border-radius:12px;border:1px solid var(--edge);background:var(--panel);color:var(--ink);font:400 .93rem Inter,sans-serif;width:100%}
.f select option,select.in option{background:var(--bg2);color:var(--ink)}
.f input:focus,.f select:focus,.f textarea:focus,input.in:focus,select.in:focus{outline:none;border-color:var(--c1);box-shadow:0 0 0 3px rgba(94,242,255,.15)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:640px){.grid2,.grid3{grid-template-columns:1fr}}
.check{display:flex;gap:8px;align-items:center;font-size:.86rem;color:var(--muted)}
.check input{accent-color:var(--c2);width:16px;height:16px}
.badge{display:inline-flex;gap:5px;align-items:center;padding:3px 10px;border-radius:99px;font:600 .72rem Inter,sans-serif;text-transform:capitalize;border:1px solid currentColor;white-space:nowrap}
.badge.ok{color:var(--ok)}.badge.warn{color:var(--warn)}.badge.bad{color:var(--bad)}.badge.info{color:var(--info)}.badge.violet{color:var(--violet)}.badge.muted{color:var(--faint)}
.tbl-wrap{overflow-x:auto;border-radius:16px;border:1px solid var(--edge)}
table.t{width:100%;border-collapse:collapse;font-size:.88rem;min-width:640px}
.t th{text-align:left;font:600 .72rem Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:12px 14px;border-bottom:1px solid var(--edge);background:var(--panel);position:sticky;top:0}
.t td{padding:12px 14px;border-bottom:1px solid var(--edge);vertical-align:middle}
.t tbody tr{cursor:pointer;transition:background .15s}
.t tbody tr:hover{background:var(--panel2)}
.t tbody tr:last-child td{border-bottom:0}
.t .num{text-align:right;font-variant-numeric:tabular-nums}
.empty{padding:40px;text-align:center;color:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.kpi{padding:18px 20px}
.kpi span{font-size:.78rem;color:var(--muted);font-weight:600}
.kpi b{display:block;font:800 1.7rem Sora,Inter,sans-serif;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.kpi small{color:var(--faint);font-size:.76rem}
.modal{position:fixed;inset:0;z-index:100;background:rgba(4,6,14,.6);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:16px}
.modal.show{display:flex}
.sheet{width:100%;max-width:520px;max-height:92vh;overflow:auto;padding:26px;border-radius:22px;background:var(--bg2);border:1px solid var(--edge);box-shadow:var(--shadow);animation:pop .25s}
.sheet.wide{max-width:760px}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(10px)}}
.sheet h3{font-size:1.3rem}
.kv{display:grid;grid-template-columns:150px 1fr;gap:8px 14px;font-size:.9rem;margin:16px 0}
.kv dt{color:var(--muted)}.kv dd{word-break:break-word}
@media(max-width:520px){.kv{grid-template-columns:1fr}.kv dt{margin-top:6px}}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,150px);z-index:200;padding:13px 20px;border-radius:14px;background:var(--bg2);border:1px solid var(--edge);box-shadow:var(--shadow);font-size:.9rem;transition:transform .35s;max-width:calc(100% - 32px)}
.toast.show{transform:translate(-50%,0)}
.toast.err{border-color:var(--bad);color:var(--bad)}
.demo-flag{display:inline-flex;gap:6px;align-items:center;padding:4px 10px;border-radius:99px;font:700 .68rem Inter,sans-serif;letter-spacing:.06em;color:var(--warn);border:1px solid var(--warn)}
.logo{display:flex;gap:10px;align-items:center;font:700 .95rem Sora,Inter,sans-serif;color:var(--ink)}
.logo img{width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.3),0 0 20px rgba(94,242,255,.4)}
.logo small{display:block;font:500 .62rem Inter,sans-serif;letter-spacing:.14em;color:var(--muted)}
.auth{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.auth .card{width:100%;max-width:440px;padding:32px}
.tabs{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:13px;background:var(--panel);border:1px solid var(--edge);margin:20px 0}
.tabs button{border:0;background:none;color:var(--muted);padding:10px;border-radius:10px;font:600 .86rem Sora,Inter,sans-serif;cursor:pointer}
.tabs button.on{background:var(--iri);background-size:200%;color:#0a0d1d}
.stack{display:grid;gap:14px}
.hint{padding:12px 14px;border-radius:12px;border:1px dashed var(--edge);font-size:.8rem;color:var(--muted)}
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart text{fill:var(--muted);font:500 11px Inter,sans-serif}
.chart .bar{fill:var(--chart);transition:opacity .2s}
.chart .bar:hover{opacity:.75}
.chart .gl{stroke:var(--grid)}
.tip{position:fixed;pointer-events:none;z-index:300;padding:8px 11px;border-radius:10px;background:var(--bg2);border:1px solid var(--edge);box-shadow:var(--shadow);font-size:.8rem;opacity:0;transition:opacity .12s}
.tip b{display:block;font-size:.95rem}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.thumb{border-radius:16px;overflow:hidden;position:relative;border:1px solid var(--edge);background:var(--panel)}
.thumb img{width:100%;height:140px;object-fit:cover;display:block}
.thumb .meta{padding:10px;font-size:.8rem}
.thumb.off img{opacity:.35;filter:grayscale(1)}
@media (prefers-reduced-motion: reduce){*,*:before{animation:none!important;transition:none!important}}

/* ---------- animated outreach background (sign-in screens) ---------- */
#authbg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#05070f}
#authbg ~ #app .auth{position:relative;z-index:1;padding-bottom:150px}
.ab-slide{position:absolute;inset:-4%;background-size:cover;background-position:center 30%;opacity:0;transform:scale(1.12) translate3d(0,0,0);transition:opacity 1.6s ease;will-change:transform,opacity}
.ab-slide.on{opacity:1;animation:abZoom 7.5s ease-out forwards}
.ab-slide:nth-child(even).on{animation-name:abZoom2}
@keyframes abZoom{from{transform:scale(1.14) translate(-1.5%,1%)}to{transform:scale(1.02) translate(1%,-1%)}}
@keyframes abZoom2{from{transform:scale(1.02) translate(1.5%,0)}to{transform:scale(1.14) translate(-1%,-1.5%)}}
.ab-shade{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(5,7,15,.55) 0%,rgba(5,7,15,.82) 60%,rgba(5,7,15,.95) 100%),linear-gradient(120deg,rgba(94,242,255,.12),rgba(167,139,250,.14) 50%,rgba(255,122,217,.12))}
.ab-orbs span{position:absolute;border-radius:50%;filter:blur(70px);mix-blend-mode:screen;opacity:.45}
.ab-orbs span:nth-child(1){width:38vw;height:38vw;left:-8vw;top:-10vw;background:#a78bfa;animation:abOrb 16s ease-in-out infinite alternate}
.ab-orbs span:nth-child(2){width:30vw;height:30vw;right:-6vw;top:20vh;background:#5ef2ff;animation:abOrb 20s ease-in-out infinite alternate-reverse}
.ab-orbs span:nth-child(3){width:28vw;height:28vw;left:30vw;bottom:-12vw;background:#ff7ad9;animation:abOrb 18s ease-in-out infinite alternate}
@keyframes abOrb{to{transform:translate(6vw,-5vh) scale(1.2)}}
.ab-spark{position:absolute;bottom:-10px;width:7px;height:11px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:linear-gradient(#5ef2ff,#ff7ad9);opacity:.7;animation:abRise linear infinite}
@keyframes abRise{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:.8}100%{transform:translateY(-110vh) rotate(540deg);opacity:0}}
.ab-cap{position:absolute;left:clamp(16px,4vw,48px);bottom:clamp(16px,4vh,40px);max-width:min(460px,calc(100% - 32px));color:#eef3ff}
.ab-tag{display:inline-block;font:700 .7rem Sora,Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px)}
.ab-cap p{font:600 1.05rem Sora,Inter,sans-serif;margin:10px 0 12px;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.ab-cap p.in{animation:abCap .9s ease}
@keyframes abCap{from{opacity:0;transform:translateY(10px);filter:blur(4px)}}
.ab-dots{display:flex;gap:6px}
.ab-dots b{width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.3);transition:.4s}
.ab-dots b.on{width:26px;background:linear-gradient(90deg,#5ef2ff,#ff7ad9)}
#authbg ~ #app .auth .glass{background:rgba(10,14,30,.55);border-color:rgba(255,255,255,.16);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04) inset}
body:has(#authbg):before{display:none}
@media(max-width:700px){.ab-cap p{font-size:.9rem}.ab-cap{bottom:12px}}
@media (prefers-reduced-motion: reduce){.ab-slide.on{animation:none;transform:none}.ab-spark,.ab-orbs span{animation:none}}