.UnitConverter { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:12px; align-items:end; padding:20px; border:1px solid rgba(117,214,210,.25); background:rgba(9,20,22,.4); }
.UnitConverter label { color:var(--academy-muted); font-size:.82rem; }
.UnitConverter input, .UnitConverter select { min-width:0; padding:11px 12px; border:1px solid rgba(117,214,210,.4); background:#102125; color:var(--academy-paper); font:inherit; }
.UnitConverter input:focus, .UnitConverter select:focus { outline:2px solid var(--academy-coral); outline-offset:2px; }
.UnitConverterResult { grid-column:1 / -1; display:grid; gap:7px; margin-top:8px; padding:16px; border-left:3px solid var(--academy-lime); background:rgba(9,20,22,.5); }
.UnitConverterResult span, .RateExample span { color:var(--academy-cyan); font:700 .68rem 'Orbitron', sans-serif; letter-spacing:.08em; }
.UnitConverterResult strong { color:var(--academy-paper); font-size:1.05rem; font-weight:400; }
.UnitConverterResult small, .RateExample small { color:var(--academy-muted); }
.RateExample { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin:22px 0; }
.RateExample div { display:grid; gap:7px; padding:16px; border-top:2px solid var(--academy-coral); background:rgba(9,20,22,.4); }
.RateExample strong { color:var(--academy-paper); font-size:1.12rem; font-weight:400; }
@media (max-width:560px) { .UnitConverter, .RateExample { grid-template-columns:1fr; } .UnitConverterResult { grid-column:auto; } }