*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg: #070b14;
    --surface: rgba(255,255,255,0.04);
    --surface-hover: rgba(255,255,255,0.07);
    --border: rgba(255,255,255,0.08);
    --border-hover: rgba(255,255,255,0.18);
    --text: #f1f5f9;
    --muted: #64748b;
    --green: #10b981;
    --indigo: #6366f1;
    --amber: #f59e0b;
    --red: #ef4444;
    --radius-card: 20px;
}

html, body { min-height: 100%; background: var(--bg); font-family: 'Plus Jakarta Sans', sans-serif; color: var(--text); overflow-x: hidden; }

/* ── Ambient background ───────────────────── */
.orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(130px); opacity: .28; animation: drift 20s ease-in-out infinite alternate; }
.orb-1 { width: 700px; height: 700px; background: #10b981; top: -25%; left: -20%; }
.orb-2 { width: 600px; height: 600px; background: #6366f1; bottom: -25%; right: -20%; animation-delay: -8s; }
.orb-3 { width: 350px; height: 350px; background: #0ea5e9; top: 35%; left: 40%; animation-delay: -15s; }
@keyframes drift { 0% { transform:translate(0,0) scale(1); } 100% { transform:translate(50px,40px) scale(1.1); } }

.grid-overlay {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
    background-size: 64px 64px;
}

/* ── Toast ───────────────────────────────── */
.toast-wrap {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    display: flex; justify-content: center;
    padding: 20px 16px 0; pointer-events: none;
}
.toast {
    display: inline-flex; align-items: center; gap: 14px;
    padding: 14px 22px; border-radius: 16px;
    font-weight: 700; font-size: 1.05rem; color: #fff;
    box-shadow: 0 24px 48px rgba(0,0,0,.35);
    animation: toastIn .5s cubic-bezier(.34,1.56,.64,1) forwards;
    max-width: 520px; width: 100%;
}
@keyframes toastIn { from { transform:translateY(-60px); opacity:0; } to { transform:translateY(0); opacity:1; } }
.toast-success { background: linear-gradient(135deg, #10b981, #059669); }
.toast-warning { background: linear-gradient(135deg, #f59e0b, #d97706); }
.toast-danger  { background: linear-gradient(135deg, #ef4444, #dc2626); }
.toast-info    { background: linear-gradient(135deg, #6366f1, #4f46e5); }

.topbar {
    position: relative; z-index: 10;
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 28px;
    border-bottom: 1px solid var(--border);
    background: rgba(7,11,20,.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
}
.topbar-brand { font-weight: 800; font-size: 1rem; letter-spacing: -.3px; }
.topbar-sub   { font-size: .78rem; color: var(--muted); font-weight: 500; margin-top: 2px; }

/* Flying Bird Marquee */
.marquee-bar {
    position: relative;
    height: 50px;
    background: rgba(16, 185, 129, 0.05); /* very subtle green */
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    overflow: hidden;
    z-index: 9;
}
.flying-bird-container {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    animation: flyBird 22s linear infinite;
}
.flying-bird-lottie {
    width: 60px;
    height: 60px;
    transform: scaleX(-1); /* Balik arah burung agar menghadap ke kiri */
}
.flying-bird-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: #34d399;
    letter-spacing: 0.5px;
}
@keyframes flyBird {
    0% { right: -800px; }
    100% { right: 100%; }
}

.mode-badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 16px; border-radius: 999px;
    font-weight: 700; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase;
}
.mode-masuk  { background: rgba(16,185,129,.15); color: #34d399; border: 1px solid rgba(16,185,129,.25); }
.mode-pulang { background: rgba(99,102,241,.15);  color: #a5b4fc; border: 1px solid rgba(99,102,241,.25); }
.mode-auto   { background: rgba(100,116,139,.15); color: #94a3b8; border: 1px solid rgba(100,116,139,.25); }

.btn-back-top {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--muted); text-decoration: none; font-weight: 600; font-size: .8rem;
    transition: all .25s;
}
.btn-back-top:hover { color: var(--text); border-color: var(--border-hover); background: var(--surface-hover); }

/* ── Layout Split (Left/Right) ───────────── */
.layout-split {
    position: relative; z-index: 10;
    display: flex; flex-direction: row; align-items: stretch;
    height: calc(100vh - 120px); /* adjusted for topbar + marquee */
    overflow: hidden;
}
.layout-left {
    flex: 0 0 380px;
    border-right: 1px solid var(--border);
    background: rgba(7,11,20,.4); backdrop-filter: blur(10px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 24px;
}
.layout-right {
    flex: 1;
    display: flex; flex-direction: column;
    overflow-y: auto;
    padding-top: 24px;
    position: relative;
}

@media (max-width: 992px) {
    .layout-split { flex-direction: column; height: auto; overflow: visible; }
    .layout-left { flex: none; border-right: none; border-bottom: 1px solid var(--border); padding: 40px 20px; }
    .layout-right { overflow-y: visible; padding-top: 24px; }
}

/* ── Hero / Clock ────────────────────────── */
.hero {
    display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%;
}
.clock-block {
    background: var(--surface); border: 1px solid var(--border); border-radius: 28px;
    padding: 22px 30px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 12px 40px rgba(0,0,0,.25); margin-bottom: 16px; width: 100%;
}
.clock-digits {
    font-size: clamp(2.5rem, 6vw, 3.8rem); font-weight: 800; letter-spacing: -3px; line-height: 1;
    background: linear-gradient(135deg, #e0e7ff 0%, #818cf8 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.clock-date { margin-top: 8px; font-size: .9rem; font-weight: 600; color: var(--muted); }
.blink { animation: blink 1.4s ease-in-out infinite; display: inline-block; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.2;} }

.scan-hint {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px;
    border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
    backdrop-filter: blur(10px); font-size: .85rem; font-weight: 600; color: var(--muted);
    transition: all .25s cubic-bezier(.34,1.56,.64,1);
}
.scan-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--green); box-shadow: 0 0 0 0 rgba(16,185,129,.5);
    animation: sonar 1.8s ease-out infinite;
    transition: all .2s;
}
@keyframes sonar { 0%{box-shadow:0 0 0 0 rgba(16,185,129,.5);} 70%{box-shadow:0 0 0 10px rgba(16,185,129,0);} 100%{box-shadow:0 0 0 0 rgba(16,185,129,0);} }

/* ── Status Animasi Scan Hint (Loading, Success, Error) ── */
.scan-hint.is-loading {
    background: rgba(59, 130, 246, 0.22) !important;
    border-color: rgba(59, 130, 246, 0.75) !important;
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.45), inset 0 0 12px rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
    transform: scale(1.05);
}
.scan-hint.is-loading .scan-dot {
    background: #3b82f6 !important;
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.8) !important;
    animation: radarRipple 0.65s ease-out infinite !important;
}
@keyframes radarRipple {
    0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.8); }
    70% { box-shadow: 0 0 0 16px rgba(59, 130, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

.scan-hint.is-success {
    background: rgba(16, 185, 129, 0.22) !important;
    border-color: rgba(16, 185, 129, 0.75) !important;
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.45) !important;
    color: #6ee7b7 !important;
    transform: scale(1.05);
}
.scan-hint.is-error {
    background: rgba(239, 68, 68, 0.22) !important;
    border-color: rgba(239, 68, 68, 0.75) !important;
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.45) !important;
    color: #fca5a5 !important;
}
.scan-spinner {
    width: 12px; height: 12px;
    border: 2px solid rgba(255,255,255,0.25);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Tab strip ───────────────────────────── */
.tab-strip {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px 16px;
    margin-bottom: 4px;
    gap: 12px;
    flex-wrap: wrap;
    background: linear-gradient(180deg, rgba(7,11,20,1) 0%, rgba(7,11,20,0.8) 60%, transparent 100%);
}
.tabs {
    display: flex; gap: 4px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 4px;
    backdrop-filter: blur(10px);
}
.tab-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px; border-radius: 10px;
    border: none; cursor: pointer;
    font-family: inherit; font-size: .875rem; font-weight: 700;
    color: var(--muted); background: transparent;
    transition: all .25s ease;
}
.tab-btn .tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 6px;
    border-radius: 999px; font-size: .72rem; font-weight: 800;
    background: rgba(255,255,255,.08); color: var(--muted);
    transition: all .25s;
}
.tab-btn.active-hadir {
    background: rgba(16,185,129,.15); color: #34d399;
}
.tab-btn.active-hadir .tab-count {
    background: rgba(16,185,129,.25); color: #34d399;
}
.tab-btn.active-belum {
    background: rgba(239,68,68,.13); color: #fca5a5;
}
.tab-btn.active-belum .tab-count {
    background: rgba(239,68,68,.22); color: #fca5a5;
}

/* Search box */
.search-wrap {
    display: flex; align-items: center; gap: 8px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 8px 14px;
    backdrop-filter: blur(10px);
    transition: border-color .25s;
    flex: 1; max-width: 280px;
}
.search-wrap:focus-within { border-color: var(--border-hover); }
.search-wrap svg { opacity: .4; flex-shrink: 0; }
.search-wrap input {
    border: none; background: transparent; outline: none;
    font-family: inherit; font-size: .875rem; font-weight: 600; color: var(--text);
    width: 100%;
}
.search-wrap input::placeholder { color: var(--muted); }

/* ── Student grid ────────────────────────── */
.students-section { position: relative; z-index: 10; padding: 0 24px 80px; }

.students-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 14px;
    max-width: 1400px; margin: 0 auto; width: 100%;
}

/* ── Hadir card ──────────────────────────── */
.student-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-card); overflow: hidden;
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), border-color .3s, box-shadow .3s;
    animation: cardIn .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes cardIn { from { opacity:0; transform:translateY(20px) scale(.96); } to { opacity:1; transform:none; } }
.student-card:hover { transform: translateY(-8px) scale(1.03); border-color: var(--border-hover); box-shadow: 0 20px 40px rgba(0,0,0,.35); }

.card-photo-wrap { position: relative; aspect-ratio: 3/4; overflow: hidden; background: rgba(255,255,255,.04); }
.card-photo-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.student-card:hover .card-photo-wrap img { transform: scale(1.05); }

.card-avatar { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; background: linear-gradient(135deg, rgba(99,102,241,.2), rgba(16,185,129,.1)); }
.card-avatar-initial { font-size: 2.5rem; font-weight: 800; background: linear-gradient(135deg, #818cf8, #34d399); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1; }

.time-overlay { position: absolute; bottom: 8px; left: 8px; right: 8px; display: flex; justify-content: center; }
.time-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
    border-radius: 999px; background: rgba(7,11,20,.75); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.12); font-size: .72rem; font-weight: 700; color: #34d399;
}

.card-info { padding: 12px 12px 14px; }
.card-name { font-size: .875rem; font-weight: 800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom: 4px; }
.card-class { font-size: .75rem; font-weight: 600; color: var(--muted); }

/* ── Belum tap card ──────────────────────── */
.belum-card {
    background: var(--surface); border: 1px solid rgba(239,68,68,.15);
    border-radius: var(--radius-card); overflow: hidden;
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), border-color .3s, box-shadow .3s;
    animation: cardIn .5s cubic-bezier(.22,1,.36,1) both;
}
.belum-card:hover { transform: translateY(-8px) scale(1.03); border-color: rgba(239,68,68,.35); box-shadow: 0 20px 40px rgba(0,0,0,.35); }

.belum-card .card-avatar {
    background: linear-gradient(135deg, rgba(239,68,68,.12), rgba(239,68,68,.05));
}
.belum-card .card-avatar-initial {
    background: linear-gradient(135deg, #fca5a5, #f87171);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.belum-badge {
    position: absolute; top: 8px; right: 8px;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 999px;
    background: rgba(239,68,68,.75); backdrop-filter: blur(6px);
    font-size: .68rem; font-weight: 800; color: #fff; letter-spacing: .03em;
}

.belum-badge-sakit {
    position: absolute; top: 8px; right: 8px;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 999px;
    background: rgba(59,130,246,.75); backdrop-filter: blur(6px); /* Blue */
    font-size: .68rem; font-weight: 800; color: #fff; letter-spacing: .03em;
}

.belum-badge-izin {
    position: absolute; top: 8px; right: 8px;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 999px;
    background: rgba(245,158,11,.75); backdrop-filter: blur(6px); /* Amber */
    font-size: .68rem; font-weight: 800; color: #fff; letter-spacing: .03em;
}

.tab-btn.active-sakit {
    background: rgba(59,130,246,.15); color: #60a5fa;
}
.tab-btn.active-sakit .tab-count {
    background: rgba(59,130,246,.25); color: #60a5fa;
}
.tab-btn.active-izin {
    background: rgba(245,158,11,.15); color: #fbbf24;
}
.tab-btn.active-izin .tab-count {
    background: rgba(245,158,11,.25); color: #fbbf24;
}

/* ── Kelas group header (belum tab) ──────── */
.kelas-header {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 12px;
    margin-top: 8px; margin-bottom: 4px;
}
.kelas-header-line { flex: 1; height: 1px; background: var(--border); }
.kelas-header-label {
    font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
    white-space: nowrap;
}

/* ── Empty state ─────────────────────────── */
.empty-state {
    grid-column: 1 / -1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 280px; text-align: center; gap: 14px;
}
.empty-icon { width: 88px; height: 88px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 2.2rem; }
.empty-title { font-size: 1.15rem; font-weight: 800; }
.empty-sub { font-size: .875rem; color: var(--muted); font-weight: 500; max-width: 260px; }

/* ── Hidden RFID ─────────────────────────── */
#uidInput { position: absolute; opacity: 0; left: -9999px; width: 1px; height: 1px; }