html{font-size:14px;min-height:100%;background:var(--canvas)}body{min-height:100vh;margin:0;background:var(--canvas);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}.app-icon,.nav-icon{width:18px;height:18px;fill:currentColor;flex:0 0 auto}.topbar{height:var(--topbar-height);position:fixed;z-index:1040;top:0;left:var(--sidebar-width);right:0;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 22px;gap:16px;transition:left var(--transition)}.sidebar{position:fixed;z-index:1050;inset:0 auto 0 0;width:var(--sidebar-width);background:var(--sidebar-bg);color:var(--sidebar-text);display:flex;flex-direction:column;transition:width var(--transition),transform var(--transition);box-shadow:6px 0 22px rgba(2,6,23,.08)}.sidebar-brand{height:var(--topbar-height);display:flex;align-items:center;gap:11px;padding:0 18px;color:#fff;text-decoration:none;border-bottom:1px solid rgba(148,163,184,.15);overflow:hidden}.sidebar-brand img,.brand-mark{width:38px;height:38px;border-radius:10px;object-fit:contain;background:#fff;flex:0 0 auto}.brand-mark{display:grid;place-items:center;background:linear-gradient(135deg,var(--emerald-500),var(--emerald-700));font-weight:900;font-size:21px}.brand-copy{display:grid;min-width:0;line-height:1.15}.brand-copy strong{font-size:16px;white-space:nowrap}.brand-copy small{color:#94a3b8;font-size:11px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-nav{padding:14px 10px;overflow-y:auto;overflow-x:hidden;flex:1}.nav-group{margin-bottom:14px}.nav-label{padding:5px 11px 6px;color:var(--sidebar-muted);font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap}.sidebar-nav a{position:relative;display:flex;align-items:center;gap:12px;min-height:40px;padding:8px 11px;margin:2px 0;color:var(--sidebar-text);text-decoration:none;border-radius:8px;font-weight:600;white-space:nowrap;transition:background var(--transition),color var(--transition)}.sidebar-nav a:hover,.sidebar-nav a:focus-visible{background:var(--sidebar-hover);color:#fff}.sidebar-nav a.active{background:rgba(16,185,129,.15);color:#6ee7b7}.sidebar-nav a.active:before{content:"";position:absolute;left:-10px;width:3px;height:24px;border-radius:0 3px 3px 0;background:var(--emerald-500)}.sidebar-nav a kbd{margin-left:auto;background:rgba(255,255,255,.08);color:#94a3b8;font-size:9px;border:0}.sidebar-footer{display:flex;align-items:center;gap:8px;height:51px;padding:0 18px;border-top:1px solid rgba(148,163,184,.14);color:#94a3b8;font-size:11px;white-space:nowrap;overflow:hidden}.sidebar-footer small{margin-left:auto}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--emerald-500);box-shadow:0 0 0 3px rgba(16,185,129,.13)}.sidebar-toggle,.icon-button{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);transition:all var(--transition)}.icon-button:hover{background:var(--surface-muted);border-color:var(--border-strong)}.text-button{font-weight:800;font-size:11px}.app-breadcrumb{display:flex;align-items:center;gap:8px;min-width:0;color:var(--text-muted);font-size:12px}.app-breadcrumb strong{color:var(--text);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crumb-separator{width:11px;height:11px;fill:currentColor}.topbar-actions{display:flex;align-items:center;gap:8px;margin-left:auto}.topbar-pos{display:flex;align-items:center;gap:6px}.user-menu{display:flex;align-items:center;gap:9px;border:0;background:transparent;color:var(--text);padding:5px 4px 5px 8px;border-radius:9px;text-align:left}.user-menu:hover{background:var(--surface-muted)}.user-avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--navy-900);color:#fff;font-weight:800}.user-copy{display:grid;line-height:1.2;max-width:160px}.user-copy strong,.user-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-copy strong{font-size:12px}.user-copy small{font-size:10px;color:var(--text-muted);margin-top:2px}.main-content{margin-left:var(--sidebar-width);padding:calc(var(--topbar-height) + 22px) 24px 32px;min-height:100vh;transition:margin-left var(--transition);max-width:1800px}.main-content.no-sidebar{margin-left:0}.sidebar-backdrop{display:none}.sidebar-collapsed .sidebar{width:var(--sidebar-collapsed)}.sidebar-collapsed .topbar{left:var(--sidebar-collapsed)}.sidebar-collapsed .main-content{margin-left:var(--sidebar-collapsed)}.sidebar-collapsed .brand-copy,.sidebar-collapsed .nav-label,.sidebar-collapsed .sidebar-nav a span,.sidebar-collapsed .sidebar-nav a kbd,.sidebar-collapsed .sidebar-footer span:not(.status-dot),.sidebar-collapsed .sidebar-footer small{display:none}.sidebar-collapsed .sidebar-brand{padding:0 19px}.sidebar-collapsed .sidebar-nav{padding-inline:11px}.sidebar-collapsed .sidebar-nav a{justify-content:center;padding-inline:0}.sidebar-collapsed .sidebar-nav a.active:before{left:-11px}.sidebar-collapsed .sidebar-footer{justify-content:center;padding:0}.theme-dark-icon{display:none}[data-theme=dark] .theme-light-icon{display:none}[data-theme=dark] .theme-dark-icon{display:block}@media(prefers-color-scheme:dark){[data-theme=system] .theme-light-icon{display:none}[data-theme=system] .theme-dark-icon{display:block}}
@media(max-width:991.98px){.sidebar{transform:translateX(-100%);width:min(86vw,var(--sidebar-width))}.topbar,.sidebar-collapsed .topbar{left:0;padding:0 14px}.main-content,.sidebar-collapsed .main-content{margin-left:0;padding-inline:14px}.sidebar-collapsed .sidebar{width:min(86vw,var(--sidebar-width))}.sidebar-collapsed .brand-copy,.sidebar-collapsed .nav-label,.sidebar-collapsed .sidebar-nav a span,.sidebar-collapsed .sidebar-nav a kbd,.sidebar-collapsed .sidebar-footer span:not(.status-dot),.sidebar-collapsed .sidebar-footer small{display:initial}.sidebar-collapsed .sidebar-nav a{justify-content:flex-start;padding-inline:11px}.mobile-sidebar-open .sidebar{transform:translateX(0)}.mobile-sidebar-open .sidebar-backdrop{display:block;position:fixed;inset:0;z-index:1045;background:rgba(2,6,23,.58)}.user-copy{display:none}.app-breadcrumb span,.crumb-separator{display:none}}@media(max-width:575.98px){.main-content{padding-top:calc(var(--topbar-height) + 14px);padding-inline:10px}.topbar{gap:8px}.topbar-pos span{display:none}.topbar-actions{gap:4px}.app-breadcrumb{max-width:95px}.user-avatar{width:30px;height:30px}.user-menu>.app-icon{display:none}}

/* Scrollbar menyatu dengan surface navy sidebar. */
.sidebar-nav{scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.28) transparent;scrollbar-gutter:stable}
.sidebar-nav::-webkit-scrollbar{width:6px}
.sidebar-nav::-webkit-scrollbar-track{background:transparent}
.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(148,163,184,.24);border-radius:999px;border:1px solid transparent;background-clip:padding-box}
.sidebar-nav:hover::-webkit-scrollbar-thumb{background:rgba(148,163,184,.48);background-clip:padding-box}
.sidebar-nav::-webkit-scrollbar-button{display:none;width:0;height:0}
.sidebar-brand img{background:transparent}
.sidebar{isolation:isolate;overflow:hidden;background:radial-gradient(circle at 12% 4%,var(--sidebar-glow),transparent 27%),linear-gradient(165deg,var(--sidebar-gradient-start) 0%,var(--sidebar-gradient-middle) 48%,var(--sidebar-gradient-end) 100%);border-right:1px solid var(--sidebar-edge);box-shadow:8px 0 30px rgba(2,6,23,.18)}
.sidebar::before,.sidebar::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
.sidebar::before{background-image:linear-gradient(135deg,var(--sidebar-pattern) 1px,transparent 1px),linear-gradient(45deg,var(--sidebar-pattern) 1px,transparent 1px);background-size:30px 30px;background-position:0 0,15px 15px;opacity:.58;mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.78) 42%,transparent 88%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.78) 42%,transparent 88%)}
.sidebar::after{background:linear-gradient(to bottom,transparent 38%,rgba(2,6,23,.12) 62%,rgba(2,6,23,.72) 100%)}
.sidebar-brand,.sidebar-nav,.sidebar-footer{position:relative;z-index:1}
.sidebar-brand{background:linear-gradient(90deg,rgba(255,255,255,.025),transparent);border-bottom-color:var(--sidebar-edge)}
.sidebar-nav a:hover,.sidebar-nav a:focus-visible{background:rgba(30,41,59,.78);box-shadow:inset 0 0 0 1px rgba(148,163,184,.08);backdrop-filter:blur(3px)}
.sidebar-nav a.active{background:linear-gradient(90deg,rgba(16,185,129,.24),rgba(16,185,129,.075));box-shadow:inset 0 0 0 1px rgba(52,211,153,.14),0 5px 16px rgba(2,6,23,.12);color:#a7f3d0}
.sidebar-footer{background:rgba(2,6,23,.18);border-top-color:var(--sidebar-edge);backdrop-filter:blur(4px)}
.sidebar-collapsed .sidebar-nav{scrollbar-width:none}
.sidebar-collapsed .sidebar-nav::-webkit-scrollbar{width:0}
@media(max-width:991.98px){.sidebar-collapsed .sidebar-nav{scrollbar-width:thin}.sidebar-collapsed .sidebar-nav::-webkit-scrollbar{width:6px}}