:root{
  --green:#7cb342;
  --green-dark:#588a1f;
  --green-light:#eef6e4;
  --text-dark:#1c2b1f;
  --white:#ffffff;
  --radius:12px;
  --shadow:0 2px 10px rgba(0,0,0,.06);
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Segoe UI',Roboto,Arial,sans-serif;
  background:#fff;
  color:var(--text-dark);
}
a{text-decoration:none;color:inherit;}

/* ===== NAVBAR ===== */
.navbar{
  background:linear-gradient(90deg,#8bc34a,#689f38);
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 30px;flex-wrap:wrap;position:sticky;top:0;z-index:100;
}
.navbar .logo{color:#fff;font-size:22px;font-weight:800;}
.navbar nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.navbar nav a{color:#fff;font-weight:600;font-size:15px;display:flex;align-items:center;gap:6px;}
.navbar nav a:hover{opacity:.85;}
.navbar .balance-pill{
  background:rgba(255,255,255,.25);color:#fff;padding:8px 16px;
  border-radius:30px;font-weight:700;
}
.navbar .user-pill{color:#fff;font-weight:700;display:flex;align-items:center;gap:6px;}
.navbar-toggle{display:none;color:#fff;font-size:24px;background:none;border:none;}

/* ===== HERO ===== */
.hero{text-align:center;padding:60px 20px 20px;}
.hero h1{font-size:56px;font-weight:900;color:var(--text-dark);margin:0;}
.hero p{font-size:26px;color:var(--text-dark);margin:14px auto 0;max-width:720px;}

/* ===== CARD / FORM ===== */
.card{
  background:var(--green-light);
  border-radius:20px;
  padding:30px;
  box-shadow:var(--shadow);
}
.form-wrap{max-width:820px;margin:30px auto;padding:0 20px;}
.input-icon{
  display:flex;align-items:center;background:var(--green-light);
  border-radius:30px;padding:6px 10px;margin-bottom:18px;
}
.input-icon .icon{
  width:38px;height:38px;background:var(--green);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;
}
.input-icon input, .input-icon select{
  border:none;background:transparent;outline:none;width:100%;
  padding:12px 14px;font-size:15px;color:var(--text-dark);
}
.forgot-link{color:var(--green-dark);font-weight:600;font-size:13px;white-space:nowrap;padding-right:10px;}

.btn{
  display:inline-block;background:var(--green);color:#fff;border:none;
  padding:14px 26px;border-radius:30px;font-weight:700;cursor:pointer;
  font-size:15px;transition:.2s;
}
.btn:hover{background:var(--green-dark);}
.btn-block{width:100%;text-align:center;}
.btn-google{background:#6cb33f;}

/* ===== STAT CARDS (dashboard) ===== */
.stats{display:flex;gap:20px;padding:20px 30px;flex-wrap:wrap;}
.stat-card{
  flex:1;min-width:260px;background:#fff;border:1px solid #eee;border-radius:16px;
  box-shadow:var(--shadow);padding:20px;display:flex;gap:14px;align-items:flex-start;
}
.stat-icon{
  width:50px;height:50px;border-radius:50%;background:var(--green-light);
  display:flex;align-items:center;justify-content:center;color:var(--green-dark);font-size:20px;
}
.stat-card h3{margin:0;font-size:14px;letter-spacing:.5px;color:#555;text-transform:uppercase;}
.stat-card .value{font-size:26px;font-weight:800;margin:4px 0;}
.stat-card .sub{font-size:13px;color:#777;}

/* ===== DASHBOARD LAYOUT ===== */
.dash-grid{display:flex;gap:24px;padding:10px 30px 40px;flex-wrap:wrap;}
.dash-left{flex:1.3;min-width:340px;}
.dash-right{flex:1;min-width:300px;}
.tabs{display:flex;gap:30px;border-bottom:2px solid #eee;margin-bottom:20px;}
.tab{padding:10px 4px;font-weight:700;color:#888;cursor:pointer;border-bottom:3px solid transparent;}
.tab.active{color:var(--green-dark);border-color:var(--green);}

.field-label{font-weight:700;margin:16px 0 6px;font-size:14px;}
.support-box p{margin:6px 0;font-size:14px;}
.support-box a{color:var(--green-dark);font-weight:700;}
.reco-box{background:var(--green-light);border-radius:14px;padding:16px 20px;margin-top:18px;font-size:14px;}
.reco-box b{color:var(--text-dark);}

/* ===== TABLE ===== */
.table-wrap{overflow-x:auto;margin:20px 30px;border-radius:14px;box-shadow:var(--shadow);}
table{width:100%;border-collapse:collapse;background:#fff;min-width:700px;}
thead tr{background:linear-gradient(90deg,#8bc34a,#689f38);color:#fff;}
th,td{padding:14px 16px;text-align:left;font-size:14px;}
tbody tr{border-bottom:1px solid #f0f0f0;}
tbody tr:hover{background:#fafafa;}
.badge{padding:5px 12px;border-radius:20px;font-size:12px;font-weight:700;color:#fff;}
.badge.rate{background:var(--green);}
.badge.min{background:#2196f3;}
.badge.max{background:#e53935;}
.badge.time{background:#f9a825;color:#333;}
.status{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700;}
.status.Completed{background:#e6f4ea;color:#1e7e34;}
.status.Pending{background:#fff8e1;color:#a67c00;}
.status.Cancel,.status.Canceled{background:#fdecea;color:#c62828;}
.status.Partial,.status.Processing,.status.In.progress{background:#e3f2fd;color:#1565c0;}
.btn-sm{padding:6px 14px;font-size:12px;border-radius:20px;}

/* ===== SEARCH BAR ===== */
.search-bar{display:flex;gap:14px;padding:20px 30px 0;flex-wrap:wrap;}
.search-bar input{flex:1;padding:14px 20px;border-radius:30px;border:1px solid #ddd;min-width:200px;}
.search-bar button{background:var(--green);color:#fff;border:none;border-radius:10px;padding:0 22px;cursor:pointer;}
.filter-btn{background:var(--green);color:#fff;border:none;padding:14px 22px;border-radius:30px;font-weight:700;cursor:pointer;}

/* ===== FOOTER ===== */
.app-banner{
  background:linear-gradient(90deg,#8bc34a,#689f38);color:#fff;
  display:flex;justify-content:space-between;align-items:center;
  padding:30px 40px;flex-wrap:wrap;gap:14px;margin-top:40px;
}
.app-banner h2{margin:0;font-size:26px;}
.app-banner .btn{background:#fff;color:var(--green-dark);}
.site-footer{
  background:#0d0d0d;color:#ccc;display:flex;justify-content:space-between;
  padding:16px 40px;font-size:14px;flex-wrap:wrap;gap:10px;
}
.site-footer a{color:#ccc;margin-left:18px;}

/* ===== WHATSAPP BUTTON ===== */
.wa-float{
  position:fixed;bottom:24px;right:24px;background:#25d366;color:#fff;
  width:56px;height:56px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:26px;box-shadow:0 4px 14px rgba(0,0,0,.25);z-index:200;
}

/* ===== AUTH PAGES ===== */
.auth-wrap{max-width:520px;margin:40px auto;padding:0 20px;}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .hero h1{font-size:36px;}
  .hero p{font-size:18px;}
  .navbar nav{display:none;flex-direction:column;width:100%;background:#689f38;padding:14px 0;}
  .navbar nav.open{display:flex;}
  .navbar-toggle{display:block;}
  .dash-grid{flex-direction:column;padding:10px 16px 30px;}
  .stats{padding:16px;}
  .table-wrap,.search-bar{margin:16px;}
}
@media(max-width:600px){
  .navbar{padding:12px 16px;}
  .hero{padding:30px 14px 10px;}
  .form-wrap{margin:16px auto;}
}

/* ===== ADMIN ===== */
.admin-wrap{display:flex;min-height:100vh;}
.admin-sidebar{
  width:230px;background:#1c2b1f;color:#fff;padding:20px 0;flex-shrink:0;
}
.admin-sidebar .logo{padding:0 20px 20px;font-size:20px;font-weight:800;color:var(--green);}
.admin-sidebar a{display:block;padding:12px 22px;color:#ccc;font-weight:600;font-size:14px;}
.admin-sidebar a:hover,.admin-sidebar a.active{background:var(--green);color:#fff;}
.admin-main{flex:1;background:#f5f7f4;padding:24px;}
.admin-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.admin-cards{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:24px;}
.admin-card{background:#fff;border-radius:14px;padding:20px;flex:1;min-width:200px;box-shadow:var(--shadow);}
.admin-card h4{margin:0 0 8px;color:#777;font-size:13px;text-transform:uppercase;}
.admin-card .val{font-size:24px;font-weight:800;color:var(--text-dark);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-grid label{font-weight:700;font-size:13px;display:block;margin-bottom:6px;}
.form-grid input,.form-grid select,.form-grid textarea{
  width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:8px;font-size:14px;
}
@media(max-width:800px){.admin-wrap{flex-direction:column;}.admin-sidebar{width:100%;}.form-grid{grid-template-columns:1fr;}}