:root{--bg:#0f172a;--primary:#2563eb;--accent:#14b8a6;--text:#e5e7eb;--muted:#94a3b8;--card:rgba(255,255,255,.10);--line:rgba(255,255,255,.18);--danger:#ef4444;--ok:#22c55e}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:radial-gradient(circle at top left,#1e40af,#0f172a 55%,#020617);color:var(--text);min-height:100vh}.hero{position:relative;min-height:100vh;display:grid;place-items:center;padding:28px;overflow:hidden}.orb{position:absolute;border-radius:999px;filter:blur(18px);opacity:.45}.orb1{width:260px;height:260px;background:var(--primary);top:8%;left:8%}.orb2{width:220px;height:220px;background:var(--accent);right:10%;bottom:10%}.card{width:min(960px,100%);padding:36px;border:1px solid var(--line);border-radius:30px;box-shadow:0 30px 80px rgba(0,0,0,.35);position:relative}.glass{background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.06));backdrop-filter:blur(18px)}.brand{display:flex;gap:16px;align-items:center}.logo{width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,var(--primary),var(--accent));display:grid;place-items:center;font-weight:900;font-size:26px}.eyebrow{margin:0;color:#bfdbfe;text-transform:uppercase;letter-spacing:.18em;font-size:12px}h1{font-size:clamp(22px,4vw,38px);margin:2px 0 0}h2{font-size:clamp(34px,7vw,74px);line-height:.98;margin:42px 0 16px}.lead{color:var(--muted);font-size:18px;max-width:720px}.datebox,.alert{border:1px solid var(--line);border-radius:18px;padding:14px 16px;margin:18px 0;background:rgba(255,255,255,.08)}.error{border-color:rgba(239,68,68,.5);color:#fecaca}.form{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;margin-top:24px}label{font-weight:700;color:#dbeafe}input,select,textarea{width:100%;margin-top:8px;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:rgba(15,23,42,.7);color:#fff;font-size:16px}.btn{border:0;border-radius:16px;padding:14px 22px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-weight:800;cursor:pointer;align-self:end;text-decoration:none;display:inline-block}.secondary{background:rgba(255,255,255,.12);border:1px solid var(--line)}.result{margin-top:24px;padding:28px;border-radius:26px;background:rgba(255,255,255,.10);border:1px solid var(--line);text-align:center}.result p{color:var(--muted)}.result h3{font-size:64px;margin:0}.result.pass h3{color:#86efac}.result.fail h3{color:#fca5a5}.result h4{font-size:28px;margin:12px 0}.msg{font-size:18px;color:#e5e7eb!important}.foot{margin-top:28px;color:var(--muted);font-size:14px}.admin-wrap{display:flex;min-height:100vh;background:#f8fafc;color:#0f172a}.sidebar{width:260px;background:#0f172a;color:#fff;padding:24px}.sidebar a{display:block;color:#cbd5e1;text-decoration:none;padding:12px;border-radius:12px;margin:6px 0}.sidebar a:hover{background:#1e293b}.content{flex:1;padding:28px}.panel{background:#fff;border:1px solid #e5e7eb;border-radius:22px;padding:24px;box-shadow:0 10px 30px rgba(15,23,42,.06);margin-bottom:20px}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:12px;border-bottom:1px solid #e5e7eb;text-align:left}.badge{padding:6px 10px;border-radius:999px;font-weight:800;font-size:12px}.badge.ok{background:#dcfce7;color:#166534}.badge.fail{background:#fee2e2;color:#991b1b}.actions{display:flex;gap:8px;flex-wrap:wrap}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.login{min-height:100vh;display:grid;place-items:center;background:#0f172a;padding:20px}.login .panel{width:min(420px,100%)}@media(max-width:760px){.form,.grid{grid-template-columns:1fr}.btn{width:100%}.admin-wrap{display:block}.sidebar{width:auto}.content{padding:16px}.table{font-size:14px}}
@media print{body{background:#fff;color:#000}.hero{display:block}.orb,.form,.datebox,.foot,.brand h1,.brand .eyebrow{display:none}.card{box-shadow:none;border:0}.result{border:2px solid #000}}
.sidebar {
    width: 300px;
    min-height: 100vh;
    background: #0f172a;
    color: #fff;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.brand-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 22px;
}

.sidebar-brand h2 {
    margin: 0;
    font-size: 34px;
    line-height: 1;
}

.sidebar-brand small {
    color: #94a3b8;
    font-size: 13px;
}

.sidebar-menu,
.sidebar-bottom {
    display: grid;
    gap: 8px;
}

.sidebar a {
    display: block;
    color: #cbd5e1;
    text-decoration: none;
    padding: 13px 15px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
}

.sidebar a:hover,
.sidebar a.active {
    background: linear-gradient(135deg, rgba(37,99,235,.25), rgba(20,184,166,.18));
    color: #fff;
}

.sidebar-bottom {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.12);
}

@media(max-width:760px) {
    .sidebar {
        width: 100%;
        min-height: auto;
    }

    .sidebar-brand h2 {
        font-size: 28px;
    }
}
.table .btn {
    width: auto;
    padding: 10px 16px;
    font-size: 14px;
}
/* tombol aksi di tabel */
.table .btn.secondary {
    background: #0f172a;       /* gelap biar kontras */
    color: #fff;
    border: none;
}

/* tombol hapus kasih warna beda */
.table .btn.danger {
    background: #ef4444;
    color: #fff;
}

/* hover biar ada efek */
.table .btn.secondary:hover {
    background: #1e293b;
}

.table .btn.danger:hover {
    background: #dc2626;
}
.login-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 20%, rgba(37,99,235,.55), transparent 32%),
        radial-gradient(circle at 85% 80%, rgba(20,184,166,.45), transparent 30%),
        #020617;
    display: grid;
    place-items: center;
    padding: 24px;
}

