/* V10 — converter input/result visual contract */
.converter-panel .field-grid{gap:16px}
.converter-panel .field{display:block}
.converter-panel .field-label{display:block;font-weight:800;letter-spacing:.01em;margin-bottom:7px;color:var(--text)}
.converter-panel .field-input .input-group,
.converter-panel .field-result .input-group{
  min-height:58px;border:2px solid color-mix(in srgb,var(--text) 38%,var(--line));
  border-radius:14px;background:var(--surface,#fff);overflow:hidden;
  box-shadow:0 1px 0 rgba(0,0,0,.04),0 7px 20px rgba(15,23,42,.04);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.converter-panel .field-input .input-group:focus-within{
  border-color:var(--accent,#2563eb);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent,#2563eb) 18%,transparent),0 7px 20px rgba(15,23,42,.05)
}
.converter-panel .field-result .input-group{
  background:color-mix(in srgb,var(--accent,#2563eb) 8%,var(--surface,#fff));
  border-color:color-mix(in srgb,var(--accent,#2563eb) 58%,var(--line));
}
.converter-panel .field-result .field-label::after{content:" ✓";font-weight:900;color:var(--accent,#2563eb)}
.converter-panel input,
.converter-panel output{min-height:54px;display:flex;align-items:center;font:inherit;font-size:1.08rem;font-weight:750;color:var(--text);background:transparent}
.converter-panel input{width:100%;border:0!important;outline:0!important;padding:0 14px}
.converter-panel output{width:100%;padding:0 14px;word-break:break-word}
.converter-panel .input-group select{min-height:54px;border:0;border-inline-start:1px solid var(--line);background:transparent;color:var(--text);font-weight:700;padding-inline:12px}
@media (prefers-color-scheme:dark){
 .converter-panel .field-input .input-group{background:color-mix(in srgb,var(--surface,#111827) 93%,white 7%)}
 .converter-panel .field-result .input-group{background:color-mix(in srgb,var(--accent,#60a5fa) 14%,var(--surface,#111827))}
}
@media(max-width:600px){.converter-panel .field-grid{gap:13px}.converter-panel .field-input .input-group,.converter-panel .field-result .input-group{min-height:56px}}

/* V10 — legacy converters now follow the same explicit input/result contract */
.legacy-converter-v100{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:stretch;margin:18px 0}
.legacy-converter-v100 .field-input,.legacy-converter-v100 .field-result{display:flex;flex-direction:column;justify-content:center;min-height:76px;border:2px solid color-mix(in srgb,var(--text) 38%,var(--line));border-radius:14px;padding:12px 14px;background:var(--surface,#fff);box-shadow:0 7px 20px rgba(15,23,42,.04)}
.legacy-converter-v100 .field-input:focus-within{border-color:var(--accent,#2563eb);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent,#2563eb) 18%,transparent)}
.legacy-converter-v100 .field-result{margin:0;background:color-mix(in srgb,var(--accent,#2563eb) 8%,var(--surface,#fff));border-color:color-mix(in srgb,var(--accent,#2563eb) 58%,var(--line))}
.legacy-converter-v100 .field-input input{width:100%;margin-top:7px;min-height:42px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:transparent;color:var(--text);font:inherit;font-weight:750}
.legacy-converter-v100 .conversion-result{font-size:1.2rem;color:var(--text)}
@media(max-width:620px){.legacy-converter-v100{grid-template-columns:1fr}}
@media(prefers-color-scheme:dark){.legacy-converter-v100 .field-input{background:color-mix(in srgb,var(--surface,#111827) 93%,white 7%)}.legacy-converter-v100 .field-result{background:color-mix(in srgb,var(--accent,#60a5fa) 14%,var(--surface,#111827))}}