/* Exact styles taken from original file - does not change UI/layout */
:root{
  --blue:#007BFF;
  --accent:#005fa3;
  --muted:#6b7785;
  --panel:#eef7ff;
  --card:#f9f9f9;
  --danger:#c62828;
  --radius:8px;
  --success:#00897b;
}
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial; color:#111;background:#fff}
.ccc-wrap{max-width:920px;margin:18px auto;padding:14px;box-sizing:border-box}
label{font-weight:600;display:block;margin-bottom:6px}
/* inputs */
input[type="text"], input[type="number"], select {
  width:100%;
  padding:8px 10px;
  border-radius:6px;
  border:1px solid #cbd5e1;
  font-size:14px;
  box-sizing:border-box;
}
.row { display:flex; gap:12px; align-items:center; margin-bottom:10px; flex-wrap:wrap; }
.col { flex:1; min-width:160px; }
.small { width:120px; }
.error{color:var(--danger);margin:8px 0;font-weight:700;min-height:1.2em}
.controls{display:flex;gap:12px;align-items:center;margin:6px 0;flex-wrap:wrap}
.btn-calc{background:var(--blue);color:#fff;border:0;padding:10px 20px;border-radius:8px;font-size:16px;cursor:pointer}
.btn-small{background:var(--muted);color:#fff;border:0;padding:6px 10px;border-radius:6px;font-size:13px;cursor:pointer}
.btn-small.alt{background:var(--success)}
.results{margin-top:12px;background:var(--panel);padding:12px;border-radius:8px;border:1px solid #d7ecff;white-space:pre-wrap;font-family:inherit}
.panel{background:var(--card);padding:10px;border-radius:8px;border:1px solid #e6eef8}
.hidden{display:none}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{border:1px solid #e6eef8;padding:6px;text-align:left}
.muted{color:#666;font-size:13px}
@media(max-width:640px){
  .row{flex-direction:column;align-items:stretch}
  .small{width:100%}
  .btn-calc{width:100%}
}

/* small styling for components area */
#componentsList .panel { margin-bottom:8px; }