:root {
  --bg:#f7f8fb; --card:#ffffff; --accent:#0b76ff; --muted:#666;
  --radius:10px; --shadow:0 6px 18px rgba(11,118,255,0.08);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

#vcc-root {
  margin:20px auto;
  max-width:720px;
}

#vcc-root .card {
  width:100%;
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px 22px;
}

#vcc-root h1 { margin:0 0 8px; font-size:1.25rem; }
#vcc-root p.lead { margin:0 0 18px; color:var(--muted); font-size:0.95rem; }
#vcc-root .row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
#vcc-root .field { flex:1; min-width:160px; }
#vcc-root label { display:block; font-size:0.85rem; margin-bottom:6px; color:#222; }

#vcc-root input[type="number"], #vcc-root select {
  width:100%; padding:10px; border:1px solid #e3e7ef;
  border-radius:8px; font-size:1rem; box-sizing:border-box;
}

#vcc-root .controls { display:flex; gap:12px; align-items:center; margin-top:6px; }
#vcc-root button.primary { background:var(--accent); color:#fff; padding:10px 14px; border:none; border-radius:8px; font-weight:600; cursor:pointer; }
#vcc-root button.ghost { 
	background:#000000 !important; 
	color: #fff;
	border:1px solid #e3e7ef; 
	padding:10px 12px; 
	border-radius:8px; 
	cursor:pointer; }

#vcc-root .result {
  margin-top:16px; padding:14px; border-radius:8px;
  background:linear-gradient(180deg,#fbfdff,#ffffff);
  display:flex; align-items:center; justify-content:space-between;
}
#vcc-root .result .main { font-size:1.1rem; font-weight:700; }
#vcc-root .muted { color:var(--muted); font-size:0.9rem; }
#vcc-root .small { font-size:0.85rem; color:var(--muted); }
#vcc-root footer { margin-top:16px; font-size:0.85rem; color:var(--muted); }

@media (max-width:520px) {
  #vcc-root .controls { flex-direction:column; align-items:stretch; }
  #vcc-root .row { flex-direction:column; }
}