/* Unique calculator UIs */
.sci-wrap { max-width: 420px; margin: 0 auto; }
.sci-display {
  background: #fff; border: 1px solid #bbb; border-radius: 4px;
  padding: 8px 10px; margin-bottom: 8px; min-height: 64px;
}
.sci-history { font-size: 12px; color: #666; min-height: 16px; word-break: break-all; }
.sci-screen {
  font-size: 22px; font-weight: 700; text-align: right;
  font-family: Consolas, "Courier New", monospace; margin-top: 4px;
}
.sci-pad {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px;
}
.sci-pad button {
  border: 1px solid #ccc; background: #fff; border-radius: 4px;
  padding: 10px 4px; font-size: 13px; font-weight: 700; cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
}
.sci-pad button:hover { background: #f3f3f3; }
.sci-pad .k-fn { background: #f7f4ea; }
.sci-pad .k-op { background: #eee; }
.sci-pad .k-eq { background: #ff6b1a; color: #fff; border-color: #ff6b1a; }
.sci-pad .k-ac { background: #e57373; color: #fff; border-color: #c62828; }
.sci-pad .k-wide { grid-column: span 2; }

.color-ui { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; align-items: start; max-width: 520px; }
.color-preview {
  width: 100%; min-height: 140px; aspect-ratio: 1; border: 1px solid #999; border-radius: 4px;
  background: #ff6b1a; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}
.hex-preview-meta { margin-top: 8px; font-size: 13px; font-weight: 700; font-family: Consolas, monospace; }
.color-sliders label { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; margin: 4px 0 2px; }
.color-sliders input[type="range"] { width: 100%; }
.color-codes { display: grid; gap: 10px; margin-top: 0; }
.color-codes .form-row {
  display: grid !important;
  grid-template-columns: 70px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center;
  margin: 0;
}
.color-codes .form-row label { margin: 0; }
@media (max-width: 576px) { .color-ui { grid-template-columns: 1fr; } }

.pct-stack { display: grid; gap: 10px; }
.pct-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 8px;
  font-size: 13px;
}
.pct-row input {
  width: 72px; border: 1px solid #bbb; border-radius: 3px; padding: 4px 6px; font-size: 13px;
}
.pct-row .pct-out {
  min-width: 80px; border: 1px solid #ccc; background: #fafafa;
  border-radius: 3px; padding: 4px 6px; font-weight: 700;
}

.unit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.unit-grid .full { grid-column: 1 / -1; }

.toggle-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.toggle-row button {
  border: 1px solid #bbb; background: #fff; border-radius: 4px;
  padding: 6px 10px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.toggle-row button.on { background: #ff6b1a; color: #fff; border-color: #ff6b1a; }

.table-calc { width: 100%; border-collapse: collapse; background: #fff; font-size: 13px; }
.table-calc th, .table-calc td { border: 1px solid #ccc; padding: 5px; }
.table-calc input, .table-calc select {
  width: 100%; border: 1px solid #bbb; border-radius: 3px; padding: 4px; font-size: 13px;
}
.frac-box { display: inline-grid; grid-template-rows: auto auto auto; justify-items: center; vertical-align: middle; }
.frac-box input { width: 56px; text-align: center; }
.frac-bar { width: 56px; height: 1px; background: #333; margin: 2px 0; }
.frac-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.morse-out, .code-out {
  background: #fff; border: 1px solid #ccc; border-radius: 4px;
  padding: 8px; min-height: 60px; white-space: pre-wrap; font-family: Consolas, monospace; font-size: 13px;
}