/* Transisi antarmenu dan sidebar tetap singkat agar navigasi responsif. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
.content,.operations-table-card{position:relative}
.page-outgoing{position:fixed!important;z-index:12;pointer-events:none;overflow:hidden;background:var(--background);margin:0!important;max-width:none!important}
.is-content-loading>:not(.page-heading):not(.content-loading):not(.billing-filters):not(.dashboard-shortcuts):not(.analysis-toolbar):not(.administration-tabs):not(.table-section-heading):not(.search-row){display:none!important}
.content-loading{padding:2px 0 20px;min-height:510px}
.operations-table-card>.content-loading{padding:6px 24px 24px;min-height:420px}
.operations-table-card>.content-loading .skeleton-panel{padding:0;border:0;border-radius:0;background:transparent}
.operations-table-card>.content-loading.is-leaving{background:var(--surface)}
.content-loading.is-leaving{position:absolute;top:var(--loading-top);left:var(--loading-left);width:var(--loading-width);max-width:100%;z-index:3;pointer-events:none;background:var(--background)}
.content-loading-status{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted);margin-bottom:20px}
.content-loading-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px #6ee7b710;animation:loading-pulse 1.4s ease-in-out infinite}
.skeleton-line,.skeleton-avatar,.skeleton-donut,.skeleton-graph span{display:block;position:relative;overflow:hidden;background:#33415570;border-radius:6px}
.skeleton-line{height:12px;max-width:100%;margin-bottom:15px}
.skeleton-line:last-child{margin-bottom:0}
.skeleton-line:after,.skeleton-avatar:after,.skeleton-donut:after,.skeleton-graph span:after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 20%,#6ee7b712 48%,transparent 76%);transform:translateX(-100%);animation:skeleton-shimmer 1.8s ease-in-out infinite}
.skeleton-panel,.skeleton-card,.skeleton-store{padding:24px;border:1px solid var(--border);border-radius:18px;background:var(--surface)}
.skeleton-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-bottom:20px}
.skeleton-card{min-height:164px}.skeleton-card .skeleton-line:nth-child(2){height:30px;margin:24px 0 18px}
.skeleton-charts{display:grid;grid-template-columns:1.4fr 1fr;gap:20px}.skeleton-charts>.skeleton-panel{min-height:280px}
.skeleton-graph{height:180px;margin-top:28px;display:flex;align-items:flex-end;gap:8%;border-bottom:1px solid var(--border);padding:0 16px}.skeleton-graph span{flex:1;border-radius:5px 5px 0 0}
.skeleton-composition{display:flex;align-items:center;gap:28px;min-height:210px}.skeleton-composition>div{flex:1}.skeleton-donut{width:140px;height:140px;flex-shrink:0;border-radius:50%;mask-image:radial-gradient(circle,transparent 49%,#000 50%)}
.skeleton-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:4px 0 24px}.skeleton-toolbar>.skeleton-line{height:18px;margin:0}
.skeleton-table-row{display:grid;grid-template-columns:.7fr 1.2fr 1.8fr .8fr;gap:30px;padding:22px 0;border-top:1px solid #33415580}.skeleton-table-row>.skeleton-line{margin:0}
.skeleton-summary{padding:26px;border:1px solid #34d39930;border-radius:18px;background:linear-gradient(110deg,#153b32,#1d2939);margin-bottom:28px}.skeleton-summary>.skeleton-line:nth-child(2){height:32px;margin:20px 0}
.skeleton-store{display:flex;align-items:center;gap:18px;margin-bottom:12px;min-height:100px}.skeleton-store>div{flex:1}.skeleton-avatar{width:42px;height:42px;border-radius:13px;flex-shrink:0}.skeleton-value{width:18%}.skeleton-value>.skeleton-line{height:22px}
@keyframes skeleton-shimmer{to{transform:translateX(100%)}}
@keyframes loading-pulse{50%{opacity:.4;box-shadow:0 0 0 6px #6ee7b708}}
@media(max-width:1180px){.skeleton-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.skeleton-charts{grid-template-columns:1fr}.skeleton-charts>.skeleton-panel:last-child{display:none}}
@media(max-width:620px){.content-loading{min-height:480px}.skeleton-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.skeleton-card{padding:18px;min-height:140px}.skeleton-card:first-child{grid-column:1/-1}.skeleton-panel{padding:18px}.skeleton-table-row{grid-template-columns:1fr 1.6fr .8fr;gap:16px}.skeleton-table-row>.skeleton-line:first-child{display:none}.skeleton-store{padding:18px;gap:12px}.skeleton-value{width:23%}.skeleton-avatar{width:34px;height:34px}.skeleton-summary>.skeleton-line:nth-child(2){width:65%!important}}
.sidebar-moving .sidebar{transition:width .32s var(--motion-ease),padding .32s var(--motion-ease)}
.sidebar-moving main{transition:margin-left .32s var(--motion-ease)}
.sidebar-toggle .icon{transition:transform .32s var(--motion-ease)}
.sidebar-nav{transition:padding .32s var(--motion-ease)}
.button,.icon-button,.row-button{transition:background-color .18s,border-color .18s,box-shadow .18s,transform .18s}
.button:active:not(:disabled),.icon-button:active{transform:scale(.98)}
@media(min-width:901px){
 .brand{transition:padding .32s var(--motion-ease),gap .32s var(--motion-ease)}
 .brand-copy,.sidebar-bottom>div,.nav-link>span{overflow:hidden;max-width:240px;opacity:1;transition:max-width .32s var(--motion-ease),max-height .32s var(--motion-ease),opacity .18s}
 .sidebar-bottom>div{max-height:65px}
 .nav-group{overflow:hidden;max-height:40px;transition:max-height .32s var(--motion-ease),margin .32s var(--motion-ease),padding .32s var(--motion-ease),opacity .18s}
 .nav-link{transition:background .18s,color .18s,padding .32s var(--motion-ease),gap .32s var(--motion-ease)}
 .sidebar-bottom{transition:padding .32s var(--motion-ease),gap .32s var(--motion-ease)}
 .sidebar-collapsed .brand,.sidebar-collapsed .nav-link,.sidebar-collapsed .sidebar-bottom{justify-content:flex-start}
 .sidebar-collapsed .brand{gap:0}
 .sidebar-collapsed .brand-copy,.sidebar-collapsed .sidebar-bottom>div,.sidebar-collapsed .nav-link>span{display:block;max-width:0;min-width:0;opacity:0;pointer-events:none}
 .sidebar-collapsed .sidebar-bottom{gap:0}
 .sidebar-collapsed .sidebar-bottom>div{max-height:0}
 .sidebar-collapsed .nav-group{display:block;max-height:0;margin:0;padding:0;opacity:0}
}
.app-booting{overflow:hidden}
.app-booting #auth-screen,.app-booting #app-sidebar,.app-booting #app-main{visibility:hidden}
.startup-screen{position:fixed;inset:0;z-index:200;display:grid;place-items:center;overflow:hidden;min-height:100dvh;background:radial-gradient(ellipse at 50% 40%,#13382e 0, #10221f 28%,#0f1720 65%);color:var(--text)}
.startup-grid{position:absolute;inset:0;background-image:linear-gradient(#6ee7b707 1px,transparent 1px),linear-gradient(90deg,#6ee7b707 1px,transparent 1px);background-size:58px 58px;mask-image:radial-gradient(ellipse at center,#000,transparent 72%)}
.startup-glow{position:absolute;width:400px;height:400px;border-radius:50%;background:#10b9810d;filter:blur(30px);animation:startup-breathe 3s ease-in-out infinite}
.startup-content{position:relative;display:flex;align-items:center;flex-direction:column;text-align:center;width:min(440px,calc(100% - 40px));padding:32px 0}
.startup-emblem{position:relative;display:grid;place-items:center;width:190px;height:190px;margin-bottom:32px}
.startup-orbit{position:absolute;inset:0;border:1px solid #6ee7b717;border-radius:50%;animation:startup-spin 9s linear infinite}
.startup-orbit:before{content:'';position:absolute;top:9px;left:45px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px #34d39980}
.startup-orbit.inner{inset:16px;animation-direction:reverse;animation-duration:7s;border-style:dashed;border-color:#6ee7b721}
.startup-orbit.inner:before{width:4px;height:4px;top:6px;left:32px;opacity:.6}
.startup-sheet{position:absolute;width:69px;height:85px;border-radius:16px;border:1px solid #3a7660;background:#17392e;transform:rotate(-12deg) translate(-12px,2px)}
.startup-sheet.second{transform:rotate(12deg) translate(12px,2px);background:#1a4536}
.startup-mark{position:relative;width:78px;height:92px;border-radius:18px;display:grid;place-items:center;color:#a7f3d0;border:1px solid #58be9399;background:linear-gradient(150deg,#235d45,#143b30);box-shadow:0 16px 40px #020d1860,inset 0 1px 0 #a7f3d026;animation:startup-float 3s ease-in-out infinite}
.startup-mark svg{width:39px;height:46px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.startup-content .eyebrow{font-size:10px;letter-spacing:3px;margin-bottom:12px}
.startup-title{font-size:29px;letter-spacing:-1px;font-weight:700;margin:0 0 14px}
.startup-message{font-size:13px;line-height:1.7;color:var(--muted);min-height:44px;margin:0;max-width:350px}
.startup-track{width:180px;height:3px;margin:23px 0 24px;background:#254438;border-radius:4px;overflow:hidden}
.startup-track span{display:block;width:45%;height:100%;border-radius:4px;background:linear-gradient(90deg,#047857,#6ee7b7);animation:startup-progress 1.5s ease-in-out infinite}
.startup-steps{display:flex;align-items:center;gap:24px;color:#69877c;font-size:11px}
.startup-steps span{display:flex;align-items:center;gap:6px;transition:color .2s}
.startup-steps span:before{content:'';width:4px;height:4px;border-radius:50%;background:currentColor}
.startup-steps .is-current{color:var(--accent)}
.startup-steps .is-complete{color:#a5bdb3}
.startup-continue{margin-top:24px;font-size:12px;min-height:38px}
@keyframes startup-spin{to{transform:rotate(360deg)}}
@keyframes startup-float{50%{transform:translateY(-6px)}}
@keyframes startup-breathe{50%{transform:scale(1.18);opacity:.5}}
@keyframes startup-progress{from{transform:translateX(-110%)}to{transform:translateX(325%)}}
@media(max-width:900px){.sidebar-moving .sidebar,.sidebar-moving main{transition:none}}
@media(max-width:620px){.startup-emblem{width:160px;height:160px;margin-bottom:28px}.startup-title{font-size:26px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.startup-track span{width:100%}}