.datatype-converter-page .tool-intro { padding-top: 10px; padding-bottom: 12px; }
.datatype-workspace { display: grid; grid-template-rows: auto auto minmax(0, 1fr); max-height: var(--datatype-workspace-height, calc(100dvh - 220px)); }
.datatype-workspace:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.datatype-workspace > .workspace-bar { grid-row: 1; flex-wrap: wrap; padding: 8px 12px; gap: 8px 12px; }
.datatype-workspace .byte-assessment { flex: 1; min-height: 0; margin: 0; }
.datatype-workspace .byte-assessment .result-badge { color: var(--phosphor-soft); }
.datatype-workspace .byte-assessment:is([data-state="warning"], [data-state="error"]) .result-badge { color: var(--amber); }
.datatype-workspace-tabs { grid-row: 2; display: flex; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line); }
.datatype-workspace-tabs button { flex: 1; min-height: 44px; }
.datatype-workspace-tabs button[aria-selected="true"] { color: #031006; background: var(--phosphor); border-color: var(--phosphor); }
.datatype-panels { grid-row: 3; display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; min-width: 0; overflow: hidden; }
.datatype-values-pane, .datatype-bits-pane { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 8px 12px; }
.datatype-values-pane { max-height: 230px; border-bottom: 1px solid var(--line); }
.datatype-workspace .numeric-content { padding: 0; }
.datatype-workspace .numeric-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 12px; }
.datatype-workspace[data-mode="integer"] .numeric-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.datatype-workspace .numeric-field { margin: 0; min-width: 0; }
.datatype-workspace .numeric-field--binary { grid-column: auto; }
.datatype-workspace .numeric-field .field-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 6px; min-height: 36px; }
.datatype-workspace .numeric-field .field-head label { grid-column: 1; }
.datatype-workspace .numeric-field .field-head [data-source-label] { grid-column: 1; grid-row: 2; }
.datatype-workspace .numeric-field .field-head button { grid-column: 2; grid-row: 1 / span 2; }
.datatype-workspace .stored-result { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-height: 36px; margin: 6px 0 0; padding: 0; border: 0; font-size: .72rem; }
.datatype-workspace .stored-result > span { color: var(--muted); }
.datatype-workspace .stored-result > output { flex: 1; min-width: 120px; font-size: .82rem; }
.datatype-workspace .stored-result > button { padding: 4px 10px; font-size: .74rem; }
.datatype-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.datatype-more .byte-details { margin: 4px 0 0; }
.datatype-more .byte-details summary { padding: 8px 0; }
.datatype-support [hidden] { display: none !important; }
.datatype-support .byte-details button { font-family: var(--font-display); min-height: 36px; }
.datatype-support [data-copy] { width: 72px; flex-shrink: 0; }
.datatype-support [data-copy][data-feedback="success"] { color: var(--ice); }
.datatype-support [data-copy][data-feedback="error"] { color: var(--amber); }
.datatype-support .byte-details summary:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.datatype-workspace #datatype-range { margin: 6px 0 0; font-size: .68rem; }
.datatype-workspace .bit-inspector { border: 0; padding: 0; }
.datatype-workspace .bit-inspector .pane-head { margin: 0; }
.datatype-workspace .bit-instruction { margin: 0 0 6px; font-size: .68rem; }
.datatype-workspace .bit-field { padding: 8px; }
.datatype-workspace .bit-field-range { margin-bottom: 6px; }
.datatype-workspace .bit-field-facts > div { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 6px; margin-bottom: 4px; }
.datatype-workspace .bit-field-facts { font-size: .7rem; line-height: 1.5; }
.datatype-workspace .bit-field-facts dt { font-size: .64rem; }
.datatype-workspace .datatype-bit-selection { min-height: 0; margin: 8px 0 0; }
.datatype-workspace .datatype-bit-selection:empty { display: none; }
.datatype-workspace #datatype-bit-summary { font-size: .68rem; margin: 4px 0 0; }
.datatype-bits-empty { color: var(--muted); font-size: .8rem; line-height: 1.6; }
.datatype-bits-empty p { margin: 0 0 12px; }
.datatype-support { padding: 8px 0 0; }
.datatype-support .byte-hint { margin: 4px 0; }
.datatype-workspace :is(.datatype-values-pane, .datatype-bits-pane):focus-visible { outline: 2px solid var(--ice); outline-offset: -2px; }
.datatype-workspace[data-compact="true"] { height: var(--datatype-workspace-height, calc(100dvh - 220px)); max-height: none; min-height: 360px; }
.datatype-workspace[data-compact="true"] .datatype-panels { grid-template-rows: minmax(0, 1fr); }
.datatype-workspace[data-compact="true"] .datatype-values-pane { max-height: none; border-bottom: 0; }
@media (min-width: 1101px) {
    .datatype-workspace[data-mode="float"] .bit-groups { grid-template-columns: 176px 340px minmax(0, 1fr); }
    .datatype-workspace[data-mode="float"][data-width="64"] .bit-groups { grid-template-columns: 176px 464px minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .datatype-workspace .numeric-fields, .datatype-workspace[data-mode="integer"] .numeric-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .datatype-workspace[data-mode="float"] .numeric-field--binary { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    .datatype-workspace > .workspace-bar { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; }
    .datatype-workspace > .workspace-bar .view-tabs { grid-column: 1 / -1; }
    .datatype-workspace .byte-assessment { grid-column: 1 / -1; grid-row: 3; }
    .datatype-workspace .workspace-actions--inline { justify-self: end; }
    .datatype-workspace .numeric-fields, .datatype-workspace[data-mode="integer"] .numeric-fields, .datatype-more { grid-template-columns: minmax(0, 1fr); }
    .datatype-workspace .numeric-field--binary { grid-column: auto; }
    .datatype-workspace .bit-field[data-part="sign"] .bit-field-facts > div { display: grid; }
    .datatype-workspace :is(button, select), .datatype-support :is(button, summary) { min-height: 44px; }
    .datatype-more { grid-template-columns: minmax(0, 1fr); }
}
/* Keep mode/assessment and width/actions in two rows on roomier phones. */
@media (min-width: 381px) and (max-width: 720px) {
    .datatype-workspace > .workspace-bar { display: flex !important; }
    .datatype-workspace > .workspace-bar .view-tabs { order: 0; flex: 0 0 auto; }
    .datatype-workspace .byte-assessment { order: 1; flex: 1 1 100px; min-width: 0; }
    .datatype-workspace .width-option { order: 2; flex: 1 0 calc(100% - 172px); }
    .datatype-workspace .workspace-actions--inline { order: 3; flex: 0 0 auto; }
}