:root{
  --ocean:#075985;
  --ocean-dark:#0f3f5f;
  --aqua:#06b6d4;
  --sand:#f5e6c8;
  --green:#16a34a;
  --danger:#dc2626;
  --warning:#d97706;
  --text:#0f172a;
  --muted:#64748b;
  --bg:#f1f8fb;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
a{text-decoration:none;color:inherit}
.hero{
  min-height:520px;color:white;
  background:linear-gradient(135deg,rgba(7,89,133,.95),rgba(6,182,212,.75)), url('../img/water.svg');
  background-size:cover;display:flex;align-items:center;
}
.container{max-width:1180px;margin:0 auto;padding:0 18px}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{font-size:24px;font-weight:800;display:flex;align-items:center;gap:10px}
.logo span{background:white;color:var(--ocean);padding:8px 10px;border-radius:12px}
.nav-links{display:flex;gap:14px;align-items:center}
.btn{display:inline-block;border:0;border-radius:12px;padding:12px 18px;font-weight:700;cursor:pointer}
.btn-primary{background:var(--aqua);color:white}
.btn-light{background:white;color:var(--ocean)}
.btn-danger{background:var(--danger);color:white}
.btn-success{background:var(--green);color:white}
.btn-warning{background:var(--warning);color:white}
.hero h1{font-size:48px;line-height:1.05;margin:50px 0 15px;max-width:760px}
.hero p{font-size:19px;max-width:680px;line-height:1.6}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:35px 0}
.card{background:white;border-radius:18px;box-shadow:0 10px 30px rgba(15,23,42,.08);padding:22px}
.card h3{margin-top:0;color:var(--ocean)}
.section{padding:55px 0}
.form-box{background:white;border-radius:18px;padding:24px;box-shadow:0 10px 30px rgba(15,23,42,.08)}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.form-group label{display:block;font-weight:700;margin-bottom:7px}
.form-control{width:100%;padding:12px;border:1px solid #cbd5e1;border-radius:10px;font-size:15px}
.table{width:100%;border-collapse:collapse;background:white;border-radius:16px;overflow:hidden}
.table th,.table td{padding:12px;border-bottom:1px solid #e2e8f0;text-align:left;font-size:14px}
.table th{background:#e0f2fe;color:#075985}
.badge{padding:5px 8px;border-radius:999px;font-size:12px;font-weight:700;color:white;background:#64748b;display:inline-block}
.badge.success{background:var(--green)}.badge.warning{background:var(--warning)}.badge.danger{background:var(--danger)}.badge.dark{background:#334155}
.admin-layout{display:flex;min-height:100vh}
.sidebar{width:260px;background:var(--ocean-dark);color:white;padding:20px;position:fixed;top:0;bottom:0}
.sidebar h2{font-size:20px}
.sidebar a{display:block;padding:12px;border-radius:10px;margin:5px 0;color:white}
.sidebar a:hover{background:rgba(255,255,255,.12)}
.main{margin-left:260px;padding:25px;width:calc(100% - 260px)}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{background:white;border-radius:16px;padding:18px;box-shadow:0 8px 25px rgba(15,23,42,.06)}
.stat b{font-size:28px;color:var(--ocean)}
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#075985,#06b6d4)}
.login-box{width:420px;background:white;padding:28px;border-radius:20px;box-shadow:0 20px 50px rgba(0,0,0,.2)}
.card-digital{max-width:760px;background:linear-gradient(135deg,#075985,#06b6d4);color:white;border-radius:24px;padding:28px;margin:20px auto;position:relative;overflow:hidden}
.card-digital:after{content:'🐟';position:absolute;font-size:170px;right:20px;bottom:-35px;opacity:.12}
.card-row{display:flex;gap:22px;align-items:center}
.selfie{width:130px;height:150px;object-fit:cover;border-radius:14px;border:4px solid white;background:#e2e8f0}
.qr{background:white;color:#075985;padding:18px;border-radius:14px;font-weight:900;text-align:center}
.footer{background:#083344;color:white;padding:30px 0;text-align:center}
.alert{padding:12px;border-radius:12px;margin-bottom:12px}
.alert.success{background:#dcfce7;color:#166534}.alert.danger{background:#fee2e2;color:#991b1b}
@media(max-width:800px){
  .cards,.form-grid,.stat-grid{grid-template-columns:1fr}
  .hero h1{font-size:34px}
  .nav{display:block}.nav-links{margin-top:14px;flex-wrap:wrap}
  .sidebar{position:relative;width:100%;height:auto}.admin-layout{display:block}.main{margin-left:0;width:100%}
  .table{display:block;overflow:auto}
}