.converter-hero { max-width: 980px; margin: 0 auto; }
.converter-card { margin-top: 28px; padding: clamp(18px,3vw,28px); border: 1px solid #e1d2cd; border-radius: 20px; background: #fff; box-shadow: 0 14px 34px rgba(61,31,26,.06); }
.category-label { display: block; margin-bottom: 7px; color: #4d302a; font-weight: 850; }
.category-select, .unit-select { width: 100%; border: 1px solid #cdbdb7; border-radius: 10px; background: #fff; color: #211512; padding: 12px 42px 12px 13px; font-weight: 700; }
.category-select { font-size: 1.06rem; }
.conversion-grid { display: grid; grid-template-columns: minmax(0,1fr) 44px minmax(0,1fr); gap: 14px; align-items: center; margin-top: 22px; }
.conversion-side { overflow: hidden; border: 1px solid #d6c7c2; border-radius: 14px; background: #fff; }
.conversion-value { display: block; width: 100%; min-height: 76px; border: 0; border-bottom: 1px solid #e1d4d0; background: #fff; padding: 14px 16px; color: #16100e; font-size: clamp(1.75rem,5vw,2.6rem); font-weight: 620; outline: none; }
.conversion-value:focus { box-shadow: inset 0 0 0 2px rgba(184,13,10,.22); }
.unit-select { border: 0; border-radius: 0; font-size: 1rem; }
.swap-button { width: 44px; height: 44px; border: 1px solid #dfcbc6; border-radius: 999px; background: #fff; color: #8b0b08; font-size: 1.25rem; font-weight: 900; }
.swap-button:hover { background: #fff4f2; }
.converter-meta { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-top: 18px; }
.formula-text { margin: 0; color: #4f3a34; }
.formula-text span { display: inline-block; margin-right: 5px; padding: 2px 7px; border-radius: 5px; background: #ffe08a; color: #2e210e; font-size: .82rem; font-weight: 850; }
.secondary-button { border: 1px solid #d7c4bf; border-radius: 9px; background: #fff; color: #6e1612; padding: 8px 11px; font-weight: 800; white-space: nowrap; }
.secondary-button:hover { background: #fff5f3; }
.converter-notes { margin-top: 26px; padding-top: 20px; border-top: 1px solid #eadbd6; }
.converter-notes h2 { margin: 0 0 5px; font-size: 1rem; }
.converter-notes p { margin: 0; color: #6e5a53; }
@media (max-width: 720px) {
  .conversion-grid { grid-template-columns: 1fr; }
  .swap-button { margin: -4px auto; transform: rotate(90deg); }
  .converter-meta { align-items: flex-start; flex-direction: column; }
}