.login-shell {
    width: min(460px, 100%);
}

.login-box {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(18px);
    border-radius: 30px;
    padding: 34px;
    box-shadow: 0 30px 90px rgba(0,0,0,.35);
    color: #fff;
}

.login-logo {
    width: 62px;
    height: 62px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: grid;
    place-items: center;
    font-size: 30px;
    font-weight: 900;
    margin-bottom: 22px;
}

.login-label {
    color: #bfdbfe;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: 12px;
    margin: 0;
    font-weight: 800;
}

.login-box h1 {
    font-size: 44px;
    margin: 6px 0 8px;
}

.login-subtitle {
    color: #cbd5e1;
    margin-bottom: 24px;
}

.login-form {
    display: grid;
    gap: 16px;
}

.login-form input {
    background: rgba(15,23,42,.78);
    border: 1px solid rgba(255,255,255,.18);
}

.login-btn {
    width: 100%;
    margin-top: 4px;
}

.back-link {
    display: block;
    margin-top: 20px;
    color: #cbd5e1;
    text-decoration: none;
    text-align: center;
    font-weight: 700;
}

.back-link:hover {
    color: #fff;
}
.import-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    background: linear-gradient(135deg, #ffffff, #eef6ff);
}

.import-badge {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 800;
    font-size: 13px;
    margin-bottom: 12px;
}

.import-hero h1 {
    margin: 0;
}

.import-hero p,
.import-help {
    color: #64748b;
}

.import-panel {
    text-align: center;
}

.upload-icon {
    width: 74px;
    height: 74px;
    margin: 0 auto 16px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    font-size: 38px;
    font-weight: 900;
}

.import-form {
    display: grid;
    gap: 18px;
    margin-top: 24px;
}

.check-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #0f172a;
    font-weight: 800;
}

.check-row input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.upload-box {
    cursor: pointer;
    border: 2px dashed #93c5fd;
    background: #f8fbff;
    border-radius: 24px;
    padding: 34px;
    display: grid;
    gap: 8px;
    color: #0f172a;
}

.upload-box:hover {
    background: #eff6ff;
    border-color: #2563eb;
}

.upload-box input {
    background: #fff;
    color: #0f172a;
    border: 1px solid #dbeafe;
    border-radius: 16px;
}

.upload-box small {
    color: #64748b;
}

.import-submit {
    justify-self: center;
    min-width: 260px;
}

.import-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.import-columns span {
    background: #eef2ff;
    color: #1e293b;
    border: 1px solid #dbeafe;
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 14px;
}

@media(max-width:760px) {
    .import-hero {
        display: block;
    }

    .import-hero .btn {
        margin-top: 16px;
    }

    .upload-box {
        padding: 22px;
    }
}
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, .78);
    backdrop-filter: blur(10px);
    display: none;
    place-items: center;
    padding: 18px;
    z-index: 9999;
}

.modal-overlay.show {
    display: grid;
}

.modal-card {
    width: min(780px, 100%);
    max-height: 92vh;
    overflow: auto;
    background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 30px 90px rgba(0,0,0,.45);
    border-radius: 30px;
    padding: 26px;
    position: relative;
    color: #fff;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 18px;
    border: 0;
    background: rgba(255,255,255,.12);
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    font-size: 26px;
    cursor: pointer;
}

.loading-box {
    text-align: center;
    padding: 70px 20px;
}

.spinner {
    width: 78px;
    height: 78px;
    border: 7px solid rgba(255,255,255,.2);
    border-top-color: #14b8a6;
    border-radius: 50%;
    margin: 0 auto 22px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-box h3 {
    font-size: 28px;
    margin: 0 0 8px;
}

.loading-box p {
    color: #cbd5e1;
}

.student-detail {
    display: grid;
    gap: 10px;
    margin: 24px 0;
    text-align: left;
}

.student-detail div {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.student-detail span {
    color: #cbd5e1;
    font-weight: 700;
}

.student-detail strong {
    color: #fff;
}

.nilai {
    font-size: 20px;
    color: #e5e7eb !important;
}

.nilai strong {
    font-size: 28px;
}

.modal-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}

@media(max-width:760px) {
    .student-detail div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .modal-card {
        padding: 20px;
        border-radius: 24px;
    }
}
.logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
}
.countdown-box {
    display: grid;
    gap: 14px;
}

.countdown-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.countdown-grid div {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 16px;
    padding: 12px 8px;
    text-align: center;
}

.countdown-grid strong {
    display: block;
    font-size: 28px;
    line-height: 1;
    color: #fff;
}

.countdown-grid span {
    display: block;
    margin-top: 6px;
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 700;
}

@media(max-width:760px) {
    .countdown-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.countdown-box {
    padding: 18px;
    display: grid;
    gap: 16px;
}

.countdown-open {
    font-size: 18px;
    color: #e5e7eb;
}

.countdown-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.countdown-item {
    background: rgba(15, 23, 42, .45);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 18px;
    padding: 16px 10px;
    text-align: center;
}

.countdown-item strong {
    display: block;
    font-size: 34px;
    line-height: 1;
    color: #fff;
}

.countdown-item span {
    display: block;
    margin-top: 7px;
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

@media(max-width:760px) {
    .countdown-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}