*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--brand:#4a6a2f;--brand-dark:#3c5524;--brand-mid:#4c7032;--brand-light:#f0f7f4;--th-bg:#eef3e6;--sidebar-w:236px;--topbar-h:56px;--text:#18181b;--text-muted:#71717a;--text-faint:#a1a1aa;--border:#e4e4e7;--border-subtle:#f1f1f2;--bg:#fafafa;--surface:#fff;--green:#22c55e;--amber:#f59e0b;--red:#ef4444;--blue:#3b82f6;--purple:#8b5cf6;--radius:8px;--radius-sm:4px;--radius-lg:12px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--text-xs:11px;--text-sm:12px;--text-md:14px;--text-lg:16px;--text-xl:18px;--font-mono:"SF Mono", "Fira Mono", "Consolas", monospace;--shadow-sm:0 1px 2px #0000000f;--shadow-md:0 4px 12px #00000014;--shadow-lg:0 8px 24px #0000001f;--transition:.15s ease;color:var(--text);background:var(--bg);font-family:Geist,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px}body{overflow:hidden}a{color:var(--brand)}a:hover{color:var(--brand-dark)}.app-shell{height:100vh;display:flex;overflow:hidden}.sidebar{width:var(--sidebar-w);background:linear-gradient(180deg, var(--brand-mid) 0%, var(--brand-dark) 100%);flex-direction:column;flex-shrink:0;padding:0 0 16px;display:flex;overflow:hidden auto}.nav-item{color:#ffffffd1;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;width:100%;box-shadow:none;background:0 0;border:none;border-radius:10px;justify-content:space-between;align-items:center;padding:10px 12px;font-size:13.5px;font-weight:500;text-decoration:none;transition:background .12s;display:flex}.nav-item:hover{color:#ffffffd1;background:#ffffff1a}.nav-item.active{color:#2c401a;background:#fff;font-weight:600;box-shadow:0 2px 8px #0000001f}.nav-item.active .nav-icon{opacity:1;color:#2c401a}.nav-group-label{color:#ffffff8c;padding:0 8px 6px;font-size:12px;font-weight:500}.nav-item .nav-icon{opacity:.85;flex-shrink:0}.nav-item.active .nav-icon{opacity:1}.sidebar-footer{border-top:1px solid #ffffff1f;padding:12px}.sidebar-user{border-radius:var(--radius);color:#ffffffb8;align-items:center;gap:9px;padding:2px 4px;font-size:13px;display:flex}.sidebar-avatar{color:#fff;background:#ffffff2e;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;font-size:12px;font-weight:600;display:flex}.main-area{flex-direction:column;flex:1;display:flex;overflow:hidden}.topbar{height:var(--topbar-h);background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:16px;padding:0 22px;display:flex}.page-content{flex:1;padding:0;overflow:hidden auto}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;box-shadow:0 1px 2px #0000000a}table{border-collapse:collapse;width:100%;font-size:13px}th{text-align:left;color:var(--text-muted);background:var(--th-bg);border-bottom:1px solid var(--border);white-space:nowrap;padding:9px 12px;font-size:12px;font-weight:500}th.r{text-align:right}td{border-bottom:1px solid var(--border-subtle);vertical-align:middle;padding:11px 12px}td.r{text-align:right}tr:last-child td{border-bottom:none}tr.clickable{cursor:pointer}tr.clickable:hover td{background:#f9fafb}.badge{border-radius:100px;align-items:center;gap:4px;padding:2px 8px;font-size:11px;font-weight:600;display:inline-flex}.badge.green{color:#166534;background:#dcfce7}.badge.amber{color:#92400e;background:#fef3c7}.badge.red{color:#991b1b;background:#fee2e2}.badge.purple{color:#6b21a8;background:#f3e8ff}.badge.indigo{color:#3730a3;background:#e0e7ff}.badge.gray{color:#71717a;background:#f4f4f5}.badge.stage{color:#1e40af;background:#d1e7dd}.tag{border-radius:4px;padding:1px 6px;font-size:11px;font-weight:600;display:inline-block}.tag.jual{color:#1d4ed8;background:#dbeafe}.tag.beli{color:#b45309;background:#fef3c7}.btn{border-radius:var(--radius);cursor:pointer;white-space:nowrap;border:1px solid #0000;align-items:center;gap:6px;padding:7px 14px;font-size:13px;font-weight:500;transition:opacity .15s,background .15s;display:inline-flex}.btn:hover{opacity:.85}.btn.primary{background:var(--brand);color:#fff;box-shadow:0 1px 2px #0000000d}.btn.secondary{background:var(--surface);border-color:var(--border);color:var(--text);box-shadow:0 1px 2px #0000000d}.btn.secondary:hover{opacity:1;background:#f4f4f5}.btn.danger{color:#b91c1c;background:#fee2e2}.btn.ghost{color:var(--text-muted);background:0 0;border-color:#0000}.btn:disabled{opacity:.4;cursor:not-allowed}.modal-overlay{z-index:200;background:#00000080;justify-content:center;align-items:center;animation:.2s ssbfade;display:flex;position:fixed;inset:0}@keyframes ssbfade{0%{opacity:0}to{opacity:1}}@keyframes ssbslide{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes selpop{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}.modal-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);flex-direction:column;width:600px;max-width:calc(100vw - 40px);max-height:calc(100vh - 80px);animation:.15s ssbfade;display:flex;box-shadow:0 16px 48px #00000029}.modal-box.wide{width:720px}.modal-box.narrow{width:460px}.modal-head{border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:18px 22px;display:flex}.modal-title{font-size:15px;font-weight:700}.modal-close{background:var(--bg);cursor:pointer;width:28px;height:28px;color:var(--text-muted);border:none;border-radius:50%;justify-content:center;align-items:center;display:flex}.modal-close:hover{background:#f4f4f5}.modal-body{flex:1;padding:22px;overflow-y:auto}.modal-foot{border-top:1px solid var(--border);flex-shrink:0;justify-content:flex-end;align-items:center;gap:10px;padding:14px 22px;display:flex}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand)!important;box-shadow:0 0 0 3px #4a6a2f2e!important}button:focus-visible,a:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--radius-sm)}.field{flex-direction:column;gap:5px;display:flex}.field label{color:var(--text-muted);font-size:12px;font-weight:600}.field input,.field select,.field textarea{border:1px solid var(--border);border-radius:var(--radius);color:var(--text);background:var(--surface);outline:none;padding:8px 10px;font-size:13px;transition:border-color .15s,box-shadow .15s}.field textarea{resize:vertical;min-height:72px}.drawer-scrim{z-index:190;background:#00000080;animation:.2s ssbfade;position:fixed;inset:0}.drawer{border-left:1px solid var(--border);z-index:191;background:#fff;flex-direction:column;width:560px;animation:.25s ssbslide;display:flex;position:fixed;top:0;bottom:0;right:0;overflow:hidden auto;box-shadow:-8px 0 30px #0000001a}.drawer-head{border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:18px 22px;display:flex}.btn-icon{border:1px solid var(--border);cursor:pointer;width:28px;height:28px;color:var(--text-muted);background:#fff;border-radius:7px;justify-content:center;align-items:center;transition:background .12s,border-color .12s,color .12s;display:inline-flex}.btn-icon:hover{color:var(--text);background:#f4f4f5;border-color:#d4d4d8}.btn-icon.danger{color:#dc2626;border-color:#fecaca}.btn-icon.danger:hover{color:#b91c1c;background:#fee2e2;border-color:#fca5a5}.num{font-variant-numeric:tabular-nums}.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes spin{to{transform:rotate(360deg)}}.skeleton-block{border-radius:var(--radius-sm);background:linear-gradient(90deg, var(--border) 25%, var(--border-subtle) 50%, var(--border) 75%);background-size:200% 100%;animation:1.4s ease-in-out infinite skeleton-shimmer}.inline-spinner{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.info-label{color:var(--text-muted);font-size:11px}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#d4d4d8;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#a1a1aa}@media (width<=768px){.sidebar{display:none}.page-content{padding:16px}.modal-box{margin:16px}.drawer{width:100vw}}