/* e-Lapor Sarpras — UI system: navy/blue + school yellow */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{
 --navy:#102a56;--blue:#175cd3;--blue-2:#2675f5;--blue-50:#eff6ff;--blue-100:#dbeafe;
 --yellow:#ffd43b;--yellow-2:#ffbf1f;--ink:#172b4d;--muted:#66758c;--line:#e3eaf4;
 --bg:#f4f7fc;--white:#fff;--green:#067647;--red:#b42318;--shadow:0 12px 34px rgba(16,42,86,.08);
 --radius:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--blue);text-decoration:none;transition:color .18s ease}
a:hover{color:var(--navy);text-decoration:none}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
.topbar{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(227,234,244,.9);min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:12px max(22px,calc((100vw - 1200px)/2))}
.brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:900;color:var(--navy);letter-spacing:-.8px;white-space:nowrap}
.brand:before{content:"✓";display:grid;place-items:center;width:38px;height:38px;border-radius:13px;background:var(--yellow);color:var(--navy);font-size:22px;box-shadow:0 5px 12px #ffbf1f45}
.brand span{color:var(--blue)}
.toplinks{display:flex;align-items:center;gap:8px}
.toplinks a{padding:9px 13px;border-radius:10px;font-size:13px;font-weight:700;color:#42536e}
.toplinks a:hover{background:var(--blue-50);color:var(--blue)}
.nav-toggle{display:none;border:1px solid var(--line);background:#fff;border-radius:11px;padding:9px 12px;color:var(--navy);font-weight:800}
.container{width:min(1200px,calc(100% - 40px));margin:32px auto 60px;min-height:62vh}
.hero{position:relative;overflow:hidden;padding:clamp(32px,5.5vw,68px);border-radius:28px;background:linear-gradient(120deg,#102a56 0%,#174ea6 56%,#2675f5 100%);color:#fff;box-shadow:0 22px 50px rgba(23,78,166,.2)}
.hero:before,.hero:after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.hero:before{width:340px;height:340px;right:-85px;top:-125px;border:54px solid rgba(255,212,59,.18)}
.hero:after{width:220px;height:220px;right:115px;bottom:-175px;background:rgba(255,212,59,.12)}
.hero>*{position:relative;z-index:1}
.hero h1{font-size:clamp(32px,5vw,56px);line-height:1.08;max-width:760px;margin:13px 0 18px;letter-spacing:-2px;font-weight:900}
.hero p{max-width:650px;color:#e1ebff;font-size:clamp(15px,1.6vw,18px);margin:0 0 30px}
.eyebrow{font-size:11px;font-weight:900;letter-spacing:1.8px;color:#a16207;text-transform:uppercase}
.hero .eyebrow{color:var(--yellow)}
.grid{display:grid;gap:18px}
.three{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:22px}
.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.card,.panel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:0 5px 20px rgba(16,42,86,.035);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#c9daf5}
.card h3{margin:10px 0 6px;font-size:17px;letter-spacing:-.3px}
.card p{color:var(--muted);margin:0}
.icon{width:48px;height:48px;display:grid;place-items:center;background:linear-gradient(145deg,var(--blue-50),var(--blue-100));color:var(--blue);border-radius:15px;font-size:25px}
.panel{margin-bottom:20px}
.narrow{max-width:760px;margin:0 auto}
.panel h1{font-size:clamp(27px,4vw,36px);line-height:1.2;margin:8px 0 20px;letter-spacing:-1.1px}
.panel h2{margin:0 0 14px;font-size:20px;letter-spacing:-.4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:12px;padding:12px 18px;background:var(--blue);color:#fff;font-weight:800;cursor:pointer;font-size:14px;min-height:44px;box-shadow:0 5px 12px rgba(23,92,211,.13);transition:transform .15s ease,background .15s ease,box-shadow .15s ease}
.btn:after{content:"";display:inline-block;width:6px;height:6px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);opacity:.65}
.btn:hover{background:var(--navy);color:#fff;transform:translateY(-1px);box-shadow:0 8px 18px rgba(16,42,86,.16)}
.hero .btn{background:var(--yellow);color:#352700;box-shadow:0 8px 20px #071e4340}
.hero .btn:hover{background:#ffe477;color:#352700}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn.secondary{background:#edf3fc;color:var(--navy);box-shadow:none;border:1px solid #dce7f8}
.btn.secondary:hover{background:#dceaff;color:var(--blue)}
.btn.danger{background:#fff0ee;color:#b42318;box-shadow:none}
.small-btn{min-height:36px;padding:8px 11px;font-size:12px;border-radius:9px}
form{display:grid;gap:17px}
label{display:grid;gap:8px;font-weight:700;color:#344563;font-size:13px}
input,select,textarea{width:100%;color:var(--ink);background:#fff;border:1px solid #d2dceb;border-radius:11px;padding:12px 13px;outline:none;transition:border-color .18s ease,box-shadow .18s ease}
input::placeholder,textarea::placeholder{color:#9aa8bc}
input:focus,select:focus,textarea:focus{border-color:#4f8df7;box-shadow:0 0 0 4px rgba(38,117,245,.12)}
input[type=file]{padding:9px;background:#f9fbff}
textarea{resize:vertical;min-height:100px}
small,.small{font-size:12px;color:var(--muted);font-weight:400}
label small{font-weight:400}
.required{color:var(--red)}
.muted{color:var(--muted)}
.location-pill{display:inline-flex;align-items:center;gap:7px;border-radius:10px;background:var(--blue-50);border:1px solid var(--blue-100);padding:9px 13px;color:var(--blue);margin:0 0 10px;font-size:13px}
.alert{padding:14px 16px;border-radius:13px;margin-bottom:20px;border:1px solid;font-size:13px;font-weight:600}
.alert.success{background:#ecfdf3;color:#067647;border-color:#abefc6}
.alert.error{background:#fef3f2;color:#b42318;border-color:#fecdca}
.alert.warning{background:#fffaeb;color:#93370d;border-color:#fedf89}
.honeypot{position:absolute;left:-9999px;opacity:0}
.small.muted{margin-top:20px}
.success-mark{margin:0 auto 16px;border-radius:22px;width:66px;height:66px;background:#dcfae6;color:#067647;display:grid;place-items:center;font-size:34px;box-shadow:0 7px 18px #06764712}
.report-code{display:inline-block;background:linear-gradient(120deg,#eff6ff,#fff8d9);border:1px dashed #8cb3f7;border-radius:14px;padding:13px 23px;font-size:clamp(20px,3vw,27px);font-weight:900;letter-spacing:1.5px;color:var(--blue);margin:12px}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.page-head h1{margin:4px 0;font-size:clamp(27px,4vw,36px);letter-spacing:-1px;font-weight:900}
.page-head p{margin:4px 0}
.stats{margin-bottom:30px}
.stat{position:relative;overflow:hidden;padding:19px;border-top:3px solid var(--blue)}
.stat:nth-child(2n){border-top-color:var(--yellow-2)}
.stat:after{content:"";position:absolute;width:66px;height:66px;right:-25px;bottom:-27px;border-radius:50%;background:var(--blue-50)}
.stat:nth-child(2n):after{background:#fff7d6}
.stat-num{font-size:clamp(28px,3vw,36px);font-weight:900;line-height:1.2;margin-top:8px;letter-spacing:-1px}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:26px 0 14px}
.toolbar h2{font-size:21px;letter-spacing:-.5px;margin:0}
.toolbar>div{display:flex;flex-wrap:wrap;gap:7px}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:16px;background:#fff;margin-bottom:25px;box-shadow:0 5px 18px rgba(16,42,86,.025)}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{text-align:left;padding:14px 15px;border-bottom:1px solid #edf1f7;vertical-align:top}
th{background:#f7f9fd;color:#5a6980;font-size:10px;letter-spacing:.8px;text-transform:uppercase;white-space:nowrap}
td small{display:block;margin-top:4px}
tbody tr{transition:background .15s ease}
tbody tr:hover{background:#f8fbff}
tbody tr:last-child td{border-bottom:0}
.status{display:inline-flex;align-items:center;white-space:nowrap;padding:5px 9px;border-radius:99px;background:#f2f4f7;color:#344054;font-size:11px;font-weight:800}
.status.baru{background:#eaf3ff;color:#175cd3}
.status.diproses{background:#fff5d6;color:#925f00}
.status.menunggu{background:#f2edff;color:#5925dc}
.status.selesai{background:#e7f8ed;color:#067647}
.status.ditolak{background:#fef0ee;color:#b42318}
.filterbar{display:flex;gap:10px;align-items:center;margin-bottom:18px;background:#fff;padding:13px;border:1px solid var(--line);border-radius:15px}
.filterbar input{max-width:480px}.filterbar select{max-width:240px}
.report-photo{max-width:100%;max-height:380px;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow)}
.timeline{padding-left:22px}.timeline li{margin-bottom:18px;padding-left:4px}.timeline li::marker{color:var(--blue)}.timeline small{display:block}.location-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.qr{min-height:190px;display:flex;justify-content:center;align-items:center;margin:16px auto;background:#fff;border-radius:12px}
.url-text{overflow-wrap:anywhere;background:#f7f9fd;border-radius:8px;padding:8px}
.actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center}.actions form{display:inline}
.inline-form{display:flex;gap:10px;align-items:center}.inline-form input{flex:1}
.footer{text-align:center;color:#8795aa;padding:24px 18px;border-top:1px solid var(--line);font-size:12px;background:#fff}
.center{text-align:center;padding:42px}
@media(max-width:1000px){.five{grid-template-columns:repeat(3,minmax(0,1fr))}.toolbar{align-items:flex-start;flex-direction:column}.toolbar>div{gap:7px}}
@media(max-width:700px){
 .topbar{min-height:64px;padding:10px 16px;flex-wrap:wrap;gap:8px}
 .brand{font-size:19px}.brand:before{width:34px;height:34px;border-radius:11px}
 .nav-toggle{display:block;margin-left:auto}
 .toplinks{display:none;order:3;width:100%;padding:8px 0 4px;border-top:1px solid var(--line);flex-direction:column;align-items:stretch}
 .toplinks.open{display:flex}.toplinks a{padding:11px 12px}
 .container{width:calc(100% - 24px);margin:20px auto 40px}
 .hero{padding:34px 23px;border-radius:22px}.hero h1{letter-spacing:-1.2px}
 .three,.two,.five{grid-template-columns:1fr}.grid{gap:13px}
 .page-head{align-items:flex-start;flex-direction:column;gap:12px}
 .toolbar{gap:12px}.toolbar>div{width:100%}.toolbar .btn{flex:1}
 .filterbar{align-items:stretch;flex-direction:column;padding:11px}.filterbar input,.filterbar select{max-width:none}
 .panel{padding:19px;border-radius:16px}.center{padding:30px 18px}
 .inline-form{align-items:stretch;flex-direction:column}
 .actions form{display:inline}.stat{padding:16px}
 th,td{padding:12px 11px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media print{
 body{background:#fff}.topbar,.footer,.page-head,.alert,.actions,.container>section:not(.grid){display:none!important}
 .container{width:100%;margin:0}.grid.two{grid-template-columns:repeat(2,1fr)}
 .location-card{break-inside:avoid;box-shadow:none}.url-text{font-size:9px}.qr{min-height:180px}
}

.ui-enter{animation:uiEnter .32s ease both}@keyframes uiEnter{from{opacity:.01;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}