:root{--brand-500:#0E7A5F;--brand-600:#0B624C;--brand-100:#E3F2ED;--ok:#0E7A5F;--warn:#B45309;--crit:#B91C1C;--info:#1D4ED8;--ok-bg:#E7F5F0;--warn-bg:#FCF3E3;--crit-bg:#FDECEC;--info-bg:#EAF1FD;--bg:#F6F7F9;--surface:#FFFFFF;--surface-2:#FBFBFC;--border:#E4E7EC;--border-strong:#D0D5DD;--text:#101828;--text-2:#475467;--text-3:#98A2B3;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--r-sm:6px;--r-md:10px;--r-lg:14px;--shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.1);--font:"Inter","Segoe UI",system-ui,-apple-system,sans-serif}html[data-theme=dark]{--bg:#0C111D;--surface:#14192B;--surface-2:#1A2035;--border:#2A3247;--border-strong:#3B455E;--text:#F2F4F7;--text-2:#98A2B3;--text-3:#6B7688;--brand-100:#12332B;--ok-bg:#0F2A22;--warn-bg:#2E2210;--crit-bg:#2E1414;--info-bg:#13203C;--shadow:0 1px 3px rgba(0,0,0,.5)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}button{font-family:inherit}a{color:var(--info)}.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}@media(max-width:820px){.app{grid-template-columns:1fr}}.sidebar{background:var(--surface);border-right:1px solid var(--border);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s4)}@media(max-width:820px){.sidebar{border-right:none;border-bottom:1px solid var(--border)}}.logo{display:flex;align-items:center;gap:var(--s2);font-weight:700;font-size:16px}.logo .mark{width:28px;height:28px;border-radius:var(--r-sm);background:var(--brand-500);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800}.label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}.klien-list{display:flex;flex-direction:column;gap:var(--s1)}.klien{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border-radius:var(--r-md);color:var(--text-2);cursor:pointer;border:1px solid transparent;background:none;width:100%;text-align:left;font-size:14px}.klien:hover{background:var(--surface-2)}.klien.active{background:var(--brand-100);color:var(--brand-600);border-color:var(--brand-500);font-weight:600}html[data-theme=dark] .klien.active{color:#7fd8be}.klien .avatar{width:28px;height:28px;border-radius:8px;background:var(--border);display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--text-2);flex:none}.klien.active .avatar{background:var(--brand-500);color:#fff}.klien small{display:block;font-size:11px;color:var(--text-3);font-weight:400}.badge-count{margin-left:auto;font-size:11px;background:var(--warn-bg);color:var(--warn);padding:1px 7px;border-radius:99px;font-weight:600}.btn-outline{margin-top:auto;border:1px dashed var(--border-strong);border-radius:var(--r-md);padding:var(--s2);text-align:center;color:var(--text-2);font-size:13px;background:none;cursor:pointer}.btn-outline:hover{border-color:var(--brand-500);color:var(--brand-500)}.theme-toggle{margin-top:var(--s2);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s2);background:none;color:var(--text-2);font-size:13px;cursor:pointer;width:100%}main{padding:var(--s5);max-width:1100px;width:100%;margin:0 auto}.topbar{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5);flex-wrap:wrap}.topbar h1{font-size:20px;font-weight:700;letter-spacing:-.01em}.steps{margin-left:auto;display:flex;gap:var(--s2);font-size:12px;color:var(--text-3)}.steps span.done{color:var(--ok)}.steps span.now{color:var(--text);font-weight:600}@media(max-width:640px){.steps{display:none}main{padding:var(--s4)}}h2{font-size:16px;font-weight:700;margin-bottom:var(--s1);letter-spacing:-.01em}.sub{color:var(--text-2);font-size:13px;margin-bottom:var(--s4)}section.block{margin-bottom:48px}.btn{border:none;border-radius:var(--r-md);padding:10px var(--s4);font-weight:600;font-size:14px;cursor:pointer;background:var(--brand-500);color:#fff}.btn:hover{background:var(--brand-600)}.btn.ghost{background:var(--surface);border:1px solid var(--border-strong);color:var(--text-2)}.btn.ghost:hover{border-color:var(--brand-500);color:var(--brand-500);background:var(--surface)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.danger{background:var(--crit)}.btn.block{width:100%}input,select{width:100%;padding:10px var(--s3);border:1px solid var(--border-strong);border-radius:var(--r-md);font-size:14px;background:var(--surface);color:var(--text);font-family:inherit}input:focus,select:focus{outline:2px solid var(--brand-500);outline-offset:-1px;border-color:var(--brand-500)}.field{margin-bottom:var(--s3)}.field label{display:block;font-size:12px;font-weight:600;margin-bottom:var(--s1);color:var(--text-2)}.err{color:var(--crit);font-size:13px;margin-top:var(--s2)}.hint{color:var(--text-3);font-size:12px;margin-top:var(--s2)}.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:var(--s4);background:var(--bg)}.auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow)}.auth-card .logo{margin-bottom:var(--s4);justify-content:center}.auth-card h1{font-size:18px;text-align:center;margin-bottom:var(--s1)}.auth-card .sub{text-align:center;margin-bottom:var(--s5)}.auth-switch{text-align:center;font-size:13px;color:var(--text-2);margin-top:var(--s4)}.auth-switch a{font-weight:600}.dropzone{border:1.5px dashed var(--border-strong);border-radius:var(--r-lg);background:var(--surface);padding:var(--s6) var(--s4);text-align:center;color:var(--text-2);cursor:pointer;transition:border-color .15s,background .15s}.dropzone.drag{border-color:var(--brand-500);background:var(--brand-100)}.dropzone .icon{width:48px;height:48px;margin:0 auto var(--s3);border-radius:var(--r-md);background:var(--brand-100);color:var(--brand-500);display:grid;place-items:center;font-size:22px}.dropzone strong{color:var(--text)}.dropzone .types{margin-top:var(--s2);font-size:12px;color:var(--text-3)}.files{margin-top:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}.file-row{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s3) var(--s4);display:flex;align-items:center;gap:var(--s3);box-shadow:var(--shadow);flex-wrap:wrap}.file-row .ext{width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;font-size:10px;font-weight:800;color:#fff;background:var(--info);flex:none}.file-row .ext.pdf{background:var(--crit)}.file-row .ext.xls{background:var(--ok)}.file-row .fname{font-weight:600;font-size:13px;word-break:break-all}.file-row .meta{font-size:12px;color:var(--text-3)}.progress{flex:1;min-width:80px;max-width:180px;height:6px;border-radius:99px;background:var(--border);overflow:hidden}.progress i{display:block;height:100%;background:var(--brand-500);border-radius:99px;transition:width .2s}.file-row .pct{font-size:12px;color:var(--text-2);width:40px;text-align:right;flex:none}.file-row.ok .pct{color:var(--ok);font-weight:700}.file-row.gagal{border-color:var(--crit)}.file-row.gagal .pct{color:var(--crit);font-weight:700}.cta-row{display:flex;gap:var(--s2);margin-top:var(--s4);flex-wrap:wrap}.notice{border-radius:var(--r-md);padding:var(--s3) var(--s4);font-size:13px;margin-bottom:var(--s4);border:1px solid}.notice.warn{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}.notice.info{background:var(--info-bg);border-color:var(--info);color:var(--info)}.notice.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}.notice.crit{background:var(--crit-bg);border-color:var(--crit);color:var(--crit)}.notice b{display:block;margin-bottom:2px}.notice a{font-weight:700}.filter-bar{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4)}.chip{border:1px solid var(--border-strong);background:var(--surface);border-radius:99px;padding:6px 14px;font-size:13px;color:var(--text-2);cursor:pointer}.chip.on{background:var(--brand-100);border-color:var(--brand-500);color:var(--brand-600);font-weight:600}html[data-theme=dark] .chip.on{color:#7fd8be}.chip:disabled{opacity:.5;cursor:default}.finding{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--warn);border-radius:var(--r-md);padding:var(--s4);box-shadow:var(--shadow);margin-bottom:var(--s3)}.finding.crit{border-left-color:var(--crit)}.finding.info{border-left-color:var(--info)}.finding.okf{border-left-color:var(--ok)}.finding.done{opacity:.55}.f-head{display:flex;align-items:flex-start;gap:var(--s2);flex-wrap:wrap}.f-head h3{font-size:14px;font-weight:600}.f-meta{display:flex;gap:var(--s2);align-items:center;margin-left:auto;flex-wrap:wrap}.badge{font-size:11px;font-weight:600;padding:2px 10px;border-radius:99px}.badge.crit{background:var(--crit-bg);color:var(--crit)}.badge.warn{background:var(--warn-bg);color:var(--warn)}.badge.info{background:var(--info-bg);color:var(--info)}.badge.okf{background:var(--ok-bg);color:var(--ok)}.badge.conf:before{content:"";display:inline-block;width:6px;height:6px;border-radius:99px;background:currentColor;margin-right:5px;vertical-align:1px}.pasal{font-size:12px;color:var(--info);margin-top:var(--s2);display:inline-flex;gap:6px;align-items:center}.f-desc{color:var(--text-2);font-size:13px;margin-top:var(--s2);max-width:70ch}.f-actions{margin-top:var(--s3);display:flex;gap:var(--s2);flex-wrap:wrap}.link-btn{background:none;border:none;color:var(--text-2);font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0}.link-btn.primary{color:var(--brand-500);font-weight:600}@media(max-width:640px){.f-meta{margin-left:0;width:100%}}.empty{background:var(--surface);border:1px dashed var(--border-strong);border-radius:var(--r-lg);padding:var(--s5);text-align:center;color:var(--text-3);font-size:13px}.split{display:grid;grid-template-columns:1fr 320px;gap:var(--s5);align-items:start}@media(max-width:900px){.split{grid-template-columns:1fr}}.memo{background:#fff;color:#101828;border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow);font-size:13px}.memo .m-head{display:flex;justify-content:space-between;gap:var(--s3);border-bottom:2px solid #101828;padding-bottom:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap}.memo .m-head .brandline{font-weight:800;font-size:15px}.memo h4{font-size:13px;margin:var(--s4) 0 var(--s1);text-transform:uppercase;letter-spacing:.04em}.memo table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:var(--s2)}.memo td{padding:6px 8px;border-bottom:1px solid #E4E7EC;vertical-align:top}.memo .total{font-weight:700}.memo .disclaimer{margin-top:var(--s4);font-size:11.5px;color:#475467;border-top:1px solid #E4E7EC;padding-top:var(--s3)}.export-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s4);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:var(--s2)}.export-card .row{display:flex;justify-content:space-between;font-size:13px}.export-card .row b{font-size:15px}.export-card .btn{width:100%}.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s4);margin-bottom:var(--s5)}.price-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:var(--s3);position:relative}.price-card.featured{border-color:var(--brand-500);border-width:2px}.price-card .tag{position:absolute;top:-11px;left:var(--s4);background:var(--brand-500);color:#fff;font-size:11px;font-weight:700;padding:2px 10px;border-radius:99px}.price-card h3{font-size:15px;font-weight:700}.price-card .amount{font-size:28px;font-weight:800;letter-spacing:-.02em}.price-card .amount small{font-size:13px;font-weight:500;color:var(--text-3)}.price-card ul{list-style:none;font-size:13px;color:var(--text-2);display:flex;flex-direction:column;gap:6px}.price-card ul li:before{content:"✓";color:var(--brand-500);font-weight:700;margin-right:8px}.plan-current{background:var(--brand-100);border:1px solid var(--brand-500);color:var(--brand-600);border-radius:var(--r-md);padding:var(--s3) var(--s4);font-size:13px;font-weight:600;margin-bottom:var(--s4)}html[data-theme=dark] .plan-current{color:#7fd8be}.gateway-list{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s4)}.gateway{display:flex;align-items:center;gap:var(--s3);border:1px solid var(--border-strong);border-radius:var(--r-md);padding:var(--s3) var(--s4);cursor:pointer;background:var(--surface);font-size:14px}.gateway.on{border-color:var(--brand-500);background:var(--brand-100);font-weight:600}.gateway input{width:auto}.gateway .gw-note{margin-left:auto;font-size:11px;font-weight:600;color:var(--text-3)}.checkout-box{max-width:520px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow)}.foot{border-top:1px solid var(--border);padding:var(--s4);font-size:11.5px;color:var(--text-3);text-align:center;background:var(--surface)}.foot p{max-width:70ch;margin:0 auto 4px}.modal-back{position:fixed;top:0;right:0;bottom:0;left:0;background:#10182880;display:grid;place-items:center;padding:var(--s4);z-index:50}.modal{background:var(--surface);border-radius:var(--r-lg);padding:var(--s5);width:100%;max-width:480px;max-height:90vh;overflow:auto;box-shadow:var(--shadow)}.modal h3{font-size:16px;margin-bottom:var(--s3)}.modal .cta-row{justify-content:flex-end}.toast{position:fixed;bottom:var(--s4);left:50%;transform:translate(-50%);background:var(--text);color:var(--bg);padding:10px var(--s4);border-radius:var(--r-md);font-size:13px;font-weight:600;z-index:60;box-shadow:var(--shadow)}
