#currency-converter { max-width: 960px; }
#currency-converter [hidden] { display: none !important; }
.currency-form { padding: 24px 0; border-block: 1px solid var(--border-color); }
.currency-form label { display: grid; gap: 8px; min-width: 0; font-weight: 600; }
.currency-form input, .currency-form select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 48px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-surface); color: var(--text-primary); font: inherit; letter-spacing: 0; }
.currency-form small { color: var(--text-secondary); font-weight: 400; }
.currency-pair { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); gap: 16px; align-items: end; margin: 20px 0; }
.currency-icon { width: 48px; height: 48px; flex-shrink: 0; padding: 0 !important; }
.currency-actions { display: flex; gap: 12px; }
#currencyStatus { min-height: 1.5em; margin: 18px 0; overflow-wrap: anywhere; }
#currencyStatus[data-state="error"], #currencyWarning { color: var(--clr-rose, #b43349); }
.currency-result { padding: 24px 0; margin-top: 16px; border-block: 1px solid var(--border-color); overflow-wrap: anywhere; }
.currency-result strong { display: block; font-size: 30px; line-height: 1.4; letter-spacing: 0; color: var(--text-primary); }
.currency-result p { margin: 8px 0; }
.currency-ad { margin: 28px 0; overflow: hidden; text-align: center; }
.currency-form :focus-visible, #currencyUseCache:focus-visible { outline: 3px solid var(--clr-blue, #2478b8); outline-offset: 3px; }
@media (max-width: 560px) { .currency-pair { grid-template-columns: minmax(0, 1fr); gap: 12px; } .currency-icon { justify-self: center; } .currency-result strong { font-size: 24px; } }