/* =========================================================
   DALA ELECTRO — Voltage Divider Calculator styles
   Builds on the shared .rc-* classes from resistor-tool.css
   ========================================================= */

.vd-diagram{
  display:flex; justify-content:center; align-items:center;
  background:linear-gradient(180deg,var(--slate-50),var(--slate-100));
  border-radius:var(--radius-md); padding:18px 10px; margin-bottom:20px;
  border:1px dashed var(--slate-200);
}
.vd-svg{ width:100%; max-width:300px; height:auto; }

.vd-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px; margin-bottom:18px;
}
.vd-field{
  background:var(--slate-50); border:1.5px solid var(--slate-200);
  border-radius:var(--radius-md); padding:12px; transition:border-color .18s ease, background .18s ease;
}
.vd-field-label{
  display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700;
  color:var(--navy-900); margin-bottom:8px;
}
.vd-field-label i{ color:var(--blue-500); width:14px; text-align:center; }
.vd-inputrow{ display:flex; gap:8px; }
.vd-input{ flex:1 1 auto; min-width:0; width:100%; }
.vd-unit{ flex:0 0 auto; width:auto; }
.vd-suffix{
  flex:0 0 auto; display:flex; align-items:center; padding:0 10px;
  font-size:12.5px; font-weight:700; color:var(--slate-600);
  background:var(--slate-100); border-radius:var(--radius-sm);
}

.vd-field.computed{
  border-color:var(--amber-400);
  background:linear-gradient(180deg,#fff8ea,var(--slate-50));
}
.vd-field.computed .vd-field-label{ color:#a3690a; }
.vd-field.computed .vd-input{
  border-color:var(--amber-400); color:var(--navy-950); font-weight:700;
  font-family:var(--font-mono); background:#fff;
}
.vd-badge{
  display:inline-block; font-size:10.5px; font-weight:800; color:var(--navy-950);
  background:var(--amber-300); border-radius:50px; padding:1px 8px; margin-inline-start:6px;
}

.vd-actions{ display:flex; justify-content:flex-end; margin-bottom:18px; }
.vd-clear{
  border:1.5px solid var(--slate-200); background:var(--white); color:var(--slate-600);
  font-family:inherit; font-weight:700; font-size:12.5px; padding:8px 16px;
  border-radius:50px; display:flex; align-items:center; gap:6px; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.vd-clear:hover{ background:var(--slate-100); color:var(--navy-900); border-color:var(--slate-200); }

.vd-formula-box{
  text-align:center; background:var(--navy-950); border-radius:var(--radius-md);
  padding:18px 14px; color:#fff; margin-bottom:16px;
}
.vd-formula-box .vd-status{ font-size:13px; color:#b9c8ea; }
.vd-formula-box .vd-formula-text{
  font-family:var(--font-mono); font-size:16px; font-weight:700; color:var(--amber-300);
  margin-top:6px; letter-spacing:.3px; direction:ltr; display:inline-block;
}

.vd-result-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;
}
.vd-result-card{
  background:var(--slate-50); border:1px solid var(--slate-200); border-radius:var(--radius-sm);
  padding:12px 14px; text-align:center;
}
.vd-result-card span{ display:block; font-size:11.5px; color:var(--slate-600); margin-bottom:4px; }
.vd-result-card b{ font-family:var(--font-mono); font-size:15px; color:var(--navy-900); }

@media (max-width:640px){
  .vd-grid{ grid-template-columns:repeat(2,1fr); }
}