:root{  
      --bg:#f3e8ff;  
      --deep:#1a0b29;  
      --gold1:#ffd166;  
      --gold2:#ffb347;  
      --card:#fff3e6;  
      --accent:#7b2cbf;  
      --muted:#b98bd9;  
      --glass: rgba(255,255,255,0.12);  
      --shadow: 0 6px 18px rgba(0,0,0,0.15);  
      --radius:18px;  
      font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;  
    }  
    *{box-sizing:border-box; margin:0; padding:0;}  
    body{  
      margin:0;  
      background: linear-gradient(180deg,#f7ecff 0%, #efe0ff 50%);  
      color:#222;  
      -webkit-font-smoothing:antialiased;  
      -moz-osx-font-smoothing:grayscale;  
      min-height:100vh;  
      display:flex;flex-direction:column;  
    }  
    /* Views */  
.view {  
  display: none;  
}  
.view.active {  
  display: block;  
}  

/* Top nav */  
.topbar{  
  padding:12px 16px 6px;  
  display:flex;align-items:center;gap:12px;  
}  
.logo{  
  background:linear-gradient(90deg,var(--gold1),var(--gold2));  
  padding:8px 12px;border-radius:10px;color:#fff;font-weight:700;box-shadow:var(--shadow);  
  display:inline-flex;align-items:center;gap:8px;font-size:15px;  
  cursor: pointer;  
}  

.container{  
  padding:0 12px 80px;flex:1;max-width:980px;margin:0 auto;width:100%;  
}  

/* Updated Balance Section */  
.balance-card{  
  background:linear-gradient(180deg,#1b0f28 0%, #2d173f 100%);  
  color:#fff;  
  border-radius:16px;padding:16px 14px;margin-bottom:10px;box-shadow:0 8px 20px rgba(30,0,70,0.25);  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
}  
.balance-info {  
  flex: 1;  
}  
.balance-label{  
  font-size:13px;opacity:0.9;color:#e7c07a; margin-bottom: 6px;  
}  
.balance-amount{  
  font-size:28px;font-weight:800;color:var(--gold1); line-height: 1;  
}  
.balance-actions {  
  display: flex;  
  gap: 6px;  
}  
.balance-btn {  
  background: rgba(255,255,255,0.1);  
  border: 1px solid rgba(255,255,255,0.2);  
  color: white;  
  padding: 6px 12px;  
  border-radius: 10px;  
  font-size: 11px;  
  font-weight: 600;  
  cursor: pointer;  
  transition: all 0.2s;  
}  
.balance-btn:hover {  
  background: rgba(255,255,255,0.2);  
}  

/* Quick Actions Row */  
.quick-row{  
  display:flex;gap:8px;margin:12px 0 14px;flex-wrap:wrap;  
  justify-content:space-between;  
}  
.quick{  
  background:linear-gradient(180deg,#fff 0%, #fff0 100%);  
  padding:8px 4px;border-radius:12px;flex:1;min-width:55px;text-align:center;  
  box-shadow:var(--shadow);max-width:20%;cursor:pointer;transition:transform 0.2s;  
}  
.quick:hover {  
  transform: translateY(-2px);  
}  
.quick .icon{  
  font-size:18px;margin-bottom:2px;  
}  
.quick .label{  
  font-size:10px;color:#8b6b9f;font-weight:600;  
}  
.quick:nth-child(5) .label{  
  font-size:9px;  
}  
.quick:nth-child(6){  
  background:linear-gradient(90deg,#4a2a7b,#5a3a8b);  
  color:#fff;  
}  
.quick:nth-child(6) .label{  
  color:#e7c07a;  
}  

.section-title{  
  display:flex;align-items:center;gap:8px;margin:6px 0 10px;color:#5a2f7b  
}  
.section-title h3{  
  margin:0;font-size:16px  
}  

/* Welfare Products */  
.welfare-card{  
  background:linear-gradient(180deg,#fff 0%, #fff3e6 100%);  
  border-radius:16px;padding:14px;margin-bottom:12px;box-shadow:var(--shadow);  
}  
.welfare-header{  
  display:flex;align-items:center;gap:10px;margin-bottom:10px;  
}  
.welfare-badge{  
  background:linear-gradient(135deg,#ffd966,#ffb86b);  
  padding:5px 10px;border-radius:8px;font-weight:800;font-size:13px;color:#552400;  
}  
.welfare-title{  
  font-size:16px;font-weight:700;margin:0;color:#333;  
}  
.welfare-details{  
  display:flex;justify-content:space-between;margin-bottom:10px;  
}  
.income-group{  
  text-align:center;  
}  
.income-label{  
  font-size:11px;color:#8b6b9f;  
}  
.income-value{  
  font-size:15px;font-weight:800;color:#ff6b6b;  
  margin-top:2px;  
}  
.welfare-invest{  
  background:linear-gradient(180deg,var(--gold1),var(--gold2));  
  padding:10px;border-radius:14px;border:none;font-weight:800;font-size:15px;  
  color:#422d00;width:100%;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,0.12);  
  transition:transform 0.2s;  
}  
.welfare-invest:hover {  
  transform: translateY(-2px);  
}  

/* Main Project Cards */  
.card{  
  display:flex;gap:12px;background:linear-gradient(180deg,#fff 0%, #fff3e6 100%);  
  padding:10px;border-radius:16px;box-shadow:var(--shadow);align-items:center;  
  margin-bottom:12px;overflow:hidden  
}  
.card .thumb{  
  width:100px;height:100px;border-radius:10px;flex-shrink:0;  
  background:linear-gradient(135deg,#ffd966,#ffb86b);  
  display:flex;align-items:center;justify-content:center;  
  color:#552400;font-weight:800;font-size:22px  
}  
.card .content{  
  flex:1;padding:4px 2px  
}  
.card h4{  
  margin:2px 0 4px;font-size:16px  
}  
.meta{  
  color:#6b4d79;font-size:12px;line-height:1.5  
}  
.meta b{  
  color:#f05454  
}  

.invest-btn{  
  margin-top:8px;background:linear-gradient(180deg,var(--gold1),var(--gold2));  
  padding:8px 14px;border-radius:14px;border:none;font-weight:700;  
  box-shadow:0 4px 10px rgba(0,0,0,0.12);cursor:pointer;width:100%;  
  transition:transform 0.2s;  
}  
.invest-btn:hover {  
  transform: translateY(-2px);  
}  

/* Order Page Styles */  
.order-card {  
  background:linear-gradient(180deg,#fff 0%, #fff3e6 100%);  
  border-radius:16px;padding:14px;margin-bottom:12px;box-shadow:var(--shadow);  
}  
.order-header {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  margin-bottom: 14px;  
  padding-bottom: 10px;  
  border-bottom: 1px solid #eee;  
}  
.order-item {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  padding: 10px 0;  
  border-bottom: 1px solid #f5f5f5;  
}  
.order-item:last-child {  
  border-bottom: none;  
}  
.order-status {  
  padding: 3px 10px;  
  border-radius: 16px;  
  font-size: 11px;  
  font-weight: 600;  
}  
.status-active {  
  background: #e8f5e9;  
  color: #2e7d32;  
}  
.status-locked {  
  background: #fff3e0;  
  color: #ef6c00;  
}  
.status-expired {  
  background: #ffebee;  
  color: #c62828;  
}  
.withdraw-btn {  
  background:linear-gradient(180deg,#4CAF50,#2E7D32);  
  padding: 8px 14px;  
  border-radius:12px;  
  border:none;  
  color:white;  
  font-weight:600;  
  cursor:pointer;  
  font-size:13px;  
  width: 100%;  
  margin-top: 8px;  
}  
.withdraw-btn:disabled {  
  background:#ccc;  
  cursor:not-allowed;  
}  
  
/* Countdown Timer - SMALLER */  
.countdown-timer {  
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);  
  color: white;  
  padding: 8px;  
  border-radius: 8px;  
  margin-top: 10px;  
  text-align: center;  
  font-weight: 600;  
  font-size: 12px;  
}  
.countdown-timer .time {  
  font-size: 14px;  
  font-weight: 800;  
  margin: 3px 0;  
  color: #ffd166;  
}  
.timer-label {  
  font-size: 10px;  
  opacity: 0.9;  
}  

/* bottom nav */  
.bottom-nav{  
  position:fixed;left:50%;transform:translateX(-50%);bottom:10px;  
  background:linear-gradient(180deg,#ffefdb,#ffdba3);width:92%;max-width:980px;  
  border-radius:18px;padding:8px 16px;display:flex;justify-content:space-around;  
  box-shadow:0 10px 25px rgba(0,0,0,0.12);z-index:1000;  
}  
.nav-item{  
  display:flex;flex-direction:column;align-items:center;font-size:11px;color:#4a2a5b;  
  cursor:pointer;transition:all 0.2s;padding:4px;  
}  
.nav-item.active {  
  color: #7b2cbf;  
  transform: translateY(-3px);  
}  
.nav-item:hover {  
  transform: translateY(-2px);  
}  

/* Whatsapp Floating Button */  
.whatsapp-float {  
  position: fixed;  
  bottom: 75px;  
  right: 15px;  
  width: 50px;  
  height: 50px;  
  background: linear-gradient(135deg, #25D366, #128C7E);  
  border-radius: 50%;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);  
  z-index: 1001;  
  cursor: pointer;  
  transition: all 0.2s;  
}  
.whatsapp-float:hover {  
  transform: scale(1.05);  
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);  
}  
.whatsapp-float img {  
  width: 25px;  
  height: 25px;  
}  
.whatsapp-float::before {  
  content: "Need Help?";  
  position: absolute;  
  top: -35px;  
  right: 0;  
  background: #25D366;  
  color: white;  
  padding: 4px 8px;  
  border-radius: 6px;  
  font-size: 11px;  
  font-weight: 600;  
  white-space: nowrap;  
  opacity: 0;  
  transition: opacity 0.2s;  
}  
.whatsapp-float:hover::before {  
  opacity: 1;  
}  
  
/* Shake Animation */  
@keyframes shake {  
  0%, 100% { transform: rotate(0deg) scale(1); }  
  25% { transform: rotate(-4deg) scale(1.03); }  
  75% { transform: rotate(4deg) scale(1.03); }  
}  
.shake {  
  animation: shake 0.4s ease-in-out;  
}  

/* MODAL OPTIMIZATIONS - BETTER VISIBILITY */  
.modal-backdrop{  
  position:fixed;inset:0;background:rgba(0,0,0,0.7);display:none;  
  align-items:center;justify-content:center;padding:15px;z-index:2000;  
  overflow-y: auto; /* Enable scrolling for tall modals */  
}  
.modal{  
  background:#fff;border-radius:12px;padding:16px;max-width:400px;width:100%;  
  box-shadow:0 15px 40px rgba(0,0,0,0.5);  
  max-height: 85vh; /* Limit modal height */  
  overflow-y: auto; /* Enable scrolling */  
  animation: modalSlideIn 0.3s ease-out;  
}  
@keyframes modalSlideIn {  
  from { opacity: 0; transform: translateY(-20px); }  
  to { opacity: 1; transform: translateY(0); }  
}  
.modal h3{  
  margin:0 0 8px; font-size: 18px;  
}  
.modal p{  
  color:#555; font-size: 14px; line-height: 1.4;  
}  
.modal .actions{  
  display:flex;gap:8px;justify-content:flex-end;margin-top:12px;  
  flex-wrap: wrap; /* Allow buttons to wrap on small screens */  
}  
.btn-ghost{  
  background:#f5f5f7;padding:8px 14px;border-radius:10px;border:none;  
  cursor:pointer; font-size: 14px; transition: all 0.2s;  
}  
.btn-ghost:hover {  
  background:#e5e5e7;  
}  
.btn-primary{  
  background:linear-gradient(180deg,var(--gold1),var(--gold2));  
  padding:8px 16px;border-radius:10px;border:none;font-weight:600;  
  cursor:pointer; font-size: 14px; transition: all 0.2s;  
}  
.btn-primary:hover {  
  transform: translateY(-2px);  
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);  
}  
.input-group {  
  margin: 12px 0;  
}  
.input-group label {  
  display:block;  
  margin-bottom: 5px;  
  font-weight: 600;  
  font-size: 14px;  
}  
.input-group input, .input-group select {  
  width:100%;  
  padding:10px;  
  border-radius:10px;  
  border:1px solid #ddd;  
  font-size:15px;  
  transition: border 0.2s;  
}  
.input-group input:focus, .input-group select:focus {  
  outline: none;  
  border-color: var(--accent);  
  box-shadow: 0 0 0 2px rgba(123, 44, 191, 0.2);  
}  
  
/* Admin Payment Styles - COMPACT */  
.admin-payment-info {  
  background: linear-gradient(135deg, #25D366, #128C7E);  
  color: white;  
  padding: 15px;  
  border-radius: 10px;  
  margin: 12px 0;  
  text-align: center;  
}  
.admin-payment-info h4 {  
  margin: 0 0 10px 0;  
  font-size: 16px;  
}  
.admin-payment-info .phone-number {  
  font-size: 22px;  
  font-weight: 800;  
  margin: 8px 0;  
  color: #ffd166;  
  letter-spacing: 0.5px;  
}  
.admin-payment-info .admin-name {  
  font-size: 14px;  
  margin: 6px 0;  
  opacity: 0.9;  
}  
.transaction-steps {  
  text-align: left;  
  background: #f9f9f9;  
  padding: 14px;  
  border-radius: 10px;  
  margin: 12px 0;  
  font-size: 13px;  
}  
.transaction-steps ol {  
  margin: 0;  
  padding-left: 18px;  
}  
.transaction-steps li {  
  margin-bottom: 6px;  
  line-height: 1.4;  
}  
.processing {  
  display: none;  
  text-align: center;  
  padding: 20px 0;  
}  
.processing-spinner {  
  width: 40px;  
  height: 40px;  
  border: 4px solid #f3f3f3;  
  border-top: 4px solid #25D366;  
  border-radius: 50%;  
  animation: spin 0.8s linear infinite;  
  margin: 0 auto 12px;  
}  
@keyframes spin {  
  0% { transform: rotate(0deg); }  
  100% { transform: rotate(360deg); }  
}  
.transaction-verification {  
  display: none;  
}  
.transaction-success {  
  text-align: center;  
  padding: 15px;  
  display: none;  
}  
.transaction-success-icon {  
  font-size: 40px;  
  margin-bottom: 12px;  
  color: #25D366;  
}  
.pending-transactions {  
  background: #fff8e1;  
  padding: 14px;  
  border-radius: 10px;  
  margin-top: 16px;  
  border-left: 4px solid #ffb300;  
}  
.pending-transactions h4 {  
  margin-top: 0;  
  color: #5a2f7b;  
  font-size: 16px;  
}  
.transaction-item {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  padding: 8px 0;  
  border-bottom: 1px solid #eee;  
}  
.transaction-item:last-child {  
  border-bottom: none;  
}  
.transaction-status {  
  padding: 3px 8px;  
  border-radius: 16px;  
  font-size: 11px;  
  font-weight: 600;  
}  
.status-pending {  
  background: #fff3e0;  
  color: #ef6c00;  
}  
.status-verified {  
  background: #e8f5e9;  
  color: #2e7d32;  
}  

/* TOAST NOTIFICATION */  
.toast {  
  position: fixed;  
  left: 50%;  
  transform: translateX(-50%);  
  bottom: 100px;  
  background: #4CAF50;  
  color: #fff;  
  padding: 10px 18px;  
  border-radius: 10px;  
  opacity: 0;  
  transition: all 0.3s;  
  z-index: 1001;  
  font-weight: 600;  
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);  
  max-width: 90%;  
  text-align: center;  
  font-size: 14px;  
}  
.toast.error {  
  background: #ff6b6b;  
}  

/* responsiveness */  
@media (max-width:600px){  
  .card{  
    flex-direction:row;gap:10px  
  }  
  .thumb{  
    width:85px;height:85px; font-size: 20px;  
  }  
  .container{  
    padding:0 10px 100px  
  }  
  .balance-card{  
    padding:12px  
  }  
  .balance-amount {  
    font-size: 24px;  
  }  
  .quick{  
    min-width:50px;  
  }  
  .quick .label{  
    font-size:9px;  
  }  
  .whatsapp-float {  
    bottom: 70px;  
    right: 12px;  
    width: 45px;  
    height: 45px;  
  }  
  .whatsapp-float img {  
    width: 22px;  
    height: 22px;  
  }  
  .admin-payment-info .phone-number {  
    font-size: 20px;  
  }  
  .modal {  
    padding: 14px;  
    max-height: 90vh;  
  }  
  .modal h3 {  
    font-size: 17px;  
  }  
  .modal .actions {  
    justify-content: center; /* Center buttons on mobile */  
  }  
  .modal .actions button {  
    flex: 1; /* Make buttons take equal space */  
    min-width: 120px;  
  }  
}