*{margin:0;padding:0;box-sizing:border-box}
:root{
  --pr:#1B4FBF;--pr-dk:#0C2D75;--pr-lt:#3B6FED;
  --gr:#16A34A;--gr-dk:#14532D;--gr-lt:#22C55E;
  --am:#D97706;--pu:#7C3AED;--rd:#DC2626;
  --bg:#EEF2FA;--sb:#0C1E3C;--cd:white;--br:#E2E8F0;
  --t1:#0F172A;--t2:#475569;--t3:#94A3B8;
  --sw:260px;--th:64px;
  --rsm:8px;--r:12px;--rlg:16px;
  --sh0:0 1px 3px rgba(0,0,0,.08);
  --sh:0 4px 12px rgba(0,0,0,.08);
  --shl:0 10px 24px rgba(0,0,0,.1);
}
html,body{max-width:100%;overflow-x:hidden}
body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--t1);min-height:100vh}
::selection{background:rgba(27,79,191,.18)}
/* ======== LOGIN ======== */
#loginPage{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#051529 0%,#0C2D75 30%,#1B4FBF 55%,#0A4A32 75%,#16A34A 100%);
  position:relative;overflow:hidden}
#loginPage::before,#loginPage::after{content:'';position:absolute;border-radius:50%;animation:pulse 4s ease-in-out infinite}
#loginPage::before{width:600px;height:600px;top:-250px;left:-180px;background:radial-gradient(circle,rgba(27,79,191,.3),transparent 70%)}
#loginPage::after{width:500px;height:500px;bottom:-180px;right:-130px;background:radial-gradient(circle,rgba(22,163,74,.25),transparent 70%);animation-delay:2s}
.ripple{position:absolute;border-radius:50%;border:2px solid rgba(255,255,255,.08);animation:ripple 6s linear infinite}
.r1{width:300px;height:300px;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:0s}
.r2{width:500px;height:500px;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:2s}
.r3{width:700px;height:700px;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:4s}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.1);opacity:1}}
@keyframes ripple{0%{transform:translate(-50%,-50%) scale(1);opacity:.8}100%{transform:translate(-50%,-50%) scale(1.3);opacity:0}}
.login-wrap{position:relative;z-index:10;width:100%;max-width:480px;padding:1.5rem}
.login-card{background:rgba(255,255,255,.97);border-radius:24px;overflow:hidden;box-shadow:0 32px 64px rgba(0,0,0,.4)}
.login-hd{background:linear-gradient(135deg,var(--pr-dk),var(--pr));padding:2.5rem 2rem 2rem;text-align:center;color:white}
.login-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;margin-bottom:.75rem}
.logo-ic{width:60px;height:60px;background:linear-gradient(135deg,var(--pr),#22C55E);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin-bottom:2px;color:white}
.login-logo h1{font-size:2.4rem;font-weight:800;letter-spacing:-1px;line-height:1;color:white}
.login-logo h1 span{color:#86EFAC}
.login-logo p{font-size:.72rem;color:rgba(255,255,255,.7);text-align:center;line-height:1.45;max-width:280px}
.login-tagline{font-size:.82rem;color:rgba(255,255,255,.7);line-height:1.5;margin-top:.75rem}
.login-body{padding:2rem}
.login-body h2{font-size:1.25rem;font-weight:700;margin-bottom:.2rem}
.login-body>p{color:var(--t3);font-size:.875rem;margin-bottom:1.5rem}
.fg{margin-bottom:1rem}
.fg label{display:block;font-size:.8rem;font-weight:600;color:var(--t2);margin-bottom:.35rem}
.iw{position:relative}
.iw i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--t3);font-size:.85rem;pointer-events:none}
.iw input,.iw select{width:100%;padding:.72rem 1rem .72rem 2.6rem;border:2px solid var(--br);border-radius:var(--rsm);font-family:'Outfit',sans-serif;font-size:.9rem;color:var(--t1);transition:border-color .2s,box-shadow .2s;background:#FAFBFF;appearance:none;-webkit-appearance:none}
.iw input[type="password"],.iw input[type="text"]{padding-right:2.6rem}
.iw input:focus,.iw select:focus{outline:none;border-color:var(--pr);box-shadow:0 0 0 3px rgba(27,79,191,.12)}
.pw-toggle{position:absolute;right:0;top:0;height:100%;width:2.6rem;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--t3);pointer-events:auto;font-size:.9rem;transition:color .2s;border-radius:0 var(--rsm) var(--rsm) 0}
.pw-toggle:hover{color:var(--pr)}
.login-err{background:#FEF2F2;border:1px solid #FECACA;color:var(--rd);padding:.7rem 1rem;border-radius:var(--rsm);font-size:.82rem;margin-bottom:1rem;display:none;align-items:center;gap:8px}
.btn-login{width:100%;padding:.85rem;background:linear-gradient(135deg,var(--pr),var(--pr-dk));color:white;border:none;border-radius:var(--rsm);font-family:'Outfit',sans-serif;font-size:.95rem;font-weight:700;cursor:pointer;margin-top:.25rem;transition:transform .15s,box-shadow .15s;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-login:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(27,79,191,.35)}
.demo-sec{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--br)}
.demo-sec>p{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);margin-bottom:.75rem}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.demo-c{background:var(--bg);border-radius:var(--rsm);padding:.75rem 1rem;cursor:pointer;border:2px solid transparent;transition:all .2s}
.demo-c:hover{border-color:var(--pr);background:#EEF4FF}
.demo-c .rn{font-weight:700;font-size:.82rem;display:flex;align-items:center;gap:6px;margin-bottom:.2rem}
.demo-c .rc{font-size:.72rem;color:var(--t2);font-family:monospace;line-height:1.6}
/* ======== APP LAYOUT ======== */
#app{display:flex;height:100vh;overflow:hidden}
/* ======== SIDEBAR ======== */
#sidebar{width:var(--sw);background:var(--sb);height:100vh;display:flex;flex-direction:column;flex-shrink:0;transition:transform .3s;overflow:hidden;position:relative;z-index:100}
.sb-brand{padding:1.2rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:11px;background:rgba(0,0,0,.18)}
.sb-brand-ic{width:36px;height:36px;background:linear-gradient(135deg,var(--pr),#22C55E);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:white;flex-shrink:0}
.sb-brand-tx .bn{font-size:1.1rem;font-weight:800;color:white;letter-spacing:.5px}
.sb-brand-tx .bs{font-size:.45rem;color:rgba(255,255,255,.45);letter-spacing:.02em;white-space:normal;line-height:1.35}
.sb-user{padding:.85rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:10px}
.sb-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;color:white;flex-shrink:0}
.sb-ui .un{font-size:.82rem;font-weight:600;color:white}
.sb-ui .ur{font-size:.68rem;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.07em}
.sb-nav{flex:1;overflow-y:auto;padding:.6rem;scrollbar-width:none}
.sb-nav::-webkit-scrollbar{display:none}
.nav-lbl{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.28);padding:.65rem .65rem .2rem}
.ni{display:flex;align-items:center;gap:9px;padding:.6rem .7rem;border-radius:var(--rsm);cursor:pointer;margin-bottom:2px;transition:background .15s;color:rgba(255,255,255,.6);font-size:.845rem;font-weight:500}
.ni:hover{background:rgba(255,255,255,.08);color:white}
.ni.active{background:var(--pr);color:white;font-weight:600}
.ni i{width:16px;text-align:center;font-size:.85rem;flex-shrink:0}
.ni-badge{margin-left:auto;background:rgba(255,255,255,.2);color:white;font-size:.62rem;padding:1px 6px;border-radius:99px;font-weight:700}
.ni.active .ni-badge{background:rgba(255,255,255,.25)}
.sb-div{height:1px;background:rgba(255,255,255,.07);margin:.4rem 0}
.sb-foot{padding:.6rem;border-top:1px solid rgba(255,255,255,.07)}
/* ======== MAIN AREA ======== */
#mainArea{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;width:100%}
/* ======== TOPBAR ======== */
#topbar{height:var(--th);background:white;border-bottom:1px solid var(--br);display:flex;align-items:center;padding:0 1.5rem;gap:.75rem;flex-shrink:0;box-shadow:var(--sh0)}
.tb-menu{width:36px;height:36px;display:none;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;border-radius:var(--rsm);color:var(--t2);font-size:1.1rem}
.pg-title-wrap .pg-title{font-size:1.1rem;font-weight:700;color:var(--t1)}
.pg-title-wrap .pg-bc{font-size:.75rem;color:var(--t3);margin-top:1px}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:.65rem}
.tb-ib{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--br);background:none;cursor:pointer;border-radius:var(--rsm);color:var(--t2);font-size:.9rem;transition:background .15s;position:relative}
.tb-ib:hover{background:var(--bg)}
.notif-dot{width:8px;height:8px;background:var(--rd);border-radius:50%;position:absolute;top:6px;right:6px;border:2px solid white}
.tb-user{display:flex;align-items:center;gap:8px;padding:.35rem .75rem;border:1px solid var(--br);border-radius:var(--rsm);cursor:pointer;transition:background .15s}
.tb-user:hover{background:var(--bg)}
.tb-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;color:white}
.tb-nm{font-size:.82rem;font-weight:600;color:var(--t1)}
/* ======== CONTENT ======== */
#content{flex:1;overflow-y:auto;overflow-x:hidden;padding:1.5rem;background:
  radial-gradient(circle at top left,rgba(27,79,191,.08),transparent 30%),
  linear-gradient(180deg,#F4F7FC 0%,var(--bg) 34%,#EAF0F8 100%)}
.page{display:none;animation:fadeIn .25s ease}
.page.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
/* ======== STATS GRID ======== */
.st-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem}
.st-card{background:white;border-radius:var(--r);padding:1.2rem;display:flex;align-items:center;gap:1rem;box-shadow:var(--sh0);border:1px solid var(--br);transition:transform .2s,box-shadow .2s}
.st-card:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.st-ic{width:50px;height:50px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.ic-bl{background:#EEF4FF;color:var(--pr)}
.ic-gr{background:#F0FDF4;color:var(--gr)}
.ic-am{background:#FFFBEB;color:var(--am)}
.ic-pu{background:#F5F3FF;color:var(--pu)}
.ic-te{background:#F0FDFA;color:#0F766E}
.st-val{font-size:1.55rem;font-weight:800;line-height:1}
.st-lbl{font-size:.75rem;color:var(--t3);margin-top:3px}
.st-sub{font-size:.7rem;color:var(--t3)}
/* ======== CARDS ======== */
.card{background:white;border-radius:var(--r);box-shadow:var(--sh0);border:1px solid var(--br);min-width:0}
.card-hd{padding:1.1rem 1.2rem .8rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--br)}
.card-ti{font-size:.95rem;font-weight:700;color:var(--t1)}
.card-bd{padding:1.2rem}
/* ======== SECTION ======== */
.sec-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.sec-ti{font-size:1.05rem;font-weight:700;color:var(--t1)}
/* ======== PAGE HEADER ======== */
.pg-hd{margin-bottom:1.5rem}
.pg-heading{font-size:1.4rem;font-weight:800;color:var(--t1)}
.pg-sub{font-size:.875rem;color:var(--t3);margin-top:3px}
/* ======== BUTTONS ======== */
.btn{display:inline-flex;align-items:center;gap:6px;padding:.52rem 1.05rem;border-radius:var(--rsm);font-family:'Outfit',sans-serif;font-size:.85rem;font-weight:600;cursor:pointer;border:none;transition:all .15s;white-space:nowrap}
.btn-pr{background:var(--pr);color:white}.btn-pr:hover{background:var(--pr-dk)}
.btn-gr{background:var(--gr);color:white}.btn-gr:hover{background:var(--gr-dk)}
.btn-ol{background:white;color:var(--t2);border:1px solid var(--br)}.btn-ol:hover{background:var(--bg)}
.btn-rd{background:#FEF2F2;color:var(--rd);border:1px solid #FECACA}.btn-rd:hover{background:#FEE2E2}
.btn-sm{padding:.32rem .7rem;font-size:.78rem}
/* ======== BADGES ======== */
.badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:99px;font-size:.72rem;font-weight:600}
.b-foto{background:#EEF4FF;color:var(--pr)}
.b-vid{background:#F0FDF4;color:var(--gr)}
.b-ok{background:#F0FDF4;color:var(--gr)}
.b-warn{background:#FFFBEB;color:var(--am)}
.b-rd{background:#FEF2F2;color:var(--rd)}
/* ======== TABLE ======== */
.tbl-wrap{border-radius:var(--r);border:1px solid var(--br);overflow:hidden;background:white;box-shadow:var(--sh0)}
.dtbl{width:100%;border-collapse:collapse}
.dtbl thead th{padding:.7rem 1rem;background:#F8FAFC;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--t2);border-bottom:1px solid var(--br);text-align:left;white-space:nowrap}
.dtbl tbody tr{border-bottom:1px solid var(--br);transition:background .1s}
.dtbl tbody tr:last-child{border-bottom:none}
.dtbl tbody tr:hover{background:#FAFBFF}
.dtbl tbody td{padding:.7rem 1rem;font-size:.845rem;color:var(--t1);vertical-align:middle}
/* ======== THUMBNAILS ======== */
.thumb{width:62px;height:42px;border-radius:7px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;flex-shrink:0}
.thumb-ic{color:rgba(255,255,255,.85);font-size:1.1rem}
.vid-play{position:absolute;width:20px;height:20px;background:rgba(0,0,0,.5);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:.55rem;padding-left:2px}
.act-btns{display:flex;gap:3px}
.act-btn{width:28px;height:28px;border-radius:6px;border:1px solid var(--br);background:white;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.78rem;color:var(--t2);transition:all .15s}
.act-btn:hover{background:var(--bg)}
.act-btn.v:hover{background:#EEF4FF;color:var(--pr);border-color:#BFDBFE}
.act-btn.dl:hover{background:#F0FDF4;color:var(--gr);border-color:#BBF7D0}
.act-btn.ed:hover{background:#FFFBEB;color:var(--am);border-color:#FDE68A}
.act-btn.rm:hover{background:#FEF2F2;color:var(--rd);border-color:#FCA5A5}
/* ======== FILTERS ======== */
.flt-bar{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.flt-sel,.srch-in{padding:.5rem .85rem;border:1px solid var(--br);border-radius:var(--rsm);font-family:'Outfit',sans-serif;font-size:.845rem;color:var(--t1);background:white;transition:border-color .15s,box-shadow .15s;appearance:none;-webkit-appearance:none;cursor:pointer}
.flt-sel:focus,.srch-in:focus{outline:none;border-color:var(--pr);box-shadow:0 0 0 2px rgba(27,79,191,.1)}
.srch-wrap{position:relative;flex:1;min-width:180px}
.srch-wrap i{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--t3);font-size:.82rem}
.srch-wrap .srch-in{width:100%;padding-left:30px}
/* ======== GALLERY ======== */
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.85rem}
.gal-item{border-radius:var(--r);overflow:hidden;position:relative;aspect-ratio:4/3;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:var(--sh0);content-visibility:auto;contain-intrinsic-size:190px 143px;background:#0f172a}
.gal-item:hover{transform:scale(1.025);box-shadow:var(--sh)}
.gal-th{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2rem;color:rgba(255,255,255,.7)}
.gal-media{width:100%;height:100%;display:block;object-fit:cover;background:#0f172a}
.gal-ov{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.72));padding:.75rem .75rem .5rem;color:white;transform:translateY(100%);transition:transform .2s}
.gal-item:hover .gal-ov{transform:translateY(0)}
.gal-ov .gn{font-weight:600;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gal-ov .gm{opacity:.75;font-size:.68rem;margin-top:2px}
.vid-badge{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.55);color:white;font-size:.65rem;padding:2px 7px;border-radius:99px;display:flex;align-items:center;gap:4px}
/* ======== UPLOAD ======== */
.up-zone{border:2px dashed var(--pr);border-radius:var(--rlg);padding:3rem 2rem;text-align:center;background:#F5F8FF;transition:all .2s;cursor:pointer}
.up-zone:hover,.up-zone.drag{background:#EEF4FF;border-color:var(--pr-dk)}
.up-ic{width:68px;height:68px;background:white;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.2rem;box-shadow:var(--sh);font-size:1.75rem;color:var(--pr)}
.up-title{font-size:1.05rem;font-weight:700;margin-bottom:.4rem}
.up-sub{color:var(--t3);font-size:.85rem;margin-bottom:1.2rem}
.up-fmt{font-size:.72rem;color:var(--t3)}
.up-queue{margin-top:1.5rem}
.up-item{display:flex;align-items:center;gap:.75rem;padding:.7rem;background:white;border-radius:var(--rsm);margin-bottom:.5rem;border:1px solid var(--br)}
.up-item-ic{width:34px;height:34px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.85rem;color:white;flex-shrink:0}
.up-item-inf{flex:1;min-width:0}
.up-nm{font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-sz{font-size:.72rem;color:var(--t3)}
.pb-w{width:100%;height:4px;background:var(--bg);border-radius:99px;overflow:hidden;margin-top:4px}
.pb{height:100%;border-radius:99px;background:var(--pr);transition:width .5s}
.pb.done{background:var(--gr)}
.up-form{margin-top:1.5rem;background:white;border-radius:var(--r);border:1px solid var(--br);padding:1.25rem}
.up-form h3{font-size:.95rem;font-weight:700;margin-bottom:1rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-field{margin-bottom:.85rem}
.form-field label{display:block;font-size:.78rem;font-weight:600;color:var(--t2);margin-bottom:.35rem}
.form-field input,.form-field textarea,.form-field select{width:100%;padding:.6rem .85rem;border:1.5px solid var(--br);border-radius:var(--rsm);font-family:'Outfit',sans-serif;font-size:.85rem;color:var(--t1);background:#FAFBFF;transition:border-color .15s;resize:vertical}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{outline:none;border-color:var(--pr)}
/* ======== CHARTS ======== */
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
/* ======== PETUGAS ======== */
.pt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.pt-card{background:white;border-radius:var(--r);padding:1.2rem;border:1px solid var(--br);box-shadow:var(--sh0);display:flex;gap:.9rem;align-items:flex-start}
.pt-av{width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;font-weight:800;color:white;flex-shrink:0}
.pt-nm{font-weight:700;font-size:.9rem}
.pt-un{font-size:.75rem;color:var(--t3)}
.pt-wil{font-size:.75rem;color:var(--t2);margin-top:2px}
.pt-sts{display:flex;gap:.85rem;margin-top:.5rem}
.pt-st .v{font-weight:700;font-size:.85rem}
.pt-st .l{font-size:.68rem;color:var(--t3)}
.pt-acts{margin-left:auto;display:flex;gap:4px;align-items:flex-start}
/* ======== PROFILE ======== */
.prof-cov{height:110px;background:linear-gradient(135deg,var(--pr-dk),var(--pr) 50%,var(--gr));border-radius:var(--r) var(--r) 0 0}
.prof-av-w{padding:0 1.5rem;margin-top:-34px}
.prof-av{width:68px;height:68px;border-radius:50%;border:4px solid white;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:800;color:white}
.prof-inf{padding:1rem 1.5rem 1.5rem}
.prof-nm{font-size:1.2rem;font-weight:800}
.prof-rl{font-size:.8rem;padding:3px 10px;border-radius:99px;display:inline-flex;align-items:center;gap:5px;margin:.4rem 0 .75rem}
/* ======== SETTINGS ======== */
.set-sec{background:white;border-radius:var(--r);border:1px solid var(--br);overflow:hidden;margin-bottom:1rem}
.set-sec-hd{padding:.85rem 1.2rem;background:#F8FAFC;border-bottom:1px solid var(--br);font-weight:700;font-size:.875rem;display:flex;align-items:center;gap:8px;color:var(--t1)}
.set-row{display:flex;align-items:center;padding:.9rem 1.2rem;border-bottom:1px solid var(--br);gap:1rem}
.set-row:last-child{border-bottom:none}
.set-ri{flex:1}
.set-rl{font-size:.845rem;font-weight:600}
.set-rd{font-size:.78rem;color:var(--t3);margin-top:1px}
.toggle{width:42px;height:22px;background:var(--br);border-radius:99px;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0}
.toggle.on{background:var(--gr)}
.toggle::after{content:'';width:16px;height:16px;background:white;border-radius:50%;position:absolute;top:3px;left:3px;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.toggle.on::after{transform:translateX(20px)}
/* ======== PAGINATION ======== */
.pagi{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem;border-top:1px solid var(--br);font-size:.78rem;color:var(--t2)}
.gal-pager{margin-top:1rem;background:white;border:1px solid var(--br);border-radius:var(--r);box-shadow:var(--sh0)}
.pg-btns{display:flex;gap:3px;flex-wrap:wrap;justify-content:flex-end}
.pg-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px;border:1px solid var(--br);background:white;cursor:pointer;font-family:'Outfit',sans-serif;font-size:.78rem;color:var(--t2);transition:all .15s}
.pg-btn:hover,.pg-btn.active{background:var(--pr);color:white;border-color:var(--pr)}
.pg-btn:disabled{opacity:.45;cursor:not-allowed;background:#F8FAFC;color:var(--t3);border-color:var(--br)}
.pg-btn:disabled:hover{background:#F8FAFC;color:var(--t3);border-color:var(--br)}
.pg-ellipsis{width:20px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--t3);font-size:.8rem}
/* ======== MODAL ======== */
.m-ov{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:2000;display:flex;align-items:center;justify-content:center;padding:1rem;animation:fadeIn .2s}
.modal{background:white;border-radius:var(--rlg);width:100%;max-width:500px;max-height:calc(100svh - 2rem);overflow:hidden;box-shadow:var(--shl);animation:modalIn .2s ease}
@keyframes modalIn{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
.m-hd{padding:1.2rem 1.5rem;border-bottom:1px solid var(--br);display:flex;align-items:center;justify-content:space-between}
.m-ti{font-weight:700;font-size:1rem}
.m-close{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:6px;border:none;background:none;cursor:pointer;color:var(--t3);font-size:.95rem}
.m-close:hover{background:var(--bg)}
.m-bd{padding:1.5rem;overflow:auto;max-height:calc(100svh - 10rem)}
.m-ft{padding:.9rem 1.5rem;border-top:1px solid var(--br);display:flex;justify-content:flex-end;gap:.5rem}
.file-prev{width:100%;height:190px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:rgba(255,255,255,.8);margin-bottom:1rem}
.det-row{display:flex;justify-content:space-between;padding:.55rem 0;border-bottom:1px solid var(--br);font-size:.845rem}
.det-row:last-child{border-bottom:none}
.det-row .dl{color:var(--t3)}
.det-row .dv{font-weight:600;text-align:right;max-width:60%}
/* ======== TOAST ======== */
#toast{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem;pointer-events:none}
.toast-it{background:var(--sb);color:white;padding:.7rem 1.1rem;border-radius:var(--rsm);font-size:.845rem;font-weight:500;display:flex;align-items:center;gap:8px;box-shadow:var(--shl);animation:toastIn .3s ease}
@keyframes toastIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
.toast-it.succ{background:#15803D}
.toast-it.err{background:var(--rd)}
/* ======== LAYOUT HELPERS ======== */
.dash-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:1rem;min-width:0}
.dash-grid-pt{display:grid;grid-template-columns:1fr 1.6fr;gap:1rem;min-width:0}
.av-bl{background:linear-gradient(135deg,#1B4FBF,#3B6FED)}
.av-gr{background:linear-gradient(135deg,#15803D,#22C55E)}
.av-am{background:linear-gradient(135deg,#B45309,#F59E0B)}
.av-pu{background:linear-gradient(135deg,#6D28D9,#8B5CF6)}
.av-te{background:linear-gradient(135deg,#0F766E,#14B8A6)}
.av-rd{background:linear-gradient(135deg,#B91C1C,#EF4444)}
.av-cy{background:linear-gradient(135deg,#0369A1,#0EA5E9)}
.av-pi{background:linear-gradient(135deg,#9D174D,#EC4899)}
.mb1{margin-bottom:1rem}
.mt1{margin-top:1rem}
.loc-tx{font-size:.78rem;color:var(--t2)}
.fn-tx{font-size:.845rem;font-weight:600}
.rep-sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem}
.rep-sc{background:white;border-radius:var(--r);padding:1.2rem;border:1px solid var(--br);text-align:center}
.rep-sv{font-size:1.9rem;font-weight:800;margin-bottom:3px}
.rep-sl{font-size:.78rem;color:var(--t3)}
.prof-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:1rem}
/* ======== RESPONSIVE ======== */
@media(max-width:1100px){.st-grid{grid-template-columns:repeat(2,1fr)}.chart-grid{grid-template-columns:1fr}.dash-grid{grid-template-columns:1fr}.dash-grid-pt{grid-template-columns:1fr}.rep-sgrid{grid-template-columns:1fr 1fr}}
@media(max-width:768px){
  html,body,#app{width:100%;max-width:100%;overflow-x:hidden}
  #app{height:100dvh}
  #mainArea{width:100%;max-width:100vw;min-width:0}
  #sidebar{position:fixed;left:0;top:0;height:100%;width:min(86vw,300px);transform:translateX(-100%);transition:transform .3s;box-shadow:20px 0 60px rgba(0,0,0,.28)}
  #sidebar.open{transform:translateX(0)}
  .sb-ov{display:none}
  #sidebar.open~#mainArea+.sb-ov{display:block}
  #topbar{height:58px;padding:0 .85rem;gap:.55rem}
  .tb-menu{display:flex}
  .pg-title-wrap{min-width:0}
  .pg-title-wrap .pg-title{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
  .pg-title-wrap .pg-bc{display:none}
  .tb-right{gap:.35rem}
  .tb-ib{width:34px;height:34px}
  .tb-user{padding:.25rem .45rem}
  .tb-nm,.tb-user .fa-chevron-down{display:none}
  #content{width:100%;max-width:100vw;padding:.9rem;overflow-x:hidden}
  .page,.pg-hd,.dash-grid,.dash-grid-pt,.card,.tbl-wrap,.up-form,.flt-bar,.gal-grid{max-width:100%;min-width:0}
  .st-grid{grid-template-columns:1fr 1fr;gap:.65rem}
  .st-card{padding:.95rem;gap:.75rem}
  .st-ic{width:42px;height:42px;font-size:1.05rem}
  .st-val{font-size:1.25rem}
  .card{border-radius:14px}
  .card-hd{padding:.9rem 1rem;gap:.75rem;align-items:flex-start;flex-wrap:wrap}
  .card-ti{line-height:1.25}
  .card-bd{padding:1rem}
  .dash-grid,.dash-grid-pt{grid-template-columns:1fr;gap:.8rem}
  .up-zone{padding:2rem 1rem;border-radius:14px}
  .up-ic{width:58px;height:58px;font-size:1.45rem;margin-bottom:1rem}
  .up-title{font-size:1rem;line-height:1.3}
  .up-sub{font-size:.8rem;line-height:1.45}
  .up-fmt{font-size:.72rem;line-height:1.5}
  .gal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
  .gal-ov{transform:none;padding:.65rem;background:linear-gradient(transparent,rgba(0,0,0,.78))}
  .form-row{grid-template-columns:1fr}
  #content{padding:1rem}
  .flt-bar{gap:.5rem}
  .flt-sel,.srch-wrap,.srch-in{width:100%;min-width:0}
  .tbl-wrap{border-radius:12px;overflow:hidden}
  .tbl-wrap>div[style*="overflow-x"]{overflow-x:visible!important}
  .dtbl{display:block;width:100%;min-width:0!important}
  .dtbl thead{display:none}
  .dtbl tbody{display:grid;gap:.65rem;padding:.65rem;background:#F8FAFC}
  .dtbl tbody tr{display:grid;grid-template-columns:1fr;gap:.35rem;background:white;border:1px solid var(--br);border-radius:12px;padding:.85rem;box-shadow:var(--sh0)}
  .dtbl tbody td{display:flex;align-items:center;justify-content:space-between;gap:.9rem;width:100%;padding:.25rem 0;border:0;font-size:.82rem;min-width:0}
  .dtbl tbody td::before{content:"";flex:0 0 88px;color:var(--t3);font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
  .dtbl tbody td:nth-child(1)::before{content:"No"}
  .dtbl tbody td:nth-child(2)::before{content:"Thumbnail"}
  .dtbl tbody td:nth-child(3)::before{content:"Nama File"}
  .dtbl tbody td:nth-child(4)::before{content:"Jenis"}
  .dtbl tbody td:nth-child(5)::before{content:"Petugas"}
  .dtbl tbody td:nth-child(6)::before{content:"D.I"}
  .dtbl tbody td:nth-child(7)::before{content:"Jabatan"}
  .dtbl tbody td:nth-child(8)::before{content:"Tanggal"}
  .dtbl tbody td:nth-child(9)::before{content:"Aksi"}
  .dtbl tbody td:nth-child(10)::before{content:"Ukuran"}
  .dtbl tbody td:nth-child(11)::before{content:"Aksi"}
  .dtbl-petugas tbody td:nth-child(1)::before{content:"Thumbnail"}
  .dtbl-petugas tbody td:nth-child(2)::before{content:"Nama File"}
  .dtbl-petugas tbody td:nth-child(3)::before{content:"Jenis"}
  .dtbl-petugas tbody td:nth-child(4)::before{content:"Tanggal"}
  .dtbl-petugas tbody td:nth-child(5)::before{content:"Aksi"}
  .dtbl-data tbody td:nth-child(8)::before{content:"Lokasi"}
  .dtbl-data tbody td:nth-child(9)::before{content:"Tanggal"}
  .dtbl-data-saya tbody td:nth-child(6)::before{content:"Jabatan"}
  .dtbl-data-saya tbody td:nth-child(7)::before{content:"Lokasi"}
  .dtbl-data-saya tbody td:nth-child(8)::before{content:"Tanggal"}
  .dtbl-data-saya tbody td:nth-child(9)::before{content:"Ukuran"}
  .dtbl-data-saya tbody td:nth-child(10)::before{content:"Aksi"}
  .dtbl .fn-tx,.dtbl .loc-tx{max-width:100%!important;overflow-wrap:anywhere;text-align:right}
  .dtbl .thumb{width:72px;height:52px}
  .act-btns{justify-content:flex-end;flex-wrap:wrap}
  .pagi{align-items:flex-start;gap:.65rem;flex-direction:column}
  .pg-btns{justify-content:flex-start}
  .pt-grid{grid-template-columns:1fr}
  .pt-card{padding:1rem}
  .prof-grid{grid-template-columns:1fr}
  .set-row{align-items:flex-start;flex-direction:column}
  .rep-sgrid{grid-template-columns:1fr}
  #toast{left:1rem;right:1rem;bottom:1rem}
  .toast-it{justify-content:center}
}
@media(max-width:480px){
  .st-grid{grid-template-columns:1fr}
  .gal-grid{grid-template-columns:1fr}
  .pg-heading{font-size:1.18rem}
  .pg-sub{font-size:.8rem}
  #content{padding:.75rem}
  .pg-hd{margin-bottom:1rem}
  .btn{width:100%;justify-content:center}
  .tb-ib{width:32px;height:32px}
  .tb-user{padding:.22rem}
  .tb-av{width:30px;height:30px}
  .dtbl tbody{padding:.55rem}
  .dtbl tbody tr{padding:.75rem}
  .dtbl tbody td{align-items:flex-start}
  .dtbl tbody td::before{flex-basis:76px}
  .dtbl .thumb{width:64px;height:48px}
  .sec-hd{align-items:flex-start;flex-direction:column}
  .m-ov{padding:.65rem}
  .modal{border-radius:12px}
  .m-ft{flex-direction:column}
  .m-ft .btn{width:100%}
}
.sb-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99}