/* Native Tools - Docker Compose Builder
 * UI redesign 012
 * Diff redesign 013
 * Eine einzige, klar gegliederte Layout-Version ohne historische Override-Kaskaden.
 */

/* =========================================================
   1. Scope, Farben und Grundlayout
   ========================================================= */

#native-tools-content[data-current-tool="docker-compose-builder"] {
    --compose-panel: color-mix(in srgb, var(--tools-card) 96%, transparent);
    --compose-panel-soft: color-mix(in srgb, var(--tools-card-2) 82%, transparent);
    --compose-panel-raised: color-mix(in srgb, var(--tools-card-2) 94%, transparent);
    --compose-line: color-mix(in srgb, var(--tools-border) 88%, transparent);
    --compose-line-strong: color-mix(in srgb, var(--tools-accent) 34%, var(--tools-border));
    --compose-accent-soft: color-mix(in srgb, var(--tools-accent) 10%, transparent);
    --compose-accent-medium: color-mix(in srgb, var(--tools-accent) 18%, transparent);
    --compose-code-bg: color-mix(in srgb, var(--tools-bg) 82%, #000000 18%);
    --compose-danger: #ff7676;
    --compose-warning: #f2b84b;
    --compose-info: #73b8ff;
    --compose-pass: #75d995;
    --compose-radius-xl: 18px;
    --compose-radius-lg: 14px;
    --compose-radius-md: 10px;
    --compose-shadow: 0 14px 38px rgba(0, 0, 0, .16);
}

#native-tools-content[data-current-tool="docker-compose-builder"] *,
#native-tools-content[data-current-tool="docker-compose-builder"] *::before,
#native-tools-content[data-current-tool="docker-compose-builder"] *::after {
    box-sizing: border-box;
}

#native-tools-content[data-current-tool="docker-compose-builder"] > .native-tools-card-grid,
#native-tools-content[data-current-tool="docker-compose-builder"] > .native-tools-tool-instance[data-tool-id="docker-compose-builder"] > .native-tools-card-grid {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
}

#native-tools-content[data-current-tool="docker-compose-builder"] > .native-tools-tool-instance[data-tool-id="docker-compose-builder"] {
    width: 100%;
    min-width: 0;
    max-width: none;
}

