:root{--bg:#07111f;--panel:rgba(13,27,47,.86);--line:#203a5f;--text:#f5f8ff;--muted:#8ea5c4;--cyan:#3ad6e8;--green:#6ee7a8;--orange:#ffb454;--danger:#ff6b7d}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(circle at 15% 0,#12335d 0,transparent 35%),linear-gradient(150deg,#050b13,#07111f 45%,#091829);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:var(--text)}
.bg-orb{position:fixed;border-radius:50%;filter:blur(80px);opacity:.18;pointer-events:none}.orb-a{width:300px;height:300px;background:#25c7d9;right:-100px;top:120px}.orb-b{width:260px;height:260px;background:#7c5cff;left:-120px;bottom:20px}.app{width:min(1120px,calc(100% - 28px));margin:auto;padding:32px 0 26px;position:relative}.hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 4px 20px}.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:800;color:var(--cyan)}h1,h2,p{margin:0}.hero h1{font-size:clamp(30px,5vw,54px);letter-spacing:-.04em;margin:5px 0 8px}.hero p{max-width:680px;color:var(--muted);line-height:1.6}.hero-badge{width:104px;height:104px;border-radius:26px;border:1px solid #2f527f;background:linear-gradient(145deg,#132b49,#0b1728);box-shadow:0 18px 50px #0007;display:grid;place-content:center;text-align:center;color:var(--muted);font-size:12px}.hero-badge strong{font-size:19px;color:var(--text)}
.panel{background:linear-gradient(180deg,rgba(17,34,58,.92),rgba(10,22,39,.92));border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:0 18px 60px #0005;margin:14px 0}.panel-title{display:flex;gap:12px;align-items:center;margin-bottom:18px}.panel-title>span{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#123653;border:1px solid #2b6682;color:var(--cyan);font-weight:900}.panel-title h2{font-size:18px}.panel-title p{font-size:12px;color:var(--muted);margin-top:2px}.dropzone{min-height:145px;border:1.5px dashed #346084;border-radius:19px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px;background:#071525aa;cursor:pointer;transition:.2s}.dropzone:hover,.dropzone.drag{border-color:var(--cyan);background:#0a1d31}.dropzone input{display:none}.upload-icon{font-size:30px;color:var(--cyan);margin-bottom:8px}.dropzone small{color:var(--muted);margin-top:7px;max-width:640px}.status{margin-top:10px;font-size:12px;color:var(--muted)}
.filters{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.filters label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:#c9d7ea}.filters input,.filters select,textarea{width:100%;border:1px solid #284666;background:#081726;color:var(--text);border-radius:12px;padding:12px 13px;outline:none}.filters input:focus,.filters select:focus,textarea:focus{border-color:var(--cyan)}.switches{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}.switch-row{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:start;border:1px solid #1d3958;border-radius:14px;padding:12px;background:#0a1828}.switch-row input{display:none}.switch-row>span{width:38px;height:22px;background:#263b55;border-radius:99px;position:relative;margin-top:2px}.switch-row>span:after{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;border-radius:50%;background:#8ca0ba;transition:.2s}.switch-row input:checked+span{background:#155b68}.switch-row input:checked+span:after{left:19px;background:var(--cyan)}.switch-row small{display:block;color:var(--muted);font-size:11px;line-height:1.35;margin-top:3px}.actions{display:flex;gap:10px;flex-wrap:wrap}.btn{border:1px solid #2d4c6c;background:#10253c;color:#eaf3ff;border-radius:12px;padding:11px 16px;font-weight:800;cursor:pointer}.btn:hover{filter:brightness(1.12)}.btn.primary{border-color:#3acddd;background:linear-gradient(135deg,#1aa4b6,#167083)}.btn.ghost{background:transparent}.btn.copy{background:#173c35;border-color:#2b765f;color:#9bf3c8}
.stats{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:12px;margin:14px 0}.stats article{border:1px solid var(--line);background:#0c1b2e;border-radius:18px;padding:16px}.stats small{display:block;color:var(--muted);font-size:11px;margin-bottom:5px}.stats strong{font-size:22px}.stats article:first-child strong{color:var(--green);font-size:27px}.result-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:15px}.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.cards.empty{display:block}.empty-state{color:var(--muted);border:1px dashed #294967;border-radius:15px;padding:30px;text-align:center}.card{border:1px solid #244463;background:linear-gradient(150deg,#0b192b,#0b1e32);border-radius:17px;padding:16px}.card-top{display:flex;justify-content:space-between;gap:12px;align-items:start;padding-bottom:12px;border-bottom:1px solid #1b3755}.bank-name{font-weight:900;font-size:16px}.bank-total{color:var(--green);font-weight:900;white-space:nowrap}.line-item{display:grid;grid-template-columns:1fr auto;gap:12px;padding-top:10px;font-size:13px}.line-item span:first-child{color:#cbd8e8}.line-item span:last-child{font-weight:800}.badge{display:inline-block;font-size:10px;padding:3px 7px;border:1px solid #315575;color:#91b5da;border-radius:99px;margin-top:5px}textarea{min-height:240px;margin-top:15px;resize:vertical;line-height:1.6;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}footer{text-align:center;color:#607998;font-size:11px;padding:13px}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);opacity:0;background:#153d36;color:#a8f5d1;border:1px solid #2f755f;border-radius:11px;padding:10px 16px;font-weight:800;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:860px){.filters{grid-template-columns:repeat(2,1fr)}.switches{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.cards{grid-template-columns:1fr}.hero-badge{display:none}}
@media(max-width:520px){.app{width:min(100% - 18px,1120px);padding-top:14px}.hero{padding:14px 4px}.panel{padding:15px;border-radius:19px}.filters{grid-template-columns:1fr}.stats{gap:8px}.stats article{padding:13px}.stats strong{font-size:18px}.stats article:first-child strong{font-size:20px}.result-head{align-items:end}.btn{padding:10px 12px}.hero h1{font-size:34px}}
.total-line{display:flex;justify-content:space-between;gap:12px;margin:14px 0 10px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08)}
.detail-title{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;opacity:.68;margin:10px 0 4px}
.detail-row span:first-child{display:flex;flex-direction:column;gap:3px;min-width:0}.detail-row small{font-size:12px;opacity:.64;font-weight:500}.detail-row span:last-child{white-space:nowrap;font-weight:800}

.guide-panel{border-color:#2c5578}.guide-note{padding:12px 14px;border:1px solid #315b7c;background:#0b2035;border-radius:13px;color:#dcecff;font-size:13px;line-height:1.55;margin-bottom:14px}.guide-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.guide-steps li{display:grid;grid-template-columns:38px 1fr;gap:11px;align-items:start;padding:13px;border:1px solid #203f5e;background:#091a2b;border-radius:14px}.guide-steps li>span{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#123653;border:1px solid #2b6682;color:var(--cyan);font-weight:900}.guide-steps b{display:block;font-size:13px;margin:1px 0 4px}.guide-steps small{display:block;color:var(--muted);line-height:1.45}.guide-finish{margin-top:12px;padding:11px 13px;border-radius:12px;border:1px solid #28634f;background:#0c2a25;color:#a9f1cf;font-size:12px}@media(max-width:700px){.guide-steps{grid-template-columns:1fr}}


/* Panduan compact V3 */
.compact-guide{padding:16px 18px}
.guide-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:11px}
.compact-guide .panel-title{margin-bottom:0}
.guide-legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.legend-item{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;font-size:10px;font-weight:800;white-space:nowrap;border:1px solid}
.legend-item i{width:8px;height:8px;border-radius:50%;display:block}
.legend-fill{color:#a9d8ff;background:#0b2640;border-color:#245b87}.legend-fill i{background:#55b6ff}
.legend-click{color:#b8f5d5;background:#0b2d24;border-color:#267358}.legend-click i{background:#66e3a5}
.compact-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.guide-step{min-height:68px;display:grid;grid-template-columns:29px 1fr;gap:8px;align-items:center;padding:9px 10px;border-radius:11px;border:1px solid}
.guide-step .step-no{width:27px;height:27px;display:grid;place-items:center;border-radius:8px;font-size:11px;font-weight:900}
.guide-step b{display:block;font-size:12px;line-height:1.25;margin:0 0 2px}
.guide-step small{display:block;font-size:10px;line-height:1.25;opacity:.82}
.step-fill{background:#0a2238;border-color:#265a82}.step-fill .step-no{background:#123d60;color:#88cbff;border:1px solid #2b6a9a}
.step-click{background:#0a271f;border-color:#286149}.step-click .step-no{background:#124432;color:#8df0bf;border:1px solid #2a7958}
.step-neutral{background:#131d2c;border-color:#33445a}.step-neutral .step-no{background:#263549;color:#d5e0ef;border:1px solid #415772}
.guide-repeat{margin-top:9px;padding:8px 11px;border-radius:10px;border:1px solid #7a5b24;background:#2b210d;color:#ffe0a1;font-size:11px;line-height:1.35}
@media(max-width:900px){.compact-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.compact-guide{padding:13px}.guide-head{align-items:flex-start;flex-direction:column}.guide-legend{justify-content:flex-start}.compact-steps{grid-template-columns:1fr 1fr;gap:7px}.guide-step{min-height:64px;padding:8px}.guide-step b{font-size:11px}.guide-step small{font-size:9.5px}}
@media(max-width:390px){.compact-steps{grid-template-columns:1fr}}

/* Modern unified guide */
.compact-guide{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(16,31,52,.97),rgba(13,26,45,.97));border:1px solid rgba(99,179,237,.24);box-shadow:0 16px 45px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035)}
.compact-guide:before{content:"";position:absolute;width:230px;height:230px;border-radius:50%;right:-95px;top:-145px;background:rgba(58,214,232,.10);filter:blur(8px);pointer-events:none}
.compact-guide .panel-title>span{background:linear-gradient(135deg,#2563eb,#22c1dc);border:0;color:#fff;box-shadow:0 7px 18px rgba(37,99,235,.28)}
.compact-guide .panel-title h2{font-size:16px;letter-spacing:-.01em}.compact-guide .panel-title p{color:#8198b8}
.guide-legend{position:relative;z-index:1}.legend-item{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.09);color:#a9bad0;backdrop-filter:blur(8px)}
.legend-fill i{background:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.12)}.legend-click i{background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.12)}
.compact-steps{position:relative;z-index:1}
.guide-step{position:relative;background:rgba(8,22,39,.58);border-color:rgba(255,255,255,.075);transition:transform .18s ease,border-color .18s ease,background .18s ease}
.guide-step:hover{transform:translateY(-2px);background:rgba(13,31,52,.88);border-color:rgba(96,165,250,.24)}
.guide-step .step-no{border:0;box-shadow:none}.guide-step b{color:#eef5ff}.guide-step small{color:#8398b5;opacity:1}
.step-fill .step-no{background:rgba(59,130,246,.15);color:#7db8ff}.step-click .step-no{background:rgba(52,211,153,.13);color:#63e6b1}.step-neutral .step-no{background:rgba(148,163,184,.12);color:#cbd5e1}
.guide-repeat{position:relative;z-index:1;background:linear-gradient(90deg,rgba(37,99,235,.11),rgba(34,193,220,.07));border:1px solid rgba(96,165,250,.18);color:#b9cbe2}.guide-repeat strong,.guide-repeat b{color:#eef6ff}