/* ============================ PACIGEA — page styles (dark aurora) ============================ */

/* ---------- Auth / login ---------- */
.auth-shell { min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr; background:var(--surface-page); }
@media (max-width:860px){ .auth-shell{grid-template-columns:1fr;} }
.auth-hero {
  background-image:
    linear-gradient(135deg, rgba(20,11,40,0.92), rgba(90,36,134,0.55) 45%, rgba(245,128,10,0.78)),
    url('/assets/img/background.png');
  background-size:cover; background-position:center; color:#fff;
  padding:var(--sp-12) var(--sp-10); display:flex; flex-direction:column; justify-content:space-between;
}
@media (max-width:860px){ .auth-hero{display:none;} }
.auth-hero__logo{width:96px;height:96px;border-radius:24px;box-shadow:var(--elev-4);}
.auth-hero h1{color:#fff;font-size:var(--fs-36);margin-top:var(--sp-6);}
.auth-hero p{color:rgba(255,255,255,0.85);margin-top:var(--sp-3);max-width:38ch;}
.auth-hero__foot{font-size:var(--fs-12);color:rgba(255,255,255,0.7);}
.auth-hero__programs{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-5);}
.auth-hero__chip{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.25);padding:4px 12px;border-radius:var(--r-pill);font-size:var(--fs-12);font-weight:600;}
.auth-panel{display:grid;place-items:center;padding:var(--sp-8);}
.auth-card{width:100%;max-width:380px;}
.auth-card__logo{width:64px;height:64px;margin:0 auto var(--sp-4);border-radius:18px;}
.auth-card h2{text-align:center;} .auth-card .muted{text-align:center;margin-bottom:var(--sp-6);}

/* ====================================================================
   DASHBOARD
   ==================================================================== */

/* ---- Hero banner ---- */
.dash-hero {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); margin-bottom: var(--sp-5);
  border: 1px solid var(--border-default);
  background:
    linear-gradient(110deg, rgba(20,11,40,0.86) 0%, rgba(90,36,134,0.46) 38%, rgba(184,52,95,0.40) 62%, rgba(245,128,10,0.42) 100%),
    url('/assets/img/background.png');
  background-size: cover; background-position: center right;
  display: flex; align-items: center; gap: var(--sp-6);
  padding: var(--sp-8) var(--sp-10);
  box-shadow: var(--elev-3);
}
.dash-hero::after {
  content:""; position:absolute; right:0; top:0; bottom:0; width:48%;
  background: radial-gradient(380px 280px at 78% 40%, rgba(245,128,10,0.34), transparent 70%);
  pointer-events:none;
}
.dash-hero__logo {
  width: 96px; height: 96px; border-radius: 24px; flex-shrink:0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18), var(--elev-3);
  position: relative; z-index:1;
}
.dash-hero__body { position: relative; z-index:1; }
.dash-hero h1 {
  color:#fff; font-size: var(--fs-36); font-weight:800; letter-spacing:-0.01em;
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}
.dash-hero p { color: rgba(255,255,255,0.88); margin-top: var(--sp-2); font-size: var(--fs-16); max-width: 64ch; }
.dash-hero__pill {
  display:inline-flex; align-items:center; gap:8px; margin-top:var(--sp-4);
  background: rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.22);
  padding:7px 16px; border-radius:var(--r-pill); font-size:var(--fs-13); font-weight:600; color:#fff;
  backdrop-filter: blur(4px);
}
@media (max-width:760px){ .dash-hero{flex-direction:column;align-items:flex-start;padding:var(--sp-6);} .dash-hero h1{font-size:var(--fs-30);} .dash-hero__logo{width:64px;height:64px;} }

/* ---- Masthead spotlight (member advisory ribbon) ----
   Warm amber treatment so it reads as "act on this", visually distinct
   from the violet/blue KPI cards. Reuses the accent gradient + glow
   tokens so it stays on-brand, not a generic alert box. */
