:root{
  --primary:#0d47a1;
  --primary2:#1976d2;
  --primary-dark:#08306f;
  --dark:#102f57;
  --bg:#f4f8ff;
  --light:#eaf3ff;
  --border:#d8e5f5;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:#203b5b;font-family:"Segoe UI",Arial,sans-serif}
img{max-width:100%;height:auto}
.main-nav{background:linear-gradient(135deg,#063b82,#0d47a1 52%,#1976d2);box-shadow:0 4px 18px rgba(0,43,100,.16)}
.navbar-brand{letter-spacing:.2px}
.nav-link{color:rgba(255,255,255,.92)!important}
.nav-link:hover{color:#fff!important}
.footer{background:#08306f;color:#fff}
.hero{background:linear-gradient(135deg,#063b82,#0d47a1 55%,#1976d2);color:#fff;border-radius:24px;padding:42px 34px;box-shadow:0 18px 40px rgba(13,71,161,.18)}
.soft-card,.stat-card,.file-card,.filter-card{background:#fff;border:1px solid rgba(13,71,161,.06);border-radius:18px;box-shadow:0 7px 25px rgba(13,55,105,.07)}
.category-card{height:100%;background:#fff;border:1px solid rgba(13,71,161,.06);border-radius:18px;box-shadow:0 7px 25px rgba(13,55,105,.07);transition:.25s}
.category-card:hover{transform:translateY(-5px);box-shadow:0 15px 32px rgba(13,71,161,.14)}
.icon-box{width:58px;height:58px;border-radius:16px;background:#e8f1ff;color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:25px;flex:0 0 auto}
.file-icon{width:50px;height:50px;border-radius:14px;background:#edf4ff;display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--primary)}
.category-title{font-weight:700;line-height:1.35}
.pill{border-radius:999px;padding:5px 11px;font-size:12px;background:#e8f1ff;color:#0d47a1}
.form-control,.form-select{border-radius:11px;padding:11px 13px;border-color:#d7e3f1}
.form-control:focus,.form-select:focus{border-color:#1976d2;box-shadow:0 0 0 .2rem rgba(25,118,210,.12)}
.btn{border-radius:10px}
.btn-success{background:#0d47a1;border-color:#0d47a1}
.btn-success:hover{background:#08306f;border-color:#08306f}
.btn-primary{background:#1976d2;border-color:#1976d2}
.btn-primary:hover{background:#0d47a1;border-color:#0d47a1}
.btn-outline-success{color:#0d47a1;border-color:#0d47a1}
.btn-outline-success:hover{color:#fff;background:#0d47a1;border-color:#0d47a1}
.table-wrap{border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 7px 25px rgba(13,55,105,.07)}
.table thead th{white-space:nowrap;background:#f3f7fd!important;color:#23466d}
.table td{vertical-align:middle}
.stat-number{font-size:2rem;font-weight:800;color:#0d47a1}
.stat-label{color:#6b7f95;font-size:.9rem}
.search-round{border-radius:999px}
.login-panel{max-width:440px;margin:auto;border-top:4px solid #0d47a1}
.truncate-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.alert-info{background:#edf5ff;border-color:#cfe2ff;color:#174a83}
@media(max-width:576px){.hero{padding:30px 22px;border-radius:18px}.display-6{font-size:1.9rem}.table{font-size:.86rem}}
/* Prevent oversized images from breaking layout */
.hero img,.file-card img,.category-card img,.soft-card img,.main-nav img{max-width:100%;height:auto;object-fit:contain}
/* loader */
#pageLoader.page-loader{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;margin:0!important;padding:0!important;background:rgba(247,250,255,.96)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:2147483647!important;opacity:0;visibility:hidden;pointer-events:none;overflow:hidden!important;transition:opacity .35s ease,visibility .35s ease}
#pageLoader.page-loader.is-loading{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
#pageLoader .loader-content{width:320px!important;max-width:84vw!important;margin:0!important;padding:0!important;text-align:center!important;box-sizing:border-box!important;transform:translateY(8px) scale(.96);transition:transform .45s cubic-bezier(.22,1,.36,1)}
#pageLoader.is-loading .loader-content{transform:translateY(0) scale(1)}
#pageLoader .loader-logo-wrap{width:120px!important;height:120px!important;max-width:120px!important;max-height:120px!important;margin:0 auto 18px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;border-radius:50%!important;overflow:hidden!important;background:#fff!important;box-shadow:0 12px 35px rgba(13,71,161,.18)!important}
#pageLoader img.loader-logo{display:block!important;width:88px!important;height:88px!important;max-width:88px!important;max-height:88px!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;object-fit:contain!important;object-position:center!important;border:0!important;animation:loaderWiggle 2.6s ease-in-out infinite!important;transform-origin:50% 75%!important}
#pageLoader .loader-fallback{display:none!important;width:88px!important;height:88px!important;align-items:center!important;justify-content:center!important;color:#0d47a1!important;font-size:48px!important}
#pageLoader .loader-fallback.show{display:flex!important}
#pageLoader .loader-title{margin:0!important;padding:0!important;font-weight:800!important;letter-spacing:.08em!important;color:#123b68!important;font-size:15px!important;line-height:1.35!important}
#pageLoader .loader-subtitle{margin:6px 0 0!important;padding:0!important;color:#71839a!important;font-size:13px!important;line-height:1.4!important}
#pageLoader .loader-progress{width:180px!important;height:4px!important;margin:18px auto 0!important;padding:0!important;border-radius:99px!important;overflow:hidden!important;background:#dbe8f7!important}
#pageLoader .loader-progress span{display:block!important;width:40%!important;height:100%!important;margin:0!important;padding:0!important;border-radius:99px!important;background:linear-gradient(90deg,#0d47a1,#1976d2)!important;animation:loaderProgress 1.1s ease-in-out infinite!important}
@keyframes loaderWiggle{0%,100%{transform:rotate(0deg) translateY(0)}20%{transform:rotate(-7deg) translateY(-3px)}40%{transform:rotate(7deg) translateY(0)}60%{transform:rotate(-5deg) translateY(-2px)}80%{transform:rotate(3deg) translateY(0)}}
@keyframes loaderProgress{0%{transform:translateX(-150%)}50%{transform:translateX(100%)}100%{transform:translateX(300%)}}
@media(max-width:576px){#pageLoader .loader-logo-wrap{width:104px!important;height:104px!important}#pageLoader img.loader-logo{width:76px!important;height:76px!important}#pageLoader .loader-fallback{width:76px!important;height:76px!important}}
@media(prefers-reduced-motion:reduce){#pageLoader .loader-logo,#pageLoader .loader-progress span{animation:none!important}#pageLoader{transition:none!important}}
/* =====================================================
   LOGO PUSAT LABORATORIUM NARKOTIKA BNN
===================================================== */

.brand-logo {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    background: rgba(255,255,255,0.10);
    border: 2px solid rgba(255,255,255,0.65);
}

.brand-logo img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    display: block;
}