:root{
  --accent:#00d4b4;
  --accent-dark:#00a38a;
  --text-dark:#1a1a1a;
  --text-light:#555;
  --card:#fff;
  --border:rgba(0,0,0,0.1);
  --danger:#f85149;
  --logo-bg:#00a38a;
}

*{margin:0;padding:0;box-sizing:border-box}
body{min-height:100vh;background:#f2f4f8;font-family:'Inter',sans-serif;color:var(--text-dark);overflow-x:hidden}

/* LOGO */
.logo{display:flex;align-items:center;gap:0.5rem;margin-bottom:1.5rem}
.logo a{display:flex;align-items:center;gap:0.5rem;text-decoration:none}
.logo-icon{width:40px;height:40px;background:var(--logo-bg);color:#fff;font-weight:bold;font-size:1.2rem;display:flex;justify-content:center;align-items:center;border-radius:8px}
.logo-text{font-weight:600;font-size:1.1rem;color:var(--accent)}

/* LOGIN */
#login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;animation:fadeIn 1s ease forwards}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.login-card{width:100%;max-width:400px;background:#fff;border-radius:16px;padding:2rem;box-shadow:0 15px 40px rgba(0,0,0,0.15);position:relative;overflow:hidden;animation:cardEnter 0.8s ease forwards}
@keyframes cardEnter{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
.subtitle{text-align:center;color:var(--text-light);margin:0.5rem 0 1.5rem}
.form-group{margin-bottom:1.2rem}
label{display:block;font-size:.85rem;color:var(--text-light);margin-bottom:.3rem}
input{width:100%;padding:.8rem;border-radius:10px;border:1px solid var(--border);background:#f9f9f9;color:var(--text-dark)}
.password-wrap{position:relative}
.toggle-password{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer;font-size:1rem;color:var(--text-light)}
.toggle-password:hover{color:var(--accent)}
#login-btn{width:100%;padding:.8rem;border:none;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;font-weight:600;cursor:pointer;margin-top:0.5rem;transition:0.3s;display:flex;justify-content:center;align-items:center;gap:0.5rem}
#login-btn:hover{box-shadow:0 8px 25px rgba(0,212,180,.4);transform:translateY(-2px)}
.spinner{border:3px solid #f3f3f3;border-top:3px solid #00d4b4;border-radius:50%;width:18px;height:18px;animation:spin 0.8s linear infinite;display:none}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
#login-error{margin-top:0.8rem;text-align:center;font-size:.85rem;color:var(--danger)}
.login-links{display:flex;justify-content:space-between;margin-top:0.8rem;font-size:.85rem}
.login-links a{color:var(--accent);text-decoration:none;cursor:pointer}
.login-links a:hover{text-decoration:underline}

/* DASHBOARD */
#dashboard{display:none;padding:1.5rem;gap:1.5rem;flex-direction:column;animation:fadeIn 1s ease forwards}
.dashboard-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:1.5rem;background:#fff;padding:1rem 1.2rem;border-radius:16px;box-shadow:0 10px 25px rgba(0,0,0,0.05)}
.user-info{display:flex;align-items:center;gap:1rem}
.user-info img{width:50px;height:50px;border-radius:50%;object-fit:cover}
.user-details{display:flex;flex-direction:column}
.user-details span{font-size:.85rem;color:var(--text-light)}
.balance-container{display:flex;align-items:center;gap:0.6rem}
.balance-label{font-size:0.95rem;font-weight:500;color:var(--text-light)}
.balance-container strong{font-size:1.3rem;min-width:110px;text-align:right}
.balance-container button{border:none;background:none;cursor:pointer;font-size:1.2rem;color:var(--accent)}
.feature-cards{display:flex;overflow-x:auto;gap:1rem;padding:0.5rem 0;scroll-behavior:smooth}
.feature-cards::-webkit-scrollbar{height:8px}
.feature-cards::-webkit-scrollbar-thumb{background:var(--accent);border-radius:4px}
.feature-card{flex:0 0 90px;background:#fff;border-radius:16px;padding:0.8rem;text-align:center;box-shadow:0 8px 20px rgba(0,0,0,0.1);cursor:pointer;transition:0.3s;display:flex;flex-direction:column;align-items:center;gap:0.4rem}
.feature-card:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(0,212,180,0.3)}
.feature-card i{font-size:1.4rem;color:var(--accent)}
.feature-card h3{font-size:.8rem;color:var(--text-dark);text-align:center}
.table-wrapper{max-height:250px;overflow-y:auto;border-radius:12px;border:1px solid var(--border);background:#fff;box-shadow:0 5px 15px rgba(0,0,0,0.05)}
table{width:100%;border-collapse:collapse}
th,td{padding:.8rem;border-bottom:1px solid var(--border)}
th{color:var(--accent)}
.green{color:green;font-weight:500}
.red{color:red;font-weight:500}
.print-link{color:var(--accent);cursor:pointer;text-decoration:underline;font-size:0.85rem}
.print-link:hover{color:var(--accent-dark)}
#logout-btn{padding:.8rem 1rem;border:none;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;font-weight:600;cursor:pointer;margin-top:1rem;transition:0.3s}
#logout-btn:hover{box-shadow:0 12px 35px rgba(0,212,180,.5);transform:translateY(-2px)}
#modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.75);display:none;justify-content:center;align-items:center;z-index:200;animation:fadeIn 0.3s ease}
.modal-content{background:#fff;border-radius:16px;padding:2rem;text-align:center;max-width:380px;position:relative;color:var(--text-dark);animation:slideDown 0.3s ease}
@keyframes slideDown{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-content p{margin-bottom:1.5rem}
.modal-close{position:absolute;top:12px;right:12px;cursor:pointer;background:none;border:none;color:var(--danger);font-weight:bold;font-size:1.3rem}

/* Contact Us Floating Icon */
#contact-us-btn {
  position: fixed;
  right: 20px;
  bottom: 90px;
  width: 50px;
  height: 50px;
  background: #0b3c5d;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

#contact-us-btn i {
  font-size: 20px;
}

#contact-us-btn:hover {
  background: #145c8e;
}