#stock-calculator {
  box-sizing: border-box;
  width: 100%;
  max-width: 640px;
  margin: 1.5rem 0;
  padding: clamp(16px, 4vw, 28px);
  border: 1px solid #c7d9cd;
  border-radius: 16px;
  background: #f5f9f5;
  color: #23352b;
  font-family: system-ui, Arial, sans-serif;
  overflow-wrap: anywhere;
}
#stock-calculator * { box-sizing: border-box; min-width: 0; }
#stock-calculator label { display: block; margin: 16px 0 8px; font-size: 1rem; font-weight: 700; }
#stock-calculator input,
#stock-calculator select,
#stock-calculator button {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  padding: 12px;
  border: 1px solid #758a7d;
  border-radius: 8px;
  color: #23352b;
  background: #fff;
  font: inherit;
  font-size: 1rem;
}
#stock-calculator [aria-invalid="true"] { border: 2px solid #a72b25; }
#stock-calculator button { margin-top: 20px; border-color: #1b563e; background: #1b563e; color: #fff; font-weight: 700; cursor: pointer; white-space: normal; }
#stock-calculator button:disabled { background: #e0e8e2; border-color: #758a7d; color: #435a4b; cursor: default; }
#stock-calculator button:enabled:hover { background: #14432f; }
#stock-calculator :is(input, select, button):focus-visible { outline: 3px solid #1b563e; outline-offset: 3px; }
#stock-calculator :is(#stock-hint, #stock-price-hint, #stock-message) { line-height: 1.5; }
#stock-calculator #stock-message { margin: 12px 0; }
#stock-calculator #stock-results { margin-top: 20px; padding: 4px 16px; border: 1px solid #c7d9cd; border-radius: 8px; background: #fff; }
#stock-calculator #stock-results[hidden] { display: none; }
#stock-calculator #stock-results > * { padding: 12px 0; margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
#stock-calculator #stock-results > * + * { border-top: 1px solid #dce6df; }
#stock-calculator output { font-weight: 700; overflow-wrap: anywhere; }