#native-tools-content[data-current-tool="docker-compose-builder"] > .native-tools-card-grid > .native-compose-v2,
#native-tools-content[data-current-tool="docker-compose-builder"] > .native-tools-tool-instance[data-tool-id="docker-compose-builder"] > .native-tools-card-grid > .native-compose-v2 {
    grid-column: 1 / -1;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-v2 {
    display: grid;
    grid-template-columns: minmax(700px, 1.45fr) minmax(390px, .78fr);
    gap: 18px;
    align-items: start;
    width: 100%;
    min-width: 0;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-generator-card,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-editor-card,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-output-card,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-card {
    min-width: 0;
    margin: 0 ;
    border: 1px solid var(--compose-line) ;
    border-radius: var(--compose-radius-xl);
    background: var(--compose-panel) ;
    box-shadow: none;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-generator-card,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-editor-card {
    padding: 18px ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-generator-card > h3,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-editor-card > h3,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-output-card > h3 {
    margin: 0 0 14px ;
    color: var(--tools-text);
    font-size: 17px;
    font-weight: 850;
    letter-spacing: .01em;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    min-width: 0;
}

/* =========================================================
   2. Kopfaktionen, Vorlagen und Service-Auswahl
   ========================================================= */

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-toolbar,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-editor-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px ;
    padding: 0 ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-toolbar > .native-tools-btn,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-editor-actions > .native-tools-btn {
    min-height: 36px ;
    padding: 7px 12px ;
    font-size: 13px;
    white-space: nowrap;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-toolbar > .native-tools-btn:first-child {
    min-width: 156px;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-template-controls {
    flex: 1 1 100% ;
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding: 10px ;
    border: 1px solid var(--compose-line) ;
    border-radius: var(--compose-radius-lg);
    background: var(--compose-panel-soft) ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-template-controls > label {
    margin: 0 ;
    color: var(--tools-muted);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-template-controls select,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-template-controls button {
    min-height: 36px;
    height: 36px;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-service-selector {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    margin: 0 0 14px ;
    padding: 13px ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-service-selector > label {
    grid-column: 1 / -1;
    margin: 0 ;
    font-size: 12.5px;
    font-weight: 850;
    letter-spacing: .055em;
    text-transform: uppercase;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-service-selector-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-service-selector-row select {
    font-weight: 750;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-document-summary {
    grid-column: 1 / -1;
    min-height: 0;
    color: var(--tools-muted);
    font-size: 12.5px;
    line-height: 1.4;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-document-summary:empty {
    display: none ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-unsupported {
    margin: 0 0 12px ;
    padding: 10px 12px ;
    border: 1px solid color-mix(in srgb, var(--compose-warning) 40%, var(--compose-line)) ;
    border-radius: var(--compose-radius-md);
    background: color-mix(in srgb, var(--compose-warning) 8%, transparent) ;
    color: var(--tools-text);
    font-size: 13px;
    line-height: 1.5;
}

/* =========================================================
   3. Basisbereich und Akkordeons
   ========================================================= */

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-section,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-details {
    width: 100%;
    min-width: 0;
    margin: 0 0 9px ;
    border: 1px solid var(--compose-line);
    border-radius: var(--compose-radius-lg);
    background: var(--compose-panel-soft) ;
    overflow: hidden;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-details {
    padding: 0 ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-basic {
    padding: 14px ;
    border-color: var(--compose-line-strong);
    background: linear-gradient(145deg, var(--compose-accent-soft), var(--compose-panel-soft) 42%) ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-basic > h4 {
    margin: 0 0 12px ;
    color: var(--tools-text);
    font-size: 15px;
    font-weight: 850;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-details > summary {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;
    margin: 0 ;
    padding: 11px 48px 11px 14px;
    list-style: none;
    cursor: pointer;
    user-select: none;
    color: var(--tools-text);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    transition: background-color .16s ease, color .16s ease ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-details > summary::-webkit-details-marker {
    display: none ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-details > summary::after {
    content: "+" ;
    position: absolute ;
    top: 50% ;
    right: 13px ;
    width: 24px ;
    height: 24px ;
    display: grid ;
    place-items: center ;
    transform: translateY(-50%) ;
    border: 1px solid var(--compose-line) ;
    border-radius: 999px ;
    background: color-mix(in srgb, var(--tools-card) 74%, transparent) ;
    color: var(--tools-accent) ;
    font-size: 17px ;
    font-weight: 500 ;
    line-height: 1 ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-details > summary:hover,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-details > summary:focus-visible {
    background: var(--compose-accent-soft);
    outline: none;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-details[open] {
    border-color: var(--compose-line-strong);
    background: var(--compose-panel) ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-details[open] > summary {
    border-bottom: 1px solid var(--compose-line) ;
    background: var(--compose-accent-soft) ;
    color: var(--tools-accent);
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-details[open] > summary::after {
    content: "−" ;
    border-color: var(--compose-line-strong) ;
    background: var(--compose-accent-medium) ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-details[open] > :not(summary) {
    margin-right: 14px;
    margin-left: 14px;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-details[open] > summary + * {
    margin-top: 14px;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-details[open] > :last-child:not(summary) {
    margin-bottom: 14px;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-details .native-tools-help {
    color: var(--tools-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

/* =========================================================
   4. Formulare und kompakte Feldraster
   ========================================================= */

#native-tools-content[data-current-tool="docker-compose-builder"] .native-exp-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(185px, 1fr));
    gap: 12px;
    align-items: start;
    min-width: 0;
}

#native-tools-content[data-current-tool="docker-compose-builder"] [hidden] {
    display: none ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-exp-field,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-restart-retries,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-multiline-field {
    display: grid ;
    grid-template-rows: auto minmax(40px, auto);
    gap: 7px ;
    align-content: start;
    min-width: 0;
    margin: 0 ;
    padding: 9px ;
    border: 1px solid color-mix(in srgb, var(--tools-text) 15%, var(--compose-line)) ;
    border-radius: 10px;
    background: color-mix(in srgb, var(--compose-panel-raised) 74%, transparent) ;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-exp-field:hover,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-restart-retries:hover,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-multiline-field:hover {
    border-color: color-mix(in srgb, var(--tools-text) 25%, var(--compose-line));
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-exp-field:focus-within,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-restart-retries:focus-within,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-multiline-field:focus-within {
    border-color: var(--compose-line-strong);
    background: color-mix(in srgb, var(--tools-accent) 6%, var(--compose-panel-raised));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tools-accent) 12%, transparent);
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-exp-field > label,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-exp-label,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-exp-field > span:first-child,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-restart-retries > label,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-multiline-field > span,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-multiline-field > label {
    display: block;
    min-height: 18px;
    margin: 0 ;
    color: var(--tools-text);
    font-size: 13.5px;
    font-weight: 820;
    letter-spacing: .005em;
    line-height: 1.3 ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] input:not([type="checkbox"]):not([type="radio"]),
#native-tools-content[data-current-tool="docker-compose-builder"] select {
    min-height: 40px ;
    height: 40px;
    padding: 7px 10px ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] textarea {
    padding: 9px 10px ;
    line-height: 1.45;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-multiline-field > textarea {
    display: block;
    visibility: visible;
    min-height: 72px;
    height: 72px;
    opacity: 1;
    resize: vertical;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-multiline-field > .native-exp-label {
    align-self: start;
}

#native-tools-content[data-current-tool="docker-compose-builder"] input::placeholder,
#native-tools-content[data-current-tool="docker-compose-builder"] textarea::placeholder {
    opacity: 1 ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-exp-field:focus-within > label,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-exp-field:focus-within .native-exp-label,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-exp-field:focus-within > span:first-child,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-multiline-field:focus-within > span {
    color: var(--tools-accent);
}

#native-tools-content[data-current-tool="docker-compose-builder"] button:not(.ui-btn):focus-visible,
#native-tools-content[data-current-tool="docker-compose-builder"] summary:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--tools-accent) 70%, transparent);
    outline-offset: 2px;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-two-col textarea,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-multiline-field textarea {
    min-height: 72px;
    height: 72px;
    resize: vertical;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px ;
    margin-top: 11px ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-chip-list .native-tools-chip-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 ;
    border: 1px solid var(--compose-line);
    border-radius: 999px;
    background: var(--compose-panel-soft);
    color: var(--tools-text);
    cursor: pointer;
}

#native-tools-content[data-current-tool="docker-compose-builder"] input[type="checkbox"],
#native-tools-content[data-current-tool="docker-compose-builder"] input[type="radio"] {
    accent-color: var(--tools-accent);
}

/* =========================================================
   5. Strukturierte Zeilen und Tabellen
   ========================================================= */

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
    min-width: 0;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-editor {
    min-width: 0;
    margin: 0;
    padding: 10px ;
    border: 1px solid var(--compose-line) ;
    border-radius: 12px;
    background: color-mix(in srgb, var(--compose-panel-soft) 86%, transparent) ;
    overflow: hidden;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-editor-head {
    display: flex;
    align-items: center ;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 8px ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-editor-head h4 {
    min-width: 0;
    margin: 0 ;
    overflow: hidden;
    color: var(--tools-text);
    font-weight: 820;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-add-row {
    flex: 0 0 auto;
    min-height: 30px;
    height: 30px;
    padding: 4px 9px ;
    border-radius: 8px;
    font-size: 12.5px;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-table-scroll {
    width: 100%;
    min-width: 0;
    overflow: visible;
    border: 0 ;
    border-radius: 0;
    background: transparent ;
}

/*
 * Tabellen werden bewusst als responsive Feldkarten dargestellt.
 * Dadurch steht die Bezeichnung direkt am Eingabefeld und keine
 * Konfigurationszeile benötigt horizontalen Scroll.
 */
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-table,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-table tbody {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0 ;
    border: 0 ;
    border-collapse: separate;
    table-layout: fixed;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-table thead {
    display: none;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-table tbody tr {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: 9px 10px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0 0 9px ;
    padding: 10px 50px 10px 10px ;
    border: 1px solid color-mix(in srgb, var(--compose-line) 84%, transparent) ;
    border-radius: 10px;
    background: color-mix(in srgb, var(--compose-panel-raised) 86%, transparent) ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-table tbody tr:last-child {
    margin-bottom: 0;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-table tbody tr:hover {
    border-color: var(--compose-line-strong);
    background: color-mix(in srgb, var(--tools-accent) 5%, var(--compose-panel-raised));
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-table td {
    display: grid;
    grid-template-rows: auto minmax(32px, auto);
    align-content: start;
    gap: 4px;
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding: 0 ;
    border: 0 ;
    background: transparent ;
    vertical-align: top;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-table td[data-compose-label]::before {
    content: attr(data-compose-label) ;
    display: block ;
    margin: 0 ;
    overflow: visible ;
    letter-spacing: .012em ;
    overflow-wrap: anywhere ;
    white-space: normal ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-table input:not([type="checkbox"]),
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-table select,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-table textarea {
    margin: 0 ;
    font-size: 13.5px;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-table input:not([type="checkbox"]),
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-table select {
    min-height: 34px;
    height: 34px;
    padding: 5px 8px ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-table textarea {
    min-height: 62px;
    padding: 7px 8px ;
    resize: vertical;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-table-check {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    width: 100%;
    min-width: 0;
    min-height: 34px;
    margin: 0 ;
    padding: 5px 8px ;
    border: 1px solid color-mix(in srgb, var(--tools-text) 24%, var(--compose-line)) ;
    border-radius: 7px;
    background: color-mix(in srgb, var(--compose-panel-soft) 92%, var(--tools-bg)) ;
    color: var(--tools-text);
    font-size: 13px;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-remove-cell {
    position: static;
    display: contents;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-remove-row {
    position: absolute;
    top: 50%;
    right: 9px;
    width: 31px;
    height: 31px;
    min-width: 31px;
    min-height: 31px;
    margin: 0 ;
    padding: 0 ;
    transform: translateY(-50%);
    border: 1px solid color-mix(in srgb, var(--compose-danger) 40%, var(--compose-line)) ;
    border-radius: 999px;
    background: color-mix(in srgb, var(--compose-danger) 9%, var(--compose-panel-raised)) ;
    color: var(--compose-danger);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-remove-row:hover {
    background: var(--compose-danger);
    color: #111111;
}

/* Häufige Zwei-Feld-Zeilen nutzen den vorhandenen Platz gleichmäßig. */
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-editor-env .native-compose-row-table tbody tr,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-editor-labels .native-compose-row-table tbody tr,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-editor-buildArgs .native-compose-row-table tbody tr,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-editor-loggingOptions .native-compose-row-table tbody tr,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-editor-driverOpts .native-compose-row-table tbody tr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* =========================================================
   6. YAML-Editor und Dateiimport
   ========================================================= */

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-editor-card {
    align-self: start;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-dropzone {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    min-height: 62px;
    margin: 0 0 9px ;
    padding: 10px 12px ;
    border: 1px dashed color-mix(in srgb, var(--tools-accent) 48%, var(--compose-line)) ;
    border-radius: var(--compose-radius-lg);
    background: var(--compose-accent-soft) ;
    cursor: pointer;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-dropzone::before {
    content: "YML" ;
    grid-row: 1 / 3 ;
    width: 38px ;
    height: 38px ;
    display: grid ;
    place-items: center ;
    border-radius: 10px ;
    background: var(--compose-accent-medium) ;
    color: var(--tools-accent) ;
    font-size: 10px ;
    font-weight: 950 ;
    letter-spacing: .04em ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-dropzone strong {
    color: var(--tools-text);
    font-size: 12.5px;
    line-height: 1.25;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-dropzone span {
    color: var(--tools-muted);
    font-size: 12.5px;
    line-height: 1.3;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-dropzone:hover,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-dropzone:focus-visible {
    border-style: solid;
    background: var(--compose-accent-medium);
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-file-meta {
    min-height: 0;
    margin: 0 0 6px ;
    color: var(--tools-text);
    font-size: 12.5px;
    font-weight: 700;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-file-meta:empty {
    display: none ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-local-note {
    position: relative;
    margin: 0 0 9px ;
    padding-left: 17px;
    color: var(--tools-muted);
    font-size: 12.5px;
    line-height: 1.45;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-local-note::before {
    content: "•" ;
    position: absolute ;
    left: 4px ;
    color: var(--compose-pass) ;
    font-size: 16px ;
    line-height: .8 ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-editor-input,
#native-tools-content[data-current-tool="docker-compose-builder"] #tool-compose-output-yml,
#native-tools-content[data-current-tool="docker-compose-builder"] #tool-compose-output-run {
    font-family: "JetBrains Mono", "Cascadia Mono", Consolas, Monaco, "Courier New", monospace ;
    tab-size: 2;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-editor-input {
    min-height: 300px ;
    height: 34vh;
    max-height: 560px;
    resize: vertical;
    border-color: color-mix(in srgb, var(--compose-line) 82%, transparent);
    background: var(--compose-code-bg) ;
    color: var(--tools-text);
    font-size: 13px;
    line-height: 1.5;
}

/* =========================================================
   7. Analyse
   ========================================================= */

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis {
    max-height: 500px;
    margin-top: 12px;
    padding: 10px ;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--compose-line) ;
    border-radius: var(--compose-radius-lg);
    background: color-mix(in srgb, var(--compose-panel-soft) 82%, transparent) ;
    scrollbar-width: thin;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis:empty {
    display: none ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 8px ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-summary strong {
    color: var(--tools-text);
    font-size: 13px;
    font-weight: 850;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-summary span {
    color: var(--tools-muted);
    font-size: 12.5px;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-controls {
    display: grid;
    gap: 8px;
    margin: 0 0 10px ;
    padding: 9px ;
    border: 1px solid var(--compose-line) ;
    border-radius: 10px;
    background: var(--compose-panel-raised) ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-filter-chips {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-filter-chips label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 29px;
    margin: 0 ;
    padding: 4px 6px ;
    border: 1px solid var(--compose-line) ;
    border-radius: 8px;
    background: var(--compose-panel-soft) ;
    color: var(--tools-text);
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-filter-chips .is-critical {
    border-color: color-mix(in srgb, var(--compose-danger) 34%, var(--compose-line));
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-filter-chips .is-warning {
    border-color: color-mix(in srgb, var(--compose-warning) 34%, var(--compose-line));
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-filter-chips .is-info {
    border-color: color-mix(in srgb, var(--compose-info) 34%, var(--compose-line));
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-filter-chips .is-pass {
    border-color: color-mix(in srgb, var(--compose-pass) 34%, var(--compose-line));
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-filter-fields {
    display: grid;
    grid-template-columns: minmax(120px, .65fr) minmax(150px, 1fr) auto;
    gap: 7px;
    align-items: end;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-filter-fields label {
    display: grid;
    gap: 4px;
    margin: 0 ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-filter-fields label > span {
    color: var(--tools-muted);
    font-size: 12px;
    font-weight: 800;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-filter-fields input,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-filter-fields select,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-filter-fields button {
    min-height: 32px;
    height: 34px;
    font-size: 12.5px;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-group {
    margin: 0 0 9px ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-group:last-child {
    margin-bottom: 0;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-group > h4 {
    margin: 0 0 5px ;
    color: var(--tools-muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .055em;
    text-transform: uppercase;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-item {
    display: grid;
    margin: 0 0 5px ;
    border: 1px solid var(--compose-line) ;
    border-left-width: 3px;
    border-radius: 9px;
    background: var(--compose-panel-soft) ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-item.is-critical {
    border-left-color: var(--compose-danger);
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-item.is-warning {
    border-left-color: var(--compose-warning);
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-item.is-info {
    border-left-color: var(--compose-info);
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-item.is-pass {
    border-left-color: var(--compose-pass);
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-severity {
    display: inline-flex;
    justify-content: center;
    min-height: 22px;
    padding: 4px 6px ;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tools-text) 7%, transparent) ;
    color: var(--tools-muted);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-item.is-critical .native-compose-analysis-severity {
    color: var(--compose-danger);
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-item.is-warning .native-compose-analysis-severity {
    color: var(--compose-warning);
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-item.is-info .native-compose-analysis-severity {
    color: var(--compose-info);
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-item.is-pass .native-compose-analysis-severity {
    color: var(--compose-pass);
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-message {
    min-width: 0;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-message p {
    margin: 1px 0 0 ;
    color: var(--tools-text);
    font-size: 12.5px;
    line-height: 1.4;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-item-actions {
    display: flex;
    gap: 5px;
    margin-top: 6px;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-item-actions .native-tools-btn {
    min-height: 27px;
    padding: 4px 7px ;
    border-radius: 7px;
    font-size: 12px;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-empty,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-ok,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-warn {
    padding: 10px ;
    border: 1px solid var(--compose-line) ;
    border-radius: 9px;
    background: var(--compose-panel-soft) ;
    color: var(--tools-muted);
    font-size: 12.5px;
}

/* =========================================================
   8. Änderungen / Diff
   ========================================================= */

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-card {
    padding: 15px ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-head h3 {
    margin: 0 0 3px ;
    color: var(--tools-text);
    font-size: 15px;
    font-weight: 850;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-head p {
    margin: 0 ;
    color: var(--tools-muted);
    font-size: 13px;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    margin: 0 ;
    padding: 6px 10px ;
    border: 1px solid var(--compose-line) ;
    border-radius: 9px;
    background: var(--compose-panel-raised) ;
    color: var(--tools-text);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-toggle input {
    width: 18px;
    height: 18px;
    margin: 0 ;
    accent-color: var(--tools-accent);
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-scroll {
    max-height: 430px;
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--compose-line) ;
    border-radius: 11px;
    background: var(--compose-code-bg) ;
    scrollbar-width: thin;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-rows {
    display: block;
    width: max-content;
    min-width: 100%;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-entry {
    display: block;
    width: 100%;
    min-width: max-content;
    border-bottom: 1px solid color-mix(in srgb, var(--compose-line) 58%, transparent) ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-entry:last-child {
    border-bottom: 0 ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-line {
    display: grid;
    grid-template-columns: 28px 42px minmax(640px, 1fr);
    width: 100%;
    min-width: max-content;
    min-height: 34px;
    align-items: stretch;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-line + .native-compose-diff-line {
    border-top: 1px solid color-mix(in srgb, var(--compose-line) 46%, transparent) ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-marker,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-number {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 7px 5px ;
    border-right: 1px solid color-mix(in srgb, var(--compose-line) 58%, transparent) ;
    font-family: Consolas, Monaco, monospace;
    font-size: 12.5px;
    line-height: 1.45;
    user-select: none;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-marker {
    font-size: 15px;
    font-weight: 900;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-code {
    display: block;
    min-width: 640px;
    width: auto;
    margin: 0 ;
    padding: 7px 10px ;
    overflow: visible;
    color: var(--tools-text);
    background: transparent ;
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
    line-height: 1.45;
    white-space: pre;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    tab-size: 2;
    scrollbar-width: thin;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-line.is-before {
    background: color-mix(in srgb, var(--compose-danger) 13%, transparent) ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-line.is-before .native-compose-diff-marker,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-line.is-before .native-compose-diff-code {
    color: color-mix(in srgb, var(--compose-danger) 88%, var(--tools-text));
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-line.is-after {
    background: color-mix(in srgb, var(--compose-pass) 13%, transparent) ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-line.is-after .native-compose-diff-marker,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-line.is-after .native-compose-diff-code {
    color: color-mix(in srgb, var(--compose-pass) 88%, var(--tools-text));
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-line.is-context {
    opacity: .76;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-gap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    border-bottom: 1px solid color-mix(in srgb, var(--compose-line) 58%, transparent) ;
    background: color-mix(in srgb, var(--compose-panel-raised) 64%, transparent) ;
    color: var(--tools-muted);
    font-size: 14px;
    letter-spacing: .3em;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-empty {
    padding: 18px 12px ;
    border: 1px dashed var(--compose-line) ;
    border-radius: 10px;
    color: var(--tools-muted);
    font-size: 13px;
    text-align: center;
}

/* =========================================================
   9. Helles Design
   ========================================================= */

body.light-mode #native-tools-content[data-current-tool="docker-compose-builder"],
html.light-mode body #native-tools-content[data-current-tool="docker-compose-builder"] {
    --compose-panel: #ffffff;
    --compose-panel-soft: #f5f6f8;
    --compose-panel-raised: #ffffff;
    --compose-line: rgba(0, 0, 0, .12);
    --compose-line-strong: color-mix(in srgb, var(--tools-accent) 32%, rgba(0, 0, 0, .16));
    --compose-accent-soft: color-mix(in srgb, var(--tools-accent) 6%, transparent);
    --compose-accent-medium: color-mix(in srgb, var(--tools-accent) 11%, transparent);
    --compose-code-bg: #f7f8fa;
    --compose-shadow: 0 12px 32px rgba(0, 0, 0, .07);
}

body.light-mode #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-generator-card,
body.light-mode #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-editor-card,
html.light-mode body #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-generator-card,
html.light-mode body #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-editor-card {
    box-shadow: var(--compose-shadow);
}

/* =========================================================
   10. Desktop und Tablet
   ========================================================= */

@media (min-width: 1900px) {
    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-grid-phase2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1550px) {
    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-v2 {
        grid-template-columns: minmax(0, 1fr);
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-side {
        grid-template-columns: minmax(0, 1fr);
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-output-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-editor-input {
        height: 300px;
    }
}

@media (max-width: 1160px) {
    #native-tools-content[data-current-tool="docker-compose-builder"] .native-exp-form-grid {
        grid-template-columns: repeat(3, minmax(145px, 1fr));
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-grid,
    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-top-level-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 850px) {
    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-generator-card,
    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-editor-card {
        padding: 14px ;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-exp-form-grid {
        grid-template-columns: repeat(2, minmax(130px, 1fr));
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-two-col,
    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-output-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-filter-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-filter-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-filter-fields > button {
        grid-column: 1 / -1;
    }
}

/* =========================================================
   11. Smartphone und Touch
   ========================================================= */

@media (max-width: 680px), (hover: none) and (pointer: coarse) and (max-width: 920px) {
    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-v2,
    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-side {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-generator-card,
    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-editor-card,
    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-output-card,
    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-card {
        width: 100%;
        max-width: 100%;
        margin-bottom: 10px;
        border-radius: 15px;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-generator-card,
    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-editor-card {
        padding: 11px ;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-toolbar,
    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-editor-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-toolbar > .native-tools-btn,
    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-editor-actions > .native-tools-btn {
        width: 100%;
        min-width: 0;
        white-space: normal;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-template-controls {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-template-controls label {
        display: none;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-service-selector-row {
        grid-template-columns: minmax(0, 1fr);
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-exp-form-grid,
    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-grid,
    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-two-col,
    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-output-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-details > summary {
        min-height: 47px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-table-scroll {
        overflow: visible;
        border: 0 ;
        background: transparent ;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-table,
    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-table tbody,
    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-table tr,
    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-table td {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-table {
        min-width: 0;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-table thead {
        display: none;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-table tr {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        margin: 0 0 9px ;
        padding: 10px 50px 10px 10px ;
        border: 1px solid var(--compose-line) ;
        border-radius: 11px;
        background: var(--compose-panel-raised) ;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-table td {
        padding: 0 ;
        border: 0 ;
        background: transparent ;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-table td[data-compose-label]::before {
        content: attr(data-compose-label) ;
        display: block ;
        margin: 0 0 3px ;
        color: var(--tools-muted) ;
        font-weight: 820 ;
        line-height: 1.25 ;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-remove-cell {
        position: static;
        display: contents;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-remove-row {
        position: absolute;
        top: 50%;
        right: 9px;
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        transform: translateY(-50%);
        border-radius: 999px;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-editor-input {
        min-height: 40dvh;
        height: 40dvh;
        max-height: 58dvh ;
        font-size: 12px ;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis {
        max-height: 56dvh;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-filter-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-filter-fields > button {
        grid-column: auto;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-item {
        grid-template-columns: minmax(0, 1fr);
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-severity {
        justify-self: start;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-output-card textarea {
        min-height: 30dvh;
        height: 30dvh;
        max-height: 54dvh;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-head {
        align-items: flex-start;
        flex-direction: column;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-columns-head {
        display: none;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-row {
        grid-template-columns: minmax(0, 1fr);
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-side + .native-compose-diff-side {
        border-top: 1px solid var(--compose-line) ;
        border-left: 0 ;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-side::before {
        content: attr(data-compose-title) ;
        grid-column: 1 / -1 ;
        display: block ;
        padding: 6px 10px ;
        border-bottom: 1px solid color-mix(in srgb, var(--compose-line) 58%, transparent) ;
        background: color-mix(in srgb, var(--compose-panel-raised) 72%, transparent) ;
        color: var(--tools-muted) ;
        font-size: 12px;
        font-weight: 850 ;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-code {
        min-width: 0;
    }
}

/* Mobile Schrittsteuerung aus dem bestehenden Tools-Shell-Modul. */
html.native-tools-mobile-mode body.tools-page #native-tools-content[data-current-tool="docker-compose-builder"] {
    padding-bottom: calc(var(--native-tools-mobile-shell-height, 78px) + env(safe-area-inset-bottom, 0px) + 14px);
    overflow-x: hidden;
}

html.native-tools-mobile-mode body.tools-page #native-tools-content[data-current-tool="docker-compose-builder"] .native-tools-mobile-compose-wizard {
    position: sticky;
    top: 0;
    z-index: 70;
    display: grid;
    gap: 7px;
    margin: 0 0 10px ;
    padding: 8px ;
    border: 1px solid var(--compose-line) ;
    border-radius: 14px;
    background: color-mix(in srgb, var(--compose-panel) 95%, transparent) ;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

html.native-tools-mobile-mode body.tools-page #native-tools-content[data-current-tool="docker-compose-builder"] .native-tools-mobile-compose-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
}

html.native-tools-mobile-mode body.tools-page #native-tools-content[data-current-tool="docker-compose-builder"] .native-tools-mobile-compose-steps button {
    min-width: 0;
    min-height: 46px;
    display: grid;
    grid-template-rows: auto auto;
    place-items: center;
    gap: 3px;
    padding: 5px 3px ;
    border: 1px solid var(--compose-line) ;
    border-radius: 9px;
    background: var(--compose-panel-soft) ;
    color: var(--tools-muted);
}

html.native-tools-mobile-mode body.tools-page #native-tools-content[data-current-tool="docker-compose-builder"] .native-tools-mobile-compose-steps button.is-active,
html.native-tools-mobile-mode body.tools-page #native-tools-content[data-current-tool="docker-compose-builder"] .native-tools-mobile-compose-steps button[aria-current="step"] {
    border-color: var(--compose-line-strong);
    background: var(--compose-accent-medium) ;
    color: var(--tools-accent);
}

html.native-tools-mobile-mode body.tools-page #native-tools-content[data-current-tool="docker-compose-builder"] .native-tools-mobile-compose-steps span {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 12%, transparent) ;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}

html.native-tools-mobile-mode body.tools-page #native-tools-content[data-current-tool="docker-compose-builder"] .native-tools-mobile-compose-steps strong {
    max-width: 100%;
    overflow: hidden;
    font-size: 11.5px;
    font-weight: 850;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.native-tools-mobile-mode body.tools-page #native-tools-content[data-current-tool="docker-compose-builder"] .native-tools-mobile-compose-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

html.native-tools-mobile-mode body.tools-page #native-tools-content[data-current-tool="docker-compose-builder"][data-mobile-compose-step="basic"] .native-compose-side,
html.native-tools-mobile-mode body.tools-page #native-tools-content[data-current-tool="docker-compose-builder"][data-mobile-compose-step="basic"] .native-compose-grid,
html.native-tools-mobile-mode body.tools-page #native-tools-content[data-current-tool="docker-compose-builder"][data-mobile-compose-step="basic"] .native-compose-details {
    display: none;
}

html.native-tools-mobile-mode body.tools-page #native-tools-content[data-current-tool="docker-compose-builder"][data-mobile-compose-step="advanced"] .native-compose-side,
html.native-tools-mobile-mode body.tools-page #native-tools-content[data-current-tool="docker-compose-builder"][data-mobile-compose-step="advanced"] .native-compose-basic {
    display: none;
}

html.native-tools-mobile-mode body.tools-page #native-tools-content[data-current-tool="docker-compose-builder"][data-mobile-compose-step="editor"] .native-compose-generator-card,
html.native-tools-mobile-mode body.tools-page #native-tools-content[data-current-tool="docker-compose-builder"][data-mobile-compose-step="editor"] .native-compose-output-grid,
html.native-tools-mobile-mode body.tools-page #native-tools-content[data-current-tool="docker-compose-builder"][data-mobile-compose-step="editor"] .native-compose-diff-card {
    display: none;
}

html.native-tools-mobile-mode body.tools-page #native-tools-content[data-current-tool="docker-compose-builder"][data-mobile-compose-step="output"] .native-compose-generator-card,
html.native-tools-mobile-mode body.tools-page #native-tools-content[data-current-tool="docker-compose-builder"][data-mobile-compose-step="output"] .native-compose-editor-card {
    display: none;
}

/* =========================================================
   12. Bewegungsreduktion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    #native-tools-content[data-current-tool="docker-compose-builder"] *,
    #native-tools-content[data-current-tool="docker-compose-builder"] *::before,
    #native-tools-content[data-current-tool="docker-compose-builder"] *::after {
        scroll-behavior: auto ;
        transition: none ;
    }
}

/* =========================================================
   12. Lesbarkeit und eindeutige Feldzuordnung (009)
   ========================================================= */

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-editor-head h4 {
    font-size: 14px ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-add-row,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-tools-btn,
#native-tools-content[data-current-tool="docker-compose-builder"] button {
    font-size: 13px;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-table td[data-compose-label]::before {
    min-height: 17px ;
    margin-bottom: 2px ;
    color: var(--tools-text) ;
    font-size: 12.5px;
    font-weight: 820 ;
    line-height: 1.3;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-table input:not([type="checkbox"]),
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-table select,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-table textarea,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-table-check {
    font-size: 13.5px;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-table input:not([type="checkbox"]),
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-table select,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-table-check {
    min-height: 38px;
    height: 38px;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-chip-list .native-tools-chip-checkbox {
    min-height: 38px;
    padding: 7px 11px ;
    font-size: 13px;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-details .native-tools-help,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-local-note,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-file-meta,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-dropzone span,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-document-summary {
    font-size: 12.5px;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-filter-chips label,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-filter-fields label > span,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-group > h4,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-severity,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-item-actions .native-tools-btn {
    font-size: 12px;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-message p,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-summary span,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-head p,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-toggle,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-scroll th,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-number,
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-code {
    font-size: 12.5px;
}

@media (max-width: 680px), (hover: none) and (pointer: coarse) and (max-width: 920px) {
    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-table td[data-compose-label]::before {
        font-size: 12.5px;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-tools-mobile-compose-steps strong {
        font-size: 11.5px;
    }
}

/* =========================================================
   10. Bedingte Felder – die komplette Feldkachel ausblenden
   ========================================================= */

html body #native-tools-content[data-current-tool="docker-compose-builder"] .native-exp-field[hidden],
html body #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-restart-retries[hidden],
html body #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-editor[hidden],
html body #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-chip-list[hidden],
html body #native-tools-content[data-current-tool="docker-compose-builder"] input[hidden],
html body #native-tools-content[data-current-tool="docker-compose-builder"] textarea[hidden],
html body #native-tools-content[data-current-tool="docker-compose-builder"] select[hidden],
html body #native-tools-content[data-current-tool="docker-compose-builder"] button[hidden],
html body #native-tools-content[data-current-tool="docker-compose-builder"] div[hidden],
html body #native-tools-content[data-current-tool="docker-compose-builder"] section[hidden] {
    display: none ;
}

/* Service-Konfiguration und dynamische Zeilen (012) */
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-service-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
    min-width: 0;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-service-column {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-content: start;
    min-width: 0;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-service-column > .native-compose-row-editor {
    width: 100%;
    min-width: 0;
    align-self: start;
}

#native-tools-content[data-current-tool="docker-compose-builder"] :is(
    .native-compose-row-editor-env,
    .native-compose-row-editor-labels,
    .native-compose-row-editor-buildArgs,
    .native-compose-row-editor-logOptions,
    .native-compose-row-editor-sysctls,
    .native-compose-row-editor-extraHosts
) .native-compose-row-table tbody tr {
    grid-template-columns: repeat(2, minmax(0, 1fr)) 38px;
    grid-auto-rows: auto;
    align-items: end;
    gap: 7px 9px;
    min-height: 0;
    padding: 9px ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] :is(
    .native-compose-row-editor-env,
    .native-compose-row-editor-labels,
    .native-compose-row-editor-buildArgs,
    .native-compose-row-editor-logOptions,
    .native-compose-row-editor-sysctls,
    .native-compose-row-editor-extraHosts
) .native-compose-remove-cell {
    display: flex;
    grid-column: 3;
    grid-row: 1;
    align-items: flex-end;
    justify-content: center;
    min-width: 38px;
}

#native-tools-content[data-current-tool="docker-compose-builder"] :is(
    .native-compose-row-editor-env,
    .native-compose-row-editor-labels,
    .native-compose-row-editor-buildArgs,
    .native-compose-row-editor-logOptions,
    .native-compose-row-editor-sysctls,
    .native-compose-row-editor-extraHosts,
    .native-compose-row-editor-depends
) .native-compose-remove-row {
    position: static;
    top: auto;
    right: auto;
    transform: none;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-editor-depends .native-compose-row-table tbody tr {
    grid-template-columns: minmax(105px, .75fr) minmax(145px, 1fr) minmax(205px, 1.25fr) 38px;
    grid-template-rows: auto auto;
    align-items: end;
    gap: 8px 10px;
    min-height: 0;
    padding: 9px ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-editor-depends td[data-compose-column="syntax"] {
    grid-column: 1;
    grid-row: 1;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-editor-depends td[data-compose-column="name"] {
    grid-column: 2;
    grid-row: 1;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-editor-depends td[data-compose-column="condition"] {
    grid-column: 3;
    grid-row: 1;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-editor-depends td[data-compose-column="restart"] {
    grid-column: 1;
    grid-row: 2;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-editor-depends td[data-compose-column="required"] {
    grid-column: 2;
    grid-row: 2;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-editor-depends .native-compose-remove-cell {
    display: flex;
    grid-column: 4;
    grid-row: 1 / 3;
    align-self: center;
    align-items: center;
    justify-content: center;
    min-width: 38px;
}

@media (max-width: 1160px) {
    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-service-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-editor-depends .native-compose-row-table tbody tr {
        grid-template-columns: repeat(2, minmax(0, 1fr)) 38px;
        grid-template-rows: auto auto auto;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-editor-depends td[data-compose-column="syntax"] {
        grid-column: 1;
        grid-row: 1;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-editor-depends td[data-compose-column="name"] {
        grid-column: 2;
        grid-row: 1;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-editor-depends td[data-compose-column="condition"] {
        grid-column: 1 / 3;
        grid-row: 2;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-editor-depends td[data-compose-column="restart"] {
        grid-column: 1;
        grid-row: 3;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-editor-depends td[data-compose-column="required"] {
        grid-column: 2;
        grid-row: 3;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-editor-depends .native-compose-remove-cell {
        grid-column: 3;
        grid-row: 1 / 4;
    }
}

@media (max-width: 520px) {
    #native-tools-content[data-current-tool="docker-compose-builder"] :is(
        .native-compose-row-editor-env,
        .native-compose-row-editor-labels,
        .native-compose-row-editor-buildArgs,
        .native-compose-row-editor-logOptions,
        .native-compose-row-editor-sysctls,
        .native-compose-row-editor-extraHosts,
        .native-compose-row-editor-depends
    ) .native-compose-row-table tbody tr {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        padding-right: 49px;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-row-editor-depends td[data-compose-column] {
        grid-column: 1;
        grid-row: auto;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] :is(
        .native-compose-row-editor-env,
        .native-compose-row-editor-labels,
        .native-compose-row-editor-buildArgs,
        .native-compose-row-editor-logOptions,
        .native-compose-row-editor-sysctls,
        .native-compose-row-editor-extraHosts,
        .native-compose-row-editor-depends
    ) .native-compose-remove-cell {
        position: absolute;
        top: 9px;
        right: 9px;
        display: block;
        width: 31px;
        min-width: 31px;
    }
}

/* =========================================================
   14. Editor-Copy, kompakter Diff und Analyse-Fokus
   ========================================================= */

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-editor-code-wrap {
    display: block;
    min-width: 0;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-editor-code-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    margin: 0 0 7px ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-editor-code-head > label {
    min-width: 0;
    margin: 0 ;
    color: var(--tools-text);
    font-size: 15px;
    font-weight: 850;
    line-height: 1.3;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-editor-copy-btn {
    appearance: none;
    position: static;
    flex: 0 0 auto ;
    min-width: 78px;
    height: 32px;
    padding: 0 12px ;
    border: 1px solid color-mix(in srgb, var(--tools-text) 16%, transparent) ;
    border-radius: 7px;
    background: rgba(96, 106, 116, .94) ;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2) ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-editor-copy-btn:hover {
    background: rgba(124, 134, 145, .98);
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-editor-copy-btn:disabled {
    opacity: .78;
    cursor: default;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-editor-code-wrap .native-compose-editor-input {
    display: block;
    width: 100%;
    margin: 0 ;
    padding: 12px 14px ;
    box-sizing: border-box;
}

/* Analyse: Severity, Meldung und Aktionen bleiben auf breiten Ansichten in einer Zeile. */
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-item {
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    gap: 10px;
    align-items: center;
    padding: 9px 10px ;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-severity {
    min-width: 88px;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-text {
    min-width: 0;
    margin: 0 ;
    color: var(--tools-text);
    font-size: 13px;
    line-height: 1.42;
    overflow-wrap: break-word;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-item-actions {
    flex-wrap: nowrap;
    align-items: center;
    margin: 0 ;
    white-space: nowrap;
}

#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-item-actions .native-tools-btn {
    min-width: max-content;
    white-space: nowrap;
}

/* Zu einer Analyse-Meldung gesprungenes Feld sichtbar hervorheben. */
#native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-focus-target {
    position: relative;
    outline: 2px solid var(--tools-accent) ;
    outline-offset: 3px;
    border-radius: 9px;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--tools-accent) 18%, transparent);
}

@media (max-width: 760px) {
    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-item {
        grid-template-columns: max-content minmax(0, 1fr);
        align-items: start;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-item-actions {
        grid-column: 2;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 520px) {
    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-item {
        grid-template-columns: minmax(0, 1fr);
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-analysis-item-actions {
        grid-column: auto;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-line {
        grid-template-columns: 26px 38px minmax(520px, 1fr);
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-diff-code {
        min-width: 520px;
    }

    #native-tools-content[data-current-tool="docker-compose-builder"] .native-compose-editor-copy-btn {
        min-width: 72px;
    }
}