:root{
  --af-blue:#0b4f9c;
  --af-green:#2fb344;
  --af-navy:#10233f;
  --af-bg:#f5f8fc;
}
*{box-sizing:border-box}
body{font-family:Arial,Helvetica,sans-serif;background:var(--af-bg);color:#18263a;margin:0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--af-blue);font-size:1.35rem}
.brand-dot{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,var(--af-blue),var(--af-green))}
.hero{background:linear-gradient(135deg,#fff 0%,#f4fbf6 100%);border:1px solid #e6edf5;border-radius:18px;padding:28px;box-shadow:0 16px 45px rgba(18,43,75,.08)}
.card-soft{background:#fff;border:1px solid #e6edf5;border-radius:16px;box-shadow:0 12px 35px rgba(18,43,75,.06)}
.btn-af{background:var(--af-green);color:#fff;border:none;font-weight:700}
.btn-af:hover{background:#24953a;color:#fff}
.form-label{font-weight:700;color:#30445f}
.form-control{border-radius:10px;padding:.8rem .9rem}
.form-control:focus{border-color:#86b7fe;box-shadow:0 0 0 .2rem rgba(13,110,253,.12)}
.small-muted{color:#6d7f95;font-size:.92rem}
.admin-top{background:var(--af-navy);color:#fff;padding:18px 0}
.kpi{border-left:4px solid var(--af-green);padding:18px;background:#fff;border-radius:12px;border-top:1px solid #e6edf5;border-right:1px solid #e6edf5;border-bottom:1px solid #e6edf5}
.kpi strong{display:block;font-size:1.8rem;color:var(--af-navy)}
.table thead th{background:#eef4fb;color:#29415f;white-space:nowrap}
.badge-date{background:#edf8ef;color:#237337;font-weight:700}
@media(max-width:767px){.hero{padding:20px;border-radius:14px}.admin-top .d-flex{gap:12px;align-items:flex-start!important;flex-direction:column}}