:root {
    --primary: #4f46e5;
    --primary-dark: #4338ca;
    --page-bg: #f5f7fb;
    --ink: #1f2937;
    --muted: #6b7280;
    --line: #e5e7eb;
    --success: #16845b;
}

* { box-sizing: border-box; }
body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background: var(--page-bg);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app-container { max-width: 980px; }
.site-navbar {
    position: sticky;
    top: 0;
    z-index: 10;
    min-height: 72px;
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid rgba(229, 231, 235, .9);
    backdrop-filter: blur(14px);
}
.site-navbar > .container { min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 11px;
    color: white;
    background: linear-gradient(135deg, #6366f1, #4338ca);
    box-shadow: 0 7px 17px rgba(79, 70, 229, .22);
    font-size: 1.1rem;
}
.brand-copy { display: flex; flex-direction: column; line-height: 1.2; }
.brand-copy strong { font-size: .93rem; }
.brand-copy small { margin-top: 3px; color: var(--muted); font-size: .7rem; }
.btn-admin { display: inline-flex; align-items: center; gap: 8px; border-radius: 8px; font-size: .85rem; font-weight: 600; }

.page-intro { max-width: 680px; margin: 0 auto 22px; animation: rise-in .45s ease-out both; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: var(--primary); font-size: .7rem; font-weight: 700; letter-spacing: .08em; }
.eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: #22a06b; }
.page-intro h1 { margin: 8px 0 5px; font-size: clamp(1.65rem, 1.65rem, 1.65rem); font-weight: 700; }
.page-intro p { margin: 0; color: var(--muted); font-size: .93rem; }

.attendance-panel {
    max-width: 680px;
    margin: 0 auto;
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(31, 41, 55, .06);
    animation: rise-in .5s .06s ease-out both;
}
.panel-heading { display: flex; justify-content: space-between; gap: 16px; padding: 21px 24px; border-bottom: 1px solid var(--line); }
.panel-heading h2 { margin: 0 0 4px; font-size: 1rem; font-weight: 700; }
.panel-heading p { margin: 0; color: var(--muted); font-size: .8rem; }
.panel-mark { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border-radius: 9px; color: var(--primary); background: #eef2ff; }
.panel-body { padding: 24px; }
.form-label { margin-bottom: 7px; color: #374151; font-size: .83rem; font-weight: 650; }
.form-control, .form-select { min-height: 44px; border-color: #d1d5db; border-radius: 7px; font-size: .9rem; }
.form-control:focus, .form-select:focus { border-color: #818cf8; box-shadow: 0 0 0 .2rem rgba(99, 102, 241, .13); }
.input-icon-wrap { position: relative; }
.input-icon-wrap > i { position: absolute; top: 50%; left: 14px; z-index: 2; color: #9ca3af; transform: translateY(-50%); }
.input-icon-wrap .form-control { padding-left: 39px; }
.suggestion-list {
    position: absolute;
    top: calc(100% - 23px);
    right: 0;
    left: 0;
    z-index: 5;
    max-height: 270px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: white;
    box-shadow: 0 12px 25px rgba(31, 41, 55, .13);
}
.suggestion-option { display: flex; width: 100%; flex-direction: column; gap: 3px; padding: 11px 14px; border: 0; border-bottom: 1px solid #f1f2f4; text-align: left; background: white; }
.suggestion-option:last-child { border-bottom: 0; }
.suggestion-option:hover, .suggestion-option[aria-selected="true"] { background: #f5f6ff; }
.suggestion-name { color: var(--ink); font-size: .87rem; font-weight: 600; }
.suggestion-meta { color: var(--muted); font-size: .75rem; }
#konfirmasiNama { min-height: 18px; }
.member-valid { color: var(--success) !important; }
.member-invalid { color: #b42318 !important; }
.dept-info { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid #dbeafe; border-radius: 7px; color: #1e40af; background: #f5f8ff; font-size: .84rem; font-weight: 600; }
.dept-title { display: block; margin-bottom: 5px; }
.dept-groups { display: flex; flex-direction: column; gap: 5px; }
.dept-group { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.dept-parent { color: #1e3a8a; font-size: .78rem; }
.dept-parent::after { content: ":"; }
.dept-badge { padding: 1px 8px; border-radius: 999px; background: #e0e9ff; color: #1e40af; font-size: .74rem; font-weight: 600; }
.dept-icon { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border-radius: 7px; background: #e5edff; }

.camera-box { position: relative; display: grid; width: 100%; min-height: 260px; aspect-ratio: 16 / 9; overflow: hidden; place-items: center; border-radius: 8px; background: #111827; }
.camera-box video, .camera-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camera-box video { transform: scaleX(-1); }
.camera-box img { transform: none; }
.camera-placeholder { display: flex; align-items: center; flex-direction: column; gap: 7px; padding: 20px; color: #e5e7eb; text-align: center; }
.camera-placeholder strong { font-size: .88rem; }
.camera-placeholder > span:last-child { color: #9ca3af; font-size: .76rem; }
.camera-icon { display: grid; width: 46px; height: 46px; margin-bottom: 2px; place-items: center; border: 1px solid #4b5563; border-radius: 12px; color: #c7d2fe; background: #252b3a; font-size: 1.2rem; }
.camera-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.camera-actions .btn { min-height: 40px; border-radius: 7px; font-size: .81rem; font-weight: 600; }
.camera-actions .btn i { margin-right: 5px; }
.btn-primary { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary-dark); --bs-btn-hover-border-color: var(--primary-dark); }
.btn-submit { min-height: 46px; margin-top: 7px; border: 0; border-radius: 7px; color: #fff; background: var(--primary); font-size: .9rem; font-weight: 650; }
.btn-submit:hover:not(:disabled) { color: #fff; background: var(--primary-dark); }
.btn-submit:disabled { color: #9ca3af; background: #e5e7eb; }
.btn-submit i { margin-right: 6px; }
.status-message { padding: 11px 13px; border: 1px solid transparent; border-radius: 7px; font-size: .83rem; }
.status-message.info { color: #075985; border-color: #bae6fd; background: #f0f9ff; }
.status-message.success { color: #166534; border-color: #bbf7d0; background: #f0fdf4; }
.status-message.error { color: #991b1b; border-color: #fecaca; background: #fef2f2; }
.page-footnote { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 17px 0 0; color: var(--muted); font-size: .76rem; animation: rise-in .55s .12s ease-out both; }
.page-footnote i { color: var(--success); }

@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 575.98px) {
    .site-navbar, .site-navbar > .container { min-height: 64px; }
    .brand-icon { width: 38px; height: 38px; }
    .brand-copy small { display: none; }
    .btn-admin { width: 40px; height: 40px; justify-content: center; padding: 0; }
    .btn-admin span { display: none; }
    .panel-heading { padding: 18px; }
    .panel-body { padding: 18px; }
    .camera-box { min-height: 210px; }
    .camera-actions .btn { flex: 1 1 auto; }
}