:root{--green:#16852b;--green2:#0f6b24;--mint:#edf8e9;--gold:#f2b900;--ink:#1c3320;--muted:#69766b;--line:#e2eadf;--bg:#ffffff;--white:#fff;--red:#b64040;--shadow:0 10px 30px #173d1a0d}
#app[hidden]{display:none!important}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}button,input,select,textarea{font:inherit}button{cursor:pointer}.app{display:flex;min-height:100vh}.sidebar{width:250px;background:linear-gradient(165deg,#104b37,#0b382a);color:white;padding:22px 15px;display: block;gap:20px;flex-shrink:0}.brand{display:flex;gap:12px;align-items:center;padding:5px 9px 20px;border-bottom:1px solid #ffffff25}.brand-mark{width:43px;height:43px;border:1px solid #d6b56d;border-radius:14px;display:grid;place-items:center;color:#e5c77f;font-size:23px}.brand h1{font-size:21px;letter-spacing:2px;margin:0}.brand p{margin:3px 0 0;color:#c2d9cd;font-size:11px}.nav-label{font-size:10px;letter-spacing:1.5px;color:#a9c9b8;padding:0 12px;margin:4px 0}.nav{display:grid;gap:5px}.nav button{border:0;background:transparent;color:#d8e9df;padding:12px;border-radius:10px;text-align:left;display:flex;align-items:center;gap:12px;font-size:13px}.nav button:hover,.nav button.active{background:#ffffff18;color:white}.nav .ico{width:21px;text-align:center;font-size:17px}.sidebar-foot{margin-top:12px;font-size:11px;color:#b8d1c3;padding:12px}.main{flex:1;min-width:0}.topbar{height:76px;background:#ffffffd9;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;gap:15px;position:sticky;top:0;z-index:4;backdrop-filter:blur(12px)}.topbar small{display:block;color:var(--muted);font-size:11px;margin-bottom:3px}.topbar strong{font-size:17px}.operator{display:flex;align-items:center;gap:10px;font-size:12px}.avatar{width:35px;height:35px;background:var(--mint);color:var(--green);border-radius:50%;display:grid;place-items:center;font-weight:800}.content{padding:27px 30px;max-width:1500px;margin:auto}.welcome{background:linear-gradient(110deg,#155b42,#247b58);border-radius:18px;padding:27px 30px;color:white;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:23px;position:relative;overflow:hidden}.welcome:after{content:"۞";font-size:160px;color:#ffffff0d;position:absolute;right:25px;top:-45px}.welcome h2{margin:0 0 8px;font-size:24px}.welcome p{margin:0;color:#d7ebe0;font-size:13px;max-width:550px;line-height:1.6}.welcome .date{background:#ffffff18;border:1px solid #ffffff35;padding:10px 14px;border-radius:10px;font-size:12px;white-space:nowrap;z-index:1}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:22px}.stat,.panel{background:white;border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow)}.stat{padding:18px;display:flex;gap:14px;align-items:center}.stat-icon{width:45px;height:45px;border-radius:13px;background:var(--mint);display:grid;place-items:center;font-size:21px}.stat small{color:var(--muted);font-size:11px}.stat strong{display:block;font-size:25px;margin-top:4px}.panel{padding:20px;margin-bottom:18px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:17px;flex-wrap:wrap}.panel h3{margin:0;font-size:15px}.muted{color:var(--muted);font-size:12px}.btn{border:1px solid var(--line);background:white;color:var(--ink);padding:9px 13px;border-radius:9px;font-size:12px;font-weight:650}.btn:hover{background:var(--mint)}.btn.primary{background:var(--green);color:white;border-color:var(--green)}.btn.primary:hover{background:var(--green2)}.btn.danger{color:var(--red);border-color:#f0d0d0}.btn.small{padding:6px 9px;font-size:11px}.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.search{min-width:200px;max-width:100%}input,select,textarea{width:100%;padding:10px 11px;border:1px solid #d8e4dc;border-radius:9px;background:white;color:var(--ink);outline:none;font-size:12px}input:focus,select:focus,textarea:focus{border-color:#4d9c78;box-shadow:0 0 0 3px #4d9c7818}label{display:block;font-size:11px;font-weight:700;color:#53675d;margin-bottom:6px}.field{margin-bottom:13px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}.form-grid .full{grid-column:1/-1}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:12px;white-space:nowrap}th{text-align:left;background:#f5f9f6;color:#6b7d74;font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.4px}td,th{padding:12px 11px;border-bottom:1px solid #edf2ee}tbody tr:hover{background:#fbfdfb}.pill{display:inline-block;border-radius:20px;padding:5px 8px;font-size:10px;font-weight:700;background:#e9f6ee;color:#26734e}.pill.warn{background:#fff4dd;color:#956b15}.pill.bad{background:#fdeaea;color:#a33737}.empty{text-align:center;color:var(--muted);padding:30px!important}.hidden{display:none!important}.section-title{margin:0 0 5px;font-size:23px}.section-desc{margin:0 0 22px;color:var(--muted);font-size:12px}.two-col{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.quick{padding:15px;border:1px solid var(--line);border-radius:12px;background:#fbfdfb;text-align:left;color:var(--ink)}.quick span{font-size:21px;display:block;margin-bottom:9px}.quick strong{font-size:12px;display:block}.quick small{font-size:10px;color:var(--muted)}.modal-backdrop{position:fixed;inset:0;background:#0c2118a8;display:grid;place-items:center;padding:16px;z-index:10}.modal{background:white;border-radius:17px;width:min(650px,100%);max-height:90vh;overflow:auto;padding:22px;box-shadow:0 25px 70px #0003}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.modal-head h3{margin:0;font-size:18px}.xbtn{border:0;background:#f0f5f1;border-radius:8px;width:32px;height:32px;font-size:20px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.notice{padding:12px 14px;background:#f0f8f3;border:1px solid #d8e9dd;border-radius:10px;color:#426452;font-size:11px;line-height:1.6;margin-bottom:14px}.report-card{border:1px dashed #b8cfc0;border-radius:12px;padding:18px}.report-card h3{text-align:center;margin:0}.report-card p{text-align:center;font-size:11px;color:var(--muted)}.report-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:12px;margin:18px 0}.grade{font-size:32px;font-weight:800;color:var(--green)}.footer-note{font-size:10px;color:var(--muted);text-align:center;margin:25px 0 5px}.mobile-menu{display:none}.toast{position:fixed;bottom:22px;right:22px;background:#123e2c;color:white;padding:12px 17px;border-radius:10px;box-shadow:var(--shadow);z-index:20;font-size:12px;max-width:90vw}

/* Kotak putih di belakang logodan tulisan NURDA */
.brand { 
  background: rgba(255, 255, 255, 0.692);
  padding: 18px;
  border-radius: 14px;
  gap: 10px;
  border: 0px solid #f3f3f1;
  box-shadow: 0 4px 14px #173d1a18;
}

/* object nurda di latar putih*/

.brand h1 { 
  font-family: 'georgia', serif;
  font-size: 27px;
  font-weight: 800;
  color: #075b20;
  letter-spacing: 1px;
}


.brand p {
  font-family: 'Arial', serif;
  font-size: medium;
  font-weight: bold;
  color: #b8860b;
}
.nav .ico svg,.dashboard-icon svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dashboard-icon {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.dashboard-icon svg { width: 23px; height: 23px; }
.quick > span svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.date-icon {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 6px;
}
.date-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Preview hasil QR hampir layar penuh */
.qr-preview{position:fixed;inset:0;background:radial-gradient(circle at 15% 15%,#236a4b99,transparent 40%),rgba(3,24,17,.94);z-index:100;display:flex;align-items:center;justify-content:center;padding:1.5vh 1.5vw;backdrop-filter:blur(9px);animation:qrFadeIn .22s ease-out}.qr-preview-progress{height:4px;background:#ffffff28;overflow:hidden}.qr-preview-progress span{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff9b35,#f5d28b);transform-origin:left;animation:qrCountdown 7s linear forwards}.qr-preview-card{animation:qrCardIn .28s ease-out}@keyframes qrFadeIn{from{opacity:0}to{opacity:1}}@keyframes qrCardIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes qrCountdown{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.qr-preview-card{position:relative;width:min(1400px,100%);height:min(94vh,1000px);overflow:auto;background:#f7fbf8;border-radius:24px;box-shadow:0 25px 90px #0006;display:flex;flex-direction:column}
.qr-preview-head{background:radial-gradient(circle at 95% 10%,#ffffff18,transparent 28%),linear-gradient(110deg,#104b37,#23805a);color:#fff;padding:22px 30px;display:flex;align-items:center;justify-content:space-between;gap:15px}
.qr-preview-head h2{margin:0;font-size:clamp(20px,2.3vw,32px)}.qr-preview-head p{margin:5px 0 0;color:#d4eadf;font-size:13px}
.qr-preview-body{padding:clamp(18px,3vw,38px);display:grid;grid-template-columns:minmax(250px,.8fr) minmax(0,1.5fr);gap:clamp(18px,3vw,40px);flex:1}
.qr-photo-wrap{display:flex;flex-direction:column;gap:14px;justify-content:center}.qr-photo-wrap .notice{box-shadow:0 5px 18px #123d2808}.qr-preview-card:after{content:"NURDA  NURUL HUDA";position:absolute;right:28px;bottom:14px;pointer-events:none;color:#145c4310;font-weight:900;letter-spacing:4px;font-size:clamp(18px,3vw,40px)}.qr-student-photo{width:100%;aspect-ratio:3/4;max-height:65vh;object-fit:cover;border-radius:20px;border:5px solid white;box-shadow:0 8px 28px #143e281c;background:#e5f1e9}.qr-photo-placeholder{width:100%;aspect-ratio:3/4;max-height:65vh;border-radius:20px;background:linear-gradient(145deg,#e2f1e8,#f6faf7);border:2px dashed #b8d5c4;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#47765d;text-align:center;padding:20px}.qr-photo-placeholder .symbol{font-size:clamp(60px,8vw,100px);line-height:1}.qr-photo-placeholder strong{margin-top:15px}.qr-info{display:flex;flex-direction:column;gap:16px}.qr-status-banner{border-radius:14px;padding:16px 18px;background:#e1f6e8;border:1px solid #b5e4c5;color:#17653c}.qr-status-banner.warn{background:#fff4db;border-color:#f1d99c;color:#805a0b}.qr-status-banner h3{margin:0 0 5px;font-size:20px}.qr-status-banner p{margin:0;font-size:13px}.qr-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.qr-info-item{background:white;border:1px solid #dce9e0;border-radius:13px;padding:14px 16px;min-width:0}.qr-info-item small{display:block;color:#6b7d74;font-size:11px;margin-bottom:7px}.qr-info-item strong{display:block;font-size:clamp(13px,1.3vw,17px);overflow-wrap:anywhere}.qr-info-item.wide{grid-column:1/-1}.qr-preview-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}.qr-preview-close{border:0;background:#ffffff22;color:white;border-radius:11px;padding:10px 16px;font-size:24px;line-height:1}.qr-preview-foot{padding:14px 30px;border-top:1px solid #dce9e0;color:#6b7d74;font-size:11px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media(max-width:700px){.qr-preview{padding:0}.qr-preview-card{height:100dvh;border-radius:0}.qr-preview-head{padding:17px}.qr-preview-body{grid-template-columns:1fr;padding:16px;gap:16px}.qr-photo-wrap{display:grid;grid-template-columns:110px 1fr;align-items:center}.qr-student-photo,.qr-photo-placeholder{width:110px;height:135px;min-height:135px;aspect-ratio:auto;border-radius:14px}.qr-photo-placeholder .symbol{font-size:38px}.qr-photo-placeholder strong{font-size:10px}.qr-info-grid{gap:8px}.qr-info-item{padding:11px}.qr-preview-foot{padding:12px 16px}}
@media(max-width:1000px){.sidebar{width:215px}.content{padding:22px 18px}.stats{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}}
@media(max-width:700px){.app{display:block}.sidebar{position: fixed; z-index:8;left:-260px;top:0;bottom:0;width:250px;transition:left .2s;box-shadow:10px 0 35px #0002}.sidebar.open{left:0}.topbar{height:65px;padding:0 15px}.mobile-menu{display:inline-block;border:0;background:var(--mint);border-radius:9px;padding:9px}.content{padding:17px 12px}.welcome{padding:21px;display:block}.welcome h2{font-size:21px}.welcome .date{display:inline-block;margin-top:15px}.stats{gap:9px}.stat{padding:13px;gap:9px}.stat-icon{width:37px;height:37px}.stat strong{font-size:21px}.quick-grid{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.operator .op-label{display:none}.panel{padding:14px}.search{min-width:140px;flex:1}}

/* NURDA signature scan experience: emerald glass, warm gold, editorial profile */
.qr-preview{padding:1.2vh 1.2vw;background:radial-gradient(ellipse at 12% 15%,#28a16a55,transparent 36%),radial-gradient(ellipse at 90% 85%,#e98b2b30,transparent 35%),rgba(2,19,13,.91);backdrop-filter:blur(16px)}
.qr-preview-card{width:min(1540px,100%);height:min(96vh,1080px);border:1px solid #e6d3a366;border-radius:28px;background:#f7faf7;box-shadow:0 35px 110px #0008;overflow:hidden}
.qr-preview-head{min-height:104px;padding:22px 32px;background:linear-gradient(115deg,#083d2c 0%,#126044 55%,#24805b 100%);position:relative;overflow:hidden}
.qr-preview-head:after{content:'۞';position:absolute;right:190px;top:-62px;font-size:190px;color:#ffffff0d;pointer-events:none}
.qr-preview-head h2{font-size:clamp(22px,2.5vw,36px);letter-spacing:-.6px;font-weight:800}.qr-preview-head p{font-size:12px;letter-spacing:.7px;text-transform:uppercase}
.qr-preview-close{z-index:2;width:42px;height:42px;border:1px solid #ffffff35;background:#ffffff12;border-radius:14px;font-size:27px;transition:.2s}.qr-preview-close:hover{background:#ffffff28;transform:rotate(90deg)}
.qr-preview-body{grid-template-columns:minmax(270px,.78fr) minmax(0,1.5fr);gap:clamp(22px,3vw,46px);padding:clamp(22px,3vw,44px);overflow:auto}
.qr-photo-wrap{position:relative;justify-content:flex-start;gap:16px}.qr-photo-wrap:before{content:'PROFIL SANTRI';font-size:10px;font-weight:800;letter-spacing:2.4px;color:#6b8576}
.qr-student-photo{aspect-ratio:4/5;max-height:61vh;border:6px solid white;border-radius:25px;box-shadow:0 18px 45px #103d2820;outline:1px solid #d8e7dd}
.qr-photo-placeholder{aspect-ratio:4/5;max-height:61vh;border:1px dashed #a8cbb6;border-radius:25px;background:radial-gradient(circle at 50% 32%,#ffffff,#e5f2e9 75%);box-shadow:inset 0 0 0 8px #ffffff80}.qr-photo-placeholder .symbol{display:grid;place-items:center;width:108px;height:108px;border-radius:32px;background:linear-gradient(145deg,#176747,#0b4732);color:#f8d99a;box-shadow:0 14px 30px #145c4328}
.qr-photo-wrap .notice{border-radius:15px;background:#edf5ef;border-color:#dce9df;padding:13px 15px}
.qr-info{gap:18px}.qr-status-banner{border:0;border-radius:18px;padding:20px 22px;background:linear-gradient(120deg,#e1f8e9,#f2fbf5);box-shadow:inset 4px 0 #1d9a5f;position:relative;overflow:hidden}.qr-status-banner:after{content:'✓';position:absolute;right:17px;top:-14px;font-size:86px;font-weight:900;color:#16844b0e}.qr-status-banner h3{font-size:clamp(20px,2vw,28px);letter-spacing:-.4px}.qr-status-banner p{font-size:12px;line-height:1.6}.qr-status-banner.warn{background:linear-gradient(120deg,#fff3d7,#fffaf0);box-shadow:inset 4px 0 #e6a12b}
.qr-info-grid{gap:11px}.qr-info-item{border:1px solid #e1ebe4;border-radius:15px;padding:15px 17px;box-shadow:0 4px 14px #173c2706;transition:transform .18s,border-color .18s}.qr-info-item:hover{transform:translateY(-2px);border-color:#a8cfb6}.qr-info-item small{letter-spacing:1.1px;text-transform:uppercase;font-size:9px;font-weight:800;color:#7a9183}.qr-info-item strong{font-size:clamp(13px,1.25vw,17px);line-height:1.45;color:#183f2e}.qr-info-item.wide:first-child{background:linear-gradient(110deg,#fff,#f0f8f2)}.qr-info-item.wide:first-child strong{font-size:clamp(19px,2.2vw,30px);letter-spacing:-.5px}
.qr-preview-actions{padding-top:4px}.qr-preview-actions .btn{padding:13px 18px;border-radius:12px;font-size:12px}.qr-preview-actions .btn.primary{background:linear-gradient(110deg,#126044,#21835a);box-shadow:0 8px 20px #12604425}.qr-preview-foot{background:#fff;padding:13px 30px;border-top:1px solid #e5eee7;font-size:10px}
@media(max-width:700px){.qr-preview-body{grid-template-columns:1fr}.qr-photo-wrap{display:grid;grid-template-columns:100px 1fr;align-items:center}.qr-photo-wrap:before{grid-column:1/-1}.qr-student-photo,.qr-photo-placeholder{width:100px;height:126px;min-height:126px;aspect-ratio:auto;border-radius:16px}.qr-photo-placeholder .symbol{width:52px;height:52px;border-radius:16px;font-size:30px}.qr-photo-placeholder strong{font-size:10px}.qr-info-item.wide:first-child strong{font-size:18px}.qr-preview-head:after{display:none}}


/* Identitas logo TPQ Nurul Huda: hijau dan kuning, kanvas utama putih */
body,.app,.main,.content{background:#fff}
.brand-mark{width:58px;height:58px;flex:0 0 58px;border:0;border-radius:0;background:transparent;overflow:visible;display:grid;place-items:center;padding:0}
.brand-mark img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 3px #06471966) drop-shadow(0 0 5px #ffffff)}
.brand{gap:10px;padding-bottom:18px;border-bottom:1px solid #f2b90055}
.brand > div:last-child{border-left:1px solid #b8860b;padding-left:12px}
.brand h1{color:#005701;letter-spacing:1.8px;text-shadow:0 1px 2px #ffffff,0 2px 4px #003d163d}.brand p{color:#f5d35b;text-shadow:0 1px 2px #082c18,0 0 4px #082c1866}
.sidebar{background:linear-gradient(165deg,#daaf00 -25%,#064719 58%,#ffbb00 110%)}
.nav button:hover,.nav button.active{background:linear-gradient(100deg,#f2b900,#ffd84d);color:#18321e;box-shadow:0 5px 14px #f2b90025}
.nav button{color:#e9f5e8}.nav-label{color:#f5d35b}.sidebar-foot{color:#d9e9d7}
.topbar{background:#fff;border-bottom:1px solid #e5ecdf;backdrop-filter:none}
.welcome{background:linear-gradient(110deg,#0d7626,#16852b 66%,#267d31);box-shadow:0 12px 28px #16852b18}
.welcome .date{border-color:#f2d76a66;background:#ffffff14}
.stat,.panel{border-color:#e5ecdf;box-shadow:0 8px 24px #17451a08}
.stat-icon{background:#edf8e9;color:#16852b;border:1px solid #d6ebcf}
.btn.primary,.qr-preview-actions .btn.primary{background:linear-gradient(110deg,#11752a,#16852b);border-color:#16852b}
.btn.primary:hover{background:#0b6422}
input:focus,select:focus,textarea:focus{border-color:#64ad54;box-shadow:0 0 0 3px #16852b14}
th{background:#f3f9ef;color:#667765}tbody tr:hover{background:#fbfdf9}
.pill{background:#e8f7e5;color:#1b7c2b}.quick{background:#fff;border-color:#e4ecdf}.quick:hover{background:#f8fcf5;border-color:#b9d9ac}
.qr-preview-card{background:#fff;border-color:#f2d76a88}.qr-preview-head{background:linear-gradient(115deg,#075b20 0%,#16852b 66%,#c89500 130%)}
.qr-preview-progress span{background:linear-gradient(90deg,#f2b900,#16852b)}
.qr-status-banner{background:linear-gradient(120deg,#eaf8e6,#fff);box-shadow:inset 4px 0 #16852b}.qr-status-banner.warn{background:linear-gradient(120deg,#fff5d9,#fffdf6);box-shadow:inset 4px 0 #e0a400}
.qr-info-item.wide:first-child{background:linear-gradient(110deg,#fff,#f5faef)}
.qr-photo-placeholder{background:radial-gradient(circle at 50% 32%,#fff,#edf8e9 75%);color:#267333}
.qr-photo-placeholder .symbol{background:linear-gradient(145deg,#16852b,#075b20);color:#ffdc54}
@media(max-width:700px){.brand-mark{width:48px;height:48px;flex-basis:48px}}
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(145deg,#edf8e9,#fff)}
.auth-card{width:min(440px,100%);background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:0 18px 50px #173d1a14}
.auth-card h1{margin:14px 0 7px;font-size:23px;color:var(--ink)}
.auth-card>p{line-height:1.6}
.auth-mark{background:var(--green);color:#fff;font-weight:800}
.auth-submit{width:100%;margin-top:5px}
.auth-link{display:block;margin:16px auto 0;border:0;background:transparent;color:var(--green2);font-size:12px;text-decoration:underline}
.auth-error{color:#8f2d2d;background:#fff2f2;border-color:#f0d0d0;overflow-wrap:anywhere}
.auth-card button:disabled{opacity:.65;cursor:wait}