/* Masjid Display v4.2.17 — Login Portal menggunakan QR */
.login-card .qr-login-divider{display:flex;align-items:center;gap:12px;margin:17px 0;color:#789087;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em}.login-card .qr-login-divider:before,.login-card .qr-login-divider:after{content:"";height:1px;flex:1;background:rgba(10,76,61,.14)}.qr-login-start{width:100%;min-height:45px;border:1px solid rgba(10,76,61,.22);background:linear-gradient(135deg,rgba(10,76,61,.08),rgba(217,180,91,.12));color:#083f33;font-weight:800}.qr-login-panel{margin-top:14px;padding:16px;border:1px solid rgba(10,76,61,.16);border-radius:18px;background:linear-gradient(160deg,#f8fcfa,#eef7f3);text-align:center}.qr-login-panel.hidden{display:none}.qr-login-code{width:236px;max-width:100%;min-height:236px;margin:0 auto 13px;padding:8px;border-radius:16px;background:#fff;display:grid;place-items:center;box-shadow:0 12px 34px rgba(4,31,24,.12)}.qr-login-code canvas,.qr-login-code img{display:block!important;max-width:100%;height:auto!important}.qr-login-panel strong{display:block;color:#073d31;font-size:1rem}.qr-login-panel p{margin:6px 0;color:#60766f;font-size:.82rem;line-height:1.45}.qr-login-expiry{display:inline-flex;align-items:center;gap:6px;margin:6px 0 11px;padding:6px 10px;border-radius:999px;background:rgba(10,76,61,.08);font-size:.78rem;font-weight:800;color:#0a4c3d}.qr-login-actions{display:flex;justify-content:center;gap:8px}.qr-login-actions button{min-height:36px;padding:8px 13px}.qr-login-panel.is-success{border-color:rgba(29,137,83,.38);background:#eefaf3}.qr-login-panel.is-error{border-color:rgba(184,65,65,.3);background:#fff4f4}.qr-login-panel.is-error strong{color:#9d3434}

.qr-approval-page{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 15%,#1b6b56 0,#0b352c 34%,#051a16 100%);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:#18352e}.qr-approval-card{width:min(460px,100%);padding:25px;border-radius:25px;background:#fff;box-shadow:0 28px 80px rgba(0,0,0,.34)}.qr-approval-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}.qr-approval-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:linear-gradient(145deg,#0a4c3d,#063126);color:#f3d98e;font-size:25px;font-weight:900}.qr-approval-brand strong,.qr-approval-brand span{display:block}.qr-approval-brand span{margin-top:2px;color:#6c807a;font-size:.8rem}.qr-approval-card h1{margin:5px 0 7px;font-size:1.55rem}.qr-approval-card>p{margin:0 0 18px;color:#647a73;line-height:1.55}.qr-approval-info{display:grid;gap:10px;margin:16px 0}.qr-approval-row{padding:12px 14px;border-radius:14px;background:#f1f7f4}.qr-approval-row small,.qr-approval-row strong{display:block}.qr-approval-row small{color:#71857e;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800}.qr-approval-row strong{margin-top:4px;font-size:.98rem;color:#123d32}.qr-approval-actions{display:grid;gap:9px;margin-top:18px}.qr-approval-actions button,.qr-approval-actions a{display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:13px;text-decoration:none;font-weight:850}.qr-approve-button{border:0;background:linear-gradient(135deg,#0a4c3d,#0e7259);color:#fff}.qr-approve-button:disabled{opacity:.55}.qr-approval-secondary{border:1px solid rgba(10,76,61,.18);background:#fff;color:#0a4c3d}.qr-approval-state{padding:14px;border-radius:14px;background:#edf8f2;color:#176b49;font-weight:750;line-height:1.5}.qr-approval-state.error{background:#fff0f0;color:#9f3636}.qr-approval-note{margin-top:14px!important;font-size:.78rem;text-align:center}.qr-approval-spinner{width:32px;height:32px;margin:20px auto;border:4px solid rgba(10,76,61,.14);border-top-color:#0a4c3d;border-radius:50%;animation:qrSpin .8s linear infinite}@keyframes qrSpin{to{transform:rotate(360deg)}}
@media(max-width:520px){.login-card{width:min(94vw,430px)}.qr-login-code{width:218px;min-height:218px}.qr-approval-card{padding:20px;border-radius:21px}}
@media(prefers-reduced-motion:reduce){.qr-approval-spinner{animation:none}}