/* === PROGRESS BAR === */
.progress-bar-container {
background: #666;
border-radius: 8px;
overflow: hidden;
position: relative;
height: 22px;
margin: 10px 0;
}
.progress-bar {
height: 100%;
width: 0;
border-radius: 8px;
position: relative;
z-index: 0;
transition: width 1s ease-in-out;
background-image: linear-gradient(
    135deg,
    rgba(255,255,255,0.2) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,0.2) 50%,
    rgba(255,255,255,0.2) 75%, transparent 75%, transparent
);
background-size: 25px 25px;
animation: moveBackground 1s linear infinite;
}
.progress-bar.green { background-color: #22c55e; }
.progress-bar.orange { background-color: #f97316; }
.progress-bar.red { background-color: #ef4444; }
.progress-bar-text {
font-family: Ubuntu, sans-serif;
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-weight: bold; font-size: 0.85rem;
color: #fff; z-index: 1; pointer-events: none;
}
@keyframes moveBackground { 0%{background-position:0 0}100%{background-position:25px 0} }

/* === POPUP === */
.simulasi-popup {
display: none;
position: fixed; inset: 0;
background: rgba(0,0,0,.5);
z-index: 9999;
align-items: center;
justify-content: center;
padding: 16px;
opacity: 0;
transition: opacity 0.25s ease;
}
.simulasi-popup.show { display:flex; opacity:1; }

.simulasi-popup .popup-content {
width: 100%;
max-width: 420px;
background: #121418;
color: #eaeef6;
border-radius: 14px;
box-shadow: 0 10px 30px rgba(0,0,0,.35);
padding: 18px;
}
.popup-content h3 { margin:0 0 10px; font-size:18px; }
.popup-content input {
width:100%; margin-top:8px; padding:10px 12px;
border-radius:10px; border:1px solid #263241;
background:#0c0f14; color:#fff; outline:none;
}
.popup-content input::placeholder { color:#718096; }
.popup-content .btn {
margin-top:10px; width:100%; border:0;
padding:10px 12px; border-radius:10px;
font-weight:600; cursor:pointer;
}
.btn-primary { background:#2563eb; color:#fff; }
.btn-primary:hover { filter:brightness(1.1); }
.btn-danger { background:#dc2626; color:#fff; }

/* Tombol simulasi */
.simulasi-actions { margin-top:8px; text-align:center; }
.btn-simulasi {
background:#007bff; color:#fff; border:none;
padding:6px 12px; font-size:14px; border-radius:6px;
cursor:pointer; transition:background .25s ease;
}
.btn-simulasi:hover { background:#0056b3; }
.btn-simulasi.disabled { background:#ccc; color:#666; cursor:not-allowed; }

/* Hasil simulasi */
.simulation-result-container {
margin-top:12px; background:#0c0f14; border:1px solid #263241;
border-radius:12px; padding:12px; font-size:11pt;
}
.bar-chart { width:100%; height:10px; background:#222a35; border-radius:8px; overflow:hidden; }
.bar-chart .bar { height:100%; width:0; transition:width .6s ease; }