@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Fraunces:wght@600;700&display=swap');
* { box-sizing: border-box; margin:0; padding:0; }
body { font-family:'Poppins',-apple-system,sans-serif; background:linear-gradient(180deg,#F4F8FB 0%,#FFFFFF 100%); min-height:100vh; color:#2C3E50; padding-bottom:40px; }
input, textarea, select, button { font-family:'Poppins',sans-serif; }
a { color:#2E86AB; text-decoration:none; }

.topbar { background:linear-gradient(135deg,#1A5276 0%,#2E86AB 100%); padding:18px 20px; color:white; box-shadow:0 4px 20px rgba(26,82,118,0.2); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.topbar .brand { font-family:'Fraunces',serif; font-size:17px; font-weight:700; }
.topbar .sub { font-size:11.5px; opacity:0.85; }
.topbar .who { font-size:12.5px; text-align:right; }
.topbar .logout { font-size:11.5px; color:white; opacity:0.85; text-decoration:underline; }

.nav { display:flex; gap:8px; padding:14px 16px 0; flex-wrap:wrap; }
.nav a { flex:1; min-width:110px; text-align:center; padding:10px; border-radius:12px; font-weight:700; font-size:12.5px; background:#F0F4F8; color:#5A6B7B; }
.nav a.active { background:#1A5276; color:white; }

.wrap { padding:18px 16px; max-width:960px; margin:0 auto; }
.card { background:white; border-radius:16px; padding:18px; border:1.5px solid #EEF2F6; margin-bottom:14px; }
.input-style { width:100%; padding:10px 12px; border-radius:10px; border:1.5px solid #EEF2F6; font-size:13.5px; margin-bottom:12px; outline:none; background:white; }
.label-style { font-size:12px; font-weight:700; color:#5A6B7B; margin-bottom:6px; display:block; }
.btn { transition:all .15s ease; cursor:pointer; border:none; padding:11px 16px; border-radius:12px; font-weight:700; font-size:13.5px; }
.btn:active { transform:scale(0.97); }
.btn-primary { background:#1A5276; color:white; }
.btn-teal { background:#1A7070; color:white; }
.btn-danger { background:#FDEDEC; color:#C0392B; }
.btn-ghost { background:#F0F4F8; color:#5A6B7B; }

table { width:100%; border-collapse:collapse; font-size:13px; background:white; border-radius:12px; overflow:hidden; }
th, td { padding:9px 12px; text-align:left; border-bottom:1px solid #EEF2F6; }
th { background:#F4F8FB; color:#5A6B7B; font-size:11.5px; text-transform:uppercase; letter-spacing:0.5px; }
.table-wrap { overflow-x:auto; border:1.5px solid #EEF2F6; border-radius:12px; }

.badge { display:inline-block; font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:10px; }
.toast { position:fixed; top:20px; left:50%; transform:translateX(-50%); background:#1A7070; color:white; padding:10px 20px; border-radius:10px; font-size:12.5px; font-weight:600; z-index:100; box-shadow:0 4px 12px rgba(0,0,0,0.2); max-width:85%; text-align:center; }
.section-title { font-size:12px; font-weight:700; color:#8E9BAA; letter-spacing:1px; margin:20px 0 10px; text-transform:uppercase; }
.hint { font-size:11px; color:#8E9BAA; margin-top:4px; }
.error-box { background:#FDEDEC; color:#C0392B; padding:10px 14px; border-radius:10px; font-size:12.5px; margin-bottom:14px; }
.success-box { background:#E8F8F5; color:#1A7070; padding:10px 14px; border-radius:10px; font-size:12.5px; margin-bottom:14px; }

@media print {
  body * { visibility:hidden; }
  .print-area, .print-area * { visibility:visible; }
  .print-area { display:block; position:absolute; top:0; left:0; width:100%; padding:24px; }
  .no-print { display:none !important; }
}
.print-area { display:none; }