/* ===========================================================
   HEADING CALCULATOR STYLES
=========================================================== */
.hc2-root .hc2-body { padding: 4px; overflow: auto; }
.hc2-grid {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.hc2-card {
  flex: 1; min-width: 280px;
}
.hc2-card-body {
  padding: 8px; background: #ffffff;
  display: flex; flex-direction: column; gap: 4px;
  flex: 1; overflow: auto;
}
.hc2-row {
  display: flex; gap: 8px; align-items: center;
  padding: 3px 0;
  font-family: Verdana, sans-serif; font-size: 11px;
}
.hc2-row label {
  flex: 1; color: #404040;
}
.hc2-row input[type=number] {
  border: 2px inset #ffffff; background: #ffffff;
  padding: 3px 6px; font-family: "Courier New", monospace;
  font-size: 13px; color: #000080; width: 90px;
  text-align: right;
}
.hc2-row input.readonly {
  background: #ffffe1; color: #000;
}
.hc2-row.hc2-out {
  background: #f4f4f4; padding: 4px 6px;
  border-left: 3px solid #000080;
  margin: 2px -8px 2px 0;
}
.hc2-output {
  font-family: "Courier New", monospace; font-size: 13px;
  color: #000080; font-weight: bold;
  min-width: 90px; text-align: right;
}
.hc2-rose {
  margin-top: 8px; padding: 4px;
  background: #f8f8f8; border: 1px inset #c0c0c0;
  display: flex; justify-content: center;
}
.hc2-rose-svg {
  width: 160px; height: 160px;
}