:root{
  --blue:#0757c9;--blue2:#0ea5e9;--navy:#071f4d;--navy2:#0b3b89;--sky:#eaf6ff;--gold:#ffb703;--text:#172033;--muted:#69758d;--line:#e7edf5;--card:#fff;--danger:#dc3545;--ok:#14804a;--glass:rgba(255,255,255,.82)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:radial-gradient(circle at 20% 0%,#dff3ff 0,#f6fbff 34%,#ffffff 70%);color:var(--text);min-height:100vh}a{text-decoration:none;color:inherit}img{max-width:100%}
.topbar{position:sticky;top:0;z-index:40;min-height:76px;background:rgba(255,255,255,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(210,224,244,.85);display:flex;align-items:center;justify-content:space-between;padding:12px 24px;box-shadow:0 10px 30px rgba(8,47,112,.06)}
.brand{display:flex;gap:14px;align-items:center;min-width:0}.brand img{width:54px;height:54px;object-fit:contain;border-radius:16px;background:#fff;padding:5px;box-shadow:0 10px 24px rgba(7,31,87,.12)}.brand b{display:block;color:var(--navy);letter-spacing:.3px;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand span{display:block;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-pill{display:flex;gap:10px;align-items:center;color:#355070;font-size:13px}.top-pill span{background:#eef6ff;border:1px solid #dbeafe;border-radius:999px;padding:9px 13px;font-weight:800}.hamb{display:none;border:0;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;border-radius:14px;padding:11px 14px;font-weight:900;box-shadow:0 12px 25px rgba(7,87,201,.25)}
.layout{display:grid;grid-template-columns:286px 1fr;min-height:calc(100vh - 76px)}.sidebar{position:relative;background:linear-gradient(180deg,#061c47 0%,#082e74 48%,#054d9e 100%);padding:22px 16px;color:#fff;overflow:hidden}.sidebar:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 5%,rgba(14,165,233,.35),transparent 35%),radial-gradient(circle at 95% 70%,rgba(255,183,3,.16),transparent 35%);pointer-events:none}.sidebar a{position:relative;display:flex;align-items:center;gap:9px;padding:13px 14px;border-radius:16px;margin-bottom:8px;color:#eef6ff;font-weight:700;transition:.2s}.sidebar a:hover{background:rgba(255,255,255,.15);transform:translateX(4px)}.sidebar a:first-child{background:rgba(255,255,255,.10)}.content{padding:28px;overflow:auto}.content:before{content:"";position:fixed;right:-160px;bottom:-160px;width:460px;height:460px;background:radial-gradient(circle,rgba(14,165,233,.13),transparent 68%);z-index:-1}
.hero{position:relative;border-radius:34px;background:linear-gradient(135deg,rgba(4,74,180,.94),rgba(14,165,233,.92));color:#fff;padding:34px;display:grid;grid-template-columns:1.25fr .75fr;gap:24px;box-shadow:0 25px 70px rgba(6,84,199,.24);overflow:hidden;isolation:isolate}.hero.has-banner:before{content:"";position:absolute;inset:0;background-image:var(--hero-banner);background-size:cover;background-position:center;opacity:.20;z-index:-2}.hero:after{content:"";position:absolute;right:-70px;top:-90px;width:360px;height:360px;border-radius:50%;background:rgba(255,255,255,.13);z-index:-1}.hero h1{font-size:38px;line-height:1.15;margin:0 0 12px;letter-spacing:.8px}.hero p{opacity:.96;line-height:1.75;font-size:16px;max-width:900px}.hero-mini{display:flex;gap:14px;align-items:center;margin-bottom:16px}.hero-mini img{width:68px;height:68px;object-fit:contain;border-radius:20px;background:#fff;padding:7px;box-shadow:0 12px 25px rgba(0,0,0,.12)}.hero-card{background:rgba(255,255,255,.92);color:#173468;border:1px solid rgba(255,255,255,.7);border-radius:26px;padding:24px;backdrop-filter:blur(10px);box-shadow:0 20px 45px rgba(1,21,61,.14)}.hero-card b{font-size:13px;text-transform:uppercase;letter-spacing:.8px;color:#0b4db3}.hero-card h2{font-size:28px;margin:14px 0}.hero-card p{color:#385074;opacity:1;font-size:15px}.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}.hero-stat{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.22);border-radius:18px;padding:12px;text-align:center}.hero-stat strong{display:block;font-size:18px}.hero-stat small{opacity:.86}
.btn{display:inline-flex;align-items:center;gap:9px;border:0;border-radius:16px;background:linear-gradient(135deg,var(--blue),#0788e8);color:#fff;padding:12px 18px;font-weight:800;cursor:pointer;box-shadow:0 10px 24px rgba(7,87,201,.18);transition:.2s}.btn:hover{transform:translateY(-1px)}.btn.gold{background:linear-gradient(135deg,#ffd166,var(--gold));color:#1d2536}.btn.gray{background:#eef3f9;color:#263247;box-shadow:none}.btn.red{background:linear-gradient(135deg,#ef4444,var(--danger))}.grid{display:grid;gap:18px}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}.card{background:rgba(255,255,255,.92);border:1px solid rgba(218,230,246,.95);border-radius:24px;padding:21px;box-shadow:0 14px 40px rgba(7,31,87,.08);backdrop-filter:blur(10px)}.stat b{font-size:32px;color:var(--blue)}.stat span{display:block;color:var(--muted);font-size:13px}.form-section{margin:20px 0}.form-title{font-size:18px;font-weight:900;color:var(--navy);border-bottom:1px dashed var(--line);padding-bottom:10px;margin-bottom:14px}.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.field label{font-size:13px;color:#33415f;font-weight:800;margin-bottom:6px;display:block}.field input,.field select,.field textarea{width:100%;border:1px solid #dbe5f2;border-radius:14px;padding:12px 13px;background:#fff;font-size:14px;outline:none;transition:.2s}.field input:focus,.field select:focus,.field textarea:focus{border-color:#60a5fa;box-shadow:0 0 0 4px rgba(96,165,250,.18)}.field textarea{min-height:96px;resize:vertical}.field small{display:block;margin-top:6px;color:#64748b}.span-2{grid-column:span 2}.span-3{grid-column:span 3}.preview-box{border:1px dashed #bad5f5;border-radius:18px;padding:14px;background:#f8fbff}.preview-box img{max-height:100px;object-fit:contain;background:#fff;border-radius:12px;padding:6px}.table-wrap{overflow:auto;border-radius:20px;border:1px solid var(--line);background:#fff}table{width:100%;border-collapse:collapse;min-width:900px}th,td{padding:12px 13px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}th{background:#f2f7ff;color:#173468;white-space:nowrap}.badge{display:inline-block;border-radius:999px;padding:6px 11px;font-size:12px;font-weight:900}.pending{background:#fff3cd;color:#7d5900}.verified{background:#dff7e9;color:#0d6b3a}.rejected{background:#ffe2e2;color:#a32222}.alert{border-radius:16px;padding:13px 16px;margin-bottom:16px;font-weight:800}.ok{background:#e5fff0;color:#0c6d3c}.err{background:#ffe9e9;color:#a32424}.actions{display:flex;gap:9px;flex-wrap:wrap}
.doc{background:#fff;color:#111;max-width:794px;margin:auto;padding:var(--print-margin,18mm);border:1px solid #ddd}.doc-header{text-align:center;border-bottom:4px double #111;padding-bottom:12px;margin-bottom:18px}.kop-resmi{clear:both}.kop-main{display:grid;grid-template-columns:90px 1fr 90px;gap:12px;align-items:center}.kop-logo img{width:82px;height:82px;object-fit:contain}.kop-center{text-align:center;line-height:1.25}.kop-text{font-weight:900;font-size:13px;text-transform:uppercase}.kop-school{font-size:17px;font-weight:900;text-transform:uppercase;margin-top:2px}.kop-address{font-size:11px;margin-top:2px}.kop-banner img{max-height:70px;max-width:100%;object-fit:contain;margin-top:6px}.doc-header img.logo{width:72px;height:72px;object-fit:contain}.doc-header img.banner{max-height:82px;max-width:100%;object-fit:contain}.doc-title{text-align:center;font-weight:900;font-size:18px;margin:18px 0}.doc table{min-width:auto}.doc th,.doc td{font-size:12px;padding:7px;border:1px solid #555}.sign-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px;text-align:center}.sign-space{height:70px}.watermark{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font-size:80px;color:rgba(0,0,0,.05);z-index:-1;transform:rotate(-25deg);font-weight:900}
@media(max-width:900px){.top-pill{display:none}.kop-main{grid-template-columns:70px 1fr 70px;gap:6px}.kop-logo img{width:62px;height:62px}.kop-text{font-size:10px}.kop-school{font-size:13px}.kop-address{font-size:9px}.layout{grid-template-columns:1fr}.sidebar{position:fixed;left:-290px;top:76px;bottom:0;width:286px;z-index:35;transition:.25s}.nav-open .sidebar{left:0}.hamb{display:block}.content{padding:16px}.hero{grid-template-columns:1fr;padding:24px;border-radius:28px}.hero h1{font-size:28px}.hero-stats{grid-template-columns:1fr}.grid-2,.grid-3,.grid-4,.form-grid{grid-template-columns:1fr}.span-2,.span-3{grid-column:span 1}.brand b{font-size:15px}.brand span{font-size:11px}.brand img{width:46px;height:46px}}@media(max-width:520px){.topbar{padding:10px 14px}.content{padding:12px}.hero{padding:20px}.actions .btn{width:100%;justify-content:center}.hero-mini{align-items:flex-start}.hero-mini img{width:54px;height:54px}.card{padding:16px}}
@media print{.topbar,.sidebar,.no-print,.alert{display:none!important}.layout{display:block}.content{padding:0;background:#fff}.doc{border:0;box-shadow:none;max-width:none;width:100%;padding:var(--print-margin,12mm)}@page{size:var(--paper-size,A4) portrait;margin:0}}


.login-shell{min-height:62vh;display:flex;align-items:flex-start;justify-content:center;padding:34px 14px}
.login-card{width:min(480px,100%);background:rgba(255,255,255,.92);border:1px solid rgba(148,163,184,.28);border-radius:28px;padding:30px;box-shadow:0 26px 80px rgba(15,23,42,.14);backdrop-filter:blur(14px)}
.login-icon{width:54px;height:54px;border-radius:18px;background:linear-gradient(135deg,#0757c9,#00a6ff);display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;box-shadow:0 14px 30px rgba(7,87,201,.24);margin-bottom:14px}
.modern-login h2{margin:0 0 8px;font-size:25px;color:#172033;letter-spacing:-.02em}.modern-login .muted{color:#667085;margin:0 0 18px;line-height:1.55}.btn-wide{width:100%;justify-content:center;margin-top:10px}.login-help{margin-top:18px;border-radius:16px;background:#f3f7ff;border:1px solid #dbeafe;color:#344054;padding:13px 14px;font-size:14px}

/* ===== POLISH FINAL: dashboard modern, navigation root-safe, mobile overlay ===== */
.top-actions{display:flex;align-items:center;gap:12px}.user-chip{display:inline-flex;align-items:center;gap:8px;background:#f8fbff;border:1px solid #dbeafe;border-radius:999px;padding:8px 12px;font-weight:900;color:#0f2f68;box-shadow:0 6px 16px rgba(7,31,87,.05)}.user-chip em{font-style:normal;color:#64748b;font-size:11px;border-left:1px solid #dbeafe;padding-left:8px}.side-head{position:relative;display:flex;align-items:center;gap:12px;padding:8px 10px 18px;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.16)}.side-logo{width:48px;height:48px;border-radius:16px;background:rgba(255,255,255,.96);display:grid;place-items:center;overflow:hidden;color:#0757c9;font-size:22px}.side-logo img{width:100%;height:100%;object-fit:contain;padding:5px}.side-head b{display:block;font-size:14px}.side-head small{display:block;color:#bad7ff;font-size:11px}.overlay{display:none}.hero-banner-preview{margin-top:14px;border-radius:18px;overflow:hidden}.hero-banner-preview img{width:100%;max-height:170px;object-fit:cover}.admin-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(135deg,#071f4d,#0757c9 56%,#0ea5e9);color:#fff;border-radius:30px;padding:28px;box-shadow:0 22px 65px rgba(7,87,201,.22);margin-bottom:18px}.admin-hero:after{content:"";position:absolute;right:-70px;top:-90px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.12)}.admin-hero>*{position:relative;z-index:1}.admin-hero h1{font-size:32px;margin:7px 0 8px;letter-spacing:-.03em}.admin-hero p{margin:0;max-width:760px;line-height:1.7;color:#e9f5ff}.eyebrow{display:inline-flex;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:7px 12px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.admin-progress{display:flex;align-items:center;gap:15px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:24px;padding:14px;min-width:250px}.admin-progress b{display:block;font-size:22px}.admin-progress span{color:#dbeafe;font-size:13px}.donut-mini{--p:0;width:86px;height:86px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#ffb703 calc(var(--p)*1%),rgba(255,255,255,.20) 0)}.donut-mini b{width:58px;height:58px;border-radius:50%;background:#fff;color:#0757c9;display:grid;place-items:center;font-size:17px;box-shadow:inset 0 0 0 1px #dbeafe}.donut-mini small{display:none}.dash-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:15px;margin:18px 0}.metric{border-radius:24px;padding:21px;color:#0f172a;border:1px solid rgba(219,234,254,.95);box-shadow:0 15px 35px rgba(15,23,42,.07);position:relative;overflow:hidden}.metric:after{content:"";position:absolute;right:-36px;top:-36px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.5)}.metric small{display:block;font-weight:900;color:#64748b;text-transform:uppercase;letter-spacing:.04em}.metric b{display:block;font-size:40px;margin:6px 0;letter-spacing:-.05em}.metric span{font-weight:700;color:#475569}.metric.blue{background:linear-gradient(135deg,#eff6ff,#bfdbfe)}.metric.green{background:linear-gradient(135deg,#ecfdf5,#bbf7d0)}.metric.gold{background:linear-gradient(135deg,#fffbeb,#fde68a)}.metric.red{background:linear-gradient(135deg,#fff1f2,#fecdd3)}.metric.purple{background:linear-gradient(135deg,#f5f3ff,#ddd6fe)}.dashboard-section{margin-top:16px}.chart-card h3,.card h3{margin-top:0;color:#0f2f68}.bar-row{margin:14px 0}.bar-label{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px}.bar-label span{color:#64748b;font-weight:800}.bar-bg{height:16px;background:#e2e8f0;border-radius:999px;overflow:hidden}.bar-fill{height:100%;border-radius:999px}.bar-fill.blue{background:linear-gradient(90deg,#2563eb,#38bdf8)}.bar-fill.green{background:linear-gradient(90deg,#059669,#86efac)}.bar-fill.gold{background:linear-gradient(90deg,#d97706,#fde047)}.bar-fill.red{background:linear-gradient(90deg,#e11d48,#fb7185)}.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.quick-grid a{display:block;border:1px solid #e2e8f0;border-radius:18px;background:linear-gradient(135deg,#fff,#f8fbff);padding:16px;font-weight:800;transition:.2s}.quick-grid a:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(15,23,42,.08);border-color:#bfdbfe}.quick-grid b{display:block;margin-top:8px;color:#0f2f68}.quick-grid span{display:block;color:#64748b;font-size:12px;margin-top:4px;line-height:1.4}.muted{color:#667085}.alert.danger{background:#ffe9e9;color:#a32424}.center{text-align:center}
@media(max-width:900px){.top-actions .top-pill,.user-chip{display:none}.overlay{display:block;position:fixed;inset:76px 0 0 0;background:rgba(15,23,42,.40);backdrop-filter:blur(2px);z-index:34;opacity:0;pointer-events:none;transition:.2s}.nav-open .overlay{opacity:1;pointer-events:auto}.admin-hero{display:block;padding:22px;border-radius:24px}.admin-hero h1{font-size:26px}.admin-progress{margin-top:18px;min-width:0}.quick-grid{grid-template-columns:1fr}.dash-cards{grid-template-columns:1fr}}
/* === UPDATE PROFESIONAL: FOTO PESERTA, PREVIEW BERKAS, WA PETUGAS === */
.detail-hero{display:grid;grid-template-columns:132px 1fr;align-items:center;gap:20px;background:linear-gradient(135deg,#ffffff,#f3f8ff)}
.detail-photo{width:120px;height:150px;border-radius:20px;border:1px solid #d7e6fb;background:#eef6ff;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 14px 30px rgba(7,31,87,.10)}
.detail-photo img{width:100%;height:100%;object-fit:cover}.no-photo{font-weight:900;color:#7390b7;text-align:center;line-height:1.3}
.berkas-card{border:1px solid #dbeafe;border-radius:22px;background:#fff;padding:14px;box-shadow:0 10px 28px rgba(15,50,100,.06)}
.berkas-preview{height:180px;border-radius:16px;background:#f8fbff;border:1px dashed #bdd7f7;margin:10px 0;overflow:hidden;display:flex;align-items:center;justify-content:center}.berkas-preview img{width:100%;height:100%;object-fit:contain}.berkas-preview iframe{width:100%;height:100%;border:0}.file-icon{font-size:44px}.missing-box{height:180px;border-radius:16px;background:#fff1f2;color:#b42318;display:flex;align-items:center;justify-content:center;margin-top:10px;font-weight:900}.muted{color:#667085;line-height:1.55}.auth-note, .login-help{line-height:1.55}
.doc-top{display:grid;grid-template-columns:1fr 110px;gap:12px;align-items:stretch;margin-bottom:10px}.doc-photo{border:1px solid #333;width:104px;height:132px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:10px;font-weight:900;background:#f8fafc;overflow:hidden}.doc-photo img{width:100%;height:100%;object-fit:cover}.doc-photo-caption{text-align:center;font-size:10px;margin-top:3px;font-weight:800}.doc-status-box{border:2px solid #111;border-radius:4px;padding:8px;text-align:center;font-weight:900;margin:8px 0;background:#f8fafc}.doc .compact-table th,.doc .compact-table td{padding:5px 6px;font-size:11.5px}.doc h4{margin:10px 0 6px}.doc-note.strong{border-left:5px solid #111;background:#f8fafc}
@media(max-width:900px){.detail-hero{grid-template-columns:1fr}.detail-photo{margin:auto}.berkas-preview,.missing-box{height:150px}.doc-top{grid-template-columns:1fr}.doc-photo{margin:auto}}
@media print{.doc-top{grid-template-columns:1fr 105px}.doc-photo{width:100px;height:128px}.doc .compact-table th,.doc .compact-table td{font-size:11px;padding:4.5px}.doc-title{font-size:16px;margin:12px 0}.sign-space{height:58px}}

/* Professional access loading overlay */
.access-loader{position:fixed;inset:0;background:rgba(6,24,54,.62);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px}
.access-loader.show{display:flex;animation:fadeIn .18s ease-out}
.access-loader-card{width:min(420px,92vw);background:linear-gradient(135deg,#ffffff,#eef6ff);border:1px solid rgba(18,89,191,.18);border-radius:28px;box-shadow:0 30px 80px rgba(0,32,85,.35);padding:34px;text-align:center;color:#172033;position:relative;overflow:hidden}
.access-loader-card:before{content:"";position:absolute;inset:-60px -80px auto auto;width:220px;height:220px;background:radial-gradient(circle,rgba(0,147,255,.22),transparent 68%)}
.loader-logo{width:70px;height:70px;margin:0 auto 14px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(135deg,#0757c9,#0fb4ff);box-shadow:0 18px 35px rgba(0,108,220,.32);font-size:32px;color:#fff;animation:pulseAccess 1.2s infinite ease-in-out}
.access-loader h3{font-size:28px;letter-spacing:.5px;margin:0 0 6px;color:#063168;font-weight:900}
.access-loader p{margin:0 0 22px;color:#52627a;font-weight:700}
.loader-slider{height:12px;background:#dfeeff;border-radius:999px;overflow:hidden;border:1px solid #c6def8;box-shadow:inset 0 1px 5px rgba(0,52,110,.08)}
.loader-slider span{display:block;height:100%;width:38%;border-radius:inherit;background:linear-gradient(90deg,#0757c9,#0fb4ff,#ffc107);animation:slideAccess 1.05s infinite ease-in-out}
@keyframes slideAccess{0%{transform:translateX(-105%)}100%{transform:translateX(270%)}}
@keyframes pulseAccess{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.menu-access-table th,.menu-access-table td{vertical-align:middle}.center{text-align:center}.menu-access-table small{color:#69758c}.switch-mini input{display:none}.switch-mini span{display:inline-block;width:46px;height:26px;border-radius:99px;background:#d7dee9;position:relative;cursor:pointer;transition:.2s}.switch-mini span:before{content:"";position:absolute;width:20px;height:20px;border-radius:50%;left:3px;top:3px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:.2s}.switch-mini input:checked+span{background:linear-gradient(135deg,#0757c9,#0fb4ff)}.switch-mini input:checked+span:before{transform:translateX(20px)}.switch-mini input:disabled+span{opacity:.45;cursor:not-allowed}.admin-hero.compact{padding:24px 28px}.section-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}.section-title h2{margin:0}


/* === UPDATE: BACKGROUND LOGIN DINAMIS DARI SUPER ADMIN + AUTH UI MEWAH === */
.auth-body{min-height:100vh;background:#eaf6ff;overflow-x:hidden}
.auth-fullpage{min-height:100vh;padding:28px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:
  linear-gradient(105deg,rgba(246,251,255,.98) 0%,rgba(230,245,255,.92) 42%,rgba(201,229,255,.82) 100%),
  var(--auth-bg),
  radial-gradient(circle at 15% 18%,rgba(255,255,255,.95),transparent 28%),
  radial-gradient(circle at 88% 18%,rgba(14,165,233,.22),transparent 34%),
  linear-gradient(135deg,#f8fcff,#dcefff);
background-size:cover,cover,auto,auto,cover;background-position:center,center,center,center,center;background-repeat:no-repeat}
.auth-fullpage:before{content:"";position:absolute;inset:auto -8% -18% -8%;height:50%;background:repeating-radial-gradient(ellipse at center,rgba(0,120,220,.14) 0 1px,transparent 2px 12px);opacity:.45;transform:rotate(-4deg);pointer-events:none}
.auth-fullpage:after{content:"";position:absolute;right:-120px;top:18%;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(0,141,255,.18),transparent 64%);filter:blur(2px);pointer-events:none}
.auth-stage{width:min(1200px,100%);min-height:min(760px,calc(100vh - 56px));position:relative;display:flex;align-items:center;justify-content:center;padding:120px 20px 72px;z-index:1}
.auth-brand-panel{position:absolute;left:8px;right:8px;top:0;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;color:#172554}
.auth-brand-row{display:flex;align-items:center;gap:18px}.auth-brand-row img,.auth-fallback-logo{width:76px;height:76px;border-radius:22px;background:#fff;object-fit:contain;padding:8px;box-shadow:0 16px 36px rgba(15,70,150,.14);display:grid;place-items:center;font-size:34px}.auth-brand-row h1{margin:0;font-size:26px;letter-spacing:2px;font-weight:950;text-transform:uppercase;color:#13245a}.auth-brand-row p{margin:7px 0 0;color:#52648a;font-weight:700}.auth-quote{max-width:360px;text-align:right;font-weight:800;line-height:1.55;color:#173468;font-size:17px}.auth-quote:before{content:"“";font-size:54px;line-height:0;color:#1689ee;vertical-align:-18px;margin-right:8px}
.auth-card-pro{width:min(520px,100%);background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(245,251,255,.66));border:1px solid rgba(255,255,255,.72);border-radius:34px;padding:34px;box-shadow:0 30px 90px rgba(7,45,110,.20), inset 0 1px 0 rgba(255,255,255,.86);backdrop-filter:blur(20px);position:relative;overflow:hidden}.auth-card-pro:before{content:"";position:absolute;inset:-120px -140px auto auto;width:260px;height:260px;background:radial-gradient(circle,rgba(14,165,233,.18),transparent 70%)}.auth-logo-wrap{width:94px;height:94px;border-radius:28px;background:rgba(255,255,255,.92);display:grid;place-items:center;margin:0 auto 18px;box-shadow:0 18px 42px rgba(7,87,201,.14);border:1px solid rgba(219,234,254,.95);position:relative;z-index:1}.auth-logo-wrap img{width:78px;height:78px;object-fit:contain}.auth-card-pro h2{margin:0;text-align:center;font-size:31px;letter-spacing:-.04em;color:#172033}.auth-subtitle{text-align:center;color:#334155;margin:10px 0 0;font-size:15px}.auth-line{width:110px;height:4px;border-radius:999px;background:linear-gradient(90deg,transparent,#0757c9,#0fb4ff,transparent);margin:18px auto 24px}.auth-field{margin-bottom:15px}.auth-field label{display:block;font-size:13px;font-weight:950;color:#25324d;margin-bottom:7px}.auth-input{height:54px;background:rgba(255,255,255,.88);border:1px solid rgba(202,215,235,.9);border-radius:18px;display:flex;align-items:center;overflow:hidden;box-shadow:0 10px 25px rgba(15,55,115,.06)}.auth-input>span{width:54px;text-align:center;color:#2e5f9b}.auth-input input{border:0;outline:0;background:transparent;flex:1;height:100%;font-weight:700;color:#172033;padding:0 10px}.auth-input button{border:0;background:transparent;width:46px;cursor:pointer;color:#52648a;font-size:15px}.auth-input:focus-within{border-color:#60a5fa;box-shadow:0 0 0 5px rgba(96,165,250,.18),0 14px 28px rgba(15,55,115,.08)}.auth-btn{width:100%;height:56px;border:0;border-radius:18px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:16px;font-weight:950;cursor:pointer;transition:.2s;margin-top:12px;text-align:center}.auth-btn.primary{color:#fff;background:linear-gradient(135deg,#0757c9,#0797ee);box-shadow:0 16px 34px rgba(7,87,201,.28)}.auth-btn.secondary{color:#172033;background:rgba(255,255,255,.92);border:1px solid rgba(226,232,240,.95);box-shadow:0 10px 24px rgba(15,55,115,.06)}.auth-btn:hover{transform:translateY(-2px)}.auth-note-pro{margin-top:16px;border-radius:18px;background:rgba(241,247,255,.86);border:1px solid #dbeafe;color:#344054;padding:13px 14px;font-size:14px;text-align:center}.auth-footer-pro{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:22px;align-items:center;color:#38557f;font-weight:800;font-size:13px;white-space:nowrap}.auth-footer-pro span{display:inline-flex;align-items:center;gap:8px}.auth-footer-pro span+span{border-left:1px solid rgba(56,85,127,.22);padding-left:22px}
@media(max-width:800px){.auth-fullpage{padding:16px}.auth-stage{min-height:calc(100vh - 32px);padding:105px 0 72px}.auth-brand-panel{display:block;text-align:center}.auth-brand-row{justify-content:center}.auth-brand-row img,.auth-fallback-logo{width:64px;height:64px;border-radius:18px}.auth-brand-row h1{font-size:19px;letter-spacing:1px}.auth-brand-row p{font-size:12px}.auth-quote{display:none}.auth-card-pro{padding:26px 18px;border-radius:28px}.auth-card-pro h2{font-size:27px}.auth-footer-pro{font-size:12px;gap:9px}.auth-footer-pro span+span{padding-left:9px}}@media(max-width:460px){.auth-footer-pro{display:none}.auth-stage{padding-bottom:20px}.auth-input{height:52px}.auth-btn{height:54px}}


/* Public pages: cek status, cek NISN, and landing page use the same Super Admin login background, without old sidebar. */
.public-auth-stage{width:min(1180px,100%);align-items:center;justify-content:center;padding-top:118px;padding-bottom:52px}
.auth-card-wide{width:min(760px,100%)}
.public-check-form{display:grid;grid-template-columns:1fr 180px;gap:12px;align-items:center;margin-top:10px}.public-check-form .auth-btn{margin-top:0;height:54px}.public-input{height:54px}.result-panel{margin-top:20px;padding-top:18px;border-top:1px solid rgba(191,219,254,.75)}.account-create-form{margin-top:18px}.compact-section{background:rgba(255,255,255,.52);border-color:rgba(219,234,254,.92)}
.public-home-stage{width:min(1320px,100%);padding-top:92px}.public-home-shell{width:100%}.auth-fullpage .hero{box-shadow:0 34px 100px rgba(7,45,110,.18);backdrop-filter:blur(12px);background:linear-gradient(135deg,rgba(7,87,201,.90),rgba(0,164,238,.82));border:1px solid rgba(255,255,255,.55)}.auth-fullpage .hero.has-banner:before{opacity:.18}.auth-fullpage .hero-card{background:rgba(255,255,255,.90);backdrop-filter:blur(14px)}
@media(max-width:800px){.public-auth-stage{padding-top:120px}.auth-card-wide{padding:24px 16px}.public-check-form{grid-template-columns:1fr}.public-check-form .auth-btn{width:100%}.public-home-stage{padding-top:100px}.auth-fullpage .hero{border-radius:28px}}

/* UPDATE: tombol login admin/operator/kepsek di halaman depan publik */
.home-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.home-actions .btn{display:inline-flex;align-items:center;gap:8px;justify-content:center}.admin-login-btn{background:linear-gradient(135deg,#081a3d,#0b4db8)!important;color:#fff!important;border:1px solid rgba(255,255,255,.48)!important;box-shadow:0 14px 30px rgba(7,31,80,.30)!important}.admin-login-btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(7,31,80,.38)!important}.auth-fullpage .home-actions .admin-login-btn{backdrop-filter:blur(12px)}
@media(max-width:760px){.home-actions .btn{width:100%;min-height:48px}.admin-login-btn{order:4}}
.stat-grid.mini{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));gap:12px;margin:14px 0 18px}.stat-grid.mini .stat{border:1px solid var(--line);border-radius:18px;background:#f8fbff;padding:14px 16px;box-shadow:0 8px 22px rgba(7,31,87,.05)}.stat-grid.mini .stat.danger{background:#fff2f2}.stat-grid.mini .stat.danger b{color:var(--danger)}@media(max-width:900px){.stat-grid.mini{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.stat-grid.mini{grid-template-columns:1fr}}


/* Win Atasoge programmer loading overlay */
.access-loader{position:fixed;inset:0;background:rgba(3,14,32,.70);backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;z-index:999999;padding:24px}
.access-loader.show{display:flex;animation:atasogeFadeIn .18s ease-out}
.access-loader-card{width:min(520px,94vw);background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(232,245,255,.92));border:1px solid rgba(0,132,255,.22);border-radius:30px;box-shadow:0 34px 100px rgba(0,28,80,.45);padding:34px;text-align:center;color:#172033;position:relative;overflow:hidden}
.access-loader-card:before{content:"";position:absolute;inset:-90px -80px auto auto;width:260px;height:260px;background:radial-gradient(circle,rgba(0,147,255,.26),transparent 68%)}
.access-loader-card:after{content:"";position:absolute;inset:auto auto -120px -90px;width:300px;height:300px;background:radial-gradient(circle,rgba(0,94,255,.16),transparent 70%)}
.loader-logo{width:66px;height:66px;border-radius:22px;margin:0 auto 14px;display:grid;place-items:center;background:linear-gradient(135deg,#0057d9,#00a2ff);color:#fff;font-size:30px;box-shadow:0 18px 42px rgba(0,109,230,.32);position:relative;z-index:1}
.access-loader h3{font-size:30px;letter-spacing:.5px;margin:0 0 16px;color:#05295d;font-weight:900;position:relative;z-index:1}
.terminal-box{position:relative;z-index:1;background:#06162d;color:#bdf8ff;border-radius:18px;border:1px solid rgba(0,214,255,.22);padding:18px;text-align:left;font-family:Consolas,Monaco,'Courier New',monospace;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.terminal-line{font-weight:800;line-height:1.6;word-break:break-word}.terminal-prompt{color:#47ff9a}.terminal-cursor{color:#fff;animation:atasogeBlink .75s steps(1) infinite}.terminal-sub{margin-top:10px;color:#8da8c9;font-size:13px;font-family:inherit}
.loader-slider{height:10px;border-radius:999px;background:#d8e9ff;overflow:hidden;margin:22px auto 0;position:relative;z-index:1}.loader-slider span{display:block;height:100%;width:45%;border-radius:999px;background:linear-gradient(90deg,#0057d9,#00c2ff,#0057d9);animation:atasogeSlide 1.15s ease-in-out infinite}
@keyframes atasogeSlide{0%{transform:translateX(-110%)}100%{transform:translateX(230%)}}
@keyframes atasogeFadeIn{from{opacity:0}to{opacity:1}}
@keyframes atasogeBlink{50%{opacity:0}}

/* =========================================================
   UPDATE RESPONSIVE PESERTA: DASHBOARD + LIHAT/EDIT DATA
   ========================================================= */
.muted{color:var(--muted)}
.btn-sm{padding:9px 12px;border-radius:12px;font-size:13px}
.student-page-shell{width:min(1120px,100%);margin:0 auto;display:flex;flex-direction:column;gap:18px}
.student-dashboard-hero{display:grid;grid-template-columns:118px 1fr;gap:20px;align-items:center;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(240,249,255,.92));border:1px solid rgba(188,212,238,.8);border-radius:30px;padding:24px;box-shadow:0 24px 70px rgba(7,31,87,.10);backdrop-filter:blur(14px)}
.student-avatar{width:104px;height:104px;border-radius:30px;background:linear-gradient(135deg,#e0f2fe,#fff);display:flex;align-items:center;justify-content:center;font-size:46px;border:1px solid #dbeafe;box-shadow:0 18px 40px rgba(7,87,201,.12);overflow:hidden}.student-avatar img{width:100%;height:100%;object-fit:cover}.student-welcome h2{margin:6px 0 8px;font-size:30px;color:var(--navy)}.student-welcome p{margin:0;color:#4a5874;line-height:1.65}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:#0757c9;font-weight:900;text-transform:uppercase;letter-spacing:.8px;font-size:12px}.dashboard-actions{margin-top:14px}.student-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.summary-card{background:rgba(255,255,255,.94);border:1px solid #dceafd;border-radius:22px;padding:17px;box-shadow:0 14px 38px rgba(7,31,87,.07);min-width:0}.summary-card small{display:block;color:#64748b;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.4px}.summary-card strong{display:block;margin-top:8px;color:#0b285f;font-size:17px;line-height:1.35;word-break:break-word}.student-dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.clean-card{box-shadow:0 16px 45px rgba(7,31,87,.07)}.kv-list{display:grid;gap:9px}.kv-list div{display:grid;grid-template-columns:170px 1fr;border:1px solid #edf3fb;border-radius:14px;overflow:hidden;background:#fff}.kv-list b{background:#f3f7ff;padding:11px 13px;color:#18315f}.kv-list span{padding:11px 13px;word-break:break-word}.file-chip-grid{display:flex;flex-wrap:wrap;gap:10px}.file-chip{display:inline-flex;align-items:center;gap:8px;padding:11px 14px;border-radius:16px;background:#eef6ff;border:1px solid #dbeafe;color:#18315f;font-weight:900;transition:.2s}.file-chip:hover{transform:translateY(-1px);box-shadow:0 12px 22px rgba(7,87,201,.12)}
.student-hero-card{display:grid;grid-template-columns:1fr 260px;gap:18px;align-items:center;background:linear-gradient(135deg,rgba(5,87,201,.95),rgba(14,165,233,.9));color:#fff;border-radius:30px;padding:26px;box-shadow:0 24px 70px rgba(7,87,201,.18);overflow:hidden;position:relative}.student-hero-card:after{content:"";position:absolute;right:-70px;top:-80px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.14)}.student-hero-card>*{position:relative;z-index:1}.student-hero-card h2{margin:6px 0 8px;font-size:30px}.student-hero-card p{margin:0;line-height:1.65;opacity:.94}.student-hero-card .eyebrow{color:#e0f2fe}.student-status-box{background:rgba(255,255,255,.95);color:#15305f;border-radius:24px;padding:18px;border:1px solid rgba(255,255,255,.7)}.student-status-box small{display:block;color:#64748b;font-weight:800;text-transform:uppercase;font-size:11px}.student-status-box strong{display:block;font-size:20px;margin:7px 0 10px;word-break:break-word}.student-profile-card{display:grid;grid-template-columns:112px 1fr;gap:18px;align-items:center;background:#fff;border:1px solid #dceafd;border-radius:28px;padding:18px;box-shadow:0 16px 45px rgba(7,31,87,.07)}.student-photo-box{width:96px;height:118px;border-radius:20px;background:#f1f7ff;border:1px solid #dbeafe;display:flex;align-items:center;justify-content:center;overflow:hidden}.student-photo-box img{width:100%;height:100%;object-fit:cover}.photo-placeholder{font-size:42px}.student-profile-info h3{font-size:25px;margin:0 0 10px;color:var(--navy)}.mini-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.mini-info-grid span{background:#f8fbff;border:1px solid #e5eef9;border-radius:16px;padding:11px;min-width:0}.mini-info-grid b{display:block;font-size:11px;text-transform:uppercase;color:#64748b;margin-bottom:5px}.student-edit-form{background:rgba(255,255,255,.94);border:1px solid #dceafd;border-radius:28px;padding:20px;box-shadow:0 20px 60px rgba(7,31,87,.08)}.upload-grid{grid-template-columns:repeat(2,1fr)}.upload-card{background:#f8fbff;border:1px solid #e5eef9;border-radius:18px;padding:14px}.upload-card input[type=file]{margin-top:10px;background:#fff}.sticky-save-bar{position:sticky;bottom:12px;z-index:20;display:flex;gap:12px;justify-content:flex-end;align-items:center;background:rgba(255,255,255,.88);border:1px solid #dceafd;border-radius:20px;padding:12px;box-shadow:0 18px 45px rgba(7,31,87,.14);backdrop-filter:blur(16px);margin-top:16px}
@media(max-width:1100px){.student-summary-grid{grid-template-columns:repeat(2,1fr)}.student-hero-card{grid-template-columns:1fr}.student-status-box{width:100%}}
@media(max-width:760px){.student-dashboard-hero{grid-template-columns:1fr;text-align:center;padding:18px;border-radius:24px}.student-avatar{margin:auto;width:92px;height:92px;border-radius:24px}.student-welcome h2{font-size:24px}.dashboard-actions{justify-content:center}.student-summary-grid,.student-dashboard-grid,.mini-info-grid,.upload-grid{grid-template-columns:1fr}.student-profile-card{grid-template-columns:1fr;text-align:center}.student-photo-box{margin:auto}.student-hero-card{padding:20px;border-radius:24px}.student-hero-card h2{font-size:24px}.student-edit-form{padding:14px;border-radius:22px}.kv-list div{grid-template-columns:1fr}.kv-list b{border-bottom:1px solid #edf3fb}.sticky-save-bar{position:static;flex-direction:column}.sticky-save-bar .btn{width:100%;justify-content:center}.stacked-mobile .btn{width:100%;justify-content:center}.file-chip-grid{display:grid;grid-template-columns:1fr}.file-chip{justify-content:center}.form-grid{gap:10px}.field input,.field select,.field textarea{font-size:16px}}
@media(max-width:420px){.content{padding:10px}.student-page-shell{gap:12px}.summary-card,.clean-card,.student-dashboard-hero,.student-profile-card,.student-edit-form{border-radius:18px}.student-welcome h2,.student-hero-card h2{font-size:21px}.student-summary-grid{gap:10px}.btn{width:100%;justify-content:center}.actions{width:100%}.topbar{min-height:64px}.sidebar{top:64px}.layout{min-height:calc(100vh - 64px)}}

/* =========================================================
   UPDATE: Back Home Button + Professional Footer + Social Icons
   ========================================================= */
.top-home-btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;
  background:linear-gradient(135deg,#ffffff,#eef6ff);border:1px solid #dbeafe;color:#0f2d61;
  font-weight:900;text-decoration:none;box-shadow:0 10px 25px rgba(15,45,97,.08);white-space:nowrap
}
.top-home-btn:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(15,45,97,.14)}
.auth-home-btn{
  position:fixed;top:22px;left:24px;z-index:30;display:inline-flex;align-items:center;gap:8px;
  padding:11px 16px;border-radius:999px;background:rgba(255,255,255,.82);backdrop-filter:blur(18px);
  border:1px solid rgba(191,219,254,.9);color:#0f2d61;font-weight:900;text-decoration:none;
  box-shadow:0 16px 36px rgba(15,45,97,.13)
}
.auth-home-btn:hover{background:#fff;transform:translateY(-1px)}
.app-footer{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px 26px;margin-top:28px;border-top:1px solid rgba(203,213,225,.75);
  background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(239,246,255,.62));backdrop-filter:blur(16px);
  color:#475569;font-size:13px;letter-spacing:.01em
}
.auth-fullpage + .app-footer,.auth-body .app-footer{
  position:relative;z-index:3;max-width:1120px;margin:8px auto 0;border-radius:22px;border:1px solid rgba(191,219,254,.6);
  box-shadow:0 18px 45px rgba(15,45,97,.08)
}
.footer-copy{font-weight:800;color:#334155}.footer-copy span{color:#0b63ce;margin-left:8px}
.footer-social{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.footer-social a{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border-radius:999px;text-decoration:none;
  background:#fff;border:1px solid #dbeafe;color:#0f2d61;font-weight:900;box-shadow:0 8px 18px rgba(15,45,97,.06)}
.footer-social a:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(15,45,97,.12)}
.footer-social span{font-size:15px}.footer-social em{font-style:normal;font-size:12px}
.checkline{display:flex;align-items:center;gap:8px;margin-top:10px;padding:10px 12px;border-radius:14px;background:#f8fafc;border:1px solid #e2e8f0;font-weight:900;color:#334155}
.checkline input{width:auto}.checkline.danger{background:#fff1f2;border-color:#fecdd3;color:#9f1239}
@media(max-width:900px){
  .top-home-btn{display:none}.auth-home-btn{top:12px;left:12px;padding:9px 12px;font-size:12px}
  .app-footer{justify-content:center;text-align:center;padding:16px 14px}.footer-social{justify-content:center}.footer-social em{display:none}
}


/* Ekskul checkbox responsive */
.checkbox-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px;margin-top:6px}
.check-pill{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid #dbe7f5;border-radius:14px;background:#fff;box-shadow:0 8px 18px rgba(15,47,94,.04);font-weight:800;color:#10224a;cursor:pointer}
.check-pill input{width:auto;accent-color:#0b79d0}
.check-pill span{line-height:1.2}
@media(max-width:640px){.checkbox-grid{grid-template-columns:1fr}.check-pill{padding:11px 12px}}

/* =========================================================
   FINAL FIX: Footer public/auth harus di bagian bawah layar,
   bukan masuk ke tengah area hero/login.
   ========================================================= */
body.auth-body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}
body.auth-body .auth-fullpage{
  flex:1 0 auto;
  width:100%;
  min-height:100vh;
  padding-bottom:110px;
}
body.auth-body .app-footer{
  position:fixed;
  left:50%;
  right:auto;
  bottom:18px;
  transform:translateX(-50%);
  z-index:25;
  width:min(1120px,calc(100% - 34px));
  margin:0;
  border-radius:22px;
  border:1px solid rgba(191,219,254,.72);
  box-shadow:0 18px 45px rgba(15,45,97,.12);
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(239,246,255,.82));
  backdrop-filter:blur(18px);
}
body.auth-body .public-home-stage,
body.auth-body .public-auth-stage{
  padding-bottom:120px;
}
body.auth-body .auth-home-btn{
  position:fixed;
}
@media(max-width:900px){
  body.auth-body .auth-fullpage{padding-bottom:150px;align-items:flex-start;overflow:auto}
  body.auth-body .app-footer{bottom:10px;width:calc(100% - 20px);padding:12px 10px;border-radius:18px;font-size:12px}
}
@media(max-width:520px){
  body.auth-body .app-footer{position:relative;left:auto;bottom:auto;transform:none;width:calc(100% - 20px);margin:-88px auto 10px;z-index:26}
  body.auth-body .auth-fullpage{padding-bottom:110px}
  body.auth-body .public-home-stage,
  body.auth-body .public-auth-stage{padding-bottom:115px}
}

/* =========================================================
   FIX FINAL: Tombol kembali mobile tidak menutup logo/teks,
   footer selalu di bawah, dan ikon media sosial selalu tampil.
   ========================================================= */
.footer-social a.social-empty{
  opacity:.56;
  filter:grayscale(.15);
  cursor:not-allowed;
  background:rgba(255,255,255,.68);
}
.footer-social a.social-empty:hover{
  transform:none;
  box-shadow:0 8px 18px rgba(15,45,97,.06);
}
@media(max-width:640px){
  body.auth-body .auth-stage{
    padding-top:132px !important;
  }
  body.auth-body .auth-brand-panel{
    top:54px !important;
  }
  body.auth-body .auth-home-btn{
    width:42px;
    height:42px;
    min-width:42px;
    padding:0;
    border-radius:14px;
    top:10px;
    left:10px;
    font-size:0;
    justify-content:center;
    z-index:80;
  }
  body.auth-body .auth-home-btn::before{
    content:'🏠';
    font-size:18px;
    line-height:1;
  }
  body.auth-body .auth-brand-row{
    gap:10px;
    padding:0 54px;
  }
  body.auth-body .auth-brand-row h1{
    font-size:17px;
    line-height:1.25;
    letter-spacing:1px;
  }
  body.auth-body .auth-brand-row p{
    font-size:11px;
    line-height:1.25;
  }
  body.auth-body .auth-brand-row img,
  body.auth-body .auth-fallback-logo{
    width:54px;
    height:54px;
    border-radius:16px;
  }
  body.auth-body .app-footer{
    margin:18px auto 12px !important;
  }
  .footer-social{
    gap:7px !important;
  }
  .footer-social a{
    width:38px;
    height:38px;
    padding:0 !important;
    justify-content:center;
  }
  .footer-social a span{
    font-size:18px;
  }
}
@media(max-width:420px){
  body.auth-body .auth-stage{padding-top:145px !important;}
  body.auth-body .auth-brand-row{flex-direction:column;padding:0 54px;text-align:center;gap:6px;}
  body.auth-body .auth-brand-row h1{font-size:16px;}
  body.auth-body .auth-card-pro{margin-top:10px;}
}


/* =========================================================
   FINAL PROFESSIONAL RESPONSIVE UI FIX
   - Alert login tidak lagi melayang di samping
   - Footer rapi di bawah halaman
   - Tampilan auth/public presisi untuk desktop, laptop, tablet, HP
   ========================================================= */
body.auth-body{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}
body.auth-body .auth-fullpage{
  flex:1 0 auto;
  width:100%;
  min-height:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px 22px 24px;
  overflow:visible;
}
body.auth-body .auth-stage{
  width:min(1200px,100%);
  min-height:calc(100svh - 165px);
  padding:106px 18px 52px;
  display:flex;
  align-items:center;
  justify-content:center;
}
body.auth-body .auth-card-pro{
  z-index:2;
}
.auth-alert{
  display:flex;
  align-items:flex-start;
  gap:10px;
  width:100%;
  margin:0 0 16px;
  padding:13px 15px;
  border-radius:16px;
  font-weight:900;
  text-align:left;
  line-height:1.45;
  box-shadow:0 12px 28px rgba(15,45,97,.08);
}
.auth-alert.danger{
  background:#fff1f2;
  color:#9f1239;
  border:1px solid #fecdd3;
}
.auth-alert.success{
  background:#ecfdf5;
  color:#047857;
  border:1px solid #bbf7d0;
}
.auth-alert span{flex:0 0 auto}.auth-alert b{font-size:14px}
body.auth-body .auth-fullpage > .alert{
  display:none!important;
}
body.auth-body .app-footer{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  z-index:5;
  width:min(1120px,calc(100% - 34px));
  margin:0 auto 16px!important;
  border-radius:22px;
  border:1px solid rgba(191,219,254,.72);
  box-shadow:0 18px 45px rgba(15,45,97,.12);
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(239,246,255,.86));
  backdrop-filter:blur(18px);
}
.footer-social a{
  min-height:36px;
}
.auth-home-btn{
  z-index:80;
}
@media(max-width:1024px){
  body.auth-body .auth-stage{min-height:auto;padding-top:104px;padding-bottom:42px}
  .auth-brand-row h1{font-size:22px}
  .auth-quote{font-size:15px;max-width:315px}
}
@media(max-width:800px){
  body.auth-body .auth-fullpage{padding:14px 12px 18px;justify-content:flex-start}
  body.auth-body .auth-stage{padding:118px 0 26px;min-height:auto;width:100%}
  .auth-card-pro{width:min(100%,520px)}
  .auth-alert{border-radius:14px;padding:12px;margin-bottom:14px}
  body.auth-body .app-footer{width:calc(100% - 18px);margin:0 auto 10px!important;padding:13px 10px;border-radius:18px;gap:10px}
  .footer-copy{width:100%;text-align:center;line-height:1.45}
  .footer-copy span{display:block;margin:4px 0 0}
  .footer-social{width:100%;justify-content:center;gap:7px}
  .footer-social a{padding:8px 10px;min-width:38px;justify-content:center}
}
@media(max-width:640px){
  body.auth-body .auth-stage{padding-top:122px!important}
  body.auth-body .auth-brand-panel{top:48px!important;left:0!important;right:0!important}
  body.auth-body .auth-card-pro{padding:24px 18px;border-radius:28px}
  body.auth-body .auth-card-pro h2{font-size:26px;line-height:1.25}
  .auth-input{height:54px;border-radius:17px}
  .auth-input input{font-size:16px}
  .auth-btn{height:56px;border-radius:17px;font-size:16px}
  .auth-alert b{font-size:13px}
  .footer-social em{display:none!important}
}
@media(max-width:420px){
  body.auth-body .auth-fullpage{padding-left:10px;padding-right:10px}
  body.auth-body .auth-stage{padding-top:126px!important}
  body.auth-body .auth-card-pro{padding:22px 14px;border-radius:24px}
  .auth-logo-wrap{width:82px;height:82px;border-radius:24px;margin-bottom:14px}
  .auth-logo-wrap img{width:68px;height:68px}
  .auth-field label{font-size:12px}
  .auth-home-btn{top:9px!important;left:9px!important}
  .footer-social{display:grid;grid-template-columns:repeat(6,1fr)}
  .footer-social a{padding:8px 0;width:100%}
}
@media(max-height:760px) and (min-width:801px){
  body.auth-body .auth-stage{padding-top:92px;padding-bottom:28px;min-height:auto}
  .auth-logo-wrap{width:74px;height:74px;border-radius:22px;margin-bottom:12px}
  .auth-logo-wrap img{width:62px;height:62px}
  .auth-card-pro{padding:26px 30px;border-radius:28px}
  .auth-card-pro h2{font-size:27px}
  .auth-line{margin:13px auto 18px}
  .auth-field{margin-bottom:11px}
  .auth-btn{height:50px}
  .auth-footer-pro{bottom:0}
}

/* =========================================================
   FIX FINAL TELITI: Presisi Auth/Public + Alert di dalam card
   + Footer benar-benar di bawah konten untuk semua device.
   ========================================================= */
body.auth-body{
  min-height:100svh!important;
  display:flex!important;
  flex-direction:column!important;
  overflow-x:hidden!important;
}
body.auth-body .auth-fullpage{
  flex:1 0 auto!important;
  width:100%!important;
  min-height:auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  overflow:visible!important;
  padding:22px 18px 26px!important;
}
body.auth-body .auth-stage,
body.auth-body .public-auth-stage,
body.auth-body .public-home-stage{
  width:min(1180px,100%)!important;
  min-height:calc(100svh - 170px)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:110px 18px 30px!important;
  margin:0 auto!important;
}
body.auth-body .public-home-stage{width:min(1320px,100%)!important;}
body.auth-body .auth-card-pro,
body.auth-body .auth-card-wide{
  width:min(720px,100%)!important;
  margin:0 auto!important;
  position:relative!important;
  z-index:2!important;
}
body.auth-body .auth-card-wide{width:min(760px,100%)!important;}
body.auth-body .auth-card-pro > .alert,
body.auth-body .auth-card-wide > .alert,
body.auth-body .result-panel .alert,
body.auth-body .auth-alert{
  position:static!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  transform:none!important;
  width:100%!important;
  max-width:100%!important;
  margin:14px 0!important;
  border-radius:16px!important;
  line-height:1.55!important;
  text-align:left!important;
}
body.auth-body > .alert,
body.auth-body .auth-fullpage > .alert,
body.auth-body .auth-stage > .alert,
body.auth-body .public-auth-stage > .alert{
  display:none!important;
}
body.auth-body .app-footer{
  position:static!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  flex:0 0 auto!important;
  width:min(1120px,calc(100% - 36px))!important;
  margin:0 auto 18px!important;
  border-radius:22px!important;
  border:1px solid rgba(191,219,254,.72)!important;
  box-shadow:0 18px 45px rgba(15,45,97,.12)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(239,246,255,.86))!important;
  backdrop-filter:blur(18px)!important;
}
body.auth-body .auth-home-btn{
  position:fixed!important;
  top:18px!important;
  left:24px!important;
  z-index:80!important;
  width:auto!important;
  max-width:260px!important;
  min-height:44px!important;
  flex-direction:row!important;
  padding:10px 16px!important;
  border-radius:999px!important;
  white-space:nowrap!important;
}
body.auth-body .footer-social{display:flex!important;justify-content:center!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;}
body.auth-body .footer-social a{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;min-height:36px!important;}
.student-dashboard-hero,
.student-profile-card,
.student-edit-form,
.clean-card,
.summary-card{
  max-width:100%;
}
@media(max-width:900px){
  body.auth-body .auth-fullpage{padding:12px 12px 18px!important;}
  body.auth-body .auth-stage,
  body.auth-body .public-auth-stage,
  body.auth-body .public-home-stage{
    min-height:auto!important;
    padding:96px 0 24px!important;
    width:100%!important;
  }
  body.auth-body .app-footer{
    width:calc(100% - 22px)!important;
    margin:0 auto 12px!important;
    padding:14px 11px!important;
    border-radius:18px!important;
    text-align:center!important;
  }
  body.auth-body .footer-copy{width:100%!important;text-align:center!important;line-height:1.5!important;}
  body.auth-body .footer-copy span{display:block!important;margin:4px 0 0!important;}
}
@media(max-width:640px){
  body.auth-body .auth-home-btn{
    top:10px!important;
    left:10px!important;
    width:44px!important;
    height:44px!important;
    padding:0!important;
    overflow:hidden!important;
    font-size:0!important;
    justify-content:center!important;
  }
  body.auth-body .auth-home-btn:before{
    content:'🏠';
    font-size:18px;
    line-height:1;
  }
  body.auth-body .auth-brand-panel{
    top:54px!important;
    left:10px!important;
    right:10px!important;
    transform:none!important;
    width:auto!important;
    text-align:center!important;
  }
  body.auth-body .auth-stage,
  body.auth-body .public-auth-stage,
  body.auth-body .public-home-stage{padding-top:122px!important;}
  body.auth-body .auth-card-pro{padding:22px 16px!important;border-radius:24px!important;}
  body.auth-body .auth-card-pro h2{font-size:25px!important;line-height:1.25!important;}
  body.auth-body .public-check-form{grid-template-columns:1fr!important;gap:10px!important;}
  body.auth-body .public-check-form .auth-btn{width:100%!important;}
  body.auth-body .result-panel table,
  body.auth-body .table-wrap table{min-width:0!important;}
  body.auth-body .result-panel th,
  body.auth-body .result-panel td{display:block!important;width:100%!important;}
  body.auth-body .result-panel th{border-bottom:0!important;padding-bottom:4px!important;}
  body.auth-body .result-panel td{padding-top:4px!important;}
  body.auth-body .footer-social{display:grid!important;grid-template-columns:repeat(3,1fr)!important;width:100%!important;gap:7px!important;}
  body.auth-body .footer-social a{width:100%!important;padding:9px 4px!important;}
  body.auth-body .footer-social em{display:none!important;}
}
@media(max-width:430px){
  body.auth-body .auth-stage,
  body.auth-body .public-auth-stage,
  body.auth-body .public-home-stage{padding-top:128px!important;}
  body.auth-body .auth-card-pro{padding:20px 13px!important;}
  .student-page-shell{gap:12px!important;}
  .student-summary-grid,.student-dashboard-grid,.mini-info-grid,.upload-grid{grid-template-columns:1fr!important;}
}

/* FIX KOP PRINT TANPA LOGO DOBEL */
.doc-header.kop-resmi .kop-banner{display:none!important}
.kop-resmi .kop-main{grid-template-columns:90px 1fr 90px!important;align-items:center!important}
@media print{.doc-header.kop-resmi .kop-banner{display:none!important}}

/* =========================================================
   FIX FINAL DETAIL ADMIN/OPERATOR - PRESISI RESPONSIVE
   ========================================================= */
.admin-detail-shell{max-width:1480px;margin:0 auto;display:block;overflow:visible}
.admin-detail-hero{grid-template-columns:120px minmax(0,1fr);margin-bottom:18px;overflow:hidden}
.detail-main-title{min-width:0}.detail-main-title h2{word-break:break-word}.detail-actions{align-items:center}.detail-actions .btn{white-space:normal;text-align:center}
.detail-grid-safe{align-items:start}.detail-card-safe{min-width:0;overflow:hidden}.compact-detail-table{max-width:100%;overflow:auto}.compact-detail-table table{min-width:620px}.compact-detail-table th{width:210px}.compact-detail-table td{word-break:break-word;white-space:normal}.berkas-grid-safe{align-items:stretch}.berkas-card{min-width:0;border:1px solid var(--line);border-radius:18px;padding:14px;background:#fff;overflow:hidden}.berkas-card>b{display:block;margin-bottom:10px;color:#143163}.berkas-preview{height:190px;border-radius:14px;background:#f5f9ff;border:1px solid #e2ecf8;display:flex;align-items:center;justify-content:center;overflow:hidden}.berkas-preview img{width:100%;height:100%;object-fit:contain}.berkas-preview iframe{width:100%;height:100%;border:0}.missing-box{height:190px;border-radius:14px;background:#fff7ed;border:1px dashed #fdba74;display:flex;align-items:center;justify-content:center;color:#9a3412;font-weight:800}.file-icon{font-size:44px}
@media(max-width:1100px){.detail-grid-safe,.berkas-grid-safe{grid-template-columns:1fr!important}.admin-detail-shell{max-width:100%}.compact-detail-table table{min-width:560px}}
@media(max-width:760px){.admin-detail-hero{grid-template-columns:1fr;text-align:center}.admin-detail-hero .detail-photo{margin:0 auto}.detail-actions{justify-content:center}.detail-actions .btn,.stacked-mobile .btn{width:100%;justify-content:center}.compact-detail-table table{min-width:0}.compact-detail-table tr{display:grid;grid-template-columns:1fr}.compact-detail-table th,.compact-detail-table td{display:block;width:auto!important;padding:10px 12px}.compact-detail-table th{border-bottom:0}.compact-detail-table td{background:#fff}.berkas-preview,.missing-box{height:160px}.content{max-width:100vw;overflow-x:hidden}.card{max-width:100%}}
@media(max-width:420px){.detail-photo{width:100px;height:124px}.admin-detail-hero{gap:12px}.berkas-card{padding:12px}.berkas-preview,.missing-box{height:140px}.detail-main-title h2{font-size:22px}.muted{font-size:13px}}


/* =========================================================
   FIX FINAL OPERATOR: Export Excel + Detail Verifikasi Presisi
   ========================================================= */
.content{max-width:100%;overflow-x:hidden!important;}
.admin-detail-shell{width:100%;max-width:1540px!important;margin:0 auto 24px!important;padding:0 0 16px!important;}
.admin-detail-hero{overflow:visible!important;display:grid!important;grid-template-columns:128px minmax(0,1fr)!important;gap:18px!important;align-items:center!important;padding:20px!important;border-radius:26px!important;}
.admin-detail-hero .detail-photo{width:112px!important;height:138px!important;min-width:112px!important;border-radius:18px!important;overflow:hidden;background:#f2f7ff;border:1px solid #dbeafe;display:flex;align-items:center;justify-content:center;}
.admin-detail-hero .detail-photo img{width:100%;height:100%;object-fit:cover;}
.detail-main-title{min-width:0!important;width:100%!important;}
.detail-main-title .muted{word-break:break-word!important;line-height:1.55!important;}
.detail-actions{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important;margin-top:12px!important;width:100%!important;}
.detail-actions .btn{min-height:42px!important;white-space:normal!important;text-align:center!important;justify-content:center!important;line-height:1.25!important;}
.detail-grid-safe{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:18px!important;align-items:start!important;width:100%!important;}
.detail-card-safe{min-width:0!important;width:100%!important;overflow:hidden!important;border-radius:24px!important;}
.compact-detail-table{width:100%!important;max-width:100%!important;overflow:auto!important;border-radius:18px!important;}
.compact-detail-table table{width:100%!important;min-width:560px!important;table-layout:fixed!important;}
.compact-detail-table th{width:210px!important;white-space:normal!important;}
.compact-detail-table td{white-space:normal!important;word-break:break-word!important;overflow-wrap:anywhere!important;}
.berkas-grid-safe{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;width:100%!important;}
.berkas-card{min-width:0!important;width:100%!important;}
.berkas-preview{height:190px!important;}
.stacked-mobile{display:flex;gap:8px;flex-wrap:wrap;}
#wa_message,#catatan_verifikasi{min-height:128px!important;}
@media(max-width:1200px){
  .detail-grid-safe{grid-template-columns:1fr!important;}
  .berkas-grid-safe{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:900px){
  .admin-detail-shell{padding:0!important;}
  .admin-detail-hero{grid-template-columns:1fr!important;text-align:center!important;justify-items:center!important;padding:18px!important;}
  .detail-actions{justify-content:center!important;}
  .detail-actions .btn{flex:1 1 220px!important;}
  .berkas-grid-safe{grid-template-columns:1fr!important;}
}
@media(max-width:640px){
  .admin-detail-hero .detail-photo{width:100px!important;height:124px!important;min-width:100px!important;}
  .detail-main-title h2{font-size:22px!important;line-height:1.25!important;}
  .detail-actions{display:grid!important;grid-template-columns:1fr!important;}
  .detail-actions .btn,.stacked-mobile .btn{width:100%!important;}
  .compact-detail-table{border:0!important;overflow:visible!important;}
  .compact-detail-table table{min-width:0!important;border:1px solid var(--line)!important;border-radius:16px!important;overflow:hidden!important;display:block!important;}
  .compact-detail-table tbody,.compact-detail-table tr,.compact-detail-table th,.compact-detail-table td{display:block!important;width:100%!important;}
  .compact-detail-table tr{border-bottom:1px solid var(--line)!important;}
  .compact-detail-table th{width:100%!important;background:#f2f7ff!important;border-bottom:0!important;padding:10px 12px 4px!important;}
  .compact-detail-table td{padding:4px 12px 10px!important;background:#fff!important;}
  .berkas-preview,.missing-box{height:150px!important;}
  .card.detail-card-safe{padding:14px!important;border-radius:18px!important;}
}

/* Export buttons should never be cut in dashboards/tables */
.actions .btn[href*="export_peserta_excel"], .btn[href*="export_peserta_excel"]{white-space:normal!important;}

/* =========================================================
   FIX FINAL PESERTA: dashboard edit + rupiah presisi
   ========================================================= */
.edit-highlight-card{
  border-color:#fde68a!important;
  background:linear-gradient(135deg,#fffdf5,#fff7ed)!important;
}
.student-preview-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.student-preview-grid>div{
  background:#f8fbff;
  border:1px solid #e4edf9;
  border-radius:16px;
  padding:12px 14px;
  min-width:0;
}
.student-preview-grid b{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.35px;
  color:#64748b;
  margin-bottom:6px;
}
.student-preview-grid span{
  display:block;
  color:#0f285b;
  font-weight:800;
  line-height:1.35;
  word-break:break-word;
}
.student-edit-form .rupiah-input{
  font-weight:800;
  color:#0f285b;
  letter-spacing:.2px;
}
.student-edit-form .field small.rupiah-help,
.rupiah-help{
  display:block;
  margin-top:6px;
  color:#64748b;
  font-size:12px;
  line-height:1.35;
}
@media(max-width:1100px){
  .student-preview-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:760px){
  .student-preview-grid{grid-template-columns:1fr;}
  .edit-highlight-card .actions{display:grid;grid-template-columns:1fr;}
  .edit-highlight-card .btn{width:100%;justify-content:center;}
}

/* =========================================================
   FINAL UI/UX POLISH - Registrasi & Verifikasi PPDB
   Fokus: mudah dipahami operator/peserta, dashboard modern,
   tombol aksi jelas, form penghasilan aman.
   ========================================================= */
:root{--soft-blue:#eef7ff;--soft-green:#ecfdf5;--soft-yellow:#fffbeb;--soft-red:#fff1f2;--shadow-xl:0 24px 70px rgba(7,31,87,.10)}
.sidebar a{border:1px solid transparent}.sidebar a:hover,.sidebar a:focus{border-color:rgba(255,255,255,.22);outline:none}.sidebar a[aria-current="page"],.sidebar a.active{background:rgba(255,255,255,.18);box-shadow:inset 4px 0 0 #ffd166}
.admin-hero{border:1px solid rgba(191,219,254,.65);box-shadow:var(--shadow-xl)}
.metric{position:relative;overflow:hidden;transition:.2s}.metric:hover{transform:translateY(-2px);box-shadow:0 20px 48px rgba(7,31,87,.12)}
.metric small{letter-spacing:.06em}.metric b{line-height:1}.metric span{font-size:14px;line-height:1.45}.metric:after{content:"";position:absolute;right:-34px;top:-34px;width:115px;height:115px;border-radius:999px;background:rgba(255,255,255,.42)}
.quick-grid a{min-height:92px;border-radius:18px;transition:.2s}.quick-grid a:hover{transform:translateY(-2px);border-color:#93c5fd;background:linear-gradient(135deg,#fff,#f0f8ff)}
.form-section{background:rgba(255,255,255,.72);border:1px solid #e5eef9;border-radius:22px;padding:16px}.form-title{display:flex;align-items:center;gap:8px}.form-title:before{content:"";width:9px;height:24px;border-radius:999px;background:linear-gradient(180deg,var(--blue),var(--blue2))}
.rupiah-help{background:#f8fafc;border:1px dashed #cbd5e1;border-radius:12px;padding:8px 10px}.rupiah-input{font-weight:900;color:#0f2d61;background:linear-gradient(135deg,#ffffff,#f8fbff)!important}.rupiah-input:focus{border-color:#22c55e!important;box-shadow:0 0 0 4px rgba(34,197,94,.14)!important}
.table-wrap table tr:hover td{background:#f8fbff}.compact-detail-table th{width:34%;background:#f3f7ff;color:#11326a}.compact-detail-table td{font-weight:600;color:#1f2937}
.badge,.pending,.verified,.rejected{letter-spacing:.03em}.pending{border:1px solid #fde68a}.verified{border:1px solid #86efac}.rejected{border:1px solid #fecaca}
.alert.warn{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}.alert.info{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}
.btn{min-height:42px}.btn:focus{outline:3px solid rgba(96,165,250,.35);outline-offset:2px}.btn.gold:focus{outline-color:rgba(251,191,36,.45)}
.bar-bg{height:16px;border-radius:999px;background:#e6edf7;overflow:hidden}.bar-fill{height:100%;border-radius:999px;transition:width .35s ease}.bar-fill.green{background:linear-gradient(90deg,#22c55e,#86efac)}.bar-fill.blue{background:linear-gradient(90deg,#2563eb,#38bdf8)}.bar-fill.gold{background:linear-gradient(90deg,#f59e0b,#fde68a)}.bar-fill.red{background:linear-gradient(90deg,#ef4444,#fecaca)}
@media(max-width:760px){.dash-cards{grid-template-columns:1fr!important}.metric{min-height:132px}.form-section{padding:12px}.table-wrap{border-radius:16px}.admin-hero{border-radius:24px}.quick-grid{grid-template-columns:1fr!important}}
@media print{.no-print,.topbar,.sidebar,.app-footer,.btn,.actions{display:none!important}.content{padding:0!important}.doc{border:0!important;box-shadow:none!important}.doc table tr:hover td{background:transparent!important}}

/* =========================================================
   FINAL RESPONSIVE UI/UX SEMUA HALAMAN - MOBILE FIRST FIX
   Berlaku untuk index, login, cek NISN, peserta, operator,
   admin, MPLS, card/box, tabel, form dan popup loading.
   ========================================================= */
html,body{width:100%;max-width:100%;overflow-x:hidden!important;-webkit-text-size-adjust:100%;}
body{font-size:clamp(14px,2.8vw,16px);}
*,*::before,*::after{max-width:100%;}
img,video,iframe,embed,object{max-width:100%;height:auto;}
iframe{border:0;}
.content,.auth-fullpage,.public-home-stage,.auth-stage,.public-auth-stage,.login-shell,.container,.admin-detail-shell{width:100%;max-width:100vw;}
.card,.hero,.hero-card,.admin-hero,.metric,.login-card,.auth-card-pro,.result-panel,.form-section,.table-wrap,.quick-grid a,.berkas-card{min-width:0;overflow-wrap:anywhere;word-break:normal;}
.card h1,.card h2,.card h3,.hero h1,.admin-hero h1,.login-card h2,.auth-card-pro h1,.auth-card-pro h2{line-height:1.18;overflow-wrap:anywhere;}

/* Header/topbar responsive aman untuk HP kecil */
.topbar{gap:10px;max-width:100vw;}
.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0;flex-wrap:wrap;}
.top-home-btn,.auth-home-btn,.user-chip{white-space:normal;line-height:1.25;}
.user-chip{max-width:260px;overflow:hidden;text-overflow:ellipsis;}
.brand{flex:1 1 auto;min-width:0;}
.brand>div{min-width:0;}
.brand b,.brand span{max-width:100%;}
.overlay{display:none;position:fixed;inset:76px 0 0 0;background:rgba(2,6,23,.42);z-index:34;backdrop-filter:blur(2px);} 
.nav-open .overlay{display:block;}

/* Layout/grid jangan memaksa lebar di HP */
.grid,.dash-cards,.quick-grid,.form-grid,.student-preview-grid,.student-summary-grid,.student-dashboard-grid,.mini-info-grid,.upload-grid,.hero-stats{min-width:0;}
.dash-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;}
.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;}
.form-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.metric b{font-size:clamp(26px,7vw,42px);}.metric span,.metric small{overflow-wrap:anywhere;}

/* Form input/select/file tetap enak dipakai di semua ukuran HP */
.field input,.field select,.field textarea,input,select,textarea,button{max-width:100%;font-size:16px;}
.field input[type="file"]{padding:10px;background:#fff;line-height:1.35;}
.field label{line-height:1.35;}
.actions{align-items:center;}
.actions .btn,.btn{white-space:normal;text-align:center;line-height:1.25;}

/* Tabel: desktop scroll, HP bisa menjadi kartu agar tidak terpotong */
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table-wrap table{max-width:none;}
@media(max-width:700px){
  .table-wrap.responsive-card-table{border:0;background:transparent;overflow:visible;}
  .table-wrap.responsive-card-table table,.table-wrap.responsive-card-table thead,.table-wrap.responsive-card-table tbody,.table-wrap.responsive-card-table tr,.table-wrap.responsive-card-table th,.table-wrap.responsive-card-table td{display:block;width:100%;min-width:0!important;}
  .table-wrap.responsive-card-table thead{display:none;}
  .table-wrap.responsive-card-table tr{background:#fff;border:1px solid var(--line);border-radius:18px;margin:0 0 12px;padding:10px;box-shadow:0 10px 28px rgba(7,31,87,.06);}
  .table-wrap.responsive-card-table td{border:0!important;border-bottom:1px dashed #e5edf7!important;padding:9px 6px!important;display:grid;grid-template-columns:42% 1fr;gap:8px;align-items:start;}
  .table-wrap.responsive-card-table td:last-child{border-bottom:0!important;}
  .table-wrap.responsive-card-table td:before{content:attr(data-label);font-weight:900;color:#143163;}
}

/* Halaman depan/index responsif penuh */
.hero{grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);}
.home-actions{display:flex;flex-wrap:wrap;gap:10px;}
.hero-banner-preview img{width:100%;border-radius:18px;object-fit:cover;max-height:220px;}
@media(max-width:980px){.hero{grid-template-columns:1fr!important;}.hero-card{width:100%;}.hero h1{font-size:clamp(27px,7vw,38px);} }

/* Login / auth: tidak terpotong pada HP pendek dan lebar kecil */
.auth-fullpage{min-height:100svh;padding:clamp(14px,4vw,32px);display:flex;align-items:center;justify-content:center;overflow:auto;}
.auth-stage,.public-auth-stage,.public-home-stage{width:min(1120px,100%);margin-inline:auto;}
.login-shell{min-height:auto;padding:clamp(16px,5vw,36px) 12px;align-items:center;}
.login-card,.auth-card-pro{width:min(480px,100%);padding:clamp(18px,5vw,32px);border-radius:clamp(20px,6vw,30px);}
.auth-home-btn{position:fixed;top:14px;left:14px;right:auto;z-index:50;max-width:calc(100vw - 28px);}
@media(max-height:620px){.auth-fullpage{align-items:flex-start;}.login-shell{padding-top:70px;}}

/* Popup loading responsive semua HP */
.access-loader{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important;overflow:auto;}
.access-loader-card{width:min(520px,calc(100vw - 24px))!important;max-height:calc(100svh - 24px);overflow:auto!important;padding:clamp(18px,5vw,34px)!important;border-radius:clamp(18px,6vw,30px)!important;}
.loader-logo{width:clamp(48px,14vw,66px)!important;height:clamp(48px,14vw,66px)!important;font-size:clamp(22px,7vw,30px)!important;border-radius:clamp(16px,5vw,22px)!important;}
.access-loader h3{font-size:clamp(22px,7vw,30px)!important;}
.terminal-box{padding:clamp(12px,4vw,18px)!important;text-align:left;overflow-wrap:anywhere;}
.terminal-line,.terminal-sub{font-size:clamp(12px,3.4vw,14px)!important;line-height:1.55!important;white-space:normal!important;overflow-wrap:anywhere;}
.loader-slider{height:clamp(8px,2.6vw,12px)!important;}

/* Card dalam card/box tidak membuat scroll horizontal */
.card .card,.card .form-section,.card .table-wrap,.form-section .card{max-width:100%;}
.admin-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;}
.admin-progress{min-width:0;}
.donut-mini{width:clamp(92px,26vw,132px);height:clamp(92px,26vw,132px);}

/* Ukuran tablet */
@media(max-width:1024px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .layout{grid-template-columns:1fr!important;}
  .content{padding:18px;}
  .sidebar{max-width:86vw;overflow-y:auto;-webkit-overflow-scrolling:touch;}
}

/* Ukuran HP */
@media(max-width:700px){
  .topbar{min-height:68px;padding:9px 11px;align-items:center;}
  .layout{min-height:calc(100svh - 68px);} 
  .sidebar{top:68px;width:min(286px,86vw);left:-90vw;}
  .overlay{inset:68px 0 0 0;}
  .brand{gap:9px;}
  .brand img{width:42px!important;height:42px!important;border-radius:13px!important;padding:4px;}
  .brand b{font-size:13.5px!important;line-height:1.18;}
  .brand span{font-size:10.5px!important;}
  .top-actions{gap:6px;}
  .top-home-btn,.user-chip{display:none!important;}
  .hamb{display:inline-flex!important;align-items:center;justify-content:center;min-width:43px;min-height:40px;padding:9px 11px!important;}
  .content{padding:12px!important;}
  .hero,.admin-hero,.card,.metric,.form-section{border-radius:18px!important;}
  .hero{padding:18px!important;}
  .admin-hero{grid-template-columns:1fr!important;text-align:left;padding:18px!important;}
  .admin-progress{width:100%;display:flex;justify-content:space-between;gap:12px;align-items:center;}
  .grid-2,.grid-3,.grid-4,.dash-cards,.quick-grid,.hero-stats{grid-template-columns:1fr!important;}
  .home-actions,.actions{display:grid!important;grid-template-columns:1fr!important;width:100%;}
  .actions .btn,.home-actions .btn,.btn{width:100%;justify-content:center;}
  .table-wrap{border-radius:14px;}
  table{min-width:760px;}
  th,td{padding:10px 11px;font-size:13px;}
  .sign-grid{grid-template-columns:1fr!important;gap:12px;}
}

/* HP sangat kecil */
@media(max-width:390px){
  .content{padding:9px!important;}
  .card,.form-section{padding:13px!important;}
  .hero,.admin-hero{padding:15px!important;}
  .hero-mini{gap:10px;}
  .hero-mini img{width:48px!important;height:48px!important;}
  .hero h1,.admin-hero h1{font-size:24px!important;}
  .metric{padding:16px!important;}
  .field input,.field select,.field textarea{padding:11px 10px;border-radius:12px;}
  .auth-home-btn{font-size:13px;padding:9px 12px;}
}

/* Landscape HP pendek */
@media(max-height:480px) and (orientation:landscape){
  .access-loader{align-items:flex-start!important;}
  .access-loader-card{margin:8px auto;}
  .auth-fullpage{align-items:flex-start;padding-top:62px;}
}

/* Print tetap rapi */
@media print{html,body{overflow:visible!important;width:auto!important;max-width:none!important}.table-wrap{overflow:visible!important}.access-loader{display:none!important}.doc{max-width:none!important}.doc table{width:100%!important;min-width:0!important}}

/* Pengumuman peserta aktif dari Super Admin */
.student-announcement-list{display:grid;gap:14px;margin:18px 0;}
.student-announcement{border-left:6px solid #0ea5e9;background:linear-gradient(135deg,#ffffff,#f8fbff);}
.student-announcement.ann-penting{border-left-color:#ef4444;background:linear-gradient(135deg,#fff7f7,#ffffff);}
.student-announcement.ann-jadwal{border-left-color:#7c3aed;background:linear-gradient(135deg,#faf7ff,#ffffff);}
.student-announcement.ann-berkas{border-left-color:#f59e0b;background:linear-gradient(135deg,#fffbeb,#ffffff);}
.announcement-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px;}
.announcement-icon{width:44px;height:44px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;background:#eef6ff;font-size:24px;flex:0 0 auto;}
.announcement-head small{display:block;color:#64748b;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:11px;}
.announcement-head h3{margin:2px 0 0;font-size:clamp(18px,4.5vw,23px);line-height:1.25;}
.announcement-body{color:#334155;line-height:1.72;overflow-wrap:anywhere;}
@media(max-width:700px){.student-announcement-list{margin:14px 0}.announcement-head{gap:10px}.announcement-icon{width:38px;height:38px;border-radius:13px;font-size:20px}.announcement-body{font-size:14px;line-height:1.65}}

/* MPLS Invitation & Professional Print/UI refinements */
.mpls-invitation-card{border:1px solid #bfdbfe;background:linear-gradient(135deg,#eff6ff,#ffffff);box-shadow:0 14px 30px rgba(2,132,199,.08)}
.mpls-info-card textarea{font-family:inherit;resize:vertical;min-height:96px}
@media(max-width:640px){.mpls-info-card .filter-grid{grid-template-columns:1fr}.student-preview-grid{grid-template-columns:1fr!important}.announcement-head{align-items:flex-start}.announcement-icon{flex:0 0 auto}}