:root{--em:#059669;--teal:#0d9488;--navy:#0b2233;--gold:#d4a017;--ink:#1e293b;
--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.09'%3E%3Cpath d='M30 4l8.5 15.5L54 30 38.5 40.5 30 56l-8.5-15.5L6 30l15.5-10.5z'/%3E%3Crect x='17' y='17' width='26' height='26' transform='rotate(45 30 30)'/%3E%3C/g%3E%3C/svg%3E")}
*{scrollbar-width:thin;scrollbar-color:#a7d7c5 transparent}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:radial-gradient(900px 500px at 100% 0,#d1fae5 0,transparent 60%),radial-gradient(700px 400px at 0 100%,#fef3c7 0,transparent 55%),#f4f7f6;background-attachment:fixed}
.ar{font-family:'Amiri',serif;direction:rtl}
#login.hidden,#app.hidden{display:none}

/* Login */
.login-bg{background:linear-gradient(135deg,#053d33,#0b2233 55%,#0f4c4a)}
.login-hero{background-image:var(--pat);background-size:60px}
.login-hero .ar{font-size:1.6rem;color:#fcd34d;margin-bottom:1rem}
.glass{background:rgba(255,255,255,.96);backdrop-filter:blur(14px);box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.ig{position:relative;margin-bottom:.9rem}.ig i{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);color:#94a3b8}.ig .inp{padding-left:2.5rem}
.pill{display:inline-flex;gap:.45rem;align-items:center;padding:.4rem .85rem;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);font-size:.78rem}
.logo{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#b8860b,#fcd34d);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 6px 16px -4px rgba(212,160,23,.6)}
.h{font-size:1.4rem;font-weight:800;color:#064e3b;margin-bottom:1.1rem}
.h::after{content:"";display:block;width:44px;height:4px;border-radius:4px;margin-top:.35rem;background:linear-gradient(90deg,var(--gold),#fcd34d)}

/* Sidebar & topbar */
.sidebar{position:fixed;inset:0 auto 0 0;width:16.5rem;color:#fff;z-index:40;transition:transform .3s;background:var(--pat),linear-gradient(180deg,#0b2233,#0c3a3c 100%);background-size:60px,auto;box-shadow:6px 0 30px -10px rgba(0,0,0,.35)}
.nav-i{display:flex;gap:.8rem;align-items:center;padding:.75rem 1rem;border-radius:.85rem;color:#b6c8d6;cursor:pointer;font-size:.9rem;font-weight:500;transition:.25s}
.nav-i i{opacity:.85}
.nav-i:hover{background:rgba(255,255,255,.08);color:#fff;transform:translateX(3px)}
.nav-i.on{background:linear-gradient(135deg,#059669,#0d9488);color:#fff;box-shadow:0 8px 18px -6px rgba(5,150,105,.7)}
.nav-i.on::after{content:"";margin-left:auto;width:7px;height:7px;border-radius:50%;background:#fcd34d}
.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.8);backdrop-filter:blur(12px);border-bottom:1px solid #e2ece8;padding:.8rem 1.5rem;display:flex;justify-content:space-between;align-items:center}
.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#059669,#14b8a6);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0 0 0 3px #fff,0 0 0 5px #a7f3d0}
.mini{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#0ea5e9,#38bdf8);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700}
.mini.mp{background:linear-gradient(135deg,#ec4899,#f472b6)}

/* Hero dashboard */
.hero{position:relative;overflow:hidden;border-radius:1.4rem;padding:1.6rem 1.8rem;color:#fff;margin-bottom:1.25rem;background:var(--pat),linear-gradient(120deg,#047857,#0d9488 60%,#0f766e);background-size:60px,auto;box-shadow:0 18px 40px -18px rgba(4,120,87,.7)}
.hero::after{content:"";position:absolute;right:-50px;top:-50px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(252,211,77,.55),transparent 70%)}
.hero-ar{position:absolute;right:1.5rem;bottom:.2rem;font-size:3rem;color:rgba(255,255,255,.22)}

/* Card & stat */
.card{background:#fff;border-radius:1.15rem;border:1px solid #e6eeeb;box-shadow:0 10px 30px -14px rgba(15,60,50,.2)}
.stat{display:flex;gap:.8rem;align-items:center;padding:1rem;transition:.25s;animation:fade .5s both}
.stat:hover{transform:translateY(-4px);box-shadow:0 18px 34px -14px rgba(15,60,50,.3)}
.stat:nth-child(2){animation-delay:.05s}.stat:nth-child(3){animation-delay:.1s}.stat:nth-child(4){animation-delay:.15s}.stat:nth-child(5){animation-delay:.2s}
.stat i{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;box-shadow:0 8px 16px -6px rgba(0,0,0,.3)}
.s0 i{background:linear-gradient(135deg,#059669,#34d399)}.s1 i{background:linear-gradient(135deg,#0284c7,#38bdf8)}
.s2 i{background:linear-gradient(135deg,#d97706,#fbbf24)}.s3 i{background:linear-gradient(135deg,#0d9488,#2dd4bf)}.s4 i{background:linear-gradient(135deg,#a16207,#facc15)}
#log li{position:relative;padding-left:1.1rem;border-bottom:0!important;border-left:2px solid #d1fae5;margin-left:.35rem}
#log li::before{content:"";position:absolute;left:-6px;top:.9rem;width:10px;height:10px;border-radius:50%;background:var(--em);border:2px solid #fff}

/* Tabel */
.tw{overflow-x:auto;border:1px solid #e6eeeb;border-radius:1rem}
.tbl{width:100%;font-size:.875rem}
.tbl th{background:linear-gradient(180deg,#ecfdf5,#d9f5e8);color:#065f46;text-align:left;padding:.8rem 1rem;font-weight:700;white-space:nowrap;font-size:.78rem;letter-spacing:.03em;text-transform:uppercase}
.tbl td{padding:.7rem 1rem;border-bottom:1px solid #f0f4f2}
.tbl tbody tr:nth-child(even) td{background:#fafdfc}
.tbl tbody tr:hover td{background:#effcf6}
.tbl tbody tr:last-child td{border-bottom:0}

/* Form & tombol */
.inp{width:100%;border:1.5px solid #dbe5e1;border-radius:.8rem;padding:.6rem .85rem;font-size:.9rem;background:#fff;transition:.2s}
.inp:focus{outline:0;border-color:var(--em);box-shadow:0 0 0 4px rgba(16,185,129,.15)}
.inp[readonly]{background:#f1f5f3}
.lbl{display:block;font-size:.78rem;font-weight:700;color:#475569;margin-bottom:.3rem}
.btn{padding:.6rem 1.15rem;border-radius:.8rem;font-weight:700;font-size:.875rem;transition:.2s}
.btn:hover{transform:translateY(-1px)}
.btn-p{background:linear-gradient(135deg,#059669,#0d9488);color:#fff;box-shadow:0 8px 16px -6px rgba(5,150,105,.6)}
.btn-o{border:1.5px solid #dbe5e1;background:#fff}.btn-o:hover{background:#f1f5f3}
.btn-g{background:linear-gradient(135deg,#d4a017,#fcd34d);color:#3b2a00;box-shadow:0 8px 16px -6px rgba(212,160,23,.6)}
.ib{width:32px;height:32px;border-radius:.6rem;font-size:.78rem;background:#f1f5f3;color:#475569;margin-right:.25rem;transition:.2s}
.ib:hover{background:#d1fae5;color:#047857}.ib.d:hover{background:#fee2e2;color:#b91c1c}
.chip{display:inline-flex;gap:.35rem;align-items:center;padding:.3rem .7rem;border:1.5px solid #dbe5e1;border-radius:999px;font-size:.8rem}

/* Badge, presensi, sub-tab */
.badge{display:inline-block;padding:.2rem .65rem;border-radius:999px;font-size:.72rem;font-weight:700}
.b-g{background:#d1fae5;color:#065f46}.b-y{background:#fef3c7;color:#92400e}.b-r{background:#fee2e2;color:#991b1b}
.qs{padding:.3rem .8rem;border-radius:999px;border:1.5px solid #dbe5e1;font-size:.78rem;font-weight:600;background:#fff;transition:.15s}
.qs:hover{border-color:var(--em);color:var(--em)}
.q-Hadir{background:#059669;color:#fff!important;border-color:#059669}.q-Izin{background:#0ea5e9;color:#fff!important;border-color:#0ea5e9}
.q-Sakit{background:#f59e0b;color:#fff!important;border-color:#f59e0b}.q-Alpa{background:#ef4444;color:#fff!important;border-color:#ef4444}
.sub{padding:.55rem 1.2rem;border-radius:999px;font-weight:700;font-size:.85rem;background:#eef3f1;color:#475569;transition:.2s}
.sub.on{background:linear-gradient(135deg,#059669,#0d9488);color:#fff;box-shadow:0 8px 16px -6px rgba(5,150,105,.6)}

/* Modal & animasi */
.modal{position:fixed;inset:0;background:rgba(11,34,51,.55);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:1rem;z-index:60}
.modal.hidden{display:none}
.fade{animation:fade .4s ease both}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Cetak KHS */
@media print{
  body *{visibility:hidden}
  #khs,#khs *{visibility:visible}
  #khs{position:absolute;left:0;top:0;width:100%;box-shadow:none;border:0}
}