html, body { height: 100%; margin: 0; padding: 0;}
    * { box-sizing: border-box; }
    .app-wrap { font-family: 'DM Sans', sans-serif; height: 100%; overflow-y: auto; }
    .mono { font-family: 'Space Mono', monospace; }
    .cat-btn { transition: all 0.2s; cursor: pointer; border: 2px solid transparent; display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.75rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; }
    .cat-btn.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
    .cat-btn:not(.active):hover { background: var(--bg); border-color: var(--secondary); }
    .swap-btn { transition: transform 0.3s; }
    .swap-btn:hover { transform: rotate(180deg); }
    input[type=number] { -moz-appearance: textfield; appearance: none;}
    input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; }
    select { cursor: pointer; }
    :root {
      --bg: #f5ede3;
      --surface: #fff9f3;
      --text: #2c2416;
      --accent: #c97a3a;
      --secondary: #8b8075;
    }

body { box-sizing: border-box; }

body {
  font-family: 'DM Sans', sans-serif;
}

.app-wrap {
  background: #f5ede3;
  color: #2c2416;
}

#to-value {
  font-weight: bold;
  font-family: 'Space Mono', monospace;
}

/* Copy button */
#copy-btn {
  padding: 6px;
  border-radius: 6px;
  transition: 0.2s;
}

#copy-btn:hover {
  transform: scale(1.1);
  background: #c97a3a;
  color: white;
}