:root{--bg-page: #f8f9fa;--bg-card: #fefefe;--fg-title: #3b3f44;--fg-body: #3b3f44;--fg-body-light: #95a1ac;--fg-label: #95a1ac;--fg-support: #95a1ac;--border: #dde1e4;--accent: #f63;--accent-hover: #ff8055;--accent-light: #fff3ed;--badge-bg: #f8f9fa;--badge-border: #bdc4cb;--badge-text: #808a93;--success: #4caf50;--success-light: #e8f5e9;--warning: #ff9800;--warning-light: #fff3e0;--danger: #f44336;--danger-light: #ffebee;--shadow-xs: 0 1px .5px rgba(10, 27, 57, .05), 0 10px 7.5px rgba(10, 27, 57, .04);--radius-xs: 8px;--radius-s: 8px;--radius-m: 12px;--radius-l: 16px;--radius-xl: 20px;--font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;--sidebar-width: 360px;--content-width: 1080px;--header-height: 86px}*{box-sizing:border-box;margin:0;padding:0}html,body{font-family:var(--font-family);font-size:16px;color:var(--fg-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-page);min-height:100vh}#root{min-height:100vh}button{font-family:inherit;cursor:pointer;border:none;background:none}input,select,textarea{font-family:inherit;font-size:14px}a{color:inherit;text-decoration:none}.app-shell{display:flex;min-height:100vh}.app-main{flex:1;display:flex;flex-direction:column;min-width:0}.app-content{padding:24px 24px 48px;max-width:var(--content-width);width:100%}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);background:var(--bg-card);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}.sidebar-top{padding:24px;display:flex;flex-direction:column;gap:12px}.company-switcher{display:flex;align-items:center;gap:8px;padding:12px;border:1px solid var(--border);border-radius:var(--radius-l);background:var(--bg-card);cursor:pointer;transition:border-color .15s}.company-switcher:hover{border-color:var(--accent)}.company-avatar{width:40px;height:40px;border-radius:var(--radius-m);background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;letter-spacing:.14px;flex-shrink:0}.company-info{flex:1;min-width:0}.company-name{font-weight:700;font-size:16px;color:var(--fg-title);letter-spacing:.16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.company-workspace{font-size:14px;color:var(--fg-body-light);letter-spacing:.14px}.sidebar-divider{height:4px;margin:0 24px}.sidebar-nav{padding:0 24px 24px;display:flex;flex-direction:column;gap:8px;flex:1}.nav-section-label{font-size:12px;font-weight:600;color:var(--fg-body-light);letter-spacing:.12px;padding:8px 8px 4px}.nav-item{display:flex;align-items:center;gap:8px;padding:8px;border-radius:var(--radius-m);cursor:pointer;transition:background .15s,color .15s;font-size:14px;font-weight:600;color:var(--fg-body);letter-spacing:.14px}.nav-item:hover{background:var(--accent-light)}.nav-item.active{background:var(--accent-light);color:var(--accent)}.nav-item svg{width:20px;height:20px;flex-shrink:0}.page-header{background:var(--bg-card);box-shadow:var(--shadow-xs);border-radius:var(--radius-m);height:var(--header-height);display:flex;align-items:center;justify-content:space-between;padding:16px 24px;position:sticky;top:0;z-index:5;margin-bottom:24px}.header-left{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}.page-title{font-size:20px;font-weight:600;color:var(--fg-title);letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.breadcrumb{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.breadcrumb-item{display:inline-flex;align-items:center;justify-content:center;padding:2px 6px;border-radius:999px;background:var(--badge-bg);font-size:10px;font-weight:700;color:var(--fg-support);letter-spacing:.08px;white-space:nowrap}.breadcrumb-item.current{color:var(--fg-title)}.breadcrumb-sep{font-size:10px;color:#ced3d8;letter-spacing:.15px;font-weight:500}.header-right{display:flex;align-items:center;gap:16px}.user-avatar{width:40px;height:40px;border-radius:999px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;letter-spacing:.14px;flex-shrink:0}.card{background:var(--bg-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-xs);padding:24px}.card+.card{margin-top:24px}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.card-title{font-size:20px;font-weight:600;color:var(--fg-title);letter-spacing:.2px}.card-divider{height:4px;margin:16px 0}.divider-line{height:1px;background:var(--border);margin:16px 0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;min-height:40px;border-radius:var(--radius-m);font-size:14px;font-weight:600;letter-spacing:.14px;cursor:pointer;transition:background .15s,border-color .15s,opacity .15s;border:1px solid transparent;white-space:nowrap}.btn svg{width:16px;height:16px}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-primary:disabled{background:#f0a689;cursor:not-allowed;opacity:.7}.btn-secondary{background:transparent;color:var(--fg-body);border-color:var(--border)}.btn-secondary:hover:not(:disabled){background:var(--bg-page);border-color:var(--accent);color:var(--accent)}.btn-secondary:disabled{opacity:.5;cursor:not-allowed}.btn-ghost{background:transparent;color:var(--fg-body)}.btn-ghost:hover{background:var(--accent-light);color:var(--accent)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover:not(:disabled){background:#d32f2f}.btn-icon{width:40px;height:40px;border-radius:var(--radius-m);border:1px solid var(--border);background:var(--bg-card);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:border-color .15s,background .15s}.btn-icon:hover{border-color:var(--accent);background:var(--accent-light)}.btn-icon svg{width:16px;height:16px;color:var(--fg-body-light)}.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.form-field{display:flex;flex-direction:column;gap:6px}.form-field.full{grid-column:1 / -1}.form-label{font-size:12px;font-weight:600;color:var(--fg-label);letter-spacing:.12px}.form-label .required{color:var(--accent)}.form-input,.form-select,.form-textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-m);background:var(--bg-card);font-size:14px;font-weight:500;color:var(--fg-body);letter-spacing:.14px;transition:border-color .15s;min-height:40px;font-family:inherit}.form-textarea{resize:vertical;min-height:80px;line-height:1.5}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--accent)}.form-input::placeholder,.form-textarea::placeholder{color:var(--fg-body-light)}.form-section{margin-top:24px}.form-section-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--bg-page);border-radius:var(--radius-m);cursor:pointer;-webkit-user-select:none;user-select:none}.form-section-title{font-size:14px;font-weight:600;color:var(--fg-title);letter-spacing:.14px}.form-section-body{padding:16px 0;display:flex;flex-direction:column;gap:16px}.form-section.collapsed .form-section-body{display:none}.form-section.collapsed .form-section-header svg{transform:rotate(-90deg)}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.detail-item{display:flex;flex-direction:column;gap:4px}.detail-label{font-size:12px;font-weight:400;color:var(--fg-label);letter-spacing:.12px;line-height:18px}.detail-value{font-size:14px;font-weight:600;color:var(--fg-body);letter-spacing:.14px;line-height:21px}.detail-value.link{color:var(--accent);text-decoration:none}.detail-value.link:hover{text-decoration:underline}.detail-header{display:flex;align-items:center;gap:16px;padding-bottom:24px;border-bottom:1px solid var(--border);margin-bottom:24px}.detail-avatar{width:64px;height:64px;border-radius:var(--radius-xl);border:4px solid var(--bg-card);background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:22px;letter-spacing:.22px;flex-shrink:0}.detail-name{font-size:20px;font-weight:600;color:var(--fg-title);letter-spacing:.2px}.detail-type-label{font-size:12px;font-weight:500;color:var(--fg-body-light);letter-spacing:.12px;margin-top:4px}.detail-badge{display:inline-flex;align-items:center;justify-content:center;min-height:20px;padding:0 8px;border-radius:var(--radius-s);background:var(--accent);color:#fff;font-size:12px;font-weight:700;letter-spacing:.12px;line-height:18px;margin-top:8px;align-self:flex-start}.detail-badge.aktif{background:var(--success)}.detail-badge.arsip{background:var(--warning)}.detail-section{margin-top:24px}.detail-section-header{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--fg-title);letter-spacing:.14px;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border)}.detail-section-header svg{width:18px;height:18px;color:var(--accent)}.detail-section-body{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 24px}.detail-section-body .detail-item.full{grid-column:1 / -1}.detail-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:32px;padding-top:24px;border-top:1px solid var(--border)}.detail-actions .btn{min-width:140px}.btn-flex{flex:1}.status-badge{display:inline-flex;align-items:center;justify-content:center;min-height:20px;padding:0 8px;border-radius:var(--radius-s);background:var(--success);color:#fff;font-size:12px;font-weight:700;letter-spacing:.12px;line-height:18px}.status-badge.aktif{background:var(--success)}.status-badge.arsip{background:var(--warning)}.contact-list{display:flex;flex-direction:column}.contact-list-item{display:grid;grid-template-columns:auto 1fr auto auto auto auto;gap:16px;align-items:center;padding:16px 24px;border-bottom:1px solid var(--border);transition:background .15s;cursor:pointer}.contact-list-item:hover{background:var(--bg-page)}.contact-list-item:last-child{border-bottom:none}.contact-list-item .contact-checkbox{width:20px;height:20px;cursor:pointer}.contact-avatar-sm{width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;letter-spacing:.14px;flex-shrink:0}.contact-info{display:flex;flex-direction:column;gap:4px;min-width:0}.contact-name{font-size:14px;font-weight:600;color:var(--fg-title);letter-spacing:.14px}.contact-meta{font-size:12px;color:var(--fg-body-light);letter-spacing:.12px}.contact-meta a{color:var(--accent);text-decoration:none}.contact-meta a:hover{text-decoration:underline}.contact-type{font-size:14px;color:var(--fg-body);font-weight:500;letter-spacing:.14px;white-space:nowrap}.contact-kebab{width:36px;height:36px;border-radius:var(--radius-m);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;position:relative}.contact-kebab:hover{background:var(--bg-page)}.contact-kebab svg{width:20px;height:20px;color:var(--fg-body-light)}.kebab-menu{position:absolute;top:100%;right:0;margin-top:4px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-m);box-shadow:0 4px 16px #00000014;min-width:180px;z-index:100;padding:4px}.kebab-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--radius-s);font-size:14px;font-weight:500;color:var(--fg-body);cursor:pointer;transition:background .15s;width:100%;text-align:left}.kebab-item:hover{background:var(--accent-light);color:var(--accent)}.kebab-item.danger:hover{background:var(--danger-light);color:var(--danger)}.kebab-item svg{width:16px;height:16px}.filter-bar{display:flex;align-items:center;gap:12px;padding:16px 24px;border-bottom:1px solid var(--border);flex-wrap:wrap}.search-input-wrap{position:relative;flex:1;min-width:200px}.search-input-wrap svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--fg-body-light);pointer-events:none}.search-input{width:100%;padding:10px 12px 10px 40px;border:1px solid var(--border);border-radius:var(--radius-m);background:var(--bg-card);font-size:14px;color:var(--fg-body);min-height:40px;font-family:inherit}.search-input:focus{outline:none;border-color:var(--accent)}.filter-dropdown{position:relative}.filter-trigger{display:inline-flex;align-items:center;gap:6px;padding:0 14px;min-height:40px;border:1px solid var(--border);border-radius:var(--radius-m);background:var(--bg-card);font-size:14px;font-weight:500;color:var(--fg-body);cursor:pointer;transition:border-color .15s}.filter-trigger:hover{border-color:var(--accent)}.filter-trigger.has-value{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}.filter-trigger svg{width:16px;height:16px}.filter-menu{position:absolute;top:calc(100% + 4px);left:0;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-m);box-shadow:0 4px 16px #00000014;min-width:220px;z-index:50;padding:8px}.filter-menu-title{font-size:12px;font-weight:700;color:var(--fg-label);letter-spacing:.12px;padding:8px 12px 4px;text-transform:uppercase}.filter-option{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--radius-s);font-size:14px;font-weight:500;color:var(--fg-body);cursor:pointer;transition:background .15s}.filter-option:hover{background:var(--bg-page)}.filter-option input[type=checkbox],.filter-option input[type=radio]{accent-color:var(--accent);width:16px;height:16px;cursor:pointer}.filter-actions{display:flex;gap:8px;padding:8px 12px;border-top:1px solid var(--border);margin-top:4px}.filter-actions .btn{flex:1;min-height:32px;font-size:13px;padding:0 8px}.tag-list{display:flex;flex-wrap:wrap;gap:6px}.tag-item{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;background:var(--accent-light);color:var(--accent);font-size:12px;font-weight:600;letter-spacing:.12px}.tag-item button{background:none;border:none;color:var(--accent);font-size:14px;line-height:1;cursor:pointer;padding:0 0 0 2px}.tag-add{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;border:1px dashed var(--border);color:var(--fg-body-light);font-size:12px;font-weight:600;cursor:pointer;background:transparent;transition:border-color .15s,color .15s}.tag-add:hover{border-color:var(--accent);color:var(--accent)}.address-item,.rekening-item{background:var(--bg-page);border:1px solid var(--border);border-radius:var(--radius-m);padding:12px;margin-bottom:12px}.address-item-header,.rekening-item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.address-item-label,.rekening-item-label{font-size:12px;font-weight:600;color:var(--fg-label);letter-spacing:.12px}.address-item-delete{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--fg-body-light);font-size:16px;line-height:1;cursor:pointer;transition:background .15s,color .15s;background:none;border:none}.address-item-delete:hover{background:var(--danger-light);color:var(--danger)}.add-item-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px dashed var(--border);border-radius:var(--radius-m);background:transparent;color:var(--fg-body);font-size:14px;font-weight:500;cursor:pointer;transition:border-color .15s,color .15s}.add-item-btn:hover{border-color:var(--accent);color:var(--accent)}.add-item-btn svg{width:16px;height:16px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 24px;text-align:center;color:var(--fg-body-light)}.empty-state-icon{width:64px;height:64px;border-radius:50%;background:var(--bg-page);display:flex;align-items:center;justify-content:center;margin-bottom:16px}.empty-state-icon svg{width:32px;height:32px;color:var(--fg-body-light)}.empty-state-title{font-size:16px;font-weight:600;color:var(--fg-title);letter-spacing:.16px;margin-bottom:4px}.empty-state-desc{font-size:14px;color:var(--fg-body-light);letter-spacing:.14px;max-width:320px}.toast{position:fixed;bottom:24px;right:24px;background:#1c1b1a;color:#fff;padding:12px 24px;border-radius:var(--radius-m);font-size:14px;font-weight:500;letter-spacing:.14px;opacity:0;transform:translateY(16px);transition:opacity .25s,transform .25s;z-index:999;pointer-events:none;box-shadow:0 4px 16px #00000026}.toast.show{opacity:1;transform:translateY(0)}.toast.success{background:var(--success)}.toast.error{background:var(--danger)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0e1a66;display:flex;align-items:center;justify-content:center;z-index:200;padding:24px}.modal{background:var(--bg-card);border-radius:var(--radius-xl);box-shadow:0 12px 32px #00000026;max-width:440px;width:100%;padding:24px}.modal-title{font-size:18px;font-weight:600;color:var(--fg-title);letter-spacing:.18px;margin-bottom:8px}.modal-desc{font-size:14px;color:var(--fg-body-light);line-height:1.5;margin-bottom:24px}.modal-actions{display:flex;justify-content:flex-end;gap:12px}.modal-actions .btn{min-width:100px}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 24px;gap:16px}.spinner{width:40px;height:40px;border:3px solid var(--bg-page);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-size:14px;color:var(--fg-body-light);letter-spacing:.14px}.step-indicator{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:24px}.step{display:flex;align-items:center;gap:8px}.step-circle{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:var(--bg-page);color:var(--fg-body-light);border:1px solid var(--border)}.step.active .step-circle{background:var(--accent);color:#fff;border-color:var(--accent)}.step.completed .step-circle{background:var(--success);color:#fff;border-color:var(--success)}.step-label{font-size:13px;font-weight:600;color:var(--fg-body-light);letter-spacing:.13px}.step.active .step-label{color:var(--accent)}.step.completed .step-label{color:var(--success)}.step-line{width:60px;height:1px;background:var(--border)}.upload-area{border:2px dashed var(--border);border-radius:var(--radius-xl);padding:48px 24px;text-align:center;background:var(--bg-page);cursor:pointer;transition:border-color .15s,background .15s}.upload-area:hover,.upload-area.dragging{border-color:var(--accent);background:var(--accent-light)}.upload-area.has-file{border-style:solid;background:var(--bg-card);border-color:var(--accent)}.upload-icon{width:64px;height:64px;border-radius:50%;background:var(--accent-light);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}.upload-icon svg{width:32px;height:32px;color:var(--accent)}.upload-title{font-size:16px;font-weight:600;color:var(--fg-title);letter-spacing:.16px;margin-bottom:4px}.upload-desc{font-size:13px;color:var(--fg-body-light);letter-spacing:.13px;margin-bottom:16px}.upload-actions{display:flex;justify-content:center;gap:12px;margin-top:16px}.file-info{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-page);border-radius:var(--radius-m);border:1px solid var(--border)}.file-info-icon{width:40px;height:40px;border-radius:var(--radius-m);background:var(--success-light);color:var(--success);display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-info-icon svg{width:20px;height:20px}.file-info-text{flex:1;text-align:left}.file-info-name{font-size:14px;font-weight:600;color:var(--fg-title);letter-spacing:.14px}.file-info-size{font-size:12px;color:var(--fg-body-light);letter-spacing:.12px}.file-info-remove{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--fg-body-light);cursor:pointer;background:none;border:none;transition:background .15s,color .15s}.file-info-remove:hover{background:var(--danger-light);color:var(--danger)}.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:16px}.tab{padding:12px 16px;font-size:14px;font-weight:600;color:var(--fg-body-light);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s;background:none;border-top:none;border-left:none;border-right:none}.tab:hover{color:var(--fg-body)}.tab.active{color:var(--accent);border-bottom-color:var(--accent)}.tab-count{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:var(--bg-page);color:var(--fg-body-light);font-size:11px;font-weight:700}.tab.active .tab-count{background:var(--accent-light);color:var(--accent)}.validation-list{display:flex;flex-direction:column;gap:8px}.validation-item{display:flex;align-items:flex-start;gap:8px;padding:8px 12px;background:var(--danger-light);border-radius:var(--radius-s);font-size:13px;color:var(--danger);letter-spacing:.13px}.validation-item svg{width:16px;height:16px;flex-shrink:0;margin-top:1px}.preview-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-m)}.preview-table{width:100%;border-collapse:collapse;font-size:13px}.preview-table th{text-align:left;padding:10px 12px;background:var(--bg-page);font-weight:600;color:var(--fg-label);letter-spacing:.12px;border-bottom:1px solid var(--border);white-space:nowrap}.preview-table td{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--fg-body);letter-spacing:.13px;vertical-align:top}.preview-table tr:last-child td{border-bottom:none}.preview-table tr.invalid{background:var(--danger-light)}.preview-table tr.invalid td{color:var(--danger)}.row-status{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.11px;white-space:nowrap}.row-status.valid{background:var(--success-light);color:var(--success)}.row-status.invalid{background:var(--danger-light);color:var(--danger)}@media (max-width: 1300px){.sidebar{width:280px;min-width:280px}.app-content{max-width:none}}@media (max-width: 900px){.app-shell{flex-direction:column}.sidebar{width:100%;min-width:0;height:auto;position:relative}.form-row,.detail-grid,.detail-section-body{grid-template-columns:1fr}.contact-list-item{grid-template-columns:auto 1fr auto;gap:8px}.contact-list-item .contact-type,.contact-list-item .contact-meta-detail{display:none}}