.leec-calculator {
  --leec-ink: var(--ink, #101827);
  --leec-soft: var(--ink-soft, #49566a);
  --leec-surface: var(--canvas, #f4f6f8);
  --leec-rule: var(--rule, #d8dee7);
  --leec-signal: var(--signal, #1466e8);
  --leec-signal-dark: var(--signal-dark, #0c48ad);
  --leec-signal-pale: var(--signal-pale, #e8f0ff);
  max-width: 760px;
  margin: 2.5rem 0;
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid var(--leec-rule);
  border-top: 3px solid var(--leec-signal);
  background: var(--leec-surface);
  color: var(--leec-ink);
}

.leec-calculator *, .leec-calculator *::before, .leec-calculator *::after { box-sizing: border-box; }
.leec-calculator .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.leec-calculator__header { max-width: 620px; margin-bottom: 1.5rem; }
.leec-calculator__eyebrow { margin: 0 0 .45rem; color: var(--leec-signal); font-size: .72rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.leec-calculator h2 { margin: 0 0 .65rem; color: var(--leec-ink); font-family: var(--serif, Georgia, serif); font-size: clamp(1.65rem, 5vw, 2.15rem); font-weight: 500; line-height: 1.12; }
.leec-calculator__header > p:last-child { margin: 0; color: var(--leec-soft); line-height: 1.55; }
.leec-calculator__notice { margin: 1rem 0; padding: .8rem 1rem; border-left: 3px solid var(--leec-signal); background: #fff; color: var(--leec-soft); }
.leec-calculator__fields { display: grid; gap: .9rem; }
.leec-calculator__field label { display: block; margin-bottom: .35rem; color: var(--leec-ink); font-size: .88rem; font-weight: 750; }
.leec-calculator__control { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.leec-calculator__control input, .leec-calculator__control select { min-height: 48px; border: 1px solid var(--leec-rule); background: #fff; color: var(--leec-ink); font: inherit; }
.leec-calculator__control input { width: 100%; min-width: 0; padding: .65rem .75rem; border-radius: 2px 0 0 2px; }
.leec-calculator__control select { width: 76px; padding: .55rem .35rem; border-left: 0; border-radius: 0 2px 2px 0; font-size: .9rem; }
.leec-calculator__control input:focus, .leec-calculator__control select:focus, .leec-calculator__button:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--leec-signal-pale); outline-offset: 1px; border-color: var(--leec-signal); }
.leec-calculator__actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.35rem; }
.leec-calculator__button { min-height: 46px; padding: .65rem 1rem; border: 1px solid transparent; border-radius: 2px; font: inherit; font-size: .88rem; font-weight: 800; cursor: pointer; }
.leec-calculator__button--primary { background: var(--leec-signal); color: #fff; }
.leec-calculator__button--primary:hover { background: var(--leec-signal-dark); }
.leec-calculator__button--secondary { border-color: var(--leec-rule); background: transparent; color: var(--leec-ink); }
.leec-calculator__button--secondary:hover { border-color: var(--leec-ink); }
.leec-calculator__error { margin-top: 1.1rem; padding: .8rem 1rem; border-left: 3px solid #b54708; background: #fff4e5; color: #713b08; font-weight: 700; }
.leec-calculator__results { margin-top: 1.1rem; padding: 1rem; border: 1px solid #b8cef8; background: #fff; }
.leec-calculator__results-title { margin: 0 0 .75rem; color: var(--leec-signal-dark); font-size: .76rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.leec-calculator__results dl { display: grid; grid-template-columns: auto 1fr; gap: .45rem .9rem; margin: 0; }
.leec-calculator__results dt { color: var(--leec-soft); font-size: .9rem; }
.leec-calculator__results dd { margin: 0; color: var(--leec-ink); font-weight: 800; text-align: right; }
.leec-calculator__formula { margin: 1rem 0 0; padding-top: .85rem; border-top: 1px solid var(--leec-rule); color: var(--leec-soft); font-family: var(--serif, Georgia, serif); font-size: .98rem; }
.leec-calculator__unit { display: flex; align-items: center; min-width: 76px; padding: .55rem .65rem; border: 1px solid var(--leec-rule); border-left: 0; border-radius: 0 2px 2px 0; background: #fff; color: var(--leec-soft); font-size: .9rem; }
.leec-calculator__details { grid-column: 1 / -1; padding-top: .15rem; color: var(--leec-soft); }
.leec-calculator__details summary { cursor: pointer; color: var(--leec-ink); font-size: .9rem; font-weight: 750; }
.leec-calculator__field--details { margin-top: .85rem; }
.leec-calculator__disclaimer { margin: 1rem 0 0; color: var(--leec-soft); font-size: .85rem; line-height: 1.5; }
.leec-resistor-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.25rem; border-bottom: 1px solid var(--leec-rule); padding-bottom: .75rem; }
.leec-resistor-tab { min-height: 42px; padding: .5rem .7rem; border: 1px solid var(--leec-rule); border-radius: 2px; background: #fff; color: var(--leec-ink); font: inherit; font-size: .84rem; font-weight: 750; cursor: pointer; }
.leec-resistor-tab[aria-selected="true"] { border-color: var(--leec-signal); background: var(--leec-signal-pale); color: var(--leec-signal-dark); }
.leec-resistor-tab:focus-visible { outline: 3px solid var(--leec-signal-pale); outline-offset: 2px; }
.leec-resistor-band-count { margin-bottom: .9rem; }
.leec-resistor-band-count label { display: block; margin-bottom: .35rem; font-size: .88rem; font-weight: 750; }
.leec-resistor-band-count select, .leec-calculator__field > select { width: 100%; min-height: 48px; padding: .6rem .7rem; border: 1px solid var(--leec-rule); border-radius: 2px; background: #fff; color: var(--leec-ink); font: inherit; }
.leec-resistor-help { margin: 1rem 0 0; color: var(--leec-soft); font-size: .88rem; line-height: 1.5; }
.leec-resistor-visual { margin-top: 1.2rem; padding: 1rem; border: 1px solid var(--leec-rule); background: #fff; overflow: hidden; }
.leec-resistor-body { display: flex; align-items: stretch; justify-content: center; min-height: 72px; padding: 12px 13%; border-radius: 999px; background: #d5b276; }
.leec-resistor-band { display: block; width: clamp(15px, 7vw, 26px); margin-inline: clamp(2px, 1vw, 7px); border: 1px solid rgba(0,0,0,.28); }
.leec-resistor-band--tolerance { margin-left: clamp(8px, 2.5vw, 16px); }
.leec-resistor-band--black { background:#1c2229; }.leec-resistor-band--brown { background:#754324; }.leec-resistor-band--red { background:#b5282f; }.leec-resistor-band--orange { background:#d7681a; }.leec-resistor-band--yellow { background:#d4a900; }.leec-resistor-band--green { background:#267441; }.leec-resistor-band--blue { background:#2463a7; }.leec-resistor-band--violet { background:#794098; }.leec-resistor-band--gray { background:#78818b; }.leec-resistor-band--white { background:#f4f6f8; }.leec-resistor-band--gold { background:#b78a26; }.leec-resistor-band--silver { background:#adb5bd; }.leec-resistor-band--none { background:transparent; border-style:dashed; }
.leec-resistor-band-names { margin: .75rem 0 0; color: var(--leec-soft); font-size: .85rem; line-height: 1.45; text-align: center; }

@media (min-width: 640px) { .leec-calculator__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 359px) { .leec-calculator { margin-inline: -2px; padding: 1rem; } .leec-calculator__button { flex: 1 1 100%; } }
