* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

body {

font-family: 'Poppins', sans-serif;

min-height: 100vh;

background:
linear-gradient(
rgba(15, 23, 42, 0.85),
rgba(15, 23, 42, 0.90)
),
url('../images/welcome-bg.jpg');

background-size: cover;
background-position: center;
background-repeat: no-repeat;

color: #ffffff;
}

.container {

width: 100%;

min-height: 100vh;

padding: 30px 20px;

display: flex;

justify-content: center;

align-items: center;
}

/* CARDS */

.glass-card,
.dashboard-card {

width: 100%;

max-width: 1200px;

background:
rgba(
255,
255,
255,
0.10
);

backdrop-filter: blur(15px);

-webkit-backdrop-filter: blur(15px);

border:
1px solid
rgba(
255,
255,
255,
0.15
);

border-radius: 24px;

padding: 30px;

box-shadow:
0 10px 30px
rgba(
0,
0,
0,
0.30
);
}

.form-card {

max-width: 700px;
}

/* HEADER */

.dashboard-header {

text-align: center;

margin-bottom: 35px;
}

.logo {

width: 90px;

height: 90px;

margin: 0 auto 20px;

border-radius: 50%;

background: #facc15;

color: #111827;

display: flex;

justify-content: center;

align-items: center;

font-size: 28px;

font-weight: 700;
}

h1 {

margin-bottom: 10px;

font-size: 2rem;
}

h2 {

margin-bottom: 15px;
}

.subtitle {

color:
rgba(
255,
255,
255,
0.85
);

line-height: 1.7;
}

/* DASHBOARD */

.dashboard-section {

margin-top: 35px;
}

.dashboard-section h2 {

color: #facc15;

margin-bottom: 15px;
}

/* STATS */

.stats-grid {

display: grid;

grid-template-columns:
repeat(
auto-fit,
minmax(180px,1fr)
);

gap: 15px;
}

.stat-card {

background:
rgba(
255,
255,
255,
0.12
);

border-radius: 18px;

padding: 25px 15px;

text-align: center;
}

.stat-card h3 {

color: #facc15;

font-size: 2rem;

margin-bottom: 8px;
}

.stat-card p {

font-size: 14px;
}

/* TOOLS */

.tools-grid {

display: grid;

grid-template-columns:
repeat(
auto-fit,
minmax(220px,1fr)
);

gap: 15px;
}

/* FORMS */

.form-group {

margin-bottom: 18px;
}

input,
select,
textarea {

width: 100%;

padding: 15px;

border: none;

border-radius: 14px;

outline: none;

font-size: 16px;

font-family: inherit;

background:
rgba(
255,
255,
255,
0.95
);

color: #111827;
}

textarea {

min-height: 120px;

resize: vertical;
}

/* BUTTONS */

.main-btn,
.submit-btn,
.tool-btn {

display: flex;

justify-content: center;

align-items: center;

width: 100%;

min-height: 60px;

padding: 15px;

border: none;

border-radius: 16px;

background: #2563eb;

color: white;

text-decoration: none;

font-weight: 600;

cursor: pointer;

transition: 0.3s;
}

.main-btn:hover,
.submit-btn:hover,
.tool-btn:hover {

transform: translateY(-3px);
}

.secondary-btn {

display: flex;

justify-content: center;

align-items: center;

width: 100%;

min-height: 60px;

padding: 15px;

border-radius: 16px;

background: #facc15;

color: #111827;

text-decoration: none;

font-weight: 600;

transition: 0.3s;
}

.secondary-btn:hover {

transform: translateY(-3px);
}

.souls-btn {

background: #16a34a !important;

color: white !important;
}

.logout-btn {

display: inline-block;

padding: 14px 30px;

border-radius: 14px;

background: #ef4444;

color: white;

text-decoration: none;

font-weight: 600;
}

.back-btn {

display: inline-block;

margin-bottom: 20px;

padding: 12px 20px;

background: #facc15;

color: #111827;

text-decoration: none;

border-radius: 12px;

font-weight: 600;
}

.logout-area {

text-align: center;

margin-top: 30px;
}

.button-group {

display: flex;

flex-direction: column;

gap: 15px;
}

/* ERROR */

.error-message {

color: #f87171;

margin-top: 15px;

display: none;
}

/* MOBILE */

@media (max-width: 768px) {

.dashboard-card,
.glass-card {

padding: 20px;

}

h1 {

font-size: 1.7rem;

}

.logo {

width: 75px;
height: 75px;
font-size: 24px;

}

.stats-grid {

grid-template-columns:
  repeat(
    2,
    1fr
  );

}

.tools-grid {

grid-template-columns: 1fr;

}

}
.hero-overlay {

min-height: 100vh;

display: flex;

justify-content: center;

align-items: center;

padding: 20px;
}

.login-card {

width: 100%;

max-width: 600px;

text-align: center;

background:
rgba(
255,
255,
255,
0.10
);

backdrop-filter: blur(18px);

border-radius: 24px;

padding: 40px 30px;

border:
1px solid
rgba(
255,
255,
255,
0.15
);
}

.church-badge {

width: 100px;

height: 100px;

margin: 0 auto 20px;

border-radius: 50%;

background: #facc15;

color: #111827;

font-size: 30px;

font-weight: 700;

display: flex;

justify-content: center;

align-items: center;
}

.login-card h1 {

font-size: 2.4rem;

margin-bottom: 10px;
}

.login-card h2 {

color: #facc15;

margin-bottom: 20px;

font-size: 1.2rem;
}

.hero-text {

margin-bottom: 25px;

line-height: 1.8;

color:
rgba(
255,
255,
255,
0.9
);
}

.feature-list {

display: grid;

gap: 10px;

margin-bottom: 30px;
}

.feature-list span {

background:
rgba(
255,
255,
255,
0.08
);

padding: 10px;

border-radius: 12px;
}