/* v1.3 styles */
.vnblc-wrap{
  --vnblc-btn: #ef4444;
  --vnblc-down: #6366f1;
  --vnblc-principal: #60a5fa;
  --vnblc-interest: #a78bfa;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:24px;
  align-items:start;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.vnblc-card{
  background:#fff;
  padding:20px;
  border-radius:16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.vnblc-inputs .vnblc-field{ margin-bottom:18px; }
.vnblc-field label{ display:block; font-weight:600; margin-bottom:8px; }
.vnblc-flex{ display:flex; gap:16px; align-items:center; }
.vnblc-grid-2{ display:grid; grid-template-columns: 1fr 150px; gap:16px; align-items:center; }
.vnblc-inline{ display:flex; gap:8px; align-items:center; }
.vnblc-inline input{ width:110px; }
.vnblc-radio label{ display:block; margin:6px 0; }
.vnblc-btn{
  background:var(--vnblc-btn);
  color:#fff;
  border:none;
  padding:12px 16px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
}
.vnblc-btn.secondary{ background:var(--vnblc-btn); }
.vnblc-btn:hover{ filter:brightness(0.95); }

.vnblc-results .vnblc-row{ display:flex; gap:24px; align-items:center; }
.vnblc-chart{ position:relative; width:240px; height:240px; }
.vnblc-donut-center{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-weight:800; font-size:28px;
}
.vnblc-donut-center small{ font-weight:600; opacity:0.7; font-size:14px; margin-top:-6px; }

.vnblc-legend{ display:flex; flex-direction:column; gap:6px; font-size:14px; }
.vnblc-dot{ width:12px; height:12px; border-radius:99px; display:inline-block; margin-right:6px; vertical-align:middle; }
.vnblc-dot-down{ background:var(--vnblc-down); }
.vnblc-dot-principal{ background:var(--vnblc-principal); }
.vnblc-dot-interest{ background:var(--vnblc-interest); }

.vnblc-kpi{
  margin-top:24px; display:flex; justify-content:space-between; align-items:center;
  padding-top:16px; border-top:1px dashed #e5e7eb;
}
.vnblc-kpi-label{ font-size:14px; color:#6b7280; }
.vnblc-kpi-value{ font-size:32px; font-weight:800; }

input[type="number"], select{
  width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px; background:#fff;
}
input[type="range"]{ width:100%; }

.vnblc-note{ color:#6b7280; font-size:12px; margin-top:12px; }

@media (max-width: 900px){
  .vnblc-wrap{ grid-template-columns: 1fr; }
  .vnblc-results .vnblc-row{ flex-direction:column; align-items:flex-start; }
}

/* Modal */
.vnblc-modal{ position:fixed; inset:0; z-index:9999; }
.vnblc-modal__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.vnblc-modal__content{ position:relative; width:min(560px, 92vw); max-height:90vh; overflow:auto; margin:6vh auto; background:#fff; padding:20px; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.22); }
.vnblc-modal__close{ position:absolute; top:8px; right:10px; background:transparent; border:none; font-size:22px; cursor:pointer; }