.uc-grid { max-width: 700px; margin: 0 auto; padding: 24px 0 48px; }
.cat-btns { display: flex; gap: 8px; margin-bottom: 20px; }
.cat-btn { padding: 8px 20px; font-size: 14px; border: 1px solid #e5e6eb; border-radius: 8px; background: #fff; color: #4e5969; cursor: pointer; transition: all 0.2s; }
.cat-btn:hover { border-color: #165DFF; color: #165DFF; }
.cat-btn.active { border-color: #165DFF; background: #f0f5ff; color: #165DFF; font-weight: 500; }
.cat-hint { font-size: 13px; color: #86909c; margin-bottom: 16px; }
.convert-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.convert-row input[type="number"] { width: 160px; padding: 10px 12px; border: 1px solid #e5e6eb; border-radius: 8px; font-size: 16px; text-align: center; }
.convert-row input[type="number"]:focus { border-color: #165DFF; outline: none; box-shadow: 0 0 0 2px rgba(22,93,255,0.15); }
.convert-row select { padding: 10px 12px; border: 1px solid #e5e6eb; border-radius: 8px; font-size: 14px; background: #fff; cursor: pointer; }
.convert-row .arrow { font-size: 20px; color: #165DFF; }
#btn-swap { padding: 8px 16px; border: 1px solid #e5e6eb; border-radius: 8px; background: #fff; color: #4e5969; cursor: pointer; font-size: 13px; }
#btn-swap:hover { border-color: #165DFF; color: #165DFF; }
.convert-formula { font-size: 14px; color: #4e5969; padding: 12px 16px; background: #f7f8fa; border-radius: 8px; margin-top: 8px; font-family: monospace; }
@media (max-width: 600px) {
  .convert-row { flex-wrap: wrap; }
  .convert-row input[type="number"] { width: 120px; }
}