#math-base-number-converter { color:#182b45; }
.base-converter-eyebrow { margin:0; color:#2563eb; font-size:11px; font-weight:800; letter-spacing:.12em; }
.base-converter { overflow:hidden; border:1px solid #dfe6ef; border-radius:16px; background:#fff; box-shadow:0 8px 28px rgba(31,55,88,.06); }
.base-converter-form { padding:22px; background:#f6f9fd; }
.base-selector { margin:0 0 18px; padding:0; border:0; }
.base-selector legend,.base-input-field label { display:block; margin-bottom:7px; color:#43536a; font-size:13px; font-weight:700; }
.base-selector-buttons { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.base-selector-button { display:flex; min-height:54px; align-items:center; justify-content:space-between; gap:12px; padding:9px 14px; border:1px solid #cbd6e3; border-radius:9px; background:#fff; color:#43536a; text-align:start; }
.base-selector-button span { font-weight:700; }
.base-selector-button small { color:#7a8798; font-size:10px; font-weight:700; letter-spacing:.05em; }
.base-selector-button.active { border-color:#2563eb; background:#2563eb; color:#fff; box-shadow:0 3px 10px rgba(37,99,235,.18); }
.base-selector-button.active small { color:#dce9ff; }
.base-selector-button:focus-visible,.base-input-field input:focus-visible,.base-copy-button:focus-visible { outline:3px solid rgba(37,99,235,.22); outline-offset:2px; }
.base-input-field input { width:100%; min-height:58px; padding:12px 16px; border:1px solid #cbd6e3; border-radius:9px; background:#fff; color:#172033; font:600 1.25rem/1.4 Consolas,Monaco,'Courier New',monospace; }
.base-input-field input[aria-invalid="true"] { border-color:#dc3545; }
.base-input-field p { margin:6px 0 0; color:#64748b; font-size:12px; }
.base-results { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:22px 22px 12px; border-top:1px solid #e3e9f0; }
.base-result { min-width:0; padding:16px; border:1px solid #dfe6ef; border-radius:11px; background:#fff; }
.base-result-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.base-result-heading p { margin:0; font-size:13px; font-weight:700; }
.base-result-heading small { display:block; color:#7a8798; font-size:9px; font-weight:700; letter-spacing:.06em; }
.base-copy-button { display:grid; width:34px; height:34px; flex:0 0 34px; place-items:center; padding:0; border:1px solid #d8e0ea; border-radius:8px; background:#f7f9fc; color:#52657d; }
.base-copy-button:hover { border-color:#8ab0f8; color:#2563eb; }
.base-copy-button:disabled { cursor:not-allowed; opacity:.45; }
.base-copy-button .material-icons { font-size:17px; }
.base-result output { display:block; overflow-wrap:anywhere; margin-top:14px; color:#123d73; font:700 1.05rem/1.55 Consolas,Monaco,'Courier New',monospace; }
.base-converter-status { min-height:1.4em; margin:0; padding:0 22px 4px; color:#087f5b; font-size:13px; font-weight:650; }
.base-converter-status.is-error { color:#b42332; }
.base-converter-privacy { display:flex; align-items:center; gap:6px; margin:0; padding:10px 22px 16px; color:#64748b; font-size:12px; }
.base-converter-privacy .material-icons { font-size:16px; }
.base-reference,.base-explanation { margin-top:42px; }
.base-section-heading { margin-bottom:14px; }
.base-section-heading h2 { margin:2px 0 0; font-size:21px; }
.base-reference-table-wrap { overflow-x:auto; border:1px solid #dfe6ef; border-radius:12px; }
.base-reference table { width:100%; border-collapse:collapse; }
.base-reference th,.base-reference td { width:33.333%; padding:9px 16px; border-bottom:1px solid #e8edf3; text-align:start; }
.base-reference th { background:#eef3f9; color:#52657d; font-size:12px; }
.base-reference td { font-size:13px; }
.base-reference tbody tr:last-child td { border-bottom:0; }
.base-reference tbody tr:nth-child(even) { background:#f8faff; }
.base-reference code,.base-explanation code { font-family:Consolas,Monaco,'Courier New',monospace; }
.base-explanation { max-width:860px; }
.base-explanation>p { color:#52657d; }
.base-explanation pre { overflow-x:auto; padding:15px 17px; border-radius:9px; background:#172033; color:#dce7f5; }

@media (max-width:760px) {
  .base-converter-form { padding:18px; }
  .base-selector-buttons { grid-template-columns:1fr; }
  .base-selector-button { min-height:48px; }
  .base-results { grid-template-columns:1fr; padding:18px 18px 10px; }
  .base-converter-status { padding-inline:18px; }
  .base-converter-privacy { padding:10px 18px 15px; }
  .base-reference th,.base-reference td { min-width:110px; padding:8px 12px; }
}