:root{
    --dark:#07111f;
    --blue:#007aff;
    --cyan:#00c7ff;
    --green:#34c759;
    --red:#ff3b30;
    --yellow:#facc15;
    --muted:#64748b;
    --glass:rgba(255,255,255,.72);
    --line:rgba(255,255,255,.38);
}

*{box-sizing:border-box}

body{
    margin:0;
    font-family:Inter,Arial,sans-serif;
    color:#0f172a;
    min-height:100vh;
    background:
        radial-gradient(circle at 10% 0,#bfdbfe,transparent 32%),
        radial-gradient(circle at 95% 5%,#a5f3fc,transparent 35%),
        linear-gradient(135deg,#f8fbff,#eef6ff 55%,#fff);
}

a{text-decoration:none;color:inherit}

.wrap{
    width:min(1180px,92%);
    margin:auto;
}

.nav{
    width:min(1180px,92%);
    margin:20px auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 18px;
    border-radius:28px;
    background:var(--glass);
    border:1px solid var(--line);
    backdrop-filter:blur(22px);
    box-shadow:0 20px 60px #0f172a14;
}

.brand{display:flex;align-items:center;gap:12px}
.brand img{width:48px;height:48px;border-radius:16px;object-fit:cover}
.brand b{font-weight:900}
.brand span{font-size:12px;color:var(--muted);font-weight:700}

.btn{
    border:0;
    padding:14px 18px;
    border-radius:18px;
    background:linear-gradient(135deg,var(--blue),var(--cyan));
    color:white;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 15px 35px #007aff33;
    display:inline-block;
    text-align:center;
}

.btn-dark{background:#111827}
.btn-red{background:linear-gradient(135deg,#ff3b30,#ff9500)}
.btn-green{background:linear-gradient(135deg,#16a34a,#34c759)}

.hero{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:28px;
    align-items:center;
    padding:30px 0 50px;
}

.chip{
    display:inline-block;
    background:white;
    border:1px solid #e2e8f0;
    border-radius:999px;
    padding:9px 14px;
    font-size:13px;
    font-weight:900;
    color:#007aff;
}

.hero h1{
    font-size:clamp(38px,6vw,72px);
    line-height:1;
    letter-spacing:-2.5px;
    margin:18px 0;
}

.grad{
    background:linear-gradient(135deg,#007aff,#00c7ff,#34c759);
    -webkit-background-clip:text;
    color:transparent;
}

.lead{
    font-size:18px;
    line-height:1.8;
    color:#475569;
}

.glass{
    background:var(--glass);
    border:1px solid var(--line);
    border-radius:34px;
    backdrop-filter:blur(24px);
    box-shadow:0 30px 90px #0f172a1c;
}

.card{padding:26px}

.input,
select,
textarea{
    width:100%;
    border:1px solid #dbe3ef;
    background:#ffffffe8;
    padding:14px 16px;
    border-radius:17px;
    outline:none;
    font-size:15px;
    margin-top:10px;
}

.input:focus,
select:focus,
textarea:focus{
    border-color:#007aff;
    box-shadow:0 0 0 5px #007aff1a;
}

.title{
    font-size:26px;
    font-weight:900;
}

.muted{
    color:var(--muted);
    line-height:1.6;
}

.alert{
    border-radius:18px;
    padding:14px 16px;
    margin:14px 0;
    font-weight:800;
}

.ok{background:#dcfce7;color:#166534}
.err{background:#fee2e2;color:#991b1b}
.warning{background:#fef3c7;color:#92400e}

.grid3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-top:18px;
}

.mini{
    background:#ffffffcc;
    border:1px solid #e2e8f0;
    border-radius:24px;
    padding:18px;
}

.status{
    font-size:48px;
    font-weight:900;
    margin:5px 0;
}

.lulus{
    color:#16a34a;
}

.tidak{
    color:#dc2626;
}

.belum{
    color:#6b7280;
}

.info-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    margin-top:14px;
}

.info{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:18px;
    padding:13px;
}

.info b{
    display:block;
    font-size:11px;
    color:#64748b;
    text-transform:uppercase;
    margin-bottom:4px;
}

.admin-grid{
    display:grid;
    grid-template-columns:330px 1fr;
    gap:18px;
}

.stats{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:14px;
    margin:16px 0;
}

.stat{
    padding:18px;
    border-radius:24px;
    background:#ffffffba;
    border:1px solid #e2e8f0;
}

.stat b{font-size:30px}

.table-wrap{
    overflow:auto;
    border-radius:24px;
    background:white;
    border:1px solid #e2e8f0;
}

table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
}

th,td{
    padding:12px;
    border-bottom:1px solid #e2e8f0;
    text-align:left;
    white-space:nowrap;
}

th{
    background:#f8fafc;
    color:#64748b;
    font-size:12px;
    text-transform:uppercase;
}

.pill{
    display:inline-block;
    padding:7px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
}

.pill-ok{
    background:#dcfce7;
    color:#166534;
}

.pill-no{
    background:#fee2e2;
    color:#991b1b;
}

.pill-wait{
    background:#fef3c7;
    color:#92400e;
}

.action{
    display:inline-block;
    padding:7px 10px;
    border-radius:11px;
    font-weight:900;
    font-size:12px;
    margin:2px;
}

.edit{background:#dbeafe;color:#1d4ed8}
.del{background:#fee2e2;color:#b91c1c}
.print{background:#fef3c7;color:#92400e}

.footer{
    text-align:center;
    color:#64748b;
    padding:30px;
}

.reveal{
    position:fixed;
    inset:0;
    background:#07111ee6;
    backdrop-filter:blur(20px);
    z-index:99;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.reveal-box{
    max-width:520px;
    background:white;
    border-radius:34px;
    padding:30px;
    text-align:center;
    box-shadow:0 30px 100px #0006;
}

.emoji{
    font-size:58px;
    animation:bounce 1s infinite alternate;
}

.loader{
    height:12px;
    background:#e2e8f0;
    border-radius:99px;
    overflow:hidden;
    margin:18px 0;
}

.bar{
    height:100%;
    width:0;
    background:linear-gradient(90deg,#007aff,#00c7ff,#34c759);
    animation:load 4s forwards;
}

@keyframes load{
    to{width:100%}
}

@keyframes bounce{
    to{transform:translateY(-8px) rotate(5deg)}
}

.confetti{
    position:fixed;
    top:-20px;
    width:10px;
    height:16px;
    z-index:120;
    animation:fall linear forwards;
}

@keyframes fall{
    to{transform:translateY(110vh) rotate(700deg)}
}

@media(max-width:900px){
    .hero,
    .admin-grid{
        grid-template-columns:1fr;
    }

    .grid3,
    .stats{
        grid-template-columns:1fr 1fr;
    }

    .info-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:560px){
    .grid3,
    .stats{
        grid-template-columns:1fr;
    }

    .brand span{
        display:none;
    }

    .nav{
        border-radius:22px;
        flex-wrap:wrap;
        gap:10px;
    }

    .hero h1{
        letter-spacing:-1.4px;
    }

    .btn{
        padding:12px 14px;
        font-size:13px;
    }
}