:root { --sb-w: 64px; --sb-open: 248px; }
    body { font-family: 'Inter', sans-serif; background-color: #f1f5f9; }
    /* ---- Sidebar auto-hide: rail 64px, melebar saat hover/fokus, bisa di-pin ---- */
    #sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sb-w); background: #0f172a; color: #cbd5e1; z-index: 40; overflow: hidden; display: flex; flex-direction: column; border-right: 1px solid #1e293b; transition: width .18s ease, transform .18s ease; }
    #sidebar.open { width: var(--sb-open); box-shadow: 10px 0 28px rgba(2, 6, 23, .35); }
    #appShell { margin-left: var(--sb-w); transition: margin-left .18s ease; min-height: 100vh; display: flex; flex-direction: column; }
    body.sb-pinned #appShell { margin-left: var(--sb-open); }
    .sb-item { display: flex; align-items: center; gap: 14px; width: 100%; height: 44px; padding: 0 22px; color: #94a3b8; font-size: 13px; font-weight: 500; border-left: 3px solid transparent; transition: background .12s, color .12s; text-align: left; white-space: nowrap; }
    .sb-item i { width: 18px; text-align: center; font-size: 15px; flex-shrink: 0; }
    .sb-item:hover, .sb-item:focus-visible { background: #1e293b; color: #fff; outline: none; }
    .sb-item.sb-active { background: #1e293b; color: #fff; border-left-color: #3b82f6; }
    .sb-label { opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
    #sidebar.open .sb-label { opacity: 1; transform: none; }
    @media (max-width: 767px) {
      #sidebar { width: var(--sb-open); transform: translateX(-100%); }
      #sidebar.open { transform: none; }
      #appShell, body.sb-pinned #appShell { margin-left: 0; }
      .sb-label { opacity: 1; transform: none; }
    }
    @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
    /* ---- komponen ---- */
    .act-btn { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; transition: background .12s; }
    .toast-item { animation: toastIn .2s ease-out; }
    .toast-out { opacity: 0; transform: translateX(12px); transition: all .25s; }
    @keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    .ts-control { border-color: #cbd5e1 !important; padding: 0.5rem 0.75rem !important; border-radius: 0.375rem !important; font-size: 0.75rem !important; box-shadow: none !important; }
    .ts-wrapper.focus .ts-control { border-color: #2563eb !important; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2) !important; }
    .ts-dropdown { font-size: 0.75rem !important; border-radius: 0.375rem !important; }
    button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
    /* Leaflet: jaga agar panel peta tidak menimpa sidebar / topbar / modal */
    #mapCanvas, #pickMapCanvas { position: relative; z-index: 0; }
    .pin-icon { background: none; border: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
    .leaflet-popup-content { margin: 10px 12px; }
    .role-hidden { display: none !important; }
    #mapDetailLayer { position: absolute; inset: 0; pointer-events: none; z-index: 650; transition: opacity .15s; }
    #mapDetailSvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
    #mapDetailCards { position: absolute; inset: 0; }
    .leaflet-popup-content, #mapDetailLayer .dcard { overflow-wrap: anywhere; word-break: break-word; }
    .leaflet-popup-content div { max-width: 100%; }
    #mapDetailLayer .dcard [style*="min-width"] { min-width: 0 !important; }
    #mapDetailLayer .dcard { box-sizing: border-box; max-width: 100%; overflow: hidden; }
    #mapDetailLayer .dcard { position: absolute; pointer-events: auto; background: #fff; border: 1px solid #cbd5e1; border-left: 5px solid var(--c, #2563eb); border-radius: 8px; box-shadow: 0 6px 18px rgba(15,23,42,.28); padding: 8px 10px; line-height: 1.35; cursor: default; }
    body:not(.authed) #appShell, body:not(.authed) #sidebar, body:not(.authed) #sbBackdrop { display: none !important; }
    .set-tab { padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: 600; border: 1px solid #cbd5e1; background: #fff; color: #334155; }
    .set-tab-on { background: #1e3a8a; color: #fff; border-color: #1e3a8a; }