body {
  margin: 0;
  font-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
  color: #f3f7fa;
  background: #141b2d;
  background-size: cover;
}

/* Background */
.landing-bg { 
  max-height: 100vh; 
  background: 
    url('/images/landing-bg.jpg') no-repeat center center/cover, 
    linear-gradient(125deg, #12274d 65%, #113757 100%);
  background-blend-mode: multiply;
  position: relative;
  overflow-x: hidden; 
  overflow-y: auto; 
  background-blend-mode: multiply;
   background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;  /* makes it stay full-screen and no corner issue */

  font-family: 'Inter', 'Nunito', sans-serif;
  font-family: 'Inter', 'Nunito', sans-serif;
}

/* Dark overlay */
.overlay {
  position: fixed;
  top:0; left:0; right:0; bottom:0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

/* Main content positioning */
.landing-content {
  position: relative;
  left: 8vw;
  top: 50%;
  margin-top: 35vh;
  transform: translateY(-50%);
  z-index: 2;
  max-width: 600px;
  color: #fff;
}

/* Logo */
.logo-img {
  width: 60px;
  margin-bottom: 10px;
}

/* Headings */
.title {
  font-size: 3.8rem;
  font-weight: 800;
  margin: 5px 0;
}

.subtitle {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 20px;
}

/* Description text */
.description {
  font-size: 1.15rem;
  line-height: 1.65;
  margin-bottom: 25px;
}

/* Buttons */
.btn {
  padding: 12px 26px;
  font-size: 1.05rem;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  display: inline-block;
  transition: 0.25s ease;
}

.btn-accent {
  background: #00d4ff;
  color: #000;
  margin-right: 14px;
}

.btn-accent:hover {
  background: #00b2d1;
}

.btn-secondary {
  border: 2px solid #fff;
  color: #fff;
}

.btn-secondary:hover {
  background: #fff;
  color: #000;
}

/* Responsive */
@media (max-width: 768px) {
  .landing-content {
    left: 5vw;
    max-width: 90%;
  }

  .title {
    font-size: 2.8rem;
  }

  .subtitle {
    font-size: 1.4rem;
  }

  .description {
    font-size: 1rem;
  }
}





h1 { font-size: 2.6em; margin: 0.25em 0; font-weight: 800; letter-spacing: 0.04em;}
h2 { font-size: 1.4em; font-weight: 600; margin-bottom: 0.2em;}
.logo-icon img { background: #1af2ee26; border-radius: 12px; }
.landing-buttons { margin-top: 1.2em; }
.btn { display: inline-block; padding: 0.7em 2em; font-size: 1em; border-radius: 1.6em; border:none; background:#232a43; color:#fff; font-weight: 600; cursor:pointer; margin: 0 1em 0 0; text-decoration: none; transition: background .14s;}
.btn-accent { background: linear-gradient(90deg, #12d7ff, #43f6f7 80%); color:#0a0f1e; border: none;}
.btn-secondary { background:#262f48; color:#fff;}
.btn-danger { background: #f34a5a; color:#fff;}
.btn-small { font-size: 0.91em; padding: 0.38em 1.1em; border-radius: 1.8em; }
.btn:hover { filter: brightness(1.12);}
.tab {color:#89c8fc; background: none; padding:.25em 0.7em; margin-right:.25em; border-radius: 1.3em;}
.tab.active {background:#12d7ff25;color:#16fff1;}
.alert {padding:.7em 1em; margin: 1em 0 0.7em; border-radius:10px;}
.alert.danger {background:#f34a5a33; color: #ffb2b2;}
.alert.success {background:#42dc9e44; color: #83ffbd;}
.auth-bg { min-height: 100vh; background: linear-gradient(115deg, #142b44 78%, #111a25 100%);}
.auth-card { background:#212634; max-width:400px; margin: 5vw auto 0; padding:2.5em; border-radius:22px; box-shadow:0 3px 24px #10203633;}
.auth-card h2 { font-size:1.22em; }
.auth-card label { display:block; margin-top:1em; font-size:0.98em;}
.auth-card input, .auth-card select, .auth-card textarea { margin-top:.35em; width:100%; padding:.7em .95em; background:#171c2a; border:1px solid #222e43; color:inherit; border-radius:11px; font-size:1em;}
.auth-switch { font-size:.96em; margin-top:1.4em; color:#89c8fc;}
.auth-switch a {color:#14eaff;}
.dashboard-bg { background:linear-gradient(115deg, #101827 88%, #141b2d 100%) no-repeat; min-height:100vh;}
.dashboard-nav { display:flex; align-items:center; justify-content:space-between; background: #1e2333; padding:1.5em 3vw; border-radius:0 0 24px 24px; box-shadow:0 4px 32px #1b232e24;}
.logo-user {font-weight:800; font-size:1.38em; display:flex; align-items:center;}
.user-title {font-weight:700;}
.user-desc { display:block; font-size:0.68em; color:#4d67a3;}
.dashboard-actions .btn {margin-left:0.4em;}
.dashboard-analytics { display:flex; gap:1.7vw; margin:2.2em 2vw;}
.dashboard-card { background:#232a43; border-radius:22px; flex:1; padding:1.7em 1em; text-align:left; box-shadow:0 3px 16px #19e4fd12;}
.card-title {color:#a0d8f7; letter-spacing:.08em; font-weight:700;}
.card-value { font-size:2.1em; font-weight:900; margin-top:.2em;}
.status-dot { display:inline-block; width:1em; height:1em; border-radius:50%; margin-left:0.4em; vertical-align:middle;}
.status-dot.green { background:#13eab7;}
.status-dot.orange { background:#f3b741;}
.dashboard-filters { display:flex; align-items:center; gap:1vw; padding: 0 3vw 1vw; }
.dashboard-search { flex:1;}
.dashboard-search input[type="text"] { background:#191d29; border-radius:12px; border:1px solid #25315d;  color:#fff; padding:.7em 1.1em; font-size:1em;}
.dashboard-search button { background:#222c4c; color:#0cfaf0; border:none; border-radius:90px; padding:.7em 1.1em; font-size:1em;}
.filter-tabs { margin-right:.5em;}
.tab { font-weight:700;}
#add-member-btn { min-width: 150px;}
.dashboard-empty { text-align:center; margin: 5vw 0 2em; color:#92abdd;}
.member-card-list { display:flex; flex-wrap:wrap; gap:2vw; margin: 2vw 1vw;}
.member-card { background:#222a3b; border-radius:18px; min-width:230px; max-width:300px; padding:1.5em; margin-bottom:.6em; box-shadow:0 7px 16px #091c2357; flex:1;}
.member-title { font-size:1.14em; font-weight:700;}
.member-status { display:inline-block; border-radius:9px; padding:.1em .9em; font-size:.94em; font-weight:600;}
.member-status.green {background:#13eab766;color:#0efcbb;}
.member-status.orange {background:#f3b74166;color:#fec25a;}
.member-status.red {background:#fd757d68;color:#ef8797;}
.member-type {color:#22f5fe;font-size:.98em;margin-top:.25em;}
.member-field {margin-top:8px; color:#a3d6f9;}
.member-expiry-tip { background:#f3b74133; color:#fcf5be; padding:6px 14px; border-radius:10px; margin-top:.85em;}
.member-actions {margin-top:1em; display: flex; gap:.6em;}
.btn-edit { background: linear-gradient(90deg, #00ccff, #00ffbf 85%);}
.btn-danger { background: #e64b51;}
.btn-space{
  margin: 10px auto;
}
input[type="file"] {background:#171c2a;border:0;}
/* Modal */
.modal-bg { position:fixed;top:0;left:0;right:0;bottom:0;z-index:1100;background:rgba(10,16,22,0.68);}


/* .modal-content { background:#212a3b; border-radius:16px; box-shadow:0 7px 48px #212b3a99; max-width:420px; margin:3vw auto 0; padding:2.2em 1.5em; z-index:1102; position:relative;}
#member-form label {margin-top:1em;}
#member-form input, #member-form select, #member-form textarea {margin-top:.2em;} */

/* Center Modal */
#member-modal.modal-bg {
  display: none; 
  justify-content: center;
  align-items: center;
  padding: 10px;
}

/* When modal is open — JS adds .active */
#member-modal.modal-bg.active {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

/* Modal Box */
#member-modal .modal-content {
  width: 100%;
  max-width: 420px;
  background: #0f1624;
  padding: 18px;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0,0,0,0.5);
  color: white;
  margin: auto;
}

/* Title */
#member-modal h3 {
  margin-bottom: 10px;
  font-size: 18px;
  text-align: center;
}

/* Label */
#member-modal label {
  display: block;
  margin-top: 6px;
  margin-bottom: 3px;
  font-size: 13px;
}

/* Inputs & fields */
#member-modal input,
#member-modal select,
#member-modal textarea {
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #273347;
  background: #1a2335;
  color: white;
  font-size: 14px;
}

#member-modal textarea {
  min-height: 55px;
}

/* Button Row */
#member-modal .modal-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Buttons */
#member-modal .btn {
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  border: none;
}

#member-modal #modal-cancel {
  background: #2b3a50;
  color: white;
}

#member-modal .btn-accent {
  background: #38bdf8;
  color: black;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 420px) {
  #member-modal .modal-content {
    max-width: 95%;
    padding: 14px;
  }
}


.modal-actions {display:flex;justify-content:flex-end;gap:.8em;margin-top:1.7em;}
.bulk-upload { max-width:530px; margin: 5vw auto;}
.bulk-upload h2 { font-size:1.5em;}
.upload-section {margin-bottom:2em;}
.upload-info {font-size:.96em;}
.upload-info ul { margin: 1em 0 0 0.5em;}
.bulk-back { display:inline-block; color:#22f5fe; margin-bottom:2em;}
@media (max-width:600px) {
  .dashboard-analytics, .member-card-list, .dashboard-filters { flex-direction: column; gap: 0.7em; }
  .dashboard-bg { padding:0;}
  .dashboard-analytics { margin: 1.2em 1vw 0 1vw;}
  .bulk-upload { padding: 7vw;}
  .modal-content { min-width: 95vw; }
}