:root {
  --blue: #0873b8;
  --blue-dark: #064f86;
  --cyan: #83d8ff;
  --text-muted: #b7b4ba;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: 'Inter', Arial, sans-serif; color: #fff; }
body { min-height: 100vh; background: url('../img/bg.svg') center center / cover no-repeat fixed; position: relative; }
body::before { content: ''; position: fixed; inset: 0; background: rgba(15, 13, 18, .62); backdrop-filter: blur(5px) grayscale(80%); z-index: 0; }
.page-center, .result-wrapper { position: relative; z-index: 1; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.login-card { width: min(100%, 760px); background: linear-gradient(135deg, rgba(47,44,52,.98), rgba(25,23,29,.98)); padding: 52px 48px 44px; box-shadow: 0 20px 70px rgba(0,0,0,.35); }
.login-logo { width: 210px; display: block; margin-bottom: 34px; }
.login-card h1 { margin: 0 0 14px; font-size: clamp(36px, 6vw, 58px); line-height: 1.05; letter-spacing: .02em; font-weight: 900; }
.login-card > p { margin: 0 0 42px; color: var(--text-muted); font-size: clamp(16px, 2vw, 21px); }
label { display: block; margin: 0 0 16px; color: var(--cyan); font-size: 18px; font-weight: 800; }
input { width: 100%; border: 0; outline: 0; border-radius: 5px; background: rgba(255,255,255,.24); color: #fff; padding: 22px 24px; font-size: 22px; font-weight: 700; }
input::placeholder { color: rgba(255,255,255,.24); }
#nisn { margin-bottom: 36px; }
.birth-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 18px; align-items: center; margin-bottom: 44px; }
.birth-row span { color: rgba(255,255,255,.75); font-size: 36px; font-weight: 700; }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
button { border: 0; border-radius: 999px; background: #0798d9; color: #fff; padding: 20px 34px; font-size: 18px; font-weight: 900; cursor: pointer; white-space: nowrap; box-shadow: 0 12px 24px rgba(0,153,219,.2); }
button:hover { filter: brightness(1.07); }
.form-actions a { color: #009fe3; text-decoration: none; font-size: 18px; letter-spacing: .08em; white-space: nowrap; }
.alert-error { background: rgba(255,74,74,.14); border: 1px solid rgba(255,74,74,.35); padding: 14px 16px; border-radius: 6px; margin-bottom: 24px; color: #ffd1d1; }
.countdown-card { width: min(100%, 780px); box-shadow: 0 22px 70px rgba(0,0,0,.35); }
.countdown-top { background: linear-gradient(90deg, #064f86, #0873b8); padding: 32px 44px 38px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 22px; align-items: end; text-align: center; }
.time-block span { display: block; margin-bottom: 12px; font-size: 19px; letter-spacing: .08em; }
.time-block strong { display: block; font-size: clamp(48px, 9vw, 76px); line-height: .9; font-weight: 900; }
.countdown-top b { font-size: 66px; line-height: .82; }
.countdown-bottom { background: #fff; color: #171717; padding: 22px 28px; display: grid; grid-template-columns: 230px 1fr; gap: 20px; align-items: center; }
.countdown-bottom strong { font-size: 20px; font-weight: 900; }
.countdown-bottom p { margin: 0; color: #4d4545; font-size: 18px; }
.result-wrapper { align-items: flex-start; padding: 44px 36px; }
.result-card { width: min(100%, 1420px); background: linear-gradient(135deg, rgba(48,45,52,.98), rgba(25,23,29,.98)); box-shadow: 0 24px 80px rgba(0,0,0,.45); }
.result-header { background: linear-gradient(90deg, #064f86, #0873b8); min-height: 156px; padding: 34px 52px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.result-header h1 { margin: 0; font-size: clamp(25px, 3.4vw, 38px); line-height: 1.15; font-weight: 900; letter-spacing: .01em; }
.result-header img { width: 185px; flex: 0 0 auto; }
.result-body { padding: 36px 52px 40px; }
.result-main { display: flex; justify-content: space-between; gap: 36px; align-items: flex-start; }
.meta { margin: 0 0 10px; color: var(--cyan); font-size: 18px; font-weight: 900; }
.student-info h2 { margin: 0 0 14px; font-size: clamp(42px, 6vw, 58px); line-height: 1; letter-spacing: .08em; font-weight: 900; }
.class-name, .major-name { margin: 0; color: #f2f2f2; font-size: clamp(22px, 3vw, 30px); letter-spacing: .06em; line-height: 1.25; }
.qr-placeholder { width: 164px; height: 164px; background: #fff; padding: 10px; flex: 0 0 auto; }
.qr-placeholder img { width: 100%; height: 100%; display: block; }
.bio-grid { width: min(100%, 660px); margin-top: 46px; display: grid; grid-template-columns: 1fr 1fr; gap: 34px 84px; }
.bio-grid span { display: block; color: var(--cyan); font-size: 18px; font-weight: 900; margin-bottom: 10px; }
.bio-grid strong { display: block; font-size: 22px; line-height: 1.25; }
.download-box { margin: -118px 36px 70px auto; width: min(100%, 650px); background: #fff; color: #222; padding: 22px 28px; }
.download-box h3 { margin: 0 0 3px; font-size: 27px; line-height: 1.15; }
.download-box p { margin: 0 0 14px; color: #666; font-size: 17px; }
.download-box a { color: #008dd2; font-size: clamp(19px, 2.4vw, 26px); font-weight: 900; text-decoration: none; word-break: break-all; }
.result-notes { margin-top: 48px; color: rgba(255,255,255,.48); font-family: 'Courier New', monospace; font-size: 17px; line-height: 1.45; }
.logout-link { display: inline-block; margin-top: 18px; color: var(--cyan); text-decoration: none; }
@media (max-width: 980px) { .result-header, .result-body { padding-left: 32px; padding-right: 32px; } .download-box { margin: 38px 0 0; width: 100%; } .bio-grid { width: 100%; } }
@media (max-width: 760px) { .page-center, .result-wrapper { padding: 22px 14px; } .login-card { padding: 34px 24px; } .login-logo { width: 160px; margin-bottom: 28px; } .birth-row { grid-template-columns: 1fr; gap: 12px; } .birth-row span { display: none; } .form-actions { flex-direction: column; align-items: stretch; } button { width: 100%; padding: 18px 20px; font-size: 15px; } .form-actions a { text-align: center; font-size: 14px; white-space: normal; } .countdown-top { padding: 26px 18px 30px; gap: 8px; } .time-block span { font-size: 12px; } .countdown-top b { font-size: 34px; } .countdown-bottom { grid-template-columns: 1fr; gap: 8px; text-align: center; } .result-header { min-height: unset; padding: 26px 20px; flex-direction: column-reverse; align-items: flex-start; } .result-header img { width: 142px; } .result-body { padding: 28px 20px 32px; } .result-main { flex-direction: column; } .student-info h2 { letter-spacing: .04em; } .qr-placeholder { width: 132px; height: 132px; } .bio-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 34px; } .download-box { padding: 20px; } .result-notes { font-size: 14px; } }
@media (max-width: 420px) { input { padding: 18px 16px; font-size: 17px; } .countdown-top { grid-template-columns: repeat(4, 1fr); } .countdown-top b { display: none; } }
.school-countdown-logo{position:relative;z-index:1;text-align:center;margin-bottom:24px}.school-countdown-logo img{max-width:190px;max-height:120px;object-fit:contain}.school-countdown-logo h2{margin:10px 0 0;font-weight:900;letter-spacing:.03em}.open-modal{border:0;border-radius:999px;background:#0798d9;color:#fff;padding:16px 24px;font-weight:900;cursor:pointer}.file-modal{display:none;position:fixed;z-index:99;inset:0;background:rgba(0,0,0,.72);align-items:center;justify-content:center;padding:20px}.file-modal-box{width:min(100%,980px);height:min(90vh,760px);background:#fff;color:#222;border-radius:12px;padding:18px;position:relative}.file-modal-box h3{margin:0 0 12px}.file-modal-box iframe{width:100%;height:calc(100% - 74px);border:1px solid #ddd}.file-modal-box small{display:block;color:#555;margin-top:6px}.modal-close{position:absolute;right:14px;top:10px;border:0;background:#d94444;color:#fff;border-radius:50%;width:34px;height:34px;font-size:24px;line-height:1;padding:0;cursor:pointer}@media(max-width:760px){.school-countdown-logo img{max-width:150px}.file-modal{padding:8px}.file-modal-box{height:92vh}}

/* Fix countdown identity area: logo + nama sekolah tepat di atas kartu hitung mundur */
.page-center.has-countdown{flex-direction:column;gap:0;}
.page-center.has-countdown .school-countdown-logo{width:min(100%,780px);text-align:center;margin:0 0 18px;}
.page-center.has-countdown .school-countdown-logo img{width:auto;max-width:96px;max-height:70px;object-fit:contain;display:block;margin:0 auto 8px;background:rgba(255,255,255,.92);border-radius:10px;padding:6px;box-shadow:0 10px 28px rgba(0,0,0,.18)}
.page-center.has-countdown .school-countdown-logo h2{margin:0;color:#fff;font-size:clamp(18px,2.7vw,26px);font-weight:900;letter-spacing:.04em;text-transform:uppercase;text-shadow:0 2px 14px rgba(0,0,0,.36)}
@media(max-width:760px){.page-center.has-countdown .school-countdown-logo img{max-width:78px;max-height:58px}.page-center.has-countdown .school-countdown-logo{margin-bottom:14px}.page-center.has-countdown .school-countdown-logo h2{font-size:18px}}