:root {
    --brand-900: #0b3d2e;
    --brand-700: #12664a;
    --brand-500: #1f9d6b;
    --brand-300: #6fe0a8;
    --accent: #ffb703;
    --ink: #14201b;
    --paper: #f4f7f4;
}

* { box-sizing: border-box; }

body {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--paper);
    color: var(--ink);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main { flex: 1; }

.app-navbar {
    background: linear-gradient(90deg, var(--brand-900), var(--brand-700));
    box-shadow: 0 2px 14px rgba(0,0,0,.15);
}
.app-navbar .nav-link { transition: color .2s ease, background-color .2s ease; border-radius: 8px; padding: .4rem .8rem; }
.app-navbar .nav-link:hover { background: rgba(255,255,255,.12); }
.btn-scan-nav {
    background: var(--accent);
    color: #3a2c00 !important;
    font-weight: 600;
}
.btn-scan-nav:hover { background: #ffc733 !important; }

.app-footer { background: var(--brand-900); color: #cfe9dd; }

/* Cards & stats */
.stat-card {
    border: none;
    border-radius: 16px;
    color: #fff;
    box-shadow: 0 8px 24px rgba(18,102,74,.18);
    transition: transform .2s ease;
}
.stat-card:hover { transform: translateY(-4px); }
.stat-card .num { font-size: 2.2rem; font-weight: 700; line-height: 1; }
.bg-grad-1 { background: linear-gradient(135deg, #1f9d6b, #12664a); }
.bg-grad-2 { background: linear-gradient(135deg, #f4a261, #e76f51); }
.bg-grad-3 { background: linear-gradient(135deg, #457b9d, #1d3557); }
.bg-grad-4 { background: linear-gradient(135deg, #8e7dbe, #5a4f8f); }

.card { border: none; border-radius: 14px; box-shadow: 0 4px 18px rgba(20,32,27,.06); }
.card-header { background: #fff; border-bottom: 1px solid #eef2ef; font-weight: 600; border-radius: 14px 14px 0 0 !important; }

.btn-primary { background: var(--brand-500); border-color: var(--brand-500); }
.btn-primary:hover { background: var(--brand-700); border-color: var(--brand-700); }
.btn-outline-primary { color: var(--brand-700); border-color: var(--brand-500); }
.btn-outline-primary:hover { background: var(--brand-500); border-color: var(--brand-500); }

.badge-hadir { background: #1f9d6b; }
.badge-terlambat { background: #e76f51; }
.badge-izin { background: #457b9d; }
.badge-sakit { background: #8e7dbe; }
.badge-alpha { background: #adb5bd; }

/* Login */
.login-wrap {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--brand-900), var(--brand-500));
    padding: 1rem;
}
.login-card { max-width: 400px; width: 100%; border-radius: 18px; }

/* Scanner */
#reader { width: 100%; max-width: 480px; margin: 0 auto; border-radius: 16px; overflow: hidden; }
.scan-result { border-radius: 16px; padding: 1.5rem; text-align: center; }
.scan-ok { background: #e6f7ee; border: 2px solid #1f9d6b; }
.scan-warn { background: #fff4e0; border: 2px solid #e76f51; }
.scan-err { background: #fde8e8; border: 2px solid #d64545; }

/* QR Card print */
.qr-card {
    width: 320px; border: 2px dashed #12664a; border-radius: 16px;
    padding: 16px; text-align: center; background: #fff; margin: 8px;
    display: inline-block; vertical-align: top;
}
.qr-card h5 { color: var(--brand-900); margin: 8px 0 2px; }
@media print {
    .no-print { display: none !important; }
    .app-navbar, .app-footer { display: none !important; }
    body { background: #fff; }
}