/* Общие стили инструментов на bytes-core (text-to-binary, text-to-hex, ascii-converter, unicode-converter,
   base32-encode-decode). Подключается в {% block head %} их шаблонов; site.css не меняется. */
.bt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px 0; }
.bt-mode label { justify-content: center; font-weight: 500; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; }
.bt-busy { color: var(--muted); }
.bt-hint { margin: 0 16px 12px; font-size: 14px; }
.bt-panel { margin: 0 16px 12px; border: 1px solid var(--border); border-radius: var(--r-ctl); min-width: 0; }
.bt-panel > summary { cursor: pointer; padding: 10px 12px; font-weight: 600; font-size: 14px; }
.bt-panel-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 12px 10px; }
.bt-scroll { overflow: auto; max-height: 420px; border-top: 1px solid var(--border); }
.bt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bt-table th, .bt-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.bt-table td { font-family: var(--mono); }
.bt-table thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; font-weight: 600; }
.bt-note { padding: 8px 12px; margin: 0; }
.options details.opt-more { width: 100%; }
.options .opt-more .group { padding-top: 2px; }
.options input[name="customSep"] { width: 90px; }
.options .invalid { border-color: var(--danger) !important; }
@media (max-width: 900px) {
  .tool > .bt-bar { order: 0; }
  .tool > .bt-hint { order: 4; }
}
@media (max-width: 768px) {
  .bt-bar { padding: 12px 12px 0; }
  .bt-mode { display: flex; width: 100%; }
  .bt-mode label { flex: 1; min-height: 44px; padding: 7px 6px; text-align: center; }
  .bt-panel { margin: 0 12px 12px; }
}