*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #FAFAF9;--card: #FFFFFF;--border: #E7E5E4;--text: #1C1917;--text-muted: #78716C;--primary: #059669;--primary-light: #D1FAE5;--accent: #F59E0B;--accent-light: #FEF3C7;--kg-color: #FF4B00;--kg-light: #FFEDE6;--lg-color: #AF79D5;--lg-light: #F3E8FF;--unit-color: #FF4B00;--unit-light: #FFEDE6}body{font-family:Inter,-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}.homepage{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;gap:32px}.homepage-title{font-size:28px;font-weight:700;color:var(--text)}.unit-cards{display:flex;gap:24px;align-items:center}.unit-card{width:150px;height:110px;cursor:pointer;transition:all .2s;padding:16px;border-radius:16px;border:1px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center}.unit-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #00000014;border-color:var(--primary)}.unit-logo{max-width:100%;max-height:100%;object-fit:contain}.app-container{display:none}.app-container.active{display:block}.header{background:var(--card);border-bottom:1px solid var(--border);padding:16px 24px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:100}.back-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:8px;border-radius:8px;transition:all .15s}.back-btn:hover{background:var(--bg)}.logo{display:flex;align-items:center;gap:10px}.logo-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden}.logo-icon img{width:100%;height:100%;object-fit:contain}.logo h1{font-size:18px;font-weight:700}.header-actions{margin-left:auto}.upload-btn{background:var(--unit-color);color:#fff;border:none;padding:10px 20px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s}.upload-btn:hover{filter:brightness(.9);transform:translateY(-1px)}#fileInput{display:none}.export-btn{background:var(--card);color:var(--text);border:1px solid var(--border)}.export-btn:hover{filter:none;border-color:var(--unit-color);color:var(--unit-color)}.stats-bar{background:var(--card);border-bottom:1px solid var(--border);padding:16px 24px;display:flex;gap:32px}.stat{display:flex;flex-direction:column}.stat-label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:2px}.stat-value{font-size:20px;font-weight:700}.stat-value.green{color:var(--primary)}.stat-value.orange{color:var(--accent)}.upload-section{margin-left:auto;display:flex;gap:8px;align-items:center}.upload-btn:disabled{opacity:.5;cursor:not-allowed}.main{display:flex;height:calc(100vh - 130px)}.sidebar{width:200px;background:var(--card);border-right:1px solid var(--border);padding:16px;overflow-y:auto}.sidebar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.sidebar-title{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}.new-tab-btn{font-size:12px;padding:4px 10px;border:1px solid var(--unit-color);background:transparent;color:var(--unit-color);border-radius:6px;cursor:pointer;font-weight:600;transition:all .15s}.new-tab-btn:hover{background:var(--unit-color);color:#fff}.tab-list{display:flex;flex-direction:column;gap:4px}.tab{padding:10px 12px;border-radius:8px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:all .15s}.tab:hover{background:#f5f5f4}.tab.active{background:var(--unit-light);color:var(--unit-color);font-weight:600}.tab-name{font-size:14px}.tab-badge{font-size:11px;background:var(--border);padding:2px 6px;border-radius:10px}.tab.active .tab-badge{background:var(--unit-color);color:#fff}.no-tabs{color:var(--text-muted);font-size:13px;padding:20px;text-align:center}.tab.completed{opacity:.7}.tab-check{color:var(--unit-color);font-size:12px}.tab-actions{display:flex;align-items:center;gap:4px}.tab-delete{display:none;width:18px;height:18px;border:none;background:transparent;color:var(--text-muted);font-size:14px;cursor:pointer;border-radius:4px;align-items:center;justify-content:center}.tab:hover .tab-delete{display:flex}.tab-delete:hover{background:#fee2e2;color:#dc2626}.tab-archive{display:none;width:18px;height:18px;border:none;background:transparent;color:var(--text-muted);font-size:13px;cursor:pointer;border-radius:4px;align-items:center;justify-content:center}.tab:hover .tab-archive{display:flex}.tab-archive:hover{background:#e5e7eb;color:var(--text)}.tab-unarchive{display:none;width:18px;height:18px;border:none;background:transparent;color:var(--text-muted);font-size:12px;cursor:pointer;border-radius:4px;align-items:center;justify-content:center}.tab.archived:hover .tab-unarchive{display:flex}.tab-unarchive:hover{background:#d1fae5;color:#059669}.archive-header{display:flex;align-items:center;gap:8px;padding:10px 12px;margin-top:12px;color:var(--text-muted);font-size:12px;cursor:pointer;border-top:1px solid var(--border)}.archive-header:hover{color:var(--text)}.archive-icon{font-size:10px}.tab.archived{opacity:.75;font-size:13px}.tab.archived .tab-name{font-size:13px;color:var(--unit-color)}.content{flex:1;padding:20px;overflow-y:auto}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-muted)}.empty-icon{font-size:64px;margin-bottom:16px;opacity:.5}.empty-state h3{font-size:18px;margin-bottom:8px;color:var(--text)}.empty-state p{font-size:14px}.tab-name-input{border:none;background:transparent;font-size:14px;font-family:inherit;color:inherit;width:100px;padding:0;outline:none}.tab-name-input:focus{background:#fff;border-radius:4px;padding:2px 4px;margin:-2px -4px}.grup-section{margin-bottom:24px}.grup-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--unit-light);border-radius:10px 10px 0 0;border:1px solid var(--unit-color);border-bottom:none}.grup-name{font-weight:700;font-size:14px;color:var(--unit-color)}.grup-actions{display:flex;align-items:center;gap:12px}.grup-stats{font-size:13px;color:var(--text-muted)}.add-row-btn{padding:4px 10px;font-size:12px;font-weight:600;border:1px solid var(--unit-color);background:transparent;color:var(--unit-color);border-radius:6px;cursor:pointer;transition:all .15s}.add-row-btn:hover{background:var(--unit-color);color:#fff}.table-card{background:var(--card);border-radius:0 0 12px 12px;border:1px solid var(--border);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.grup-section:only-child .grup-header{border-radius:10px 10px 0 0}.grup-section:only-child .table-card{border-radius:0 0 12px 12px}table{width:100%;min-width:880px;border-collapse:collapse}th{background:#f9fafb;padding:12px 16px;text-align:left;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);border-bottom:1px solid var(--border)}td{padding:14px 16px;border-bottom:1px solid var(--border);font-size:14px}tr:last-child td{border-bottom:none}tr:hover{background:#fafaf9}tr.paid{background:var(--primary-light)!important}tr.paid td{color:var(--primary)}tr.paid-offline{background:#f3e8ff!important}tr.paid-offline td{color:#7c3aed}tr.highlight{animation:highlightRow 2s ease-out}@keyframes highlightRow{0%,30%{background:#fef3c7}to{background:transparent}}.nota{font-family:SF Mono,Consolas,monospace;font-size:13px;background:#f5f5f4;padding:4px 8px;border-radius:4px}.nama-cell{cursor:pointer;transition:background .15s;border-radius:4px}.nama-cell:hover{background:var(--primary-light)}.nama-cell.copied{background:var(--primary);color:#fff}.tagihan{font-family:SF Mono,Consolas,monospace;text-align:right}.tagihan-strike{text-decoration:line-through;color:var(--text-muted);font-size:12px}.final{font-weight:600;color:var(--primary)}td.tagihan{cursor:pointer}td.tagihan.copied,td.tagihan.copied .final{font-weight:700}.jube-input{width:100px;padding:6px 10px;border:1px solid var(--border);border-radius:6px;font-size:13px;font-family:SF Mono,monospace;text-align:right}.jube-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}.jube-input.has-value{border-color:var(--accent);background:var(--accent-light)}.jube-input.synced{border-color:var(--primary);background:var(--primary-light)}.jube-wrap{display:flex;align-items:center;gap:4px}.jube-wrap .jube-input{width:86px}.jube-resync{display:none;width:18px;height:18px;border:none;background:transparent;color:var(--accent);font-size:13px;cursor:pointer;border-radius:4px;align-items:center;justify-content:center}.jube-wrap:hover .jube-resync{display:flex}.jube-resync:hover{background:var(--accent-light)}.jube-auto{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border:1px solid var(--primary);border-radius:6px;background:var(--primary-light);color:var(--primary);font-size:13px;font-family:SF Mono,monospace;cursor:pointer}.jube-auto:hover{filter:brightness(.97);text-decoration:underline}.copy-text{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--primary);cursor:pointer;padding:4px 8px;border-radius:6px;transition:all .15s;max-width:200px}.copy-text:hover{background:var(--primary-light)}.copy-text span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.copy-text .copy-icon{flex-shrink:0;opacity:.6}.copy-text.copied{background:var(--primary);color:#fff}.delete-btn{width:24px;height:24px;border:none;background:transparent;color:var(--text-muted);font-size:18px;cursor:pointer;border-radius:4px;transition:all .15s;display:flex;align-items:center;justify-content:center}.delete-btn:hover{background:#fee2e2;color:#dc2626}.checkbox{width:22px;height:22px;border:2px solid var(--border);border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}.checkbox:hover{border-color:var(--primary)}.checkbox.checked{background:var(--primary);border-color:var(--primary);color:#fff}.pull-btn{background:transparent;color:var(--unit-color);border:1px solid var(--unit-color);padding:10px 16px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s}.pull-btn:hover{background:var(--unit-color);color:#fff}.pull-btn:disabled{opacity:.5;cursor:not-allowed}.drag-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0596691a;border:3px dashed var(--primary);display:none;align-items:center;justify-content:center;z-index:1000}.drag-overlay.active{display:flex}.drag-overlay span{background:var(--primary);color:#fff;padding:16px 32px;border-radius:12px;font-size:18px;font-weight:600}.loading{display:flex;align-items:center;justify-content:center;padding:40px}.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.notif-wrapper{position:relative;margin-left:12px}.notif-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:8px;border-radius:8px;transition:all .15s;position:relative}.notif-btn:hover{background:var(--bg)}.notif-badge{position:absolute;top:2px;right:2px;background:#ef4444;color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}.notif-badge:empty{display:none}.notif-dropdown{position:absolute;top:100%;right:0;width:360px;max-height:400px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 40px #0000001f;z-index:200;display:none;overflow:hidden}.notif-dropdown.active{display:block}.notif-header{padding:14px 16px;font-weight:700;font-size:14px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.notif-list{max-height:340px;overflow-y:auto}.notif-item{padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}.notif-item:hover{background:var(--bg)}.notif-item:last-child{border-bottom:none}.notif-item-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px}.notif-item-title{font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px}.notif-item-title .icon{font-size:14px}.notif-item.duplicate .notif-item-title .icon{color:#f59e0b}.notif-item.warning .notif-item-title .icon{color:#ef4444}.notif-item-time{font-size:11px;color:var(--text-muted);white-space:nowrap}.notif-item-message{font-size:12px;color:var(--text-muted);margin-bottom:4px}.notif-item-details{font-size:11px;color:var(--text-muted);font-family:SF Mono,monospace;background:var(--bg);padding:6px 8px;border-radius:4px;word-break:break-word}.notif-empty{padding:40px 16px;text-align:center;color:var(--text-muted);font-size:13px}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.st{display:flex;flex-direction:column;gap:0;padding:4px 0}.st-chain{display:flex;flex-direction:column}.st-step{display:flex;align-items:flex-start;gap:8px}.st-rail{display:flex;flex-direction:column;align-items:center;width:20px;align-self:stretch}.st-node{width:20px;height:20px;border-radius:50%;border:2px solid var(--border, #d5d9e0);background:#fff;display:flex;align-items:center;justify-content:center;padding:0;cursor:default;flex-shrink:0;transition:background-color .28s ease,border-color .28s ease,box-shadow .28s ease,transform .15s ease;position:relative}button.st-node{cursor:pointer}button.st-node:hover:not(.done){border-color:var(--unit-color);box-shadow:0 0 0 4px var(--unit-light)}button.st-node:active{transform:scale(.88)}.st-node.done{background:var(--unit-color);border-color:var(--unit-color);cursor:default;animation:st-pop .4s cubic-bezier(.2,1.6,.4,1)}@keyframes st-pop{0%{transform:scale(.55)}55%{transform:scale(1.18)}to{transform:scale(1)}}.st-check{width:11px;height:10px}.st-check path{stroke:#fff;stroke-dasharray:20;stroke-dashoffset:20;animation:st-draw .3s ease .08s forwards}@keyframes st-draw{to{stroke-dashoffset:0}}.st-node.loading{border-color:var(--unit-color);animation:st-pulse 1.3s ease-in-out infinite}@keyframes st-pulse{0%,to{box-shadow:0 0 0 0 var(--unit-light)}50%{box-shadow:0 0 0 5px var(--unit-light)}}.st-spinner{width:10px;height:10px;border-radius:50%;border:2px solid var(--unit-light);border-top-color:var(--unit-color);animation:st-spin .8s linear infinite}@keyframes st-spin{to{transform:rotate(360deg)}}.st-node.sys:not(.done):not(.loading){background:var(--bg-soft, #f6f7f9);border-style:dashed}.st-line{width:2px;flex:1;min-height:12px;background:var(--border, #d5d9e0);transition:background-color .35s ease .15s;border-radius:2px}.st-line.done{background:var(--unit-color)}.st-label{font-size:11.5px;font-weight:600;color:var(--text-muted, #8a94a3);padding:2px 0 8px;letter-spacing:.01em;transition:color .25s ease;-webkit-user-select:none;user-select:none}.st-label.done{color:var(--unit-color)}.st-label.waiting{color:var(--text, #3d4756);animation:st-fade 1.4s ease-in-out infinite}@keyframes st-fade{0%,to{opacity:1}50%{opacity:.45}}.st-break{height:0;border-top:2px dashed var(--border, #d5d9e0);margin:3px 0 7px 28px;width:74px}.st-vido{margin-top:0}.st-node.vido{border-radius:5px;border-style:solid}.st-node.vido.done{background:#8a94a3;border-color:#8a94a3}.st-node.vido:hover:not(.done){border-color:#8a94a3;box-shadow:0 0 0 4px #8a94a326}.vido-label{color:var(--text-muted, #8a94a3);font-weight:500;font-size:11px}.vido-label.done{color:#5d6774}.st-cell{vertical-align:middle}tr.paid .st-node.done{background:#22b573;border-color:#22b573}tr.highlight{animation:row-flash 2s ease}@keyframes row-flash{0%{background:var(--unit-light)}to{background:transparent}}.header{justify-content:flex-start;gap:12px}.brand-chip{display:inline-flex;align-items:center;background:transparent;padding:2px 4px;border:none;cursor:pointer;transition:transform .15s ease,opacity .2s ease}.brand-chip img{height:52px;width:auto;display:block}.brand-chip:hover{opacity:.75}.brand-chip:active{transform:scale(.96)}.unit-tag{font-size:22px;font-weight:800;letter-spacing:.04em;color:var(--unit-color);padding-left:14px;border-left:2px solid var(--border, #e3e6ea);line-height:1;-webkit-user-select:none;user-select:none}.sidebar-header{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border, #e3e6ea)}.new-tab-btn{width:24px;height:24px;padding:0;line-height:1;font-size:15px;border-radius:6px;flex-shrink:0}.header .back-btn,.header h1{display:none}.notif-wrapper,.notif-btn,.notif-dropdown{display:none!important}.login-home{justify-content:center;min-height:100vh}.login-card{width:320px;padding:26px 26px 22px;background:var(--card, #fff);border:1px solid var(--border, #e3e6ea);border-radius:12px;box-shadow:0 8px 30px #0000000f;display:flex;flex-direction:column;gap:12px;margin-top:28px}.login-field{display:flex;flex-direction:column;gap:5px}.login-field label{font-size:12px;font-weight:600;color:var(--text-muted, #6b7280)}.login-field input{font-family:inherit;font-size:13.5px;border:1px solid var(--border, #e3e6ea);border-radius:8px;padding:8px 10px;background:#fff;color:var(--text, #111);width:100%}.login-err{color:#dc2626;font-size:12.5px;text-align:center}.login-btn{width:100%;background:var(--unit-color, #111);color:#fff;border:none;padding:9px 14px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer}.login-btn:disabled{opacity:.45;cursor:not-allowed}.homebar{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:14px 22px 0;width:100%}.user-chip{font-size:12px;font-weight:700;color:var(--unit-color, #333);background:var(--unit-light, #f3f4f6);padding:3px 10px;border-radius:99px;white-space:nowrap}.link-btn{background:transparent;border:none;color:var(--text-muted, #6b7280);font-size:13px;font-weight:600;cursor:pointer;padding:6px 8px}.link-btn:hover{color:var(--text, #111)}.log-page{padding-bottom:60px}.log-toolbar{display:flex;align-items:center;gap:10px;padding:14px 22px 10px}.log-toolbar select{font-family:inherit;font-size:13px;border:1px solid var(--border, #e3e6ea);border-radius:8px;padding:7px 10px;background:#fff}.log-table-wrap{padding:0 22px;overflow-x:auto}.log-table{width:100%;border-collapse:collapse;background:var(--card, #fff);border:1px solid var(--border, #e3e6ea);border-radius:12px;overflow:hidden}.log-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted, #6b7280);padding:10px 12px;border-bottom:1px solid var(--border, #e3e6ea);background:#fcfcfd}.log-table td{padding:10px 12px;border-bottom:1px solid var(--border, #e3e6ea);font-size:13px;vertical-align:middle}.log-table tr:last-child td{border-bottom:none}.log-table .mono{font-family:SF Mono,Menlo,Consolas,monospace;font-size:12px}.log-table .muted{color:var(--text-muted, #6b7280)}.log-empty{padding:40px 16px;text-align:center;color:var(--text-muted, #6b7280)}.muted{color:var(--text-muted, #6b7280)}.nb-wrap{position:relative;display:inline-flex}.nb-bell{position:relative;font-size:15px;line-height:1}.nb-badge{position:absolute;top:-5px;right:-7px;background:#e11d48;color:#fff;font-size:10px;font-weight:700;border-radius:99px;padding:1px 5px;line-height:1.3;min-width:16px}.nb-drop{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:360px;max-width:92vw;max-height:420px;overflow:auto;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 14px 40px #00000029}.nb-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:10px 14px;border-bottom:1px solid #e2e8f0;position:sticky;top:0;background:#fff}.nb-empty{padding:22px 16px;color:#64748b;font-size:12.5px;text-align:center}.nb-item{padding:9px 14px;border-bottom:1px solid #e2e8f0;font-size:12.5px;cursor:pointer}.nb-item:hover{background:#f5f8ff}.nb-item:last-child{border-bottom:none}.nb-item.lunas{background:#f0fdf4}.nb-item.lunas .nb-text{font-weight:600}.nb-item.warn{background:#fef2f2}.nb-item.warn .nb-text{font-weight:600}.nb-item.read{opacity:.5}.nb-item.read .nb-text{font-weight:400}.nb-meta{color:#64748b;font-size:11px;margin-top:2px;display:flex;gap:8px}.nb-time{margin-left:auto;opacity:.85;white-space:nowrap}.nb-more{display:block;width:100%;padding:9px 14px;border:none;background:#fcfcfb;border-top:1px solid #e2e8f0;font-size:12px;font-weight:600;color:#0f172a;cursor:pointer}.nb-more:hover{background:#f5f8ff}