.container--encoding { max-width: 68rem; }
.encoding-panel { display: grid; gap: 1rem; }
.encoding-panel h2 { margin: 0; }
.encoding-kind,
.encoding-direction { display: grid; gap: .5rem; padding: .35rem; border: 1px solid var(--border-color, #d8dee8); border-radius: .8rem; background: #f5f7fb; }
.encoding-kind { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.encoding-direction { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 34rem; }
.encoding-kind button,
.encoding-direction button { min-height: 44px; padding: .65rem .75rem; border: 1px solid transparent; border-radius: .6rem; background: transparent; color: #172033; font: inherit; font-weight: 800; cursor: pointer; }
.encoding-kind button[aria-pressed="true"],
.encoding-direction button[aria-pressed="true"] { border-color: #0f766e; background: #fff; color: #0f766e; box-shadow: 0 1px 3px rgba(23, 32, 51, .1); }
.encoding-kind button:focus-visible,
.encoding-direction button:focus-visible,
.encoding-details summary:focus-visible { outline: 3px solid rgba(15, 118, 110, .28); outline-offset: 2px; }
.encoding-settings { padding: .9rem; border: 1px solid #d8dee8; border-radius: .75rem; background: #f8fafc; }
.encoding-settings fieldset { margin: 0; padding: 0; border: 0; }
.encoding-settings legend { margin-bottom: .55rem; font-weight: 800; }
.choice-row { display: flex; flex-wrap: wrap; gap: .65rem 1rem; }
.choice-row label,
.option-line { display: inline-flex; gap: .45rem; align-items: center; min-height: 44px; }
.encoding-field { display: grid; gap: .45rem; }
.encoding-field label,
.encoding-settings > div > label,
.details-body > label:not(.option-line) { font-weight: 800; }
#encoding-input,
#encoding-output,
#base64-file-output { width: 100%; max-width: 100%; min-height: 10rem; resize: vertical; overflow-wrap: anywhere; }
#base64-file-output { min-height: 7rem; }
.encoding-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.encoding-details { margin-top: .7rem; border: 1px solid #d8dee8; border-radius: .7rem; background: #fff; }
.encoding-details summary { min-height: 44px; padding: .75rem .9rem; font-weight: 800; cursor: pointer; }
.details-body { display: grid; gap: .8rem; padding: 0 .9rem .9rem; }
.unicode-output-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.unicode-output-grid > div { min-width: 0; padding: .7rem; border: 1px solid #d8dee8; border-radius: .6rem; }
.unicode-output-grid output { display: block; margin-top: .35rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.unicode-table-wrap { max-width: 100%; overflow-x: auto; }
.unicode-table-wrap table { min-width: 42rem; border-collapse: collapse; }
.unicode-table-wrap th,
.unicode-table-wrap td { padding: .45rem; border: 1px solid #d8dee8; text-align: left; overflow-wrap: anywhere; }
.field-note { margin: .55rem 0 0; color: #526071; }
.action-status[data-state="error"],
#base64-file-status[data-state="error"] { color: #b42318; }
.action-status[data-state="success"],
#base64-file-status[data-state="success"] { color: #087443; }
@media (max-width: 640px) {
  .encoding-kind { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .encoding-actions { display: grid; grid-template-columns: 1fr; }
  .encoding-actions .button { width: 100%; }
  .unicode-output-grid { grid-template-columns: 1fr; }
}