.spotlight {
  display:flex; align-items:center; gap:var(--sp-5);
  margin-bottom:var(--sp-5); padding:var(--sp-4) var(--sp-5);
  border-radius:var(--r-lg); position:relative; overflow:hidden;
  color:var(--text-primary); text-decoration:none;
  background:
    linear-gradient(100deg, rgba(245,128,10,0.16) 0%, rgba(245,87,10,0.08) 45%, var(--surface-card) 80%),
    var(--surface-card);
  border:1px solid rgba(245,128,10,0.32);
  box-shadow:var(--elev-2);
  transition:transform var(--motion-ui), box-shadow var(--motion-ui), border-color var(--motion-ui);
}
.spotlight::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--grad-accent); }
.spotlight:hover{ transform:translateY(-2px); box-shadow:var(--elev-3),var(--glow-accent); border-color:rgba(245,128,10,0.55); text-decoration:none; }
.spotlight__icon{
  width:46px; height:46px; border-radius:13px; flex-shrink:0; display:grid; place-items:center;
  background:var(--grad-accent); color:#fff; box-shadow:var(--glow-accent);
}
.spotlight__icon svg{ width:24px; height:24px; }
.spotlight__body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.spotlight__kicker{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--orange-300); }
.spotlight__title{ font-family:var(--font-display); font-size:var(--fs-16); font-weight:700; color:var(--text-primary); line-height:1.35; }
.spotlight__title strong{ color:var(--gold-300); }
.spotlight__sub{ font-size:var(--fs-12); color:var(--text-secondary); line-height:1.5; }
.spotlight__cta{
  flex-shrink:0; display:inline-flex; align-items:center; gap:6px;
  background:var(--grad-accent); color:#fff; font-weight:700; font-size:var(--fs-13);
  padding:9px 16px; border-radius:var(--r-md); box-shadow:var(--glow-accent);
}
@media (max-width:760px){
  .spotlight{ flex-direction:column; align-items:flex-start; gap:var(--sp-3); }
  .spotlight__cta{ width:100%; justify-content:center; }
}

/* ---- Stat cards (icon chip + value + sparkline) ---- */
.kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5); margin-bottom:var(--sp-5); }
@media (max-width:1180px){ .kpi-row{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .kpi-row{grid-template-columns:1fr;} }
.kpi {
  position:relative; overflow:hidden;
  background: var(--surface-card); border:1px solid var(--border-subtle);
  border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--elev-2);
  display:flex; gap:var(--sp-4); align-items:flex-start;
}
.kpi::before { content:""; position:absolute; inset:0 0 auto 0; height:1px; background:var(--grad-card-edge); }
.kpi::after {
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:3px 0 0 3px;
}
.kpi--violet::after{background:var(--grad-stat-violet);} .kpi--blue::after{background:var(--grad-stat-blue);}
.kpi--orange::after{background:var(--grad-stat-orange);} .kpi--pink::after{background:var(--grad-stat-pink);}
.kpi__icon { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; flex-shrink:0; color:#fff; }
.kpi__icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.kpi--violet .kpi__icon{background:var(--grad-stat-violet);box-shadow:0 6px 16px rgba(124,92,255,0.34);}
.kpi--blue   .kpi__icon{background:var(--grad-stat-blue);box-shadow:0 6px 16px rgba(56,160,245,0.30);}
.kpi--orange .kpi__icon{background:var(--grad-stat-orange);box-shadow:0 6px 16px rgba(245,128,10,0.34);}
.kpi--pink   .kpi__icon{background:var(--grad-stat-pink);box-shadow:0 6px 16px rgba(224,69,126,0.32);}
.kpi__main{flex:1;min-width:0;}
.kpi__label{font-size:var(--fs-12);text-transform:uppercase;letter-spacing:0.07em;color:var(--text-muted);font-weight:700;}
.kpi__value{font-family:var(--font-display);font-size:2rem;font-weight:800;color:var(--text-primary);line-height:1.1;margin-top:4px;}
.kpi__hint{font-size:var(--fs-12);color:var(--text-secondary);margin-top:4px;}
.kpi__spark{position:absolute;right:var(--sp-4);bottom:var(--sp-4);width:64px;height:28px;opacity:0.85;}
.kpi__spark svg{width:100%;height:100%;overflow:visible;}

/* ---- Contribution period strip ---- */
.period-card { margin-bottom: var(--sp-5); }
.period-card .card__header { background: linear-gradient(90deg, rgba(124,92,255,0.10), transparent); }
.period-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5); }
@media (max-width:760px){ .period-grid{grid-template-columns:repeat(2,1fr);} }
.period-cell { padding: var(--sp-2) 0; }
.period-cell__label { font-size:var(--fs-12); color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; font-weight:700; display:flex; align-items:center; gap:8px; }
.period-cell__label svg{width:16px;height:16px;stroke:var(--lavender-500);fill:none;stroke-width:2;}
.period-cell__value { font-family:var(--font-mono); font-size:var(--fs-20); font-weight:700; color:var(--text-primary); margin-top:6px; }
.period-cell--total .period-cell__value { color: var(--magenta-400); }

/* ---- Bottom 3-panel row ---- */
.dash-tri { display:grid; grid-template-columns: 1.1fr 1fr 1.1fr; gap:var(--sp-5); margin-top:var(--sp-5); }
@media (max-width:1180px){ .dash-tri{grid-template-columns:1fr;} }
.panel-link { font-size:var(--fs-12); font-weight:600; color:var(--text-link); display:inline-flex; align-items:center; gap:4px; }
.panel-link:hover{text-decoration:none;color:#d4c2ff;}

.prog-list { display:flex; flex-direction:column; gap:var(--sp-3); }
.prog-item {
  display:flex; align-items:center; gap:var(--sp-3);
  background: var(--surface-sunken); border:1px solid var(--border-subtle);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); color:inherit;
  transition: background var(--motion-ui), transform var(--motion-ui);
}
.prog-item:hover{ background: var(--surface-glass-hi); transform: translateX(3px); text-decoration:none; }
.prog-item__icon{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; flex-shrink:0; color:#fff; }
.prog-item__icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.prog-item--leaf  .prog-item__icon{background:var(--grad-stat-violet);}
.prog-item--gold  .prog-item__icon{background:var(--grad-stat-orange);}
.prog-item--sky   .prog-item__icon{background:var(--grad-stat-blue);}
.prog-item--coral .prog-item__icon{background:var(--grad-stat-pink);}
.prog-item--lavender .prog-item__icon{background:var(--grad-violet);}
.prog-item__body{flex:1;min-width:0;}
.prog-item__title{font-weight:600;font-size:var(--fs-14);color:var(--text-primary);}
.prog-item__sub{font-size:var(--fs-12);color:var(--text-muted);}
.prog-item__count{font-family:var(--font-display);font-weight:700;color:var(--text-secondary);}
.prog-item__arrow{color:var(--text-muted);}

/* Donut */
.donut-wrap{display:flex;align-items:center;gap:var(--sp-5);}
.donut{position:relative;width:150px;height:150px;flex-shrink:0;}
.donut svg{transform:rotate(-90deg);width:100%;height:100%;}
.donut__center{position:absolute;inset:0;display:grid;place-content:center;text-align:center;}
.donut__num{font-family:var(--font-display);font-size:var(--fs-24);font-weight:800;color:var(--text-primary);line-height:1;}
.donut__cap{font-size:var(--fs-12);color:var(--text-muted);margin-top:2px;}
.donut-legend{display:flex;flex-direction:column;gap:var(--sp-3);flex:1;}
.donut-legend__row{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-13);}
.donut-legend__dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.donut-legend__label{color:var(--text-secondary);flex:1;}
.donut-legend__val{font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums;}
.donut-foot{display:flex;justify-content:space-between;margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--border-subtle);font-size:var(--fs-13);}
.donut-foot strong{color:var(--leaf-500);} .donut-foot .ina{color:var(--text-muted);}

/* Activity feed */
.activity{display:flex;flex-direction:column;}
.activity__item{display:flex;gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--border-subtle);}
.activity__item:last-child{border-bottom:none;}
.activity__icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;color:#fff;}
.activity__icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.activity__icon--a{background:var(--grad-stat-violet);} .activity__icon--b{background:var(--grad-stat-orange);}
.activity__icon--c{background:var(--grad-stat-blue);} .activity__icon--d{background:var(--grad-stat-pink);}
.activity__body{flex:1;min-width:0;}
.activity__title{font-weight:600;font-size:var(--fs-13);color:var(--text-primary);}
.activity__sub{font-size:var(--fs-12);color:var(--text-muted);}
.activity__time{font-size:var(--fs-12);color:var(--text-muted);white-space:nowrap;}

/* ---------- Program cards (other pages) ---------- */
.program-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-5);}
.program-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--elev-2);transition:transform var(--motion-ui),box-shadow var(--motion-ui);display:block;color:inherit;}
.program-card:hover{transform:translateY(-3px);box-shadow:var(--elev-3);text-decoration:none;}
.program-card__icon{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;margin-bottom:var(--sp-3);background:var(--grad-violet);color:#fff;}
.program-card__icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.program-card--leaf .program-card__icon{background:var(--grad-stat-violet);}
.program-card--gold .program-card__icon{background:var(--grad-stat-orange);}
.program-card--sky .program-card__icon{background:var(--grad-stat-blue);}
.program-card--coral .program-card__icon{background:var(--grad-stat-pink);}
.program-card--lavender .program-card__icon{background:var(--grad-violet);}
.program-card h3{font-size:var(--fs-16);margin-bottom:var(--sp-2);}
.program-card p{color:var(--text-secondary);font-size:var(--fs-13);}
.program-card__meta{margin-top:var(--sp-3);font-size:var(--fs-12);color:var(--text-muted);font-weight:600;}

/* ---------- Member profile ---------- */
.profile-head{display:flex;align-items:center;gap:var(--sp-5);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--r-lg);padding:var(--sp-6);box-shadow:var(--elev-2);margin-bottom:var(--sp-5);}
.profile-avatar{width:72px;height:72px;border-radius:var(--r-pill);background:var(--grad-violet);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:var(--fs-24);}
.kv{display:grid;grid-template-columns:160px 1fr;gap:var(--sp-2) var(--sp-4);}
.kv dt{color:var(--text-muted);font-size:var(--fs-13);font-weight:600;}
.kv dd{font-size:var(--fs-14);color:var(--text-primary);}

/* ---------- Help / errors ---------- */
.help-section{margin-bottom:var(--sp-6);}
.help-section h3{margin-bottom:var(--sp-2);}
.help-section ol,.help-section ul{margin-left:var(--sp-5);margin-top:var(--sp-2);}
.help-section li{margin-bottom:var(--sp-2);}
.error-shell{min-height:100vh;display:grid;place-items:center;background:var(--grad-sidebar);color:#fff;text-align:center;padding:var(--sp-8);}
.error-shell h1{color:#fff;font-size:var(--fs-48);}
.error-shell p{color:rgba(255,255,255,0.8);margin:var(--sp-3) 0 var(--sp-6);}

/* ====================================================================
   PLEDGE MASTHEAD (global — every app-layout page)
   Neon ring = the emphasis; inner panel stays on theme tokens so it
   adapts to light/dark. Height budget: ~1.5in (≈144px) on desktop —
   2px ring + 132px min inner + margins.
   ==================================================================== */
.pledge{position:relative;margin-bottom:var(--sp-5);border-radius:var(--r-lg);padding:2px;
  background:linear-gradient(100deg,#7c5cff,#e0457e 28%,#f5800a 52%,#2dd4bf 78%,#7c5cff);
  background-size:300% 100%;animation:pledge-flow 10s linear infinite;
  box-shadow:0 0 12px rgba(124,92,255,.38),0 0 30px rgba(245,128,10,.16);}
@keyframes pledge-flow{to{background-position:300% 0;}}
@media (prefers-reduced-motion:reduce){.pledge{animation:none;}}
.pledge__inner{display:flex;align-items:center;gap:var(--sp-5);min-height:128px;
  padding:var(--sp-3) var(--sp-6);border-radius:calc(var(--r-lg) - 2px);background:var(--surface-card);}
.pledge__heart{width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;border-radius:14px;color:#fff;
  background:linear-gradient(135deg,#7c5cff,#e0457e);box-shadow:0 0 16px rgba(224,69,126,.45);}
.pledge__heart svg{width:24px;height:24px;}
.pledge__heart-icon{font-size:24px;line-height:1;}
.pledge__body{flex:1;min-width:0;}
.pledge__kicker{font-size:var(--fs-12);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:linear-gradient(90deg,#9a7fd1,#e0457e,#f5a30a);-webkit-background-clip:text;background-clip:text;color:transparent;}
.pledge__line{margin-top:2px;font-size:var(--fs-14);color:var(--text-primary);line-height:1.35;}
.pledge__sub{margin-top:2px;font-size:var(--fs-12);color:var(--text-muted);line-height:1.35;}
.pledge__chips{display:grid;grid-template-columns:repeat(2,minmax(0,auto));gap:6px;flex-shrink:0;}
.pledge__chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-pill);
  font-size:var(--fs-12);font-weight:600;text-decoration:none;color:var(--text-primary);
  border:1px solid rgba(124,92,255,.35);background:rgba(124,92,255,.08);white-space:nowrap;
  transition:transform var(--motion-ui),box-shadow var(--motion-ui),border-color var(--motion-ui);}
.pledge__chip:hover{transform:translateY(-1px);border-color:rgba(245,128,10,.6);
  box-shadow:0 0 10px rgba(245,128,10,.35);}
.pledge__chip.is-active{border-color:rgba(245,128,10,.78);background:rgba(245,128,10,.16);
  box-shadow:0 0 12px rgba(245,128,10,.24);}
@media (max-width:900px){
  .pledge__inner{flex-wrap:wrap;min-height:0;padding:var(--sp-3) var(--sp-4);gap:var(--sp-3);}
  .pledge__heart{width:36px;height:36px;}
  .pledge__body{flex:1 1 calc(100% - 52px);}
  .pledge__chips{flex:1 1 100%;display:flex;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;}
  .pledge__chips::-webkit-scrollbar{display:none;}
}