html.ui-booting body{min-height:100vh;overflow:hidden}
html.ui-booting #root{visibility:hidden}
html.ui-booting body::before{content:"Memuat portal";position:fixed;z-index:99999;inset:0;display:grid;place-items:center;padding-top:72px;background:linear-gradient(145deg,#edfaff,#f8fdff 46%,#e3f7ff);color:#0a6794;font:800 12px/1.4 "Manrope","Segoe UI",sans-serif;letter-spacing:.12em;text-transform:uppercase}
html.ui-booting body::after{content:"";position:fixed;z-index:100000;top:calc(50% - 22px);left:calc(50% - 18px);width:36px;height:36px;border:3px solid rgba(8,139,196,.18);border-top-color:#078cca;border-radius:50%;animation:ui-runtime-spin .7s linear infinite}
@keyframes ui-runtime-spin{to{transform:rotate(360deg)}}

.app-shell .sidebar,.app-shell .sidebar nav,.app-shell .sidebar .nav-item{pointer-events:auto}
.app-shell .sidebar .nav-item{position:relative;isolation:isolate;touch-action:manipulation}
.app-shell .sidebar .nav-item::before,.app-shell .sidebar .nav-item::after{pointer-events:none}
.app-shell .sidebar .nav-item[data-ui-pending]::after{content:"";position:absolute;right:12px;top:50%;width:12px;height:12px;margin-top:-7px;border:2px solid rgba(255,255,255,.4);border-top-color:currentColor;border-radius:50%;animation:ui-runtime-spin .65s linear infinite}

.app-shell .main-area{position:relative}
html.ui-route-changing .app-shell .main-area>.content{opacity:.16;filter:blur(1px);pointer-events:none;transition:opacity .1s ease}
html.ui-route-changing .app-shell .main-area::before{content:"";position:absolute;z-index:80;top:50%;left:50%;width:32px;height:32px;margin:-16px;border:3px solid rgba(6,133,190,.18);border-top-color:#078cca;border-radius:50%;animation:ui-runtime-spin .65s linear infinite;pointer-events:none}
html:not(.ui-route-changing) .app-shell .main-area>.content{transition:opacity .14s ease}

/* The application header already states the active menu. Remove the repeated
   gradient page-title cards while keeping any page-level action available. */
.app-shell .main-area>.content>.page-title{min-height:0!important;padding:0!important;margin:0 0 14px!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;overflow:visible!important;justify-content:flex-end!important}
.app-shell .main-area>.content>.page-title::before,.app-shell .main-area>.content>.page-title::after{display:none!important;content:none!important}
.app-shell .main-area>.content>.page-title>div{display:none!important}
.app-shell .main-area>.content>.page-title:not(:has(>button)){display:none!important}
.app-shell .main-area>.content>.page-title>button{position:relative!important;z-index:1;margin:0!important}

@media(max-width:760px){.app-shell .main-area>.content>.page-title{margin-bottom:10px!important}.app-shell .main-area>.content>.page-title>button{width:auto!important;min-width:0!important}}

@media(prefers-reduced-motion:reduce){html.ui-booting body::after,.app-shell .sidebar .nav-item[data-ui-pending]::after,html.ui-route-changing .app-shell .main-area::before{animation-duration:1.4s}}