:root{--ink:#1F2033;--ink-soft:#6B6D85;--bg:#F5F4FB;--card:#FFFFFF;--primary:#6231C2;--primary-dark:#4C22A0;--secondary:#1067E9;--grad:linear-gradient(135deg,#6231C2,#1067E9);--mint:#2FAE87;--mint-bg:#E7F7F1;--amber:#F0A93B;--amber-bg:#FEF3DE;--danger:#E15A5A;--danger-bg:#FCEAEA;--line:#E9E5F5;--shadow:0 4px 18px rgba(58,32,140,.07);--font-d:"Manrope",system-ui,sans-serif;--font-b:"Inter",system-ui,sans-serif;--sidebar-w:250px}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-b);-webkit-font-smoothing:antialiased}h1,h2,h3{font-family:var(--font-d);margin:0 0 4px;color:var(--ink)}h1{font-size:22px;font-weight:800}h2{font-size:15px;font-weight:800;margin:0 0 12px}h3{font-size:13.5px;font-weight:700}p{margin:0;line-height:1.55}.sub{color:var(--ink-soft);font-size:12.5px}button{font-family:inherit;cursor:pointer}.hidden{display:none!important}a{color:var(--primary)}.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 15% 10%,#EDE4FF,transparent 45%),radial-gradient(circle at 90% 90%,#E3EEFF,transparent 45%),var(--bg)}.login-card{width:380px;background:#fff;border-radius:22px;padding:34px 30px;box-shadow:0 20px 50px #3a208c24}.login-card .logo-wrap{width:120px;margin:0 auto 18px}.login-card .logo-wrap img{width:100%;display:block}.login-card h1{text-align:center;font-size:19px}.login-card .sub{text-align:center;display:block;margin-bottom:22px}.field{margin-bottom:13px}.field label{font-size:11.5px;font-weight:700;color:var(--ink-soft);display:block;margin-bottom:5px}.field input,.field select{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:10px 12px;font-size:13.5px;font-family:inherit}.btn{border:none;border-radius:11px;padding:11px 18px;font-weight:700;font-size:13.5px;font-family:var(--font-d);background:var(--primary);color:#fff}.btn:hover{background:var(--primary-dark)}.btn.full{width:100%}.btn.outline{background:#fff;color:var(--ink);border:1.5px solid var(--line)}.btn.secondary{background:#ede7fb;color:var(--primary)}.btn.sm{padding:7px 13px;font-size:12px}.btn.danger{background:var(--danger)}.btn:disabled{opacity:.45;cursor:not-allowed}#portalApp{display:flex;min-height:100vh}.sidebar{width:var(--sidebar-w);flex-shrink:0;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:20px 14px;position:fixed;top:0;bottom:0}.sidebar .brand{display:flex;align-items:center;gap:9px;padding:6px 8px 20px}.sidebar .brand img{height:26px}.navgroup{margin-bottom:4px}.navlabel{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#b3b0ce;padding:12px 10px 6px}.navitem{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;border:none;background:none;width:100%;text-align:left;color:var(--ink-soft);font-size:13px;font-weight:600;margin-bottom:2px;position:relative}.navitem svg{flex-shrink:0}.navitem.active{background:#f1edfc;color:var(--primary)}.navitem .badge-count{margin-left:auto;background:var(--danger);color:#fff;font-size:10px;font-weight:800;padding:1px 7px;border-radius:20px}.sidebar-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:12px}.admin-chip{display:flex;align-items:center;gap:9px;padding:8px;border-radius:11px}.admin-chip .av{width:32px;height:32px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0}.admin-chip b{font-size:12.5px;display:block}.admin-chip span{font-size:10.5px;color:var(--ink-soft)}.main{margin-left:var(--sidebar-w);flex:1;min-width:0}.topbar{background:#fff;border-bottom:1px solid var(--line);padding:16px 32px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5}.topbar h1{font-size:19px}.topbar-right{display:flex;align-items:center;gap:12px}.company-chip{background:#f5f4fb;border-radius:20px;padding:7px 14px;font-size:12.5px;font-weight:700;color:var(--ink-soft);display:flex;align-items:center;gap:7px}.content{padding:28px 32px 60px}.page{display:none}.page.active{display:block}.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}.kpi-card{background:#fff;border-radius:16px;padding:18px 20px;box-shadow:var(--shadow);position:relative;overflow:hidden}.kpi-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)}.kpi-card .lbl{font-size:11.5px;color:var(--ink-soft);font-weight:600}.kpi-card .val{font-size:27px;font-weight:800;font-family:var(--font-d);margin-top:4px}.kpi-card .trend{font-size:11.5px;margin-top:5px;font-weight:700}.trend.up{color:var(--mint)}.trend.down{color:var(--danger)}.trend.flat{color:var(--ink-soft)}.score-now{display:inline-flex;margin-top:8px;font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:20px}.score-now.bad{background:var(--danger-bg);color:#b23c3c}.score-now.ok{background:var(--amber-bg);color:#8a5a0e}.score-now.good{background:var(--mint-bg);color:#1e7a5b}.score-bands{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:3px}.score-band{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;color:var(--ink-soft);padding:3px 7px;border-radius:6px}.score-band.on{font-weight:800;color:var(--ink)}.score-band.on.bad{background:var(--danger-bg)}.score-band.on.ok{background:var(--amber-bg)}.score-band.on.good{background:var(--mint-bg)}.grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;margin-bottom:18px}.grid2-even{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}.card{background:#fff;border-radius:16px;padding:20px;box-shadow:var(--shadow)}.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.tag-pro{font-size:10px;font-weight:800;background:var(--mint-bg);color:#1e7a5b;padding:3px 9px;border-radius:20px}.tag-warn{font-size:10px;font-weight:800;background:var(--amber-bg);color:#8a5a0e;padding:3px 9px;border-radius:20px}.tag-locked{font-size:10px;font-weight:800;background:#eee;color:#666;padding:3px 9px;border-radius:20px}.tabbar-d{display:inline-flex;background:#ede9fa;border-radius:12px;padding:3px;gap:3px;margin-bottom:20px}.tabbar-d button{border:none;background:none;padding:9px 18px;border-radius:9px;font-size:12.5px;font-weight:700;font-family:var(--font-d);color:var(--ink-soft)}.tabbar-d button.active{background:#fff;color:var(--primary);box-shadow:0 2px 6px #3a208c1f}.tabpanel-d{display:none}.tabpanel-d.active{display:block}.chart-box{width:100%;height:240px}.bar-chart{display:flex;align-items:flex-end;gap:14px;height:180px;padding:0 4px}.bar-chart .bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}.bar-chart .bar{width:100%;max-width:38px;border-radius:7px 7px 0 0;background:var(--grad)}.bar-chart .bar-val{font-size:11px;font-weight:700;margin-bottom:4px}.bar-chart .bar-lbl{font-size:10.5px;color:var(--ink-soft);margin-top:7px;text-align:center}.donut-wrap{display:flex;align-items:center;gap:22px}.donut{width:140px;height:140px;border-radius:50%;position:relative;flex-shrink:0}.donut:after{content:"";position:absolute;top:22px;right:22px;bottom:22px;left:22px;background:#fff;border-radius:50%}.donut-center{position:absolute;top:22px;right:22px;bottom:22px;left:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2}.donut-center b{font-size:19px;font-family:var(--font-d)}.donut-center span{font-size:9.5px;color:var(--ink-soft)}.legend-item{display:flex;align-items:center;gap:8px;font-size:12.5px;margin-bottom:8px}.legend-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}.funnel-row{margin-bottom:10px}.funnel-row .row-top{display:flex;justify-content:space-between;font-size:12px;margin-bottom:5px}.funnel-bar-bg{height:20px;background:#ede9fa;border-radius:6px;overflow:hidden}.funnel-bar{height:100%;background:var(--grad);border-radius:6px}table.dtable{width:100%;border-collapse:collapse;font-size:12.8px}table.dtable th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.3px;color:var(--ink-soft);padding:9px 12px;border-bottom:2px solid var(--line)}table.dtable td{padding:11px 12px;border-bottom:1px solid var(--line)}table.dtable tr:last-child td{border-bottom:none}table.dtable tr:hover td{background:#fbfaff}.role-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;background:#ede9fb;color:var(--primary);margin-right:3px;display:inline-block}.status-badge{font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:20px}.status-baru{background:var(--danger-bg);color:#b23c3c}.status-proses{background:var(--amber-bg);color:#8a5a0e}.status-selesai{background:var(--mint-bg);color:#1e7a5b}.status-crisis{background:#2a1220;color:#fff}.threshold-card{background:#fff;border-radius:16px;padding:18px 20px;box-shadow:var(--shadow);margin-bottom:14px}.threshold-card.locked{background:#fafafa;border:1.5px dashed #D8D8E0}.th-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}.th-inputs{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}.th-input-group{display:flex;flex-direction:column;gap:5px;min-width:130px}.th-input-group label{font-size:10.5px;color:var(--ink-soft);font-weight:700}.th-input-group input,.th-input-group select{border:1.5px solid var(--line);border-radius:9px;padding:8px 10px;font-size:13px;width:100%}.th-input-group input:disabled,.th-input-group select:disabled{background:#f2f2f5;color:#999}.pro-note{font-size:11px;color:var(--ink-soft);background:#f1edfc;border-radius:9px;padding:8px 11px;margin-top:12px;line-height:1.5}.pro-note b{color:var(--ink)}.case-row{cursor:pointer}.case-detail{background:#fbfaff;border-radius:0 0 12px 12px;padding:16px 20px;border-top:1px dashed var(--line)}.case-detail.hidden{display:none}textarea.dinput{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:9px 11px;font-size:13px;font-family:inherit;min-height:60px}.toast-d{position:fixed;bottom:26px;left:50%;transform:translate(-50%) translateY(20px);background:var(--ink);color:#fff;padding:11px 20px;border-radius:30px;font-size:13px;opacity:0;pointer-events:none;transition:all .22s;z-index:100}.toast-d.show{opacity:1;transform:translate(-50%) translateY(0)}.live-chip{display:flex;align-items:center;gap:7px;background:#e7f7f1;color:#1e7a5b;border-radius:20px;padding:7px 12px;font-size:12px;font-weight:700}.live-dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 #2fae87b3;animation:livepulse 1.6s infinite}@keyframes livepulse{0%{box-shadow:0 0 #2fae878c}70%{box-shadow:0 0 0 8px #2fae8700}to{box-shadow:0 0 #2fae8700}}.report-card{background:#fff;border-radius:16px;padding:18px 20px;box-shadow:var(--shadow);margin-bottom:14px;border-left:4px solid var(--line)}.report-card.crisis{border-left-color:#2a1220}.report-card.red{border-left-color:var(--danger)}.report-card.watch{border-left-color:var(--amber)}.report-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.report-themes{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}@media (max-width:1100px){.kpi-row{grid-template-columns:repeat(2,1fr)}.grid2,.grid2-even{grid-template-columns:1fr}}html,body,#root{min-height:100%}.page,.tabpanel-d{display:block}select.dinput{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:8px;font-size:13px;font-family:inherit;background:#fff}@keyframes riseIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes kpiBreathe{0%,to{box-shadow:var(--shadow)}50%{box-shadow:0 10px 28px #6231c224}}@keyframes sheenSweep{0%,58%{transform:translate(-140%)}78%,to{transform:translate(140%)}}@keyframes barGrow{0%{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes fillBar{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes drawLine{to{stroke-dashoffset:0}}@keyframes fadeArea{0%{opacity:0}to{opacity:1}}@keyframes dotPulse{0%,to{r:5;opacity:1}50%{r:7;opacity:.72}}@keyframes donutIn{0%{transform:scale(.82) rotate(-18deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}@keyframes donutIdle{0%,to{filter:saturate(1)}50%{filter:saturate(1.18)}}@keyframes legendPop{0%{opacity:0;transform:translate(-6px)}to{opacity:1;transform:none}}@keyframes liveGlow{0%,to{box-shadow:0 0 #2fae8759}70%{box-shadow:0 0 0 7px #2fae8700}}@keyframes gradShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes dotPulse{0%,to{transform:scale(1)}50%{transform:scale(1.4)}}.kpi-card,.card,.report-card,.threshold-card{animation:riseIn .55s ease both,kpiBreathe 5.2s ease-in-out infinite}.kpi-row .kpi-card:nth-child(1){animation-delay:0s,.4s}.kpi-row .kpi-card:nth-child(2){animation-delay:.07s,1s}.kpi-row .kpi-card:nth-child(3){animation-delay:.14s,1.6s}.kpi-row .kpi-card:nth-child(4){animation-delay:.21s,2.2s}.grid2>.card:nth-child(1){animation-delay:.18s,2s}.grid2>.card:nth-child(2){animation-delay:.26s,2.6s}.kpi-card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translate(-140%);animation:sheenSweep 6s ease-in-out infinite}.kpi-row .kpi-card:nth-child(2):after{animation-delay:1.1s}.kpi-row .kpi-card:nth-child(3):after{animation-delay:2.2s}.kpi-row .kpi-card:nth-child(4):after{animation-delay:3.3s}.kpi-card:before{background:linear-gradient(90deg,#6231c2,#1067e9,#2fae87,#6231c2);background-size:220% 100%;animation:gradShift 4.5s linear infinite}.kpi-card .val{display:inline-block;animation:riseIn .7s ease both}.chart-stroke{stroke-dasharray:1;stroke-dashoffset:1;animation:drawLine 1.15s ease forwards}.chart-area{opacity:0;animation:fadeArea .9s ease .35s forwards}.chart-dot{opacity:0;animation:fadeArea .4s ease .7s forwards}.chart-dot-now{transform-box:fill-box;transform-origin:center;animation:dotPulse 1.8s ease-in-out infinite}.bar-chart .bar{transform-origin:bottom;animation:barGrow .75s cubic-bezier(.2,.8,.2,1) both}.bar-chart .bar-col:nth-child(1) .bar{animation-delay:.05s}.bar-chart .bar-col:nth-child(2) .bar{animation-delay:.12s}.bar-chart .bar-col:nth-child(3) .bar{animation-delay:.19s}.bar-chart .bar-col:nth-child(4) .bar{animation-delay:.26s}.bar-chart .bar-col:nth-child(5) .bar{animation-delay:.33s}.bar-chart .bar-col:nth-child(6) .bar{animation-delay:.4s}.donut{animation:donutIn .7s ease both,donutIdle 7s ease-in-out infinite}.legend-item{animation:legendPop .4s ease both}.legend-item:nth-child(1){animation-delay:.2s}.legend-item:nth-child(2){animation-delay:.3s}.legend-item:nth-child(3){animation-delay:.4s}.funnel-bar{transform-origin:left;animation:fillBar .8s ease both}.funnel-row:nth-child(1) .funnel-bar{animation-delay:.08s}.funnel-row:nth-child(2) .funnel-bar{animation-delay:.16s}.funnel-row:nth-child(3) .funnel-bar{animation-delay:.24s}.funnel-row:nth-child(4) .funnel-bar{animation-delay:.32s}.tag-pro{animation:liveGlow 2s ease-in-out infinite}.navitem.active{transition:background .2s,color .2s}.dtable tbody tr{animation:riseIn .4s ease both}.dtable tbody tr:nth-child(1){animation-delay:.04s}.dtable tbody tr:nth-child(2){animation-delay:.08s}.dtable tbody tr:nth-child(3){animation-delay:.12s}.dtable tbody tr:nth-child(4){animation-delay:.16s}.dtable tbody tr:nth-child(5){animation-delay:.2s}@media (prefers-reduced-motion:reduce){.kpi-card,.card,.report-card,.threshold-card,.chart-stroke,.chart-area,.chart-dot,.chart-dot-now,.bar-chart .bar,.donut,.legend-item,.funnel-bar,.tag-pro,.dtable tbody tr,.kpi-card .val,.kpi-card:after,.kpi-card:before{animation:none!important}}