:root{
  --aufa-radius-xl: 32px;
  --aufa-radius-lg: 24px;
  --aufa-radius-md: 18px;
  --aufa-shadow-soft: 0 18px 45px rgba(20, 61, 92, .08);
  --aufa-shadow-card: 0 18px 38px rgba(20, 61, 92, .10);
  --aufa-shadow-hover: 0 24px 56px rgba(20, 61, 92, .14);
  --aufa-glass: rgba(255,255,255,.78);
  --aufa-line: rgba(153, 180, 203, .26);
  --aufa-warm: #d5b165;
  --aufa-deep-navy: #17324d;
  --aufa-soft-bg: #f5f9fc;
}

html{
  scroll-behavior:smooth;
  background:var(--aufa-bg-color,#ffffff);
}

body{
  color:var(--aufa-font-color,#1d2d50);
  background:
    radial-gradient(circle at 8% 10%, rgba(13,71,161,.10), transparent 26%),
    radial-gradient(circle at 88% 12%, rgba(213,177,101,.14), transparent 22%),
    linear-gradient(180deg, #fbfdff 0%, #f3f8fc 46%, #ffffff 100%),
    var(--aufa-background-image, none);
  background-size:auto,auto,auto,cover;
  background-attachment:fixed;
  overscroll-behavior-y:none;
}

header{
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.74)) !important;
  border-bottom: 1px solid rgba(220,230,240,.78) !important;
  box-shadow: 0 10px 32px rgba(16, 53, 89, .07) !important;
  transition: background .28s ease, box-shadow .28s ease, padding .28s ease;
}

body.header-scrolled header{
  box-shadow: 0 12px 36px rgba(16, 53, 89, .11) !important;
}

.header-inner,
.auth-wrap,
.dashboard-main,
.profile-grid,
.contact-layout,
.donation-layout,
.cards-grid,
.impact-grid,
.impact-bar,
.footer-grid{
  position:relative;
}

.logo-wrap img{
  border-radius: 20px !important;
  box-shadow: 0 10px 26px rgba(13,71,161,.12);
}

.logo-text h2{
  letter-spacing:-.03em;
}

nav a{
  border-radius:999px;
  transition: color .22s ease, background .22s ease, transform .22s ease, box-shadow .22s ease;
}
nav a:hover,
nav a.active{
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--aufa-accent-color,#0d47a1) 10%, white) !important;
  color: var(--aufa-heading-color,#0d47a1) !important;
  box-shadow: inset 0 0 0 1px rgba(13,71,161,.08);
}

.nav-area{
  gap: 26px !important;
}

.nav-actions [data-auth-nav]{
  min-height:0 !important;
}

.btn{
  border-radius:999px !important;
  font-weight:700 !important;
  letter-spacing:.01em;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease !important;
}
.btn:hover{
  transform: translateY(-3px);
}
.btn-primary{
  background: linear-gradient(135deg, var(--aufa-accent-color,#0d47a1), color-mix(in srgb, var(--aufa-accent-color,#0d47a1) 72%, white)) !important;
  box-shadow: 0 14px 28px rgba(13,71,161,.18);
}
.btn-outline{
  background: rgba(255,255,255,.76) !important;
  border: 1px solid rgba(13,71,161,.12) !important;
  color: var(--aufa-accent-color,#0d47a1) !important;
}
.btn-danger{
  box-shadow: 0 14px 28px rgba(180,35,24,.16);
}

.hero,
.auth-hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-radius: 0 0 40px 40px;
  background:
    linear-gradient(130deg, rgba(16,52,86,.82), rgba(14,94,117,.68)),
    url('https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat !important;
  box-shadow: inset 0 -90px 120px rgba(255,255,255,.06);
}
.hero::before,
.auth-hero::before{
  content:"";
  position:absolute;
  inset:-10% auto auto -4%;
  width:360px;
  height:360px;
  background: radial-gradient(circle, rgba(255,255,255,.24), transparent 62%);
  z-index:-1;
}
.hero::after,
.auth-hero::after{
  content:"";
  position:absolute;
  right:-110px;
  bottom:-130px;
  width:360px;
  height:360px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(213,177,101,.35), transparent 62%);
  z-index:-1;
}
.hero h1,
.auth-hero h1{
  letter-spacing:-.04em;
  text-shadow: 0 12px 36px rgba(0,0,0,.14);
  max-width: 12ch;
  margin-left:auto !important;
  margin-right:auto !important;
}
.hero p,
.auth-hero p{
  max-width: 760px !important;
  color: rgba(244,248,252,.96) !important;
}

.hero-buttons,
.auth-inline-links,
.quick-links{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
}

.cards-grid,
.impact-grid,
.footer-grid,
.dashboard-grid,
.contact-layout,
.donation-layout{
  gap: 24px !important;
}

.impact-bar{
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(245,249,252,.9)) !important;
  border: 1px solid var(--aufa-line) !important;
  border-radius: var(--aufa-radius-xl) !important;
  box-shadow: var(--aufa-shadow-soft) !important;
  margin-top: -54px !important;
  position: relative;
  z-index: 3;
}

.info-panel,
.form-card,
.panel,
.card,
.table-card,
.stat-card,
.feature-item,
.contact-card,
.donation-card,
.quick-card,
.welcome-banner,
.list-row{
  border-radius: var(--aufa-radius-lg) !important;
  border: 1px solid rgba(219,231,245,.9) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,251,255,.96)) !important;
  box-shadow: var(--aufa-shadow-card) !important;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.info-panel:hover,
.form-card:hover,
.panel:hover,
.card:hover,
.table-card:hover,
.stat-card:hover,
.feature-item:hover,
.contact-card:hover,
.donation-card:hover,
.quick-card:hover,
.welcome-banner:hover,
.list-row:hover{
  transform: translateY(-5px);
  box-shadow: var(--aufa-shadow-hover) !important;
}

.feature-item,
.contact-card,
.quick-card,
.stat-card{
  position:relative;
  overflow:hidden;
}
.feature-item::before,
.contact-card::before,
.quick-card::before,
.stat-card::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:4px;
  background: linear-gradient(90deg, var(--aufa-accent-color,#0d47a1), var(--aufa-warm));
}

.card-content h3,
.feature-item strong,
.panel h2,
.info-panel h2,
.form-card h2,
.contact-card h3,
.quick-card h3,
.stat-card h3,
.table-card h3,
.welcome-banner h2{
  color: var(--aufa-heading-color,#0d47a1) !important;
  letter-spacing:-.02em;
}

.big-number{
  font-size: clamp(34px, 5vw, 52px) !important;
  line-height:1 !important;
  color: var(--aufa-heading-color,#0d47a1) !important;
}

.form-group input,
.form-group textarea,
.form-group select,
.auth-form input,
.auth-form textarea,
.auth-form select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
textarea,
select{
  border-radius: 16px !important;
  border: 1px solid rgba(197,215,230,.94) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
input:focus,
textarea:focus,
select:focus{
  outline:none !important;
  border-color: color-mix(in srgb, var(--aufa-accent-color,#0d47a1) 56%, white) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--aufa-accent-color,#0d47a1) 16%, transparent) !important;
  transform: translateY(-1px);
}

footer{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 16%, rgba(255,255,255,.12), transparent 24%),
    linear-gradient(135deg, color-mix(in srgb, var(--aufa-footer-bg,#0d47a1) 88%, #10243c), var(--aufa-footer-bg,#0d47a1)) !important;
}
footer::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
}
footer .footer-col h3{
  font-size: 18px;
  margin-bottom: 14px !important;
}
footer a:hover{
  color:#fff !important;
  transform: translateX(2px);
}


.subtle-admin-link{
  display:inline !important;
  margin:0 !important;
  padding:0 !important;
  border:none !important;
  background:none !important;
  box-shadow:none !important;
  color:inherit !important;
  font-size:inherit !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  opacity:1 !important;
}
.subtle-admin-link:hover{
  color:#fff !important;
}


#scrollProgress{
  position:fixed;
  top:0;
  left:0;
  height:3px;
  width:0%;
  background: linear-gradient(90deg, var(--aufa-accent-color,#0d47a1), var(--aufa-warm));
  box-shadow: 0 0 16px rgba(13,71,161,.22);
  z-index:2000;
}

#backToTop{
  position:fixed;
  right:18px;
  bottom:18px;
  width:50px;
  height:50px;
  border:none;
  border-radius:999px;
  background: linear-gradient(135deg, var(--aufa-accent-color,#0d47a1), color-mix(in srgb, var(--aufa-accent-color,#0d47a1) 70%, white));
  color:#fff;
  box-shadow: 0 18px 36px rgba(13,71,161,.22);
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:1400;
  opacity:0;
  visibility:hidden;
  transform: translateY(12px);
  transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
}
#backToTop.is-visible{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}

body{
  animation: pageFadeIn .45s ease both;
}
@keyframes pageFadeIn{
  from{opacity:0; transform:translateY(12px)}
  to{opacity:1; transform:translateY(0)}
}

[data-reveal]{
  opacity:0;
  transform: translateY(20px);
  transition: opacity .55s ease, transform .55s ease;
}
[data-reveal].is-visible{
  opacity:1;
  transform: translateY(0);
}

img[loading="lazy"]{
  background: linear-gradient(90deg, rgba(13,71,161,.05), rgba(13,71,161,.12), rgba(13,71,161,.05));
  background-size:200% 100%;
  animation: imagePulse 1.1s linear infinite;
}
@keyframes imagePulse{
  from{background-position:200% 0}
  to{background-position:-200% 0}
}

@media (max-width: 960px){
  .hero h1,
  .auth-hero h1{
    max-width:none;
  }
}

@media (max-width: 860px){
  .nav-area{
    background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,251,255,.92)) !important;
    border: 1px solid rgba(219,231,245,.96);
    border-radius: 20px;
    padding:12px;
    box-shadow: var(--aufa-shadow-soft);
  }
  .impact-bar{
    margin-top: -34px !important;
  }
  .hero,
  .auth-hero{
    border-radius: 0 0 28px 28px;
  }
}