/* =========================================================
   Native Tools Page - Extended
   ========================================================= */
body.tools-page #content,
body.tools-page #content-area {
    padding: 0;
    overflow: hidden;
}


body.tools-page footer {
    display: none;
}


.native-tools-page {
    --tools-bg: #111111;
    --tools-bg-2: #181818;
    --tools-card: #222222;
    --tools-card-2: #2a2a2a;
    --tools-border: rgba(255, 255, 255, 0.11);
    --tools-text: #ffffff;
    --tools-muted: #c9c9c9;
    --tools-accent: #e9a624;
    --tools-danger: #ff6b6b;
    --tools-success: #78d98f;
    width: 100%;
    height: calc(100dvh - var(--global-nav-height, 66px) - var(--log-height, 0px));
    min-height: 0;
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    background: radial-gradient(circle at top left, rgba(233, 166, 36, 0.10), transparent 34%), var(--tools-bg);
    color: var(--tools-text);
    overflow: hidden;
}


body.light-mode .native-tools-page {
    --tools-bg: #e0e0e0;
    --tools-bg-2: #ececec;
    --tools-card: #ffffff;
    --tools-card-2: #f5f5f5;
    --tools-border: rgba(0, 0, 0, 0.12);
    --tools-text: #222222;
    --tools-muted: #666666;
    --tools-accent: #000000;
    background: linear-gradient(135deg, #eeeeee, #d8d8d8);
}


.native-tools-sidebar {
    min-height: 0;
    padding: 16px;
    border-right: 1px solid var(--tools-border);
    background: color-mix(in srgb, var(--tools-card) 88%, transparent);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 14px;
    overflow: hidden;
}


.native-tools-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--tools-border);
}


body.light-mode .native-tools-brand {
    background: rgba(255, 255, 255, 0.70);
}


.native-tools-brand-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--tools-accent);
    color: #111;
    font-size: 22px;
    font-weight: 900;
    flex: 0 0 auto;
}


body.light-mode .native-tools-brand-icon {
    color: #fff;
}


.native-tools-brand h1 {
    margin: 0;
    color: var(--tools-accent);
    font-size: 22px;
    font-weight: 900;
    line-height: 1.1;
}


.native-tools-brand p {
    margin: 4px 0 0 0;
    color: var(--tools-muted);
    font-size: 12px;
}


.native-tools-card .ui-textarea {
    min-height: 150px;
    resize: vertical;
    font-family: Consolas, Monaco, 'Courier New', monospace;
    line-height: 1.45;
}


.native-tools-card .ui-textarea.native-tools-small-textarea {
    min-height: 90px;
}


.native-tools-card .ui-textarea.native-tools-large-textarea {
    min-height: 280px;
}


.native-tools-nav {
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-right: 4px;
}


.native-tools-nav-section {
    margin-top: 12px;
    padding: 8px 10px 4px 10px;
    color: var(--tools-muted);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-top: 1px solid var(--tools-border);
}


.native-tools-nav-section:first-child {
    margin-top: 0;
    border-top: 0;
}


.native-tools-nav-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--tools-text);
    text-align: left;
    cursor: pointer;
    font-weight: 650;
    transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}


.native-tools-nav-btn:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--tools-border);
}


.native-tools-nav-btn.is-active {
    background: var(--tools-accent);
    color: #111;
    border-color: var(--tools-accent);
    box-shadow: inset 0 0 8px rgba(255, 255, 0, .35);
}


body.light-mode .native-tools-nav-btn.is-active {
    color: #fff;
    box-shadow: none;
}


.native-tools-nav-icon {
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}


.native-tools-nav-btn.is-active .native-tools-nav-icon {
    background: rgba(0, 0, 0, 0.12);
}


.native-tools-main {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 18px;
}


.native-tools-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid var(--tools-border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
    margin-bottom: 14px;
}


body.light-mode .native-tools-header {
    background: rgba(255, 255, 255, 0.70);
}


.native-tools-eyebrow {
    color: var(--tools-accent);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 12px;
}


.native-tools-header h2 {
    margin: 4px 0 6px 0;
    color: var(--tools-accent);
    font-size: 28px;
    font-weight: 900;
    text-align: left;
}


.native-tools-header p {
    margin: 0;
    color: var(--tools-muted);
}


.native-tools-header-actions,
.native-tools-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}


.native-tools-status {
    min-height: 24px;
    margin: 0 0 12px 0;
    color: var(--tools-success);
    font-weight: 700;
}


.native-tools-status.is-error {
    color: var(--tools-danger);
}


.native-tools-content {
    display: block;
}


.native-tools-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}


.native-tools-card-grid-single {
    grid-template-columns: minmax(0, 1fr);
}


.native-tools-card {
    padding: 18px;
}


.native-tools-card h3 {
    margin: 0 0 12px 0;
    color: var(--tools-accent);
    font-size: 18px;
    font-weight: 900;
}


.native-tools-card h4 {
    margin: 14px 0 8px 0;
    color: var(--tools-text);
    font-size: 15px;
    font-weight: 900;
}


.native-tools-card label {
    display: block;
    margin: 10px 0 6px 0;
    color: var(--tools-text);
    font-weight: 750;
}


.native-tools-card p,
.native-tools-hint {
    color: var(--tools-muted);
    line-height: 1.45;
}


.native-tools-two-col,
.native-tools-three-col,
.native-tools-four-col {
    display: grid;
    gap: 12px;
}


.native-tools-two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}


.native-tools-three-col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}


.native-tools-four-col {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}


.native-tools-kv-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 12px;
}


.native-tools-kv-table th,
.native-tools-kv-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--tools-border);
    vertical-align: top;
    text-align: left;
}


.native-tools-kv-table th {
    width: 220px;
    color: var(--tools-accent);
    font-weight: 900;
}


.native-tools-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}


.native-tools-chip {
    border: 1px solid var(--tools-border);
    border-radius: 999px;
    padding: 5px 9px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 13px;
}


.native-tools-result-box {
    white-space: pre-wrap;
    overflow: auto;
    min-height: 80px;
    max-height: 520px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--tools-border);
    background: rgba(0, 0, 0, 0.22);
    font-family: Consolas, Monaco, 'Courier New', monospace;
}


body.light-mode .native-tools-result-box {
    background: #f1f1f1;
}


@media (max-width: 1120px) {
    .native-tools-page {
        grid-template-columns: 280px minmax(0, 1fr);
    }


    .native-tools-card-grid,
    .native-tools-two-col,
    .native-tools-three-col,
    .native-tools-four-col {
        grid-template-columns: minmax(0, 1fr);
    }


}


@media (max-width: 780px) {
    .native-tools-page {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }


    .native-tools-sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--tools-border);
        grid-template-rows: auto auto auto;
        max-height: 360px;
    }


    .native-tools-nav {
        max-height: 210px;
    }


    .native-tools-header {
        flex-direction: column;
    }


    .native-tools-header-actions {
        width: 100%;
    }


    .native-tools-header-actions .native-tools-btn {
        flex: 1 1 180px;
    }


    .native-tools-main {
        padding: 10px;
    }


}


/* =========================================================
   Native Tools - Header action toggle
   ========================================================= */
.native-tools-page.has-tool-no-header-actions .native-tools-header-actions {
    display: none;
}


.native-tools-nav-btn {
    min-height: 48px;
}


.native-tools-nav-icon {
    min-width: 36px;
    height: 36px;
    font-size: 18px;
    font-weight: 700;
}


.native-tools-nav-btn span:last-child {
    line-height: 1.25;
}


/* =========================================================
   Native Tools - Base64 File/Image Converter + Formatter Options
   ========================================================= */

.native-tools-hidden {
    display: none;
}


.native-tools-option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    align-items: end;
    margin: 10px 0 12px;
}


.native-tools-chip-checkbox {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
}


.native-tools-chip-checkbox input {
    width: auto;
    height: auto;
    margin: 0;
}


.native-tools-b64-file-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}


.native-tools-file-dropzone {
    min-height: 185px;
    border: 2px dashed rgba(233, 166, 36, .55);
    border-radius: 16px;
    background: rgba(255, 255, 255, .035);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
    margin: 8px 0 12px;
    padding: 24px;
}


.native-tools-file-dropzone:hover,
.native-tools-file-dropzone:focus-visible,
.native-tools-file-dropzone.is-dragover {
    background: rgba(233, 166, 36, .10);
    border-color: var(--tools-accent);
    transform: translateY(-2px);
    outline: none;
}


.native-tools-file-dropzone strong {
    color: var(--tools-text);
    font-size: 18px;
    font-weight: 800;
}


.native-tools-file-dropzone span {
    color: var(--tools-muted);
}


body.light-mode .native-tools-file-dropzone {
    background: rgba(255, 255, 255, .55);
    border-color: rgba(0, 0, 0, .24);
}


body.light-mode .native-tools-file-dropzone:hover,
body.light-mode .native-tools-file-dropzone:focus-visible,
body.light-mode .native-tools-file-dropzone.is-dragover {
    background: rgba(233, 166, 36, .18);
    border-color: var(--tools-accent);
}


.native-tools-b64-preview {
    min-height: 220px;
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--tools-border);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tools-muted);
    text-align: center;
    overflow: hidden;
}


.native-tools-b64-preview img {
    max-width: 100%;
    max-height: 360px;
    object-fit: contain;
    display: block;
}


.native-tools-checker {
    background-image:
        linear-gradient(45deg, rgba(255, 255, 255, 0.06) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.06) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.06) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.06) 75%);
    background-size: 22px 22px;
    background-position: 0 0, 0 11px, 11px -11px, -11px 0;
    background-color: rgba(0, 0, 0, 0.10);
}


body.light-mode .native-tools-checker {
    background-image:
        linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);
    background-color: rgba(255, 255, 255, 0.45);
}


.native-tools-json-tree,
.native-tools-tree-placeholder {
    min-height: 90px;
    max-height: 420px;
    overflow: auto;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--tools-border);
    background: rgba(0, 0, 0, .18);
    color: var(--tools-text);
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.45;
}


body.light-mode .native-tools-json-tree,
body.light-mode .native-tools-tree-placeholder {
    background: rgba(255, 255, 255, .65);
}


.native-tools-json-node {
    margin: 3px 0;
}


.native-tools-json-node summary {
    cursor: pointer;
    user-select: none;
}


.native-tools-json-children {
    margin-left: 18px;
    padding-left: 10px;
    border-left: 1px solid var(--tools-border);
}


.native-tools-json-key {
    color: var(--tools-accent);
    font-weight: 800;
    margin-right: 8px;
}


.native-tools-json-type {
    color: var(--tools-muted);
    font-size: 12px;
}


.native-tools-json-leaf {
    display: flex;
    gap: 8px;
    margin: 3px 0 3px 18px;
}


.native-tools-json-value {
    color: var(--tools-text);
    word-break: break-word;
}


@media (max-width: 1050px) {
    .native-tools-b64-file-grid {
        grid-template-columns: 1fr;
    }


}


/* =========================================================
   Tools UI Fixes - Base64 / JSON Formatter / CHMOD
   ========================================================= */

.native-tools-format-options {
    grid-template-columns: minmax(170px, 220px) repeat(auto-fit, minmax(210px, 1fr));
    align-items: stretch;
    gap: 12px;
    margin-top: 14px;
}


.native-tools-option-field {
    min-width: 0;
}


.native-tools-option-field label {
    margin: 0 0 6px 0;
    font-size: 13px;
    color: var(--tools-text);
    font-weight: 850;
}


.native-tools-format-options .native-tools-chip-checkbox {
    min-height: 42px;
    margin: 24px 0 0 0;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.075);
    border: 1px solid var(--tools-border);
    line-height: 1.25;
}


.native-tools-format-options .native-tools-chip-checkbox span {
    display: inline-block;
    font-size: 13px;
    font-weight: 850;
    color: var(--tools-text);
}


.native-tools-tree-placeholder,
.native-tools-json-tree {
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.11);
}


.native-tools-json-node summary {
    padding: 5px 6px;
    border-radius: 8px;
}


.native-tools-json-node summary:hover {
    background: rgba(233, 166, 36, 0.09);
}


.native-tools-json-leaf {
    padding: 3px 6px;
    border-radius: 8px;
}


.native-tools-json-leaf:hover {
    background: rgba(255, 255, 255, 0.04);
}


.native-tools-b64-file-grid .native-tools-row {
    align-items: center;
}


.native-tools-b64-file-grid .native-tools-b64-preview {
    margin-top: 12px;
}


.native-chmod-table-wrap {
    overflow-x: auto;
}


.native-chmod-table th,
.native-chmod-table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}


.native-chmod-table tbody tr:last-child th,
.native-chmod-table tbody tr:last-child td {
    border-bottom: 0;
}


.native-chmod-results div {
    padding: 18px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid var(--tools-border);
    text-align: center;
}


.native-chmod-results span {
    display: block;
    margin-bottom: 8px;
    color: var(--tools-muted);
    font-size: 13px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .06em;
}


.native-chmod-results strong {
    color: var(--tools-success);
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: clamp(30px, 5vw, 54px);
}


.native-chmod-results div:last-child strong {
    font-size: clamp(22px, 3vw, 38px);
}


.native-chmod-recursive input {
    width: 22px;
    height: 22px;
    min-width: 22px;
}


body.light-mode .native-tools-format-options .native-tools-chip-checkbox,
body.light-mode .native-chmod-table-wrap,
body.light-mode .native-chmod-results div {
    background: rgba(255, 255, 255, 0.58);
    border-color: rgba(0, 0, 0, 0.12);
}


body.light-mode .native-tools-tree-placeholder,
body.light-mode .native-tools-json-tree {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(0, 0, 0, 0.12);
}


@media (max-width: 760px) {
    .native-tools-format-options {
        grid-template-columns: 1fr;
    }


    .native-tools-format-options .native-tools-chip-checkbox,
    .native-chmod-recursive {
        margin-top: 0;
    }


}


/* =========================================================
   Tools UI - Complete Cron Helper, MAC Lookup, Domain Lookup
   ========================================================= */


.native-cron-expression-preview {
    max-width: 520px;
}


.native-cron-presets {
    justify-content: center;
    margin-bottom: 18px;
}


.native-cron-help {
    border: 1px solid var(--tools-border);
    background: rgba(0, 0, 0, .22);
    color: var(--tools-text);
    font-family: Consolas, Monaco, 'Courier New', monospace;
    overflow: auto;
}


.native-cron-symbol-table {
    margin-top: 10px;
}


.native-cron-symbol-table th,
.native-cron-symbol-table td,
.native-tools-dns-table th,
.native-tools-dns-table td {
    vertical-align: top;
}


.native-tools-dns-output {
    display: grid;
    gap: 14px;
}


.native-tools-dns-record {
    padding: 12px;
    border: 1px solid var(--tools-border);
    border-radius: 14px;
    background: rgba(0, 0, 0, .12);
}


.native-tools-dns-record h4 {
    margin: 0 0 10px;
    color: var(--tools-accent);
    font-size: 16px;
    font-weight: 900;
}


.native-tools-result-box .native-tools-hint {
    margin-top: 10px;
}


body.light-mode .native-cron-expression-preview,
body.light-mode .native-cron-help,
body.light-mode .native-tools-dns-record {
    background: rgba(255, 255, 255, .65);
    border-color: rgba(0, 0, 0, .12);
}


@media (max-width: 1050px) {
    .native-cron-grid {
        grid-template-columns: 1fr;
    }


}


/* =========================================================
   Crontab Helper - Feinschliff
   ========================================================= */

.native-cron-grid {
    grid-template-columns: minmax(430px, 0.95fr) minmax(520px, 1.05fr);
    gap: 16px;
}


.native-cron-tool .native-tools-card {
    padding: 18px;
}


.native-cron-tool h3 {
    margin-top: 0;
    margin-bottom: 12px;
}


.native-cron-tool label {
    font-size: 13px;
    font-weight: 850;
}


.native-cron-expression-preview {
    width: min(100%, 460px);
    margin: 14px auto 10px;
    padding: 13px 18px;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(233, 166, 36, .08), rgba(255, 255, 255, .035));
    border: 1px solid rgba(233, 166, 36, .28);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035);
    color: var(--tools-text);
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 900;
    letter-spacing: .09em;
    text-align: center;
    word-break: break-word;
}


.native-cron-description {
    min-height: 38px;
    margin: 6px 0 18px;
    padding: 0 4px 18px;
    border-bottom: 1px solid var(--tools-border);
    color: var(--tools-text);
    font-size: clamp(15px, 1.4vw, 18px);
    font-weight: 650;
    line-height: 1.45;
    text-align: center;
}


.native-cron-presets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin: 12px 0 20px;
}


.native-cron-presets .native-tools-btn {
    min-height: 36px;
    padding: 8px 10px;
    white-space: nowrap;
}


.native-cron-options>label,
.native-cron-options>input,
.native-cron-options>select {
    min-width: 0;
}


.native-cron-tool .native-tools-row {
    margin-top: 12px;
}


.native-cron-result-summary {
    display: grid;
    gap: 12px;
    margin-bottom: 14px;
}


.native-cron-result-expression {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(233, 166, 36, .32);
    background: rgba(233, 166, 36, .095);
    color: var(--tools-accent);
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: clamp(18px, 2vw, 26px);
    font-weight: 900;
    letter-spacing: .08em;
    text-align: center;
    word-break: break-word;
}


.native-cron-result-description {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(72, 187, 120, .30);
    background: rgba(72, 187, 120, .10);
    color: var(--tools-text);
    font-size: 16px;
    font-weight: 750;
    line-height: 1.45;
}


.native-cron-field-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}


.native-cron-field-card {
    padding: 11px 12px;
    border-radius: 12px;
    border: 1px solid var(--tools-border);
    background: rgba(255, 255, 255, .045);
    min-width: 0;
}


.native-cron-field-card span {
    display: block;
    margin-bottom: 5px;
    color: var(--tools-muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .055em;
}


.native-cron-field-card strong {
    display: block;
    color: var(--tools-text);
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 17px;
    overflow-wrap: anywhere;
}


.native-cron-plain-output {
    min-height: 120px;
    max-height: 180px;
}


.native-cron-help {
    max-height: 170px;
    margin: 8px 0 12px;
    padding: 14px;
    border-radius: 14px;
    font-size: 12px;
    line-height: 1.35;
}


.native-cron-symbol-table {
    font-size: 13px;
}


.native-cron-symbol-table th,
.native-cron-symbol-table td {
    padding: 9px 10px;
}


body.light-mode .native-cron-expression-preview,
body.light-mode .native-cron-field-card {
    background: rgba(255, 255, 255, .72);
    border-color: rgba(0, 0, 0, .12);
}


body.light-mode .native-cron-result-expression {
    background: rgba(233, 166, 36, .16);
    border-color: rgba(233, 166, 36, .38);
}


body.light-mode .native-cron-result-description {
    background: rgba(72, 187, 120, .13);
    border-color: rgba(72, 187, 120, .34);
}


@media (max-width: 1200px) {
    .native-cron-grid {
        grid-template-columns: 1fr;
    }


}


@media (max-width: 760px) {

    .native-cron-options,
    .native-cron-field-cards {
        grid-template-columns: 1fr;
    }


}


/* =========================================================
   Crontab Generator - Label/Input-Zuordnung korrigiert
   ========================================================= */

.native-cron-options {
    display: grid;
    gap: 14px;
}


.native-cron-options>label,
.native-cron-options>input,
.native-cron-options>select {
    margin: 0;
}


.native-cron-option-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 0;
}


.native-cron-option-field label {
    margin: 0;
    min-height: 18px;
    color: var(--tools-text);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
}


.native-cron-option-field input,
.native-cron-option-field select {
    margin: 0;
}


.native-cron-tool h3+.native-cron-options {
    margin-top: 8px;
}


.native-cron-tool .native-tools-card h3 {
    color: var(--tools-accent);
}








/* =========================================================
   Crontab Helper - relevante Generator-Felder + erweiterte Feldhilfe
   ========================================================= */

.native-cron-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}


.native-cron-option-field[hidden],
.native-cron-option-field.is-cron-field-hidden {
    display: none !important;
}


.native-cron-option-field {
    animation: nativeCronFieldIn .16s ease-out;
}


@keyframes nativeCronFieldIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.native-cron-help-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


.native-cron-help-card h3 {
    margin: 0 0 4px;
    color: var(--tools-accent);
}


.native-cron-help-card .native-cron-help {
    max-height: none;
    margin-bottom: 4px;
}


.native-cron-help-card .native-cron-symbol-table {
    margin-top: 0;
}


.native-cron-help-card .native-cron-symbol-table th,
.native-cron-help-card .native-cron-symbol-table td {
    padding: 10px 12px;
}


.native-cron-help-card .native-cron-symbol-table td:first-child {
    font-family: Consolas, Monaco, 'Courier New', monospace;
    color: var(--tools-accent);
    font-weight: 900;
    white-space: nowrap;
}


.native-cron-result-card,
.native-cron-result-summary,
.native-cron-plain-output {
    display: none;
}


@media (max-width: 980px) {
    .native-cron-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


}


@media (max-width: 620px) {
    .native-cron-options {
        grid-template-columns: 1fr;
    }


}


/* =========================================================
   Color Picker + Word to HTML + MAC Lookup cleanup
   ========================================================= */

.native-color-picker-layout {
    display: grid;
    grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}


.native-color-picker-main {
    display: grid;
    gap: 14px;
}


.native-color-input {
    width: 100%;
    height: 88px;
    padding: 6px;
    border-radius: 18px;
    cursor: pointer;
}


.native-color-swatch {
    min-height: 220px;
    border-radius: 18px;
    border: 1px solid var(--tools-border);
    display: grid;
    place-items: center;
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 950;
    letter-spacing: .08em;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}


.native-color-picker-fields {
    display: grid;
    gap: 12px;
}


.native-tools-card h3+label[for="tool-wordhtml-output"] {
    display: none !important;
}


/* =========================================================
   Native Tools - Startseite / Übersicht
   ========================================================= */

.native-tools-home {
    display: grid;
    gap: 18px;
    padding-bottom: 24px;
}


.native-tools-home-hero {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 18px;
    padding: 22px;
    border: 1px solid var(--tools-border);
    border-radius: 18px;
    background:
        radial-gradient(circle at top left, rgba(233, 166, 36, .16), transparent 38%),
        color-mix(in srgb, var(--tools-card) 92%, transparent);
}


.native-tools-home-kicker {
    color: var(--tools-accent);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .09em;
    margin-bottom: 7px;
}


.native-tools-home-hero h2 {
    margin: 0;
    color: var(--tools-accent);
    font-size: clamp(24px, 2.5vw, 36px);
    line-height: 1.08;
    font-weight: 950;
}


.native-tools-home-hero p {
    max-width: 720px;
    margin: 12px 0 0 0;
    color: var(--tools-muted);
    font-size: 15px;
    line-height: 1.5;
}


.native-tools-home-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 10px;
    min-width: 260px;
}


.native-tools-home-stats div {
    display: grid;
    place-items: center;
    padding: 16px;
    border: 1px solid var(--tools-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, .045);
}


.native-tools-home-stats strong {
    color: var(--tools-accent);
    font-size: 30px;
    line-height: 1;
    font-weight: 950;
}


.native-tools-home-stats span {
    margin-top: 6px;
    color: var(--tools-muted);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .06em;
}


.native-tools-home-section {
    display: grid;
    gap: 12px;
}


.native-tools-home-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px;
}


.native-tools-home-section-head h3 {
    margin: 0;
    color: var(--tools-accent);
    font-size: 20px;
    font-weight: 950;
}


.native-tools-home-section-head span {
    color: var(--tools-muted);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .06em;
}


.native-tools-home-featured {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}


.native-tools-home-feature-card,
.native-tools-home-tool {
    border: 1px solid var(--tools-border);
    background: color-mix(in srgb, var(--tools-card-2) 88%, transparent);
    color: var(--tools-text);
    border-radius: 15px;
    cursor: pointer;
    text-align: left;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}


.native-tools-home-feature-card:hover,
.native-tools-home-tool:hover,
.native-tools-home-feature-card:focus-visible,
.native-tools-home-tool:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--tools-accent) 70%, var(--tools-border));
    background: color-mix(in srgb, var(--tools-card-2) 78%, var(--tools-accent) 8%);
    outline: none;
}


.native-tools-home-feature-card {
    min-height: 74px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
}


.native-tools-home-tool-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--tools-accent);
    color: #111111;
    font-size: 20px;
    font-weight: 950;
}


body.light-mode .native-tools-home-tool-icon {
    color: #ffffff;
}


.native-tools-home-feature-card strong,
.native-tools-home-tool strong {
    display: block;
    color: var(--tools-text);
    font-size: 14px;
    font-weight: 950;
    line-height: 1.2;
}


.native-tools-home-feature-card small,
.native-tools-home-tool small {
    display: -webkit-box;
    margin-top: 4px;
    color: var(--tools-muted);
    font-size: 12px;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.native-tools-home-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 12px;
}


.native-tools-home-category {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--tools-border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--tools-card) 92%, transparent);
}


.native-tools-home-category-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
}


.native-tools-home-category-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(233, 166, 36, .14);
    border: 1px solid color-mix(in srgb, var(--tools-accent) 45%, var(--tools-border));
    color: var(--tools-accent);
    font-size: 22px;
}


.native-tools-home-category h4 {
    margin: 0;
    color: var(--tools-accent);
    font-size: 16px;
    font-weight: 950;
}


.native-tools-home-category p {
    margin: 4px 0 0 0;
    color: var(--tools-muted);
    font-size: 12px;
    font-weight: 800;
}


.native-tools-home-tool-list {
    display: grid;
    gap: 8px;
}


.native-tools-home-tool {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 10px;
}


.native-tools-home-tool .native-tools-home-tool-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 18px;
}


body.light-mode .native-tools-home-hero,
body.light-mode .native-tools-home-category,
body.light-mode .native-tools-home-feature-card,
body.light-mode .native-tools-home-tool {
    background: rgba(255, 255, 255, .78);
}


body.light-mode .native-tools-home-stats div {
    background: rgba(255, 255, 255, .72);
}


@media (max-width: 900px) {
    .native-tools-home-hero {
        flex-direction: column;
    }


    .native-tools-home-stats {
        min-width: 0;
    }


}


@media (max-width: 560px) {
    .native-tools-home-categories {
        grid-template-columns: 1fr;
    }


    .native-tools-home-section-head {
        align-items: start;
        flex-direction: column;
    }


    .native-tools-home-stats {
        grid-template-columns: 1fr 1fr;
    }


}


/* =========================================================
   Tools Startseite - Header entfernen, Icon-Farben, Clickbox-Polish
   ========================================================= */

/* Die separate obere "Start / Tools Übersicht"-Kachel auf der Tools-Startseite entfernen.
   Die eigentliche Startseiten-Kachel enthält jetzt diesen Text. */
.native-tools-page.is-tools-home .native-tools-header,
.native-tools-page.is-tools-home .native-tools-top,
.native-tools-page.is-tools-home .native-tools-main-head,
.native-tools-page.is-tools-home .native-tools-content-header {
    display: none;
}


/* Falls die Header-Struktur nur als erstes Card-Element im Main existiert: nicht global verstecken,
   sondern nur wenn die neue Klasse auf der Page liegt. */
.native-tools-page.is-tools-home [id="native-tools-category"],
.native-tools-page.is-tools-home [id="native-tools-title"],
.native-tools-page.is-tools-home [id="native-tools-subtitle"] {
    display: none !important;
}


/* Startseite rückt ohne Header sauber nach oben. */
.native-tools-page.is-tools-home .native-tools-content,
.native-tools-page.is-tools-home #native-tools-content {
    padding-top: 0;
}


/* Icon-Flächen in Tool-Karten:
   Dark Mode = schwarz mit weißem Icon
   Light Mode = weiß mit schwarzem Icon */
body:not(.light-mode) .native-tools-home-tool-icon,
body:not(.light-mode) .native-tools-home-category-icon,
body:not(.light-mode) .native-tools-nav-icon,
body:not(.light-mode) .native-tools-brand-icon {
    background: #000000 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    box-shadow: none !important;
}


body.light-mode .native-tools-home-tool-icon,
body.light-mode .native-tools-home-category-icon,
body.light-mode .native-tools-nav-icon,
body.light-mode .native-tools-brand-icon {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid rgba(0, 0, 0, .14) !important;
    box-shadow: none !important;
}


/* Checkboxen/Radio-Chips innerhalb der Tools allgemein sauber mittig darstellen. */
.native-tools-chip,
.native-tools-check,
.native-tools-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}


/* Startseiten-Hero etwas kompakter, nachdem die separate Header-Kachel wegfällt. */
.native-tools-page.is-tools-home .native-tools-home-hero {
    margin-top: 0;
}


/* =========================================================
   Tools Startseite + Checkboxen final
   ========================================================= */

/* Startseiten-Kachel: Titel/Text linksbündig erzwingen.
   Die globale index.css setzt #content-area h2 zentriert; hier wird es für Tools isoliert überschrieben. */
.native-tools-page.is-tools-home .native-tools-home-hero {
    align-items: flex-start;
    text-align: left;
}


.native-tools-page.is-tools-home .native-tools-home-hero>div:first-child {
    text-align: left !important;
    align-items: flex-start !important;
}


.native-tools-page.is-tools-home .native-tools-home-hero h2,
.native-tools-page.is-tools-home #native-tools-content .native-tools-home-hero h2 {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}


/* =========================================================
   Tools - kompakte Checkbox-Kacheln in Formatter/Converter-Optionen
   ========================================================= */

/* Die Format-Options verwenden ein Grid. Durch frühere globale/Tools-Checkboxregeln
   wurden Checkbox-Kacheln auf die volle Grid-Zeilenhöhe gestreckt.
   Hier werden sie wieder kompakt gehalten. */
.native-tools-page .native-tools-format-options {
    align-items: end;
}


.native-tools-page .native-tools-format-options .native-tools-option-field {
    align-self: end;
}


.native-tools-page .native-tools-format-options .native-tools-chip-checkbox,
.native-tools-page .native-tools-format-options label.native-tools-chip.native-tools-chip-checkbox,
.native-tools-page .native-tools-format-options label.native-tools-chip:has(input[type="checkbox"]) {
    align-self: end !important;
    width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
    max-height: 42px !important;
    padding: 9px 12px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}


.native-tools-page .native-tools-format-options .native-tools-chip-checkbox span,
.native-tools-page .native-tools-format-options label.native-tools-chip span {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    line-height: 1.2;
}


/* Inputs in derselben Options-Zeile behalten dieselbe Höhe wie die Checkbox-Kacheln. */
.native-tools-page .native-tools-format-options select,
.native-tools-page .native-tools-format-options input[type="text"] {
    margin-bottom: 0 !important;
}


/* Auf schmalen Breiten darf es weiter sauber untereinander laufen. */
@media (max-width: 900px) {
    .native-tools-page .native-tools-format-options {
        align-items: stretch;
    }

    .native-tools-page .native-tools-format-options .native-tools-chip-checkbox,
    .native-tools-page .native-tools-format-options label.native-tools-chip.native-tools-chip-checkbox,
    .native-tools-page .native-tools-format-options label.native-tools-chip:has(input[type="checkbox"]) {
        width: 100% !important;
    }
}


/* =========================================================
   Tools i18n polish
   ========================================================= */

.native-tools-page.is-tools-home .native-tools-home-hero h2 {
    text-align: left;
}


.native-tools-page [data-tool-nav],
.native-tools-page .native-tools-home-tool,
.native-tools-page .native-tools-home-feature-card {
    text-decoration: none !important;
}


body:not(.light-mode) .native-color-picker-tool .native-tools-card,
body:not(.light-mode) .native-color-picker-tool .native-tools-field,
body:not(.light-mode) .native-color-picker-tool .native-tools-output {
    color-scheme: dark !important;
}


body:not(.light-mode) .native-color-input {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .16),
        inset 0 0 0 1px rgba(255, 255, 255, .08) !important;
}


body.light-mode .native-color-input {
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .14),
        inset 0 0 0 1px rgba(255, 255, 255, .45) !important;
}


/* =========================================================
   Native Tools - Mobile Drawer mit sichtbarem Toggle
   ========================================================= */

@media (max-width: 900px),
(hover: none) and (pointer: coarse) {
    body.tools-page {
        --tools-mobile-sidebar-width: min(86vw, 340px);
    }

    body.tools-page #content,
    body.tools-page #content-area {
        min-height: 0;
        height: calc(100dvh - var(--global-nav-height, 66px) - var(--log-height, 0px));
        overflow: hidden;
        padding: 0;
    }

    body.tools-page .native-tools-page {
        width: 100%;
        height: calc(100dvh - var(--global-nav-height, 66px) - var(--log-height, 0px) - env(safe-area-inset-bottom, 0px));
        min-height: 0;
        display: block;
        grid-template-columns: none;
        grid-template-rows: none;
        overflow: hidden;
        position: relative;
    }

    body.tools-page .native-tools-main {
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 10px;
    }

    body.tools-page .native-tools-sidebar {
        position: fixed;
        top: var(--global-nav-height, 66px);
        right: 0;
        bottom: calc(var(--log-height, 0px) + env(safe-area-inset-bottom, 0px));
        left: auto;
        z-index: 420430;
        width: var(--tools-mobile-sidebar-width);
        min-width: var(--tools-mobile-sidebar-width);
        max-width: var(--tools-mobile-sidebar-width);
        height: calc(100dvh - var(--global-nav-height, 66px) - var(--log-height, 0px) - env(safe-area-inset-bottom, 0px));
        max-height: calc(100dvh - var(--global-nav-height, 66px) - var(--log-height, 0px) - env(safe-area-inset-bottom, 0px));
        padding: 14px 14px 10px;
        border-left: 1px solid var(--tools-border) !important;
        border-right: 0;
        border-bottom: 0;
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr);
        gap: 12px;
        overflow: hidden;
        transform: translateX(calc(100% + 22px));
        transition: transform 240ms cubic-bezier(.22, .61, .36, 1), box-shadow 240ms ease !important;
        will-change: transform;
        background: color-mix(in srgb, var(--tools-card) 96%, transparent);
        box-shadow: none;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    body.light-mode.tools-page .native-tools-sidebar {
        background: rgba(244, 244, 244, .96) !important;
    }

    body.tools-page.tools-native-sidebar-open .native-tools-sidebar,
    html.is-mobile[data-menu="open"] body.tools-page .native-tools-sidebar {
        transform: translateX(0) !important;
        box-shadow: -14px 0 34px rgba(0, 0, 0, .35) !important;
    }

    body.tools-page .native-tools-nav {
        min-height: 0;
        max-height: none;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 7px;
        padding: 0 4px 10px 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        scroll-snap-type: none;
        mask-image: none;
        -webkit-mask-image: none;
    }

    body.tools-page .native-tools-nav-section {
        display: block;
        margin-top: 10px;
        padding: 8px 10px 4px;
    }

    body.tools-page .native-tools-nav-btn {
        width: 100%;
        max-width: none;
        min-width: 0;
        min-height: 48px;
        flex: 0 0 auto !important;
        padding: 9px 11px;
        border-radius: 10px;
        justify-content: flex-start;
        white-space: normal;
    }

    body.tools-page .native-tools-nav-btn span:last-child {
        max-width: none !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.22 !important;
        font-size: 14px !important;
    }

    body.tools-page .native-tools-nav-icon {
        min-width: 36px;
        width: 36px;
        height: 36px;
        font-size: 18px;
    }


    body.tools-page .native-tools-mobile-backdrop {
        position: fixed;
        top: var(--global-nav-height, 66px);
        left: 0;
        right: 0;
        bottom: var(--log-height, 0px);
        z-index: 420429;
        display: none;
        background: rgba(0, 0, 0, .26);
        pointer-events: none;
    }

    body.tools-page.tools-native-sidebar-open .native-tools-mobile-backdrop {
        display: block;
        pointer-events: auto;
    }

    body.tools-page #mobile-sidebar-grabber,
    body.tools-page #mobile-hamburger {
        display: none;
        pointer-events: none;
    }

    .native-tools-card-grid,
    .native-tools-card-grid-single,
    .native-tools-two-col,
    .native-tools-three-col,
    .native-tools-four-col,
    .native-tools-b64-file-grid,
    .native-color-picker-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .native-tools-card {
        min-width: 0;
        padding: 12px;
    }

    .native-tools-header {
        margin-bottom: 10px;
        padding: 12px;
        border-radius: 16px;
        flex-direction: column;
        gap: 10px;
    }

    .native-tools-header h2 {
        font-size: 22px;
        line-height: 1.1;
    }

    .native-tools-card input,
    .native-tools-card select,
    .native-tools-card textarea {
        font-size: 16px;
    }
}


@media (max-width: 460px) {
    body.tools-page {
        --tools-mobile-sidebar-width: min(90vw, 330px);
    }


    body.tools-page .native-tools-sidebar {
        padding: 12px 12px 9px;
    }


    body.tools-page .native-tools-brand p {
        display: none;
    }


    body.tools-page .native-tools-main {
        padding: 8px;
    }




}


/* =========================================================
   Native Tools - Footer zentriert
   Minimaler Override, ohne Drawer/Swipe-Rückbau
   ========================================================= */

/*
   Der Footer darf auf der Tools-Seite nicht nach links geschoben werden.
   Diese Regeln gewinnen gegen frühere Mobile-Overrides, weil tools.css nach index.css geladen wird.
*/
body.tools-page footer {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    justify-content: center;
    max-width: calc(100vw - 24px);
}


body.tools-page footer .footer-text {
    max-width: calc(100vw - 24px);
    white-space: nowrap;
}


/*
   Auf schmalen Ansichten bleibt nur der Footer selbst zentriert.
   Der alte Floating-Tools-Button ist nicht mehr aktiv und wird später hart ausgeblendet.
*/
@media (max-width: 900px),
(hover: none) and (pointer: coarse) {
    body.tools-page .native-tools-main {
        padding-bottom: calc(75px + env(safe-area-inset-bottom, 0px));
    }

    body.tools-page footer {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        justify-content: center;
        max-width: calc(100vw - 24px);
    }

    body.tools-page footer .footer-text {
        max-width: calc(100vw - 24px);
        white-space: nowrap;
    }
}


/* =========================================================
   CHMOD Calculator - einheitliche Boxen + saubere Checkboxen
   ========================================================= */

.native-chmod-tool {
    max-width: 980px;
    margin: 0 auto;
}


.native-chmod-tool h3 {
    margin: 0 0 12px 0;
    line-height: 1.25;
}


/* Matrix: gleiche Zellhöhe, gleiche Optik, keine springenden Controls */
.native-chmod-table-wrap {
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--tools-border) !important;
    background: rgba(0, 0, 0, 0.16);
}


.native-chmod-table {
    width: 100%;
    min-width: 560px;
    table-layout: fixed;
    border-collapse: collapse;
}


.native-chmod-table th,
.native-chmod-table td {
    height: 72px;
    min-height: 72px;
    padding: 0 14px;
    text-align: center;
    vertical-align: middle;
    line-height: 1;
    box-sizing: border-box;
}


.native-chmod-table thead th {
    height: 58px;
    min-height: 58px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--tools-text);
    font-weight: 950;
}


.native-chmod-table tbody th {
    color: var(--tools-text);
    font-weight: 950;
}


/* Ergebnisboxen: gleiche Höhe und gleiche Ausrichtung */
.native-chmod-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0;
    align-items: stretch;
}


.native-chmod-results>div {
    min-height: 118px;
    height: 118px;
    padding: 18px;
    display: grid;
    grid-template-rows: 18px minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid var(--tools-border) !important;
    box-sizing: border-box;
}


.native-chmod-results span {
    margin: 0;
    height: 18px;
    line-height: 18px;
}


.native-chmod-results strong {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 62px;
    line-height: 1;
    margin: 0;
}


/* Optionszeile: Inputs/Select/Recursive-Box sauber auf einer Linie */
.native-chmod-options {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) minmax(220px, 1fr) minmax(190px, 230px);
    gap: 12px;
    align-items: end;
    margin: 0 0 14px 0;
}


.native-chmod-options .native-tools-option-field {
    min-width: 0;
    display: grid;
    grid-template-rows: 20px 42px;
    gap: 7px;
    align-items: end;
}


.native-chmod-options .native-tools-option-field label {
    height: 20px;
    min-height: 20px;
    margin: 0;
    line-height: 20px;
    font-size: 13px;
    font-weight: 900;
}


.native-chmod-options input[type="text"],
.native-chmod-options select {
    margin: 0 !important;
    box-sizing: border-box !important;
}


.native-chmod-recursive {
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    margin: 27px 0 0 0;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    border-radius: 10px;
    border: 1px solid var(--tools-border) !important;
    line-height: 1;
    box-sizing: border-box;
}


.native-chmod-recursive span {
    display: inline-flex;
    align-items: center;
    height: 20px;
    line-height: 20px;
    color: var(--tools-text);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}


/* Presets/Befehl unten ruhiger ausrichten */
.native-chmod-presets {
    margin: 12px 0 14px 0;
    gap: 8px;
}


.native-chmod-tool #tool-chmod-command {
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    box-sizing: border-box;
}


/* Lightmode passend halten */
body.light-mode .native-chmod-table-wrap,
body.light-mode .native-chmod-results>div,
body.light-mode .native-chmod-recursive {
    background: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}


/* Responsiv ohne unterschiedliche Höhen */
@media (max-width: 980px) {
    .native-chmod-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .native-chmod-recursive {
        margin-top: 27px;
    }
}


@media (max-width: 760px) {
    .native-chmod-results {
        grid-template-columns: 1fr;
    }


    .native-chmod-options {
        grid-template-columns: 1fr;
    }


    .native-chmod-recursive {
        margin-top: 0;
    }


}


/*
   Dateityp-Select im CHMOD-Tool optisch an die Textboxen angleichen.
*/


/*
   Recursive-Container etwas weniger dominant, passend zu den Eingabefeldern.
*/


/* Dateityp-Dropdown weiterhin wie die Textboxen */


.native-chmod-recursive {
    background: #2f3338;
    border-color: rgba(255, 255, 255, 0.13);
}


body.light-mode .native-chmod-recursive {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.16) !important;
}


/* =========================================================
   Regex Tester - Beispiel-Kacheln
   ========================================================= */

.native-regex-examples {
    align-self: stretch;
}


.native-regex-example-grid {
    display: grid;
    gap: 10px;
}


.native-regex-example-card {
    min-height: 118px;
    padding: 14px;
    text-align: left;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 8px;
    color: var(--tools-text);
    cursor: pointer;
    border: 1px solid var(--tools-border) !important;
    background: rgba(255, 255, 255, 0.035);
}


.native-regex-example-card strong {
    color: var(--tools-accent);
    font-weight: 950;
}


.native-regex-example-card code {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    color: var(--tools-text);
    font-size: 12px;
}


.native-regex-example-card span {
    color: var(--tools-muted);
    font-size: 12px;
    line-height: 1.35;
}


.native-regex-example-card:hover {
    border-color: rgba(233, 166, 36, 0.55);
    transform: translateY(-1px);
}


@media (max-width: 1200px) {
    .native-regex-example-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


}


@media (max-width: 680px) {
    .native-regex-example-grid {
        grid-template-columns: 1fr;
    }


}


/* =========================================================
   XML Formatter - Optionen sauber ausrichten
   ========================================================= */

.native-xml-options {
    display: grid;
    grid-template-columns: minmax(220px, 260px) repeat(3, minmax(180px, 1fr));
    gap: 10px;
    align-items: end;
    margin: 14px 0 12px 0;
}


.native-xml-option-field {
    display: grid;
    grid-template-rows: 20px 42px;
    gap: 7px;
    align-items: end;
    min-width: 0;
}


.native-xml-option-field label {
    margin: 0;
    height: 20px;
    line-height: 20px;
    font-weight: 900;
    color: var(--tools-text);
}


.native-xml-options .native-tools-chip-checkbox {
    height: 42px;
    min-height: 42px;
    margin: 27px 0 0 0;
    align-items: center;
    font-weight: 500;
    background: #2f3338;
    border-color: rgba(255, 255, 255, 0.13);
}


@media (max-width: 1200px) {
    .native-xml-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .native-xml-options .native-tools-chip-checkbox {
        margin-top: 0;
    }


}


@media (max-width: 720px) {
    .native-xml-options {
        grid-template-columns: 1fr;
    }


}


/* =========================================================
   Regex Tester - mehr Beispiele und Bausteine
   ========================================================= */

.native-regex-examples,
.native-regex-snippets {
    align-self: stretch;
}


.native-regex-example-grid,
.native-regex-snippet-grid {
    display: grid;
    gap: 10px;
}


.native-regex-example-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}


.native-regex-snippet-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}


.native-regex-example-card,
.native-regex-snippet-card {
    min-height: 112px;
    padding: 14px;
    text-align: left;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 8px;
    color: var(--tools-text);
    cursor: pointer;
    border: 1px solid var(--tools-border) !important;
    background: rgba(255, 255, 255, 0.035);
}


.native-regex-snippet-card {
    min-height: 96px;
}


.native-regex-example-card strong,
.native-regex-snippet-card strong {
    color: var(--tools-accent);
    font-weight: 950;
}


.native-regex-example-card code,
.native-regex-snippet-card code {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    color: var(--tools-text);
    font-size: 12px;
}


.native-regex-example-card span,
.native-regex-snippet-card span {
    color: var(--tools-muted);
    font-size: 12px;
    line-height: 1.35;
}


.native-regex-example-card:hover,
.native-regex-snippet-card:hover {
    border-color: rgba(233, 166, 36, 0.55) !important;
    transform: translateY(-1px);
}


@media (max-width: 1400px) {

    .native-regex-example-grid,
    .native-regex-snippet-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


}


@media (max-width: 680px) {

    .native-regex-example-grid,
    .native-regex-snippet-grid {
        grid-template-columns: 1fr;
    }


}


/* =========================================================
   Native Tools - Browser-Ergänzungen für ui-core Form Controls
   ========================================================= */

/* Select-Menü selbst, soweit Browser/OS es zulassen. */
body.tools-page .native-tools-page select option,
body.tools-page .native-tools-page select optgroup {
    background-color: var(--ui-control-bg);
    color: var(--ui-text);
}


/* Browser-Autofill darf kein Grau/Blau/Gelb ins Feld legen. */
body.tools-page .native-tools-page input:-webkit-autofill,
body.tools-page .native-tools-page input:-webkit-autofill:hover,
body.tools-page .native-tools-page input:-webkit-autofill:focus,
body.tools-page .native-tools-page textarea:-webkit-autofill,
body.tools-page .native-tools-page textarea:-webkit-autofill:hover,
body.tools-page .native-tools-page textarea:-webkit-autofill:focus,
body.tools-page .native-tools-page select:-webkit-autofill,
body.tools-page .native-tools-page select:-webkit-autofill:hover,
body.tools-page .native-tools-page select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--ui-control-bg) inset;
    -webkit-text-fill-color: var(--ui-text);
    caret-color: var(--ui-text);
}


/*
   Result-/Preview-Textboxen und Code/Text-Ausgaben.
   Diese sind keine Eingabefelder, sollen aber ebenfalls nicht hell-/dunkelgrau wirken.
*/
body.tools-page .native-tools-result-box,
body.tools-page .native-tools-tree-placeholder,
body.tools-page .native-tools-json-tree,
body.tools-page .native-tools-b64-preview {
    background: var(--ui-surface-1) !important;
    background-color: var(--ui-surface-1) !important;
    color: var(--ui-text);
    border-color: var(--ui-border) !important;
}


/*
   Die Bild-/Checkerflächen behalten ihr Muster, aber ohne grauen Grundton.
   Das Muster bleibt nötig, damit Transparenz sichtbar bleibt.
*/
body.tools-page:not(.light-mode) .native-tools-checker {
    background-color: #000000 !important;
}


body.light-mode.tools-page .native-tools-checker {
    background-color: #ffffff !important;
}


/* =========================================================
   Native Tools - Remove Yellow Gradients Only
   ========================================================= */

/*
   Nur der gelbe Verlauf wird entfernt.
   Keine Word/HTML-Lightmode-Regeln in diesem Block.
*/

body.tools-page .native-tools-page {
    background: var(--tools-bg, #111111) !important;
    background-image: none !important;
}


body.light-mode.tools-page .native-tools-page,
html.light-mode body.tools-page .native-tools-page {
    background: #ffffff !important;
}


body.tools-page .native-tools-main,
body.tools-page .native-tools-content,
body.tools-page .native-tools-panel,
body.tools-page .native-tools-section,
body.tools-page .native-tools-card,
body.tools-page .native-tools-home-hero,
body.tools-page .native-tools-header,
body.tools-page .native-tools-hero,
body.tools-page .native-tools-tool-hero {
    background-image: none;
}


body.tools-page .native-tools-home-hero {
    background: var(--tools-card, #222222) !important;
}


body.light-mode.tools-page .native-tools-home-hero,
html.light-mode body.tools-page .native-tools-home-hero {
    background: #ffffff !important;
}


body.tools-page .native-cron-expression-preview {
    background-image: none;
}


/* =========================================================
   Native Tools - Darkmode Controls Dark Grey STRICT
   ========================================================= */

/*
   Korrektur:
   Diese Regeln greifen NUR, wenn weder html noch body .light-mode haben.

   Damit kann der Darkmode-Control-Fix nicht mehr im Lightmode greifen,
   auch wenn .light-mode nur auf <html> und nicht auf <body> sitzt.
*/


/* Textboxen, Inputs, Dropdowns, Textareas - NUR Darkmode */


/* Select-Pfeile nicht kaputtmachen, aber Hintergrund dunkelgrau */


/* Readonly/Result/Preview/Tree-Boxen - NUR Darkmode */
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-result-box,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-json-tree,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-tree-placeholder,
html:not(.light-mode) body:not(.light-mode).tools-page .native-cron-help,
html:not(.light-mode) body:not(.light-mode).tools-page .native-cron-expression-preview {
    background: #1f1f1f !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
}


/* Checkbox-Chips / Options-Kacheln - NUR Darkmode */
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-tools-chip-checkbox,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page label.native-tools-chip-checkbox,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-tools-option-grid .native-tools-chip-checkbox,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-tools-format-options .native-tools-chip-checkbox,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-xml-options .native-tools-chip-checkbox,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-chmod-recursive {
    background: #1f1f1f !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
}


/* Fokus - NUR Darkmode */


/* =========================================================
   Native Tools - Lightmode Softer Grey Overview Only
   ========================================================= */

/*
   NUR Lightmode:
   Die Tools-Seite soll weniger grell/weiß wirken und übersichtlicher sein.
   Darkmode wird nicht verändert.
*/

/* Grundfläche der Tools-Seite: hellgrau statt schneeweiß */



/* Hauptbereich leicht grau, damit weiße Karten besser getrennt sind */
html.light-mode body.tools-page .native-tools-main,
body.light-mode.tools-page .native-tools-main,
body.light-mode .native-tools-main {
    background: #eef0f3 !important;
}


/* Tools-interne Sidebar nicht schneeweiß, sondern hellgrau */


/* Brand/Header als weiße Karten mit klarer Kante */
html.light-mode body.tools-page .native-tools-brand,
html.light-mode body.tools-page .native-tools-header,
body.light-mode.tools-page .native-tools-brand,
body.light-mode.tools-page .native-tools-header,
body.light-mode .native-tools-brand,
body.light-mode .native-tools-header {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.035) !important;
}


/* Karten etwas klarer trennen, aber nicht hart */


/* Tool-Kacheln auf Übersicht: weiß auf hellgrauem Seitenhintergrund */
html.light-mode body.tools-page .native-tools-home-card,
html.light-mode body.tools-page .native-tools-feature-card,
html.light-mode body.tools-page .native-tools-category-card,
html.light-mode body.tools-page .native-tools-quick-card,
body.light-mode.tools-page .native-tools-home-card,
body.light-mode.tools-page .native-tools-feature-card,
body.light-mode.tools-page .native-tools-category-card,
body.light-mode.tools-page .native-tools-quick-card,
body.light-mode .native-tools-home-card,
body.light-mode .native-tools-feature-card,
body.light-mode .native-tools-category-card,
body.light-mode .native-tools-quick-card {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.11) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.035) !important;
}


/* Sidebar-Suche: weiß, aber auf grauer Sidebar klar erkennbar */


/* Sidebar-Navigation: ruhiger Hover/aktive Abgrenzung */
html.light-mode body.tools-page .native-tools-nav-btn,
body.light-mode.tools-page .native-tools-nav-btn,
body.light-mode .native-tools-nav-btn {
    color: #171717 !important;
    background: transparent !important;
    border-color: transparent !important;
}


html.light-mode body.tools-page .native-tools-nav-btn:hover,
body.light-mode.tools-page .native-tools-nav-btn:hover,
body.light-mode .native-tools-nav-btn:hover {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}


html.light-mode body.tools-page .native-tools-nav-btn.is-active,
body.light-mode.tools-page .native-tools-nav-btn.is-active,
body.light-mode .native-tools-nav-btn.is-active {
    background: #111111 !important;
    color: #ffffff !important;
    border-color: #111111 !important;
}


/* Icons in der hellen Sidebar nicht reinweiß auf weiß */
html.light-mode body.tools-page .native-tools-nav-icon,
body.light-mode.tools-page .native-tools-nav-icon,
body.light-mode .native-tools-nav-icon {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
}


html.light-mode body.tools-page .native-tools-nav-btn.is-active .native-tools-nav-icon,
body.light-mode.tools-page .native-tools-nav-btn.is-active .native-tools-nav-icon,
body.light-mode .native-tools-nav-btn.is-active .native-tools-nav-icon {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}


/* Bereichsüberschriften in der Sidebar dezenter */
html.light-mode body.tools-page .native-tools-nav-section,
body.light-mode.tools-page .native-tools-nav-section,
body.light-mode .native-tools-nav-section {
    color: #6a6f76 !important;
    border-top-color: rgba(0, 0, 0, 0.10) !important;
}


/* Häufig-genutzt/Kategorien Labels rechts oben dezenter */
html.light-mode body.tools-page .native-tools-eyebrow,
body.light-mode.tools-page .native-tools-eyebrow,
body.light-mode .native-tools-eyebrow {
    color: #111111 !important;
}


/* =========================================================
   Native Tools - Lightmode Content Background Screenshot Color Sidebar White
   ========================================================= */

/*
   Korrektur:
   NUR Lightmode.
   Nur der Content-/Main-Bereich bekommt die Screenshot-Farbe #dfdfdf.
   Die Tools-interne Sidebar bleibt schneeweiß.
   Darkmode wird nicht verändert.
*/

/* Tools-Page-Grundfläche auf Screenshot-Farbe */



/* NUR Content/Main-Bereich grau */



/* Sidebar bleibt im Lightmode schneeweiß */
html.light-mode body.tools-page .native-tools-sidebar,
body.light-mode.tools-page .native-tools-sidebar,
body.light-mode .native-tools-sidebar {
    background: #ffffff !important;
    border-right-color: rgba(0, 0, 0, 0.12) !important;
}


/* Sidebar-Innenbereiche ebenfalls weiß halten */
html.light-mode body.tools-page .native-tools-brand,
body.light-mode.tools-page .native-tools-brand,
body.light-mode .native-tools-brand {
    background: #ffffff !important;
}


/* Header/Cards bleiben weiß, damit sie sich vom grauen Content abheben */
html.light-mode body.tools-page .native-tools-header,
body.light-mode.tools-page .native-tools-header,
body.light-mode .native-tools-header {
    background: #ffffff !important;
}


/* =========================================================
   Native Tools - Extended List Converter
   ========================================================= */

.native-list-workbench {
    --list-panel-bg: color-mix(in srgb, var(--tools-card) 88%, #000000 12%);
    --list-soft-bg: rgba(255, 255, 255, .045);
    display: grid;
    gap: 14px;
}


body.light-mode .native-list-workbench,
html.light-mode body .native-list-workbench {
    --list-panel-bg: #ffffff;
    --list-soft-bg: rgba(0, 0, 0, .035);
}


.native-list-io-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}


.native-list-io-pane,
.native-list-panel {
    min-width: 0;
    border: 1px solid var(--tools-border);
    border-radius: 18px;
    background: var(--list-panel-bg);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
}


.native-list-io-pane {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 14px;
}


.native-list-pane-head,
.native-list-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}


.native-list-pane-head span,
.native-list-panel-head::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(233, 166, 36, .16);
    border: 1px solid rgba(233, 166, 36, .35);
    color: var(--tools-accent);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .06em;
}


.native-list-panel-head::before {
    content: "LIST";
}


.native-list-pane-head strong,
.native-list-panel-head h3 {
    margin: 0;
    color: var(--tools-accent);
    font-size: 16px;
    font-weight: 950;
    line-height: 1.2;
}


.native-list-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}


.native-list-field label {
    margin: 0;
    color: var(--tools-text);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.25;
}


.native-list-field input,
.native-list-field select,
.native-list-field textarea {
    box-sizing: border-box;
}


.native-list-io-pane .native-list-field,
.native-list-io-pane .native-list-field textarea {
    min-height: 0;
    height: 100%;
}


.native-list-io-pane textarea.native-tools-large-textarea {
    min-height: 280px;
    height: clamp(280px, 34vh, 520px);
    resize: vertical;
}


.native-list-panel {
    padding: 16px;
}


.native-list-panel-subtitle {
    margin: -4px 0 12px 0;
    color: var(--tools-muted);
    font-size: 13px;
    line-height: 1.35;
}


.native-list-modifier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 8px;
}


.native-list-mod-chip {
    min-width: 0;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--tools-border);
    border-radius: 12px;
    background: var(--list-soft-bg);
    color: var(--tools-text);
    cursor: pointer;
    user-select: none;
}


.native-list-mod-chip input {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin: 0;
}


.native-list-mod-chip span {
    min-width: 0;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.2;
}


.native-list-inline-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    align-items: end;
    margin-top: 14px;
}


.native-list-inline-controls-filter {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}


.native-list-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    margin-top: 14px;
}


.native-list-action-row .native-tools-btn {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
}


.native-list-action-row-wrap .native-tools-btn {
    flex: 0 1 auto;
}


.native-list-compare-compact {
    display: grid;
    gap: 12px;
}


.native-list-compare-compact textarea.native-tools-small-textarea {
    min-height: 145px;
}


.native-list-help {
    margin: 0;
    padding: 0 2px 2px;
}


body.light-mode .native-list-io-pane,
body.light-mode .native-list-panel,
html.light-mode body .native-list-io-pane,
html.light-mode body .native-list-panel {
    box-shadow: 0 12px 26px rgba(0, 0, 0, .08);
}


body.light-mode .native-list-pane-head span,
body.light-mode .native-list-panel-head::before,
html.light-mode body .native-list-pane-head span,
html.light-mode body .native-list-panel-head::before {
    background: rgba(0, 0, 0, .06);
    border-color: rgba(0, 0, 0, .16);
    color: #000000;
}


@media (max-width: 1280px) {


    .native-list-panel-wide {
        grid-row: auto;
    }


}


@media (max-width: 920px) {
    .native-list-io-shell {
        grid-template-columns: minmax(0, 1fr);
    }


    .native-list-io-pane textarea.native-tools-large-textarea {
        height: 260px;
    }


}


@media (max-width: 620px) {

    .native-list-modifier-grid,
    .native-list-inline-controls {
        grid-template-columns: minmax(0, 1fr);
    }


    .native-list-action-row .native-tools-btn {
        flex: 1 1 180px;
    }


}


/* =========================================================
   Native Tools - List Lightmode Modifier Chip Neutral
   ========================================================= */

/*
   NUR Lightmode:
   Der Listen-Konverter soll bei den Modifikator-Chips keine gelben Rahmen
   oder gelben Checkbox-Hervorhebungen nutzen. Die Checkboxen orientieren sich
   am JSON-Tool: normale Checkbox, schwarzer Akzent im Lightmode.
*/

body.light-mode .native-list-workbench .native-list-mod-chip,
html.light-mode body .native-list-workbench .native-list-mod-chip {
    background: #f5f5f5 !important;
    border-color: rgba(0, 0, 0, .16) !important;
    box-shadow: none !important;
    color: #000000 !important;
}


body.light-mode .native-list-workbench .native-list-mod-chip:hover,
html.light-mode body .native-list-workbench .native-list-mod-chip:hover {
    background: #eeeeee !important;
    border-color: rgba(0, 0, 0, .28) !important;
    box-shadow: none !important;
}


body.light-mode .native-list-workbench .native-list-mod-chip:focus-within,
html.light-mode body .native-list-workbench .native-list-mod-chip:focus-within {
    border-color: rgba(0, 0, 0, .34) !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .10) !important;
}


/* Checked-Chip: kein Gelb, kein gelber Shadow */


/* Gelbe generische Fokus-/Checked-Effekte im Lightmode für den List-Bereich hart neutralisieren */
body.light-mode .native-list-workbench .native-list-mod-chip *,
html.light-mode body .native-list-workbench .native-list-mod-chip * {
    --tools-accent: #000000;
}


/* =========================================================
   Native Tools - List Action Columns No Gap
   ========================================================= */

/*
   List-Tool:
   Modifikatoren und Vergleich liegen jetzt in einer eigenen linken Spalte.
   Format/Split und Filter/Spalten liegen in einer eigenen rechten Spalte.
   Dadurch entsteht kein künstlicher Grid-Abstand mehr zwischen
   Modifikatoren und Vergleich.
*/

.native-list-action-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(380px, .85fr);
    gap: 14px;
    align-items: start;
}


.native-list-action-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}


.native-list-panel-wide {
    grid-row: auto;
}


/* alte Grid-Autoplatzierung neutralisieren, falls alte Regeln noch greifen */
.native-list-action-shell>.native-list-panel {
    grid-column: auto;
    grid-row: auto;
}


@media (max-width: 1280px) {
    .native-list-action-shell {
        grid-template-columns: minmax(0, 1fr);
    }


}


@media (max-width: 620px) {
    .native-list-action-column {
        gap: 12px;
    }


}


/* =========================================================
   Native Tools - Lorem + Markdown Patch
   ========================================================= */

.native-lorem-tool .native-tools-card {
    overflow: hidden;
}


.native-lorem-range-row {
    display: grid;
    grid-template-columns: minmax(145px, 220px) minmax(180px, 1fr) 46px;
    gap: 12px;
    align-items: center;
    margin: 12px 0;
}


.native-lorem-range-row label {
    margin: 0;
    color: var(--tools-text);
    font-weight: 850;
    text-align: right;
}


.native-lorem-range-row input[type="range"] {
    width: 100% !important;
    height: 6px !important;
    padding: 0 !important;
    border: 0 !important;
    background: rgba(255, 255, 255, .20) !important;
    cursor: pointer;
}


.native-lorem-range-row output {
    min-width: 38px;
    color: var(--tools-text);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}


.native-lorem-switches {
    display: grid;
    gap: 10px;
    margin: 14px 0;
}


.native-lorem-switch {
    display: grid;
    grid-template-columns: minmax(145px, 220px) auto;
    justify-content: start;
    align-items: center;
    gap: 12px;
    margin: 0;
}


.native-lorem-switch span {
    color: var(--tools-text);
    font-weight: 850;
    text-align: right;
}


.native-lorem-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


.native-lorem-switch i {
    width: 48px;
    height: 26px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .20);
    border: 1px solid var(--tools-border);
    position: relative;
    transition: background-color .16s ease, border-color .16s ease;
}


.native-lorem-switch i::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #ffffff;
    transition: transform .16s ease;
}


.native-lorem-switch input:checked+i::after {
    transform: translateX(22px);
}


.native-md-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    margin-bottom: 12px;
    border: 1px solid var(--tools-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, .045);
}


.native-md-toolbar .native-tools-btn {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 13px;
}


.native-md-cheatsheet {
    margin-top: 12px;
    border: 1px solid var(--tools-border);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, .035);
}


.native-md-cheatsheet summary {
    padding: 11px 13px;
    cursor: pointer;
    color: var(--tools-accent);
    font-weight: 900;
}


.native-md-cheatsheet .native-tools-result-box {
    border: 0;
    border-top: 1px solid var(--tools-border);
    border-radius: 0;
    max-height: 260px;
}


body.light-mode .native-lorem-range-row input[type="range"] {
    background: rgba(0, 0, 0, .22) !important;
}


body.light-mode .native-lorem-switch i {
    background: rgba(0, 0, 0, .22);
}


body.light-mode .native-md-toolbar,
body.light-mode .native-md-cheatsheet {
    background: rgba(255, 255, 255, .72);
    border-color: rgba(0, 0, 0, .14);
}


@media (max-width: 760px) {

    .native-lorem-range-row,
    .native-lorem-switch {
        grid-template-columns: minmax(0, 1fr);
        justify-items: stretch;
    }


    .native-lorem-range-row label,
    .native-lorem-switch span {
        text-align: left;
    }


    .native-lorem-switch {
        justify-content: stretch;
    }


}


/* =========================================================
   Native Tools - Cron Markdown Base64 Followup Fix
   ========================================================= */

.native-cron-next-box {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--tools-border);
}


.native-cron-next-box h3 {
    margin: 0 0 10px 0;
}


.native-cron-next-box .native-cron-option-field {
    max-width: 190px;
    margin-bottom: 10px;
}


.native-cron-next-output {
    min-height: 110px;
    max-height: 260px;
}


.native-cron-next-list {
    margin: 0;
    padding-left: 26px;
}


.native-cron-next-list li {
    margin: 5px 0;
    color: var(--tools-text);
    font-family: Consolas, Monaco, 'Courier New', monospace;
}


.native-md-toolbar .native-tools-btn.is-active,
.native-md-toolbar .native-tools-btn.active,
.native-md-toolbar .native-tools-btn[aria-pressed="true"] {
    border-color: rgba(233, 166, 36, .85) !important;
    box-shadow: 0 0 0 3px rgba(233, 166, 36, .16) !important;
}


html:not(.light-mode) body:not(.light-mode) .native-md-toolbar .native-tools-btn.is-active,
html:not(.light-mode) body:not(.light-mode) .native-md-toolbar .native-tools-btn.active,
html:not(.light-mode) body:not(.light-mode) .native-md-toolbar .native-tools-btn[aria-pressed="true"] {
    background: #070707 !important;
    color: #ffffff !important;
}


body.light-mode .native-md-toolbar .native-tools-btn.is-active,
body.light-mode .native-md-toolbar .native-tools-btn.active,
body.light-mode .native-md-toolbar .native-tools-btn[aria-pressed="true"],
html.light-mode body .native-md-toolbar .native-tools-btn.is-active,
html.light-mode body .native-md-toolbar .native-tools-btn.active,
html.light-mode body .native-md-toolbar .native-tools-btn[aria-pressed="true"] {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: rgba(0, 0, 0, .55) !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .10) !important;
}


.native-md-cheatsheet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    padding: 12px;
    border-top: 1px solid var(--tools-border);
}


.native-md-cheatsheet-grid>div {
    min-width: 0;
    display: grid;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--tools-border);
    border-radius: 12px;
    background: rgba(0, 0, 0, .14);
}


.native-md-cheatsheet-grid strong {
    color: var(--tools-accent);
    font-weight: 900;
}


.native-md-cheatsheet-grid code {
    display: block;
    white-space: pre-wrap;
    color: var(--tools-text);
    font-family: Consolas, Monaco, 'Courier New', monospace;
    line-height: 1.35;
}


body.light-mode .native-md-cheatsheet-grid>div,
html.light-mode body .native-md-cheatsheet-grid>div {
    background: rgba(255, 255, 255, .72);
    border-color: rgba(0, 0, 0, .14);
}


.native-tools-chip-list+.native-tools-row {
    margin-top: 12px;
}


.native-b64file-option-grid {
    grid-template-columns: minmax(260px, 1fr) minmax(280px, 1fr);
    align-items: end;
    gap: 12px;
}


.native-b64-option-field {
    min-width: 0;
}


.native-b64-option-field>label:not(.native-tools-chip-checkbox) {
    display: block;
    margin: 0 0 6px 0;
    color: var(--tools-text);
    font-weight: 850;
    line-height: 1.25;
}


.native-b64-option-field input[type="number"] {
    margin: 0 !important;
}


.native-b64file-prefix {
    width: 100%;
    min-height: 42px;
    margin: 0;
    box-sizing: border-box;
}


.native-b64file-prefix span {
    font-weight: 850;
    line-height: 1.25;
}


@media (max-width: 760px) {
    .native-b64file-option-grid {
        grid-template-columns: minmax(0, 1fr);
    }


    .native-cron-next-box .native-cron-option-field {
        max-width: none;
    }


}


/* =========================================================
   Native Tools - Extra Tool Pack
   ========================================================= */

.native-extra-tool {
    display: grid;
    gap: 14px;
}


.native-extra-card {
    overflow: hidden;
}


.native-extra-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px 12px;
    align-items: end;
}


.native-extra-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}


.native-extra-check {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin: 10px 0;
}


.native-time-live {
    display: grid;
    gap: 6px;
    padding: 18px;
    border: 1px solid var(--tools-border);
    border-radius: 16px;
    background: rgba(0, 0, 0, .18);
}


.native-time-live strong,
.native-time-display strong,
.native-time-display {
    color: var(--tools-text);
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: clamp(28px, 4vw, 54px);
    font-weight: 950;
    letter-spacing: .02em;
}


.native-time-live span,
.native-time-live small,
.native-time-display span {
    color: var(--tools-muted);
}


.native-time-display {
    min-height: 74px;
    display: grid;
    place-items: center;
    margin: 10px 0;
    padding: 16px;
    border: 1px solid var(--tools-border);
    border-radius: 16px;
    background: rgba(0, 0, 0, .20);
    text-align: center;
}


.native-keycode-capture {
    min-height: 120px;
    display: grid;
    place-items: center;
    padding: 18px;
    border: 2px dashed var(--tools-border);
    border-radius: 16px;
    color: var(--tools-text);
    font-weight: 950;
    text-align: center;
    outline: none;
}


.native-keycode-capture:focus {
    border-color: var(--tools-accent);
    box-shadow: 0 0 0 3px rgba(233, 166, 36, .16);
}


body.light-mode .native-time-live,
body.light-mode .native-time-display,
html.light-mode body .native-time-live,
html.light-mode body .native-time-display {
    background: #ffffff;
    border-color: rgba(0, 0, 0, .14);
}


/* Zentrale Range-Farbe für native Tools. Checkboxen werden in index.css gestylt. */
.native-tools-page input[type="range"] {
    accent-color: var(--tools-accent, #e9a624);
}


body.light-mode .native-tools-page input[type="range"],
html.light-mode body .native-tools-page input[type="range"] {
    accent-color: #000000;
}


/* =========================================================
   Native Tools - Followup Tool UX Patch
   ========================================================= */

.native-tools-nav-icon,
.native-tools-home-tool-icon,
.native-tools-home-category-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", system-ui, sans-serif;
    line-height: 1;
}


.native-sid-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}


.native-sid-card {
    min-width: 0;
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--tools-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, .045);
    color: var(--tools-text);
    text-align: left;
    cursor: pointer;
}


.native-sid-card:hover {
    border-color: rgba(233, 166, 36, .65);
}


.native-sid-card strong {
    font-family: Consolas, Monaco, "Courier New", monospace;
    color: var(--tools-accent);
}


.native-sid-card span {
    font-weight: 900;
}


.native-sid-card small {
    color: var(--tools-muted);
}


#native-tools-content[data-current-tool="aspect-ratio"] .native-extra-grid,
#native-tools-content[data-current-tool="resolution-scaler"] .native-extra-grid {
    grid-template-columns: repeat(3, minmax(140px, 1fr));
    padding: 12px;
    border: 1px solid var(--tools-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
}


#native-tools-content[data-current-tool="aspect-ratio"] .native-tools-card,
#native-tools-content[data-current-tool="resolution-scaler"] .native-tools-card {
    max-width: 1100px;
}


#native-tools-content[data-current-tool="aspect-ratio"] label,
#native-tools-content[data-current-tool="resolution-scaler"] label {
    margin: 0 0 6px 0 !important;
    font-weight: 900;
}


#native-tools-content[data-current-tool="aspect-ratio"] input,
#native-tools-content[data-current-tool="resolution-scaler"] input {
    margin: 0 !important;
}


/* =========================================================
   Native Tools - ROM Patcher Tool
   ========================================================= */

.native-rom-patcher-tool .native-tools-muted {
    color: var(--tools-muted);
    line-height: 1.55;
}


.native-rompatcher-file-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 14px 0;
}


.native-rompatcher-file {
    display: grid;
    gap: 8px;
    min-width: 0;
}


.native-rompatcher-file>span,
.native-rompatcher-output-name-label {
    color: var(--tools-text);
    font-weight: 800;
}


.native-rompatcher-file input[type="file"],
.native-rom-patcher-tool input[type="text"] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}


.native-rompatcher-options {
    margin-bottom: 14px;
}


.native-rompatcher-output {
    min-height: 180px;
    white-space: pre;
}


.native-rompatcher-output.is-error {
    border-color: rgba(255, 90, 90, .75);
}


@media (max-width: 760px) {
    .native-rompatcher-file-grid {
        grid-template-columns: 1fr;
    }


}


/* =========================================================
   Native Tools - ROM Patcher File Button UI Fix
   ========================================================= */

.native-rompatcher-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}


.native-rompatcher-file-label {
    color: var(--tools-text);
    font-weight: 800;
}


.native-rompatcher-file-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    width: 100%;
}


.native-rompatcher-file-button {
    cursor: pointer;
    flex: 0 0 auto;
    margin: 0;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}


.native-rompatcher-file-name {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--tools-muted);
    border: 1px solid var(--tools-border);
    border-radius: 10px;
    padding: 8px 10px;
    background: var(--tools-input-bg, rgba(255, 255, 255, .04));
}


@media (max-width: 760px) {
    .native-rompatcher-file-row {
        align-items: stretch;
        flex-direction: column;
    }


    .native-rompatcher-file-button,
    .native-rompatcher-file-name {
        width: 100%;
    }


}


/* =========================================================
   Native Tools - Compact Home Dashboard + Category Modal
   ========================================================= */

/* Sidebar: keine Beschreibungen, kompaktere alte Sidebar behalten */
.native-tools-nav-btn-compact .native-tools-nav-text small,
.native-tools-nav-btn .native-tools-nav-text small {
    display: none;
}


.native-tools-nav-btn-compact {
    min-height: 42px;
    align-items: center;
}


.native-tools-nav-btn-compact .native-tools-nav-text strong {
    white-space: normal;
    line-height: 1.15;
}


.native-tools-home-dashboard.native-tools-home-compact-dashboard {
    width: 100%;
    max-width: 1540px;
    margin: 0 auto;
    display: grid;
    gap: 26px;
}


.native-tools-home-compact-dashboard .native-tools-home-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    padding: 28px 32px;
    border: 1px solid var(--tools-border);
    border-radius: 22px;
    background:
        radial-gradient(circle at 70% 0%, rgba(233, 166, 36, .14), transparent 38%),
        color-mix(in srgb, var(--tools-card-bg) 92%, transparent);
    box-shadow: 0 18px 46px rgba(0, 0, 0, .20);
}


.native-tools-home-compact-dashboard .native-tools-home-kicker {
    margin: 0 0 8px;
    color: var(--tools-accent);
    font-size: .78rem;
    font-weight: 1000;
    letter-spacing: .12em;
    text-transform: uppercase;
}


.native-tools-home-compact-dashboard .native-tools-home-hero h2 {
    margin: 0;
    color: var(--tools-text);
    font-size: clamp(2rem, 3.4vw, 3.1rem);
    line-height: 1;
}


.native-tools-home-compact-dashboard .native-tools-home-hero p:not(.native-tools-home-kicker) {
    margin: 12px 0 0;
    color: var(--tools-muted);
    font-size: 1.02rem;
}


.native-tools-home-compact-dashboard .native-tools-home-stats {
    display: flex;
    gap: 14px;
    flex: 0 0 auto;
}


.native-tools-home-compact-dashboard .native-tools-home-stats span {
    min-width: 130px;
    padding: 18px 20px;
    border: 1px solid var(--tools-border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--tools-panel-bg) 82%, transparent);
    display: grid;
    place-items: center;
    text-align: center;
}


.native-tools-home-compact-dashboard .native-tools-home-stats strong {
    color: var(--tools-accent);
    font-size: 2rem;
    line-height: 1;
}


.native-tools-home-compact-dashboard .native-tools-home-stats small {
    margin-top: 4px;
    color: var(--tools-muted);
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .07em;
    text-transform: uppercase;
}


.native-tools-home-compact-dashboard .native-tools-home-section {
    display: grid;
    gap: 14px;
}


.native-tools-home-compact-dashboard .native-tools-home-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}


.native-tools-home-compact-dashboard .native-tools-home-section-title h3 {
    margin: 0;
    color: var(--tools-text);
    font-size: 1.32rem;
}


.native-tools-home-compact-dashboard .native-tools-home-feature-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(150px, 1fr));
    gap: 14px;
}


.native-tools-home-compact-dashboard .native-tools-home-feature-card {
    min-width: 0;
    min-height: 58px;
    padding: 12px 16px;
    border: 1px solid var(--tools-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--tools-card-bg) 94%, transparent);
    color: var(--tools-text);
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .13);
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}


.native-tools-home-compact-dashboard .native-tools-home-feature-card:hover,
.native-tools-home-compact-dashboard .native-tools-home-feature-card:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--tools-accent) 62%, var(--tools-border));
    background: color-mix(in srgb, var(--tools-card-bg) 86%, var(--tools-accent) 7%);
    outline: none;
}


.native-tools-home-compact-dashboard .native-tools-home-feature-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--tools-accent) 15%, var(--tools-panel-bg));
    border: 1px solid color-mix(in srgb, var(--tools-accent) 28%, var(--tools-border));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}


.native-tools-home-compact-dashboard .native-tools-home-feature-title {
    min-width: 0;
    overflow: hidden;
    color: var(--tools-text);
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.native-tools-home-compact-dashboard .native-tools-home-category-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(190px, 1fr));
    gap: 16px;
}


.native-tools-home-compact-dashboard .native-tools-home-category-card {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--tools-border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--tools-card-bg) 94%, transparent);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .14);
    display: grid;
    gap: 14px;
}


.native-tools-home-compact-dashboard .native-tools-home-category-head {
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: center;
    gap: 13px;
}


.native-tools-home-compact-dashboard .native-tools-home-category-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--tools-accent) 15%, var(--tools-panel-bg));
    border: 1px solid color-mix(in srgb, var(--tools-accent) 26%, var(--tools-border));
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


.native-tools-home-compact-dashboard .native-tools-home-category-head h3 {
    margin: 0;
    color: var(--tools-text);
    font-size: 1.08rem;
}


.native-tools-home-compact-dashboard .native-tools-home-category-head p {
    margin: 3px 0 0;
    color: var(--tools-muted);
    font-size: .88rem;
    font-weight: 750;
}


.native-tools-home-compact-dashboard .native-tools-home-mini-list {
    display: grid;
    gap: 5px;
}


.native-tools-home-compact-dashboard .native-tools-home-mini-tool {
    width: 100%;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid color-mix(in srgb, var(--tools-border) 72%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, var(--tools-panel-bg) 64%, transparent);
    color: var(--tools-text);
    display: block;
    text-align: left;
    cursor: pointer;
}


.native-tools-home-compact-dashboard .native-tools-home-mini-tool:hover,
.native-tools-home-compact-dashboard .native-tools-home-mini-tool:focus-visible {
    border-color: color-mix(in srgb, var(--tools-accent) 52%, var(--tools-border));
    background: color-mix(in srgb, var(--tools-accent) 9%, transparent);
    outline: none;
}


.native-tools-home-compact-dashboard .native-tools-home-mini-title {
    min-width: 0;
    overflow: hidden;
    display: block;
    color: var(--tools-text);
    font-size: .9rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.native-tools-home-compact-dashboard .native-tools-home-category-open {
    width: 100%;
    padding: 3px 0 0;
    border: 0;
    background: transparent;
    color: var(--tools-accent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 950;
    cursor: pointer;
}


.native-tools-home-compact-dashboard .native-tools-home-category-open:hover,
.native-tools-home-compact-dashboard .native-tools-home-category-open:focus-visible {
    text-decoration: underline;
    outline: none;
}


.native-tools-home-compact-dashboard .native-tools-home-footnote {
    margin: 2px 0 0;
    color: var(--tools-muted);
    font-size: .92rem;
}


/* Modal - überarbeitet als Command-Palette */
.native-tools-home-modal[hidden] {
    display: none !important;
}


.native-tools-home-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483600;
    display: grid;
    place-items: center;
    padding: 24px;
}


.native-tools-home-modal-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, .66);
    backdrop-filter: blur(8px);
    cursor: pointer;
}


.native-tools-home-modal-panel {
    position: relative;
    width: min(720px, 100%);
    max-height: min(760px, calc(100vh - 48px));
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--tools-border) 78%, var(--tools-accent) 22%);
    border-radius: 24px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .52);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}


.native-tools-home-modal-header {
    padding: 22px 24px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--tools-border) 72%, transparent);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}


.native-tools-home-modal-kicker {
    color: var(--tools-accent);
    font-size: .74rem;
    font-weight: 1000;
    letter-spacing: .12em;
    text-transform: uppercase;
}


.native-tools-home-modal-header h3 {
    margin: 6px 0 0;
    color: var(--tools-text);
    font-size: 1.72rem;
    line-height: 1.05;
}


.native-tools-home-modal-header p {
    margin: 5px 0 0;
    color: var(--tools-muted);
    font-weight: 850;
}


.native-tools-home-modal-close {
    width: 42px;
    height: 42px;
    border: 1px solid var(--tools-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--tools-panel-bg) 86%, transparent);
    color: var(--tools-text);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}


.native-tools-home-modal-close:hover,
.native-tools-home-modal-close:focus-visible {
    border-color: var(--tools-accent);
    color: var(--tools-accent);
    outline: none;
}


.native-tools-home-modal-search-wrap {
    padding: 16px 20px;
    border-bottom: 1px solid color-mix(in srgb, var(--tools-border) 70%, transparent);
}


.native-tools-home-modal-list {
    min-height: 0;
    overflow: auto;
    padding: 16px 20px 20px;
    display: grid;
    gap: 8px;
}


.native-tools-home-modal-tool {
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--tools-border) 72%, transparent);
    border-radius: 14px;
    color: var(--tools-text);
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 12px;
    text-align: left;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, transform .14s ease;
}


.native-tools-home-modal-tool-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--tools-accent) 14%, var(--tools-card-bg));
    border: 1px solid color-mix(in srgb, var(--tools-accent) 22%, var(--tools-border));
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


.native-tools-home-modal-tool-main {
    min-width: 0;
    display: block;
}


.native-tools-home-modal-tool-title {
    min-width: 0;
    overflow: hidden;
    display: block;
    color: var(--tools-text);
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.native-tools-home-modal-tool-arrow {
    color: var(--tools-accent);
    font-size: 1.6rem;
    font-weight: 1000;
    justify-self: end;
}


.native-tools-home-modal-empty {
    margin: 0;
    padding: 0 20px 22px;
    color: var(--tools-muted);
    font-weight: 800;
}


/* Light Mode */
body.light-mode .native-tools-home-compact-dashboard .native-tools-home-hero,
html.light-mode .native-tools-home-compact-dashboard .native-tools-home-hero,
body[data-theme="light"] .native-tools-home-compact-dashboard .native-tools-home-hero,
body.light-mode .native-tools-home-modal-panel,
html.light-mode .native-tools-home-modal-panel,
body[data-theme="light"] .native-tools-home-modal-panel {
    box-shadow: 0 18px 42px rgba(15, 23, 42, .10);
}


body.light-mode .native-tools-home-modal-backdrop,
html.light-mode .native-tools-home-modal-backdrop,
body[data-theme="light"] .native-tools-home-modal-backdrop {
    background: rgba(15, 23, 42, .30);
}


/* Responsive */
@media (max-width: 1500px) {
    .native-tools-home-compact-dashboard .native-tools-home-feature-grid {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
    }

    .native-tools-home-compact-dashboard .native-tools-home-category-grid {
        grid-template-columns: repeat(3, minmax(210px, 1fr));
    }
}


@media (max-width: 1100px) {
    .native-tools-home-compact-dashboard .native-tools-home-hero {
        align-items: stretch;
        flex-direction: column;
    }


    .native-tools-home-compact-dashboard .native-tools-home-stats {
        width: 100%;
    }


    .native-tools-home-compact-dashboard .native-tools-home-stats span {
        flex: 1 1 0;
    }


}


@media (max-width: 760px) {

    .native-tools-home-compact-dashboard .native-tools-home-feature-grid,
    .native-tools-home-compact-dashboard .native-tools-home-category-grid {
        grid-template-columns: 1fr;
    }


    .native-tools-home-modal {
        padding: 12px;
    }


    .native-tools-home-modal-panel {
        max-height: calc(100vh - 24px);
    }


}


/* =========================================================
   Native Tools - Home Search + Modal Backdrop Fix
   ========================================================= */

/* Startseiten-Suche */
.native-tools-home-search-section {
    display: grid;
    gap: 10px;
}


.native-tools-home-search-box {
    width: min(920px, 100%);
    min-width: 0;
    height: 52px;
    border: 1px solid var(--tools-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--tools-panel-bg) 88%, transparent);
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    overflow: hidden;
}


.native-tools-home-search-icon {
    font-size: 1.25rem;
}


.native-tools-home-search-box input {
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--tools-text);
    font: inherit;
}


.native-tools-home-search-box input::placeholder {
    color: var(--tools-muted);
}


.native-tools-home-search-box kbd {
    margin-right: 10px;
    padding: 5px 8px;
    border: 1px solid var(--tools-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--tools-card-bg) 84%, transparent);
    color: var(--tools-muted);
    font-size: .78rem;
    font-weight: 900;
    white-space: nowrap;
}


.native-tools-home-search-results {
    width: min(920px, 100%);
    padding: 8px;
    border: 1px solid var(--tools-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--tools-card-bg) 96%, transparent);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .22);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}


.native-tools-home-search-results[hidden] {
    display: none !important;
}


.native-tools-home-search-result {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--tools-border) 70%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--tools-panel-bg) 70%, transparent);
    color: var(--tools-text);
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    text-align: left;
    cursor: pointer;
}


.native-tools-home-search-result:hover,
.native-tools-home-search-result:focus-visible {
    border-color: color-mix(in srgb, var(--tools-accent) 60%, var(--tools-border));
    background: color-mix(in srgb, var(--tools-accent) 10%, var(--tools-panel-bg));
    outline: none;
}


.native-tools-home-search-result-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--tools-accent) 14%, var(--tools-card-bg));
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


.native-tools-home-search-result-main {
    min-width: 0;
    display: grid;
    gap: 2px;
}


.native-tools-home-search-result-main strong,
.native-tools-home-search-result-main small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.native-tools-home-search-result-main strong {
    color: var(--tools-text);
    font-weight: 900;
}


.native-tools-home-search-result-main small {
    color: var(--tools-muted);
    font-size: .82rem;
}


.native-tools-home-search-result-arrow {
    color: var(--tools-accent);
    font-size: 1.3rem;
    font-weight: 1000;
}


.native-tools-home-search-empty {
    margin: 0;
    color: var(--tools-muted);
    font-weight: 800;
}


/*
   Darkmode-Fix:
   Der Backdrop ist ein Button. Globale Button-Hover-Regeln konnten ihn gelb färben.
   Deshalb alle Zustände hart überschreiben.
*/
.native-tools-home-modal-backdrop,
.native-tools-home-modal-backdrop:hover,
.native-tools-home-modal-backdrop:focus,
.native-tools-home-modal-backdrop:focus-visible,
.native-tools-home-modal-backdrop:active {
    appearance: none;
    background: rgba(0, 0, 0, .68);
    box-shadow: none;
    outline: none;
}


/* Lightmode: weniger Transparenz hinter Modaltexten */
body.light-mode .native-tools-home-modal-panel,
html.light-mode .native-tools-home-modal-panel,
body[data-theme="light"] .native-tools-home-modal-panel {
    background: #ffffff !important;
}


body.light-mode .native-tools-home-modal-header,
html.light-mode .native-tools-home-modal-header,
body[data-theme="light"] .native-tools-home-modal-header,
body.light-mode .native-tools-home-modal-search-wrap,
html.light-mode .native-tools-home-modal-search-wrap,
body[data-theme="light"] .native-tools-home-modal-search-wrap {
    background: #ffffff !important;
}


body.light-mode .native-tools-home-modal-tool,
html.light-mode .native-tools-home-modal-tool,
body[data-theme="light"] .native-tools-home-modal-tool {
    background: #f7f8fb !important;
}





body.light-mode .native-tools-home-modal-backdrop,
html.light-mode .native-tools-home-modal-backdrop,
body[data-theme="light"] .native-tools-home-modal-backdrop,
body.light-mode .native-tools-home-modal-backdrop:hover,
html.light-mode .native-tools-home-modal-backdrop:hover,
body[data-theme="light"] .native-tools-home-modal-backdrop:hover,
body.light-mode .native-tools-home-modal-backdrop:focus,
html.light-mode .native-tools-home-modal-backdrop:focus,
body[data-theme="light"] .native-tools-home-modal-backdrop:focus,
body.light-mode .native-tools-home-modal-backdrop:active,
html.light-mode .native-tools-home-modal-backdrop:active,
body[data-theme="light"] .native-tools-home-modal-backdrop:active {
    background: rgba(15, 23, 42, .38) !important;
}


@media (max-width: 760px) {

    .native-tools-home-search-box,
    .native-tools-home-search-results {
        width: 100%;
    }


    .native-tools-home-search-results {
        grid-template-columns: 1fr;
    }


    .native-tools-home-search-box {
        grid-template-columns: 38px minmax(0, 1fr);
    }


    .native-tools-home-search-box kbd {
        display: none;
    }


}


/* =========================================================
   Native Tools - Global Search Modal + Softer Modal Hover
   ========================================================= */

/* Übersetzbarer Shortcut */


/* Startseiten-Suche ist jetzt ein Modal-Launcher */
.native-tools-home-search-launcher {
    cursor: pointer;
    text-align: left;
    color: var(--tools-text);
}


.native-tools-home-search-launcher:hover,
.native-tools-home-search-launcher:focus-visible {
    border-color: color-mix(in srgb, var(--tools-accent) 55%, var(--tools-border));
    background: color-mix(in srgb, var(--tools-accent) 8%, var(--tools-panel-bg));
    outline: none;
}


/* Globales STRG+K Suchmodal */


.native-tools-global-search-backdrop,
.native-tools-global-search-backdrop:hover,
.native-tools-global-search-backdrop:focus,
.native-tools-global-search-backdrop:focus-visible,
.native-tools-global-search-backdrop:active {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, .70);
    box-shadow: none;
    outline: none;
    cursor: pointer;
}


.native-tools-global-search-close:hover,
.native-tools-global-search-close:focus-visible {
    border-color: var(--tools-accent);
    color: var(--tools-accent);
    outline: none;
}


.native-tools-global-search-input-wrap kbd {
    margin-right: 10px;
    padding: 5px 8px;
    font-size: .78rem;
    font-weight: 900;
    white-space: nowrap;
}


/* Darkmode: Kategorie-Modal Hover deutlich zurücknehmen */


.native-tools-home-modal-tool:hover .native-tools-home-modal-tool-icon,
.native-tools-home-modal-tool:focus-visible .native-tools-home-modal-tool-icon {
    background: color-mix(in srgb, var(--tools-accent) 13%, var(--tools-card-bg));
}


/* Lightmode bleibt etwas deutlicher, aber nicht transparent */


/* Lightmode Suchmodal */
body.light-mode .native-tools-global-search-panel,
html.light-mode .native-tools-global-search-panel,
body[data-theme="light"] .native-tools-global-search-panel {
    background: #ffffff !important;
}


body.light-mode .native-tools-global-search-header,
html.light-mode .native-tools-global-search-header,
body[data-theme="light"] .native-tools-global-search-header {
    background: #ffffff !important;
}


body.light-mode .native-tools-global-search-backdrop,
html.light-mode .native-tools-global-search-backdrop,
body[data-theme="light"] .native-tools-global-search-backdrop,
body.light-mode .native-tools-global-search-backdrop:hover,
html.light-mode .native-tools-global-search-backdrop:hover,
body[data-theme="light"] .native-tools-global-search-backdrop:hover {
    background: rgba(15, 23, 42, .38) !important;
}


@media (max-width: 760px) {


    .native-tools-global-search-input-wrap kbd {
        display: none;
    }


}


/* =========================================================
   Native Tools - Search Modal Hardfix + Opaque Modals
   ========================================================= */

/* Startseiten-Suche: volle Breite, klarer Rahmen, Button-Reset */
.native-tools-home-search-section {
    width: 100%;
}


.native-tools-home-search-box,
button.native-tools-home-search-box,
.native-tools-home-search-launcher {
    appearance: none;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 56px;
    padding: 0 12px;
    margin: 0;
    border: 1px solid var(--tools-border) !important;
    border-radius: 16px;
    background: color-mix(in srgb, var(--tools-panel-bg) 92%, transparent);
    color: var(--tools-text);
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0;
    box-shadow: none;
    text-align: left;
    cursor: pointer;
}


.native-tools-home-search-box:hover,
.native-tools-home-search-box:focus-visible,
button.native-tools-home-search-box:hover,
button.native-tools-home-search-box:focus-visible,
.native-tools-home-search-launcher:hover,
.native-tools-home-search-launcher:focus-visible {
    border-color: color-mix(in srgb, var(--tools-accent) 55%, var(--tools-border)) !important;
    background: color-mix(in srgb, var(--tools-accent) 8%, var(--tools-panel-bg));
    outline: none;
}


.native-tools-home-search-icon {
    color: var(--tools-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


.native-tools-home-search-placeholder {
    color: var(--tools-muted);
    font-weight: 850;
}


.native-tools-home-search-box kbd,
.native-tools-global-search-input-wrap kbd {
    margin-left: 12px;
    padding: 5px 9px;
    font-size: .78rem;
    font-weight: 950;
    text-transform: none;
    white-space: nowrap;
}


/* Kategorie-Modal: Darkmode komplett deckend, kein transparenter Text-Hintergrund */
.native-tools-home-modal-panel {
    background: #151515;
}


.native-tools-home-modal-header,
.native-tools-home-modal-search-wrap {
    background: #151515;
}


.native-tools-home-modal-list {
    background: #151515;
}


.native-tools-home-modal-tool {
    background: #202020;
}


.native-tools-home-modal-tool:hover,
.native-tools-home-modal-tool:focus-visible {
    transform: translateX(1px);
    border-color: color-mix(in srgb, var(--tools-accent) 35%, var(--tools-border)) !important;
    background: #29251b;
    color: var(--tools-text);
    outline: none;
}


.native-tools-home-modal-tool:hover .native-tools-home-modal-tool-title,
.native-tools-home-modal-tool:focus-visible .native-tools-home-modal-tool-title {
    color: var(--tools-text);
}


/* Backdrops niemals vom globalen Button-Hover gelb färben lassen */
.native-tools-home-modal-backdrop,
.native-tools-home-modal-backdrop:hover,
.native-tools-home-modal-backdrop:focus,
.native-tools-home-modal-backdrop:focus-visible,
.native-tools-home-modal-backdrop:active,
.native-tools-global-search-backdrop,
.native-tools-global-search-backdrop:hover,
.native-tools-global-search-backdrop:focus,
.native-tools-global-search-backdrop:focus-visible,
.native-tools-global-search-backdrop:active {
    background: rgba(0, 0, 0, .72);
    border: 0;
    box-shadow: none;
    outline: 0;
}


/* Eigenes STRG+K Suchmodal / Command Palette */
.native-tools-global-search-modal[hidden] {
    display: none !important;
}


.native-tools-global-search-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483610;
    display: grid;
    place-items: start center;
    padding: 9vh 20px 24px;
}


.native-tools-global-search-backdrop {
    position: absolute;
    inset: 0;
    cursor: pointer;
}


.native-tools-global-search-panel {
    position: relative;
    width: min(760px, 100%);
    max-height: min(760px, calc(100vh - 12vh));
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--tools-border) 78%, var(--tools-accent) 22%) !important;
    border-radius: 24px;
    background: #151515;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .58);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}


.native-tools-global-search-header {
    padding: 20px 22px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--tools-border) 72%, transparent) !important;
    background: #151515;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}


.native-tools-global-search-kicker {
    color: var(--tools-accent);
    font-size: .74rem;
    font-weight: 1000;
    letter-spacing: .12em;
    text-transform: uppercase;
}


.native-tools-global-search-header h3 {
    margin: 6px 0 0;
    color: var(--tools-text);
    font-size: 1.55rem;
    line-height: 1.05;
}


.native-tools-global-search-close {
    width: 40px;
    height: 40px;
    border: 1px solid var(--tools-border) !important;
    border-radius: 999px;
    background: #202020;
    color: var(--tools-text);
    font-size: 1.65rem;
    line-height: 1;
    cursor: pointer;
}


.native-tools-global-search-input-wrap {
    margin: 16px 18px;
    height: 48px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
}


.native-tools-global-search-input-wrap>span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


.native-tools-global-search-input-wrap input {
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--tools-text);
    font: inherit !important;
}


.native-tools-global-search-results {
    min-height: 0;
    overflow: auto;
    padding: 0 18px 18px;
    background: #151515;
    display: grid;
    gap: 8px;
}


.native-tools-global-search-result {
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--tools-border) 72%, transparent) !important;
    border-radius: 14px;
    background: #202020;
    color: var(--tools-text);
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 12px;
    text-align: left;
    cursor: pointer;
}


.native-tools-global-search-result:hover,
.native-tools-global-search-result:focus-visible,
.native-tools-global-search-result.is-active,
.native-tools-global-search-result[aria-selected="true"] {
    border-color: color-mix(in srgb, var(--tools-text) 22%, var(--tools-border)) !important;
    background: #292929;
    color: var(--tools-text);
    outline: none;
}


.native-tools-global-search-result-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--tools-accent) 12%, #202020);
    border: 1px solid color-mix(in srgb, var(--tools-accent) 18%, var(--tools-border)) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


.native-tools-global-search-result-main {
    min-width: 0;
    display: grid;
    gap: 3px;
}


.native-tools-global-search-result-main strong,
.native-tools-global-search-result-main small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.native-tools-global-search-result-main strong {
    color: var(--tools-text);
    font-weight: 950;
}


.native-tools-global-search-result-main small {
    color: var(--tools-muted);
    font-size: .82rem;
    font-weight: 800;
}


.native-tools-global-search-result-arrow {
    color: var(--tools-accent);
    font-size: 1.55rem;
    font-weight: 1000;
    justify-self: end;
}


.native-tools-global-search-empty {
    margin: 0;
    padding: 0 18px 18px;
    color: var(--tools-muted);
    font-weight: 800;
}


/* Lightmode: deckend, nicht transparent */
body.light-mode .native-tools-home-modal-panel,
html.light-mode .native-tools-home-modal-panel,
body[data-theme="light"] .native-tools-home-modal-panel,
body.light-mode .native-tools-home-modal-header,
html.light-mode .native-tools-home-modal-header,
body[data-theme="light"] .native-tools-home-modal-header,
body.light-mode .native-tools-home-modal-search-wrap,
html.light-mode .native-tools-home-modal-search-wrap,
body[data-theme="light"] .native-tools-home-modal-search-wrap,
body.light-mode .native-tools-home-modal-list,
html.light-mode .native-tools-home-modal-list,
body[data-theme="light"] .native-tools-home-modal-list,
body.light-mode .native-tools-global-search-panel,
html.light-mode .native-tools-global-search-panel,
body[data-theme="light"] .native-tools-global-search-panel,
body.light-mode .native-tools-global-search-header,
html.light-mode .native-tools-global-search-header,
body[data-theme="light"] .native-tools-global-search-header,
body.light-mode .native-tools-global-search-results,
html.light-mode .native-tools-global-search-results,
body[data-theme="light"] .native-tools-global-search-results {
    background: #ffffff !important;
}


body.light-mode .native-tools-home-modal-tool:hover,
html.light-mode .native-tools-home-modal-tool:hover,
body[data-theme="light"] .native-tools-home-modal-tool:hover,
body.light-mode .native-tools-home-modal-tool:focus-visible,
html.light-mode .native-tools-home-modal-tool:focus-visible,
body[data-theme="light"] .native-tools-home-modal-tool:focus-visible {
    background: #fff4dc !important;
}

body.light-mode .native-tools-global-search-result:hover,
html.light-mode .native-tools-global-search-result:hover,
body[data-theme="light"] .native-tools-global-search-result:hover,
body.light-mode .native-tools-global-search-result:focus-visible,
html.light-mode .native-tools-global-search-result:focus-visible,
body[data-theme="light"] .native-tools-global-search-result:focus-visible,
body.light-mode .native-tools-global-search-result.is-active,
html.light-mode .native-tools-global-search-result.is-active,
body[data-theme="light"] .native-tools-global-search-result.is-active,
body.light-mode .native-tools-global-search-result[aria-selected="true"],
html.light-mode .native-tools-global-search-result[aria-selected="true"],
body[data-theme="light"] .native-tools-global-search-result[aria-selected="true"] {
    background: #f1f1f1;
    border-color: rgba(0, 0, 0, .18);
}


body.light-mode .native-tools-home-modal-backdrop,
html.light-mode .native-tools-home-modal-backdrop,
body[data-theme="light"] .native-tools-home-modal-backdrop,
body.light-mode .native-tools-global-search-backdrop,
html.light-mode .native-tools-global-search-backdrop,
body[data-theme="light"] .native-tools-global-search-backdrop {
    background: rgba(15, 23, 42, .38) !important;
}


@media (max-width: 760px) {

    .native-tools-home-search-box,
    button.native-tools-home-search-box {
        grid-template-columns: 38px minmax(0, 1fr);
    }


    .native-tools-home-search-box kbd,
    .native-tools-global-search-input-wrap kbd {
        display: none;
    }


    .native-tools-global-search-modal {
        padding: 12px;
        place-items: start center;
    }


    .native-tools-global-search-panel {
        max-height: calc(100vh - 24px);
    }


    .native-tools-global-search-input-wrap {
        grid-template-columns: 38px minmax(0, 1fr);
    }


}


/* =========================================================
   Native Tools - Search Modal Render/Binding Fix
   ========================================================= */

/* Wenn das Suchmodal per JS direkt in body hängt, trotzdem korrekt anzeigen */
body>.native-tools-global-search-modal[hidden] {
    display: none !important;
}


body>.native-tools-global-search-modal.is-open {
    display: grid;
}


/* Search Launcher nochmal eindeutig klickbar */
#native-tools-home-search.native-tools-home-search-launcher {
    pointer-events: auto;
    user-select: none;
}


#native-tools-home-search.native-tools-home-search-launcher * {
    pointer-events: none !important;
}


/* Sichtbarkeit im Modal erzwingen */
.native-tools-global-search-modal.is-open .native-tools-global-search-panel {
    opacity: 1;
    pointer-events: auto;
}


.native-tools-global-search-modal.is-open .native-tools-global-search-backdrop {
    pointer-events: auto;
}


/* =========================================================
   Native Tools - Search Modal Click/Empty/Focus Fix
   ========================================================= */

/* Suchmodal-Input: Fokusrahmen gehört auf den Wrapper, nicht abgeschnitten auf das Input */
.native-tools-global-search-input-wrap {
    overflow: visible;
}


.native-tools-global-search-input-wrap input,
.native-tools-global-search-input-wrap input:focus,
.native-tools-global-search-input-wrap input:focus-visible,
.native-tools-global-search-input-wrap input:active {
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
}


/* Startseiten-Suche ebenfalls sauberer Fokusrahmen */
.native-tools-home-search-box:focus-within,
.native-tools-home-search-box:focus-visible {
    border-color: color-mix(in srgb, var(--tools-accent) 62%, var(--tools-border)) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tools-accent) 22%, transparent);
}


/* Wenn noch kein Suchtext eingegeben wurde, bleibt der Ergebnisbereich leer und ruhig */
.native-tools-global-search-results:empty {
    display: none !important;
}


/* =========================================================
   Native Tools - Search Modal Keyboard Navigation
   ========================================================= */

/* Größere Lupe im Suchmodal */
.native-tools-global-search-input-icon,
.native-tools-global-search-input-wrap>span {
    width: 42px;
    height: 48px;
    font-size: 1.35rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* Tastaturauswahl nutzt denselben neutralen Zustand wie Maus-Hover. */
.native-tools-global-search-result.is-active .native-tools-global-search-result-arrow,
.native-tools-global-search-result[aria-selected="true"] .native-tools-global-search-result-arrow {
    transform: translateX(2px);
}


/* =========================================================
   Native Tools - Lightmode Modal Close Button Fix
   ========================================================= */

/*
   Der Schließen-Button wurde im Lightmode von den Darkmode-Regeln
   schwarz überschrieben. Diese Regeln liegen absichtlich ganz am Ende.
*/
body.light-mode .native-tools-global-search-close,
html.light-mode .native-tools-global-search-close,
body[data-theme="light"] .native-tools-global-search-close,
body.light-mode .native-tools-home-modal-close,
html.light-mode .native-tools-home-modal-close,
body[data-theme="light"] .native-tools-home-modal-close {
    background: #f7f8fb !important;
    color: #111827 !important;
    border: 1px solid rgba(15, 23, 42, .16) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .08) !important;
}


body.light-mode .native-tools-global-search-close:hover,
html.light-mode .native-tools-global-search-close:hover,
body[data-theme="light"] .native-tools-global-search-close:hover,
body.light-mode .native-tools-global-search-close:focus-visible,
html.light-mode .native-tools-global-search-close:focus-visible,
body[data-theme="light"] .native-tools-global-search-close:focus-visible,
body.light-mode .native-tools-home-modal-close:hover,
html.light-mode .native-tools-home-modal-close:hover,
body[data-theme="light"] .native-tools-home-modal-close:hover,
body.light-mode .native-tools-home-modal-close:focus-visible,
html.light-mode .native-tools-home-modal-close:focus-visible,
body[data-theme="light"] .native-tools-home-modal-close:focus-visible {
    background: #fff4dc !important;
    color: #111827 !important;
    border-color: color-mix(in srgb, var(--tools-accent) 55%, rgba(15, 23, 42, .16)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tools-accent) 22%, transparent) !important;
    outline: none !important;
}


body.light-mode .native-tools-global-search-close:active,
html.light-mode .native-tools-global-search-close:active,
body[data-theme="light"] .native-tools-global-search-close:active,
body.light-mode .native-tools-home-modal-close:active,
html.light-mode .native-tools-home-modal-close:active,
body[data-theme="light"] .native-tools-home-modal-close:active {
    background: #ffe7ae !important;
    transform: translateY(1px);
}


/* =========================================================
   Native Tools - Resolution Scaler + Aspect Ratio CSS Fix
   ========================================================= */

/*
   Nach tools.css laden oder ans Ende von public/css/tools.css hängen.

   Scope:
   - Resolution Scaler
   - Aspect Ratio Calculator

   Macht nur:
   - Eingabefelder sauber als Label-über-Input anordnen
   - keine versetzten Label/Input-Reihen mehr
   - Ergebnis-Karte optisch passend ausrichten
   - keine JS-Änderung
*/

/* Beide Tools: 2 Hauptspalten Eingabe / Ergebnis sauber halten */
body.tools-page .native-tools-card-grid:has(#tool-res-w):has(#tool-res-output),
body.tools-page .native-tools-card-grid:has(#tool-aspect-w):has(#tool-aspect-output) {
    display: grid;
    grid-template-columns: minmax(520px, 1fr) minmax(520px, 1fr) !important;
    gap: 18px;
    align-items: stretch;
}


/* Kartenhöhe und Innenabstände vereinheitlichen */
body.tools-page .native-tools-card:has(#tool-res-w),
body.tools-page .native-tools-card:has(#tool-res-output),
body.tools-page .native-tools-card:has(#tool-aspect-w),
body.tools-page .native-tools-card:has(#tool-aspect-output) {
    min-width: 0;
    padding: 20px;
    box-sizing: border-box;
}


/* Eingabe-Karten */
body.tools-page .native-tools-card:has(#tool-res-w),
body.tools-page .native-tools-card:has(#tool-aspect-w) {
    display: flex !important;
    flex-direction: column;
}


/* Wichtig: das generische Alternating-Markup label/input/label/input sauber in Felder aufteilen */
body.tools-page .native-tools-card:has(#tool-res-w) .native-extra-grid,
body.tools-page .native-tools-card:has(#tool-aspect-w) .native-extra-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 8px;
    align-items: end;

    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;

    padding: 14px;
    border: 1px solid var(--tools-border) !important;
    border-radius: 16px;
    background: rgba(255, 255, 255, .035);
}


body.light-mode.tools-page .native-tools-card:has(#tool-res-w) .native-extra-grid,
html.light-mode body.tools-page .native-tools-card:has(#tool-res-w) .native-extra-grid,
body.light-mode.tools-page .native-tools-card:has(#tool-aspect-w) .native-extra-grid,
html.light-mode body.tools-page .native-tools-card:has(#tool-aspect-w) .native-extra-grid {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, .14) !important;
}


/* Labels */
body.tools-page .native-tools-card:has(#tool-res-w) .native-extra-grid>label,
body.tools-page .native-tools-card:has(#tool-aspect-w) .native-extra-grid>label {
    margin: 0;
    min-width: 0;

    color: var(--tools-text);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.25;
}


/* Inputs */
body.tools-page .native-tools-card:has(#tool-res-w) .native-extra-grid>input,
body.tools-page .native-tools-card:has(#tool-aspect-w) .native-extra-grid>input {
    height: 44px;

    margin: 0;
    box-sizing: border-box;

    text-align: left;
}


/* Resolution Scaler: Breite / Höhe / Skalierung */
body.tools-page label[for="tool-res-w"] {
    grid-column: 1 !important;
    grid-row: 1 !important;
}


body.tools-page #tool-res-w {
    grid-column: 1;
    grid-row: 2;
}


body.tools-page label[for="tool-res-h"] {
    grid-column: 2 !important;
    grid-row: 1 !important;
}


body.tools-page #tool-res-h {
    grid-column: 2;
    grid-row: 2;
}


body.tools-page label[for="tool-res-scale"] {
    grid-column: 3 !important;
    grid-row: 1 !important;
}


body.tools-page #tool-res-scale {
    grid-column: 3;
    grid-row: 2;
}


/* Aspect Ratio: Breite / Höhe / Zielbreite */
body.tools-page label[for="tool-aspect-w"] {
    grid-column: 1 !important;
    grid-row: 1 !important;
}


body.tools-page #tool-aspect-w {
    grid-column: 1;
    grid-row: 2;
}


body.tools-page label[for="tool-aspect-h"] {
    grid-column: 2 !important;
    grid-row: 1 !important;
}


body.tools-page #tool-aspect-h {
    grid-column: 2;
    grid-row: 2;
}


body.tools-page label[for="tool-aspect-target-w"] {
    grid-column: 3 !important;
    grid-row: 1 !important;
}


body.tools-page #tool-aspect-target-w {
    grid-column: 3;
    grid-row: 2;
}


/* Button sauber unter das Feldgrid */
body.tools-page .native-tools-card:has(#tool-res-w)>.native-tools-row,
body.tools-page .native-tools-card:has(#tool-aspect-w)>.native-tools-row {
    margin-top: 14px;
    justify-content: flex-start;
}


body.tools-page .native-tools-card:has(#tool-res-w)>.native-tools-row .native-tools-btn,
body.tools-page .native-tools-card:has(#tool-aspect-w)>.native-tools-row .native-tools-btn {
    min-width: 128px !important;
}


/* Ergebnis-Karten */
body.tools-page .native-tools-card:has(#tool-res-output),
body.tools-page .native-tools-card:has(#tool-aspect-output) {
    display: flex !important;
    flex-direction: column;
}


body.tools-page .native-tools-card:has(#tool-res-output) label[for="tool-res-output"],
body.tools-page .native-tools-card:has(#tool-aspect-output) label[for="tool-aspect-output"] {
    margin: 0 0 8px 0 !important;
    color: var(--tools-text) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}


body.tools-page #tool-res-output,
body.tools-page #tool-aspect-output {
    flex: 1 1 auto !important;
    width: 100%;
    min-height: 320px;
    max-height: none;
    resize: vertical;

    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.45;
}


/* Responsive */
@media (max-width: 1250px) {

    body.tools-page .native-tools-card-grid:has(#tool-res-w):has(#tool-res-output),
    body.tools-page .native-tools-card-grid:has(#tool-aspect-w):has(#tool-aspect-output) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.tools-page #tool-res-output,
    body.tools-page #tool-aspect-output {
        min-height: 260px;
    }
}


@media (max-width: 800px) {

    body.tools-page .native-tools-card:has(#tool-res-w) .native-extra-grid,
    body.tools-page .native-tools-card:has(#tool-aspect-w) .native-extra-grid {
        grid-template-columns: minmax(0, 1fr);
    }


    body.tools-page .native-tools-card:has(#tool-res-w) .native-extra-grid>label,
    body.tools-page .native-tools-card:has(#tool-res-w) .native-extra-grid>input,
    body.tools-page .native-tools-card:has(#tool-aspect-w) .native-extra-grid>label,
    body.tools-page .native-tools-card:has(#tool-aspect-w) .native-extra-grid>input {
        grid-column: 1;
        grid-row: auto;
    }


    body.tools-page .native-tools-card:has(#tool-res-w) .native-extra-grid>label:not(:first-child),
    body.tools-page .native-tools-card:has(#tool-aspect-w) .native-extra-grid>label:not(:first-child) {
        margin-top: 10px !important;
    }


}


/* =========================================================
   Native Tools - Scheduled Task Builder v2
   ========================================================= */








/* =========================================================
   Native Tools - Scheduled Task Builder v2
   ========================================================= */

body.tools-page .native-tools-card-grid:has(.native-task-builder-card):has(.native-task-result-card) {
    display: grid;
    grid-template-columns: minmax(760px, 1.05fr) minmax(560px, .95fr);
    gap: 18px;
    align-items: stretch;
}


body.tools-page .native-task-builder-card,
body.tools-page .native-task-result-card {
    min-width: 0;
    padding: 20px;
    border-radius: 18px;
    box-sizing: border-box;
}


body.tools-page .native-task-builder-card {
    display: flex;
    flex-direction: column;
}


body.tools-page .native-task-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 16px;
    align-items: end;
    width: 100%;
    min-width: 0;
}


body.tools-page .native-task-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}


body.tools-page .native-task-field[hidden] {
    display: none !important;
}


body.tools-page .native-task-field>label {
    margin: 0;
    color: var(--tools-text);
    font-weight: 900;
    font-size: 14px;
    line-height: 1.2;
}


body.tools-page .native-task-field>input,
body.tools-page .native-task-field>select {
    height: 44px;
    box-sizing: border-box;
}


body.tools-page .native-task-command-field {
    grid-column: 1 / span 2;
}


body.tools-page .native-task-description-field {
    grid-column: 3;
}


body.tools-page .native-task-settings-list {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}


body.tools-page .native-task-builder-card>.native-tools-row {
    margin-top: 18px;
    justify-content: flex-start;
}


body.tools-page .native-task-result-card {
    display: flex;
    flex-direction: column;
}


body.tools-page .native-task-result-card #tool-task-output {
    flex: 1 1 auto;
    min-height: 430px;
    max-height: none;
    resize: vertical;
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.45;
}


@media (max-width: 1450px) {
    body.tools-page .native-tools-card-grid:has(.native-task-builder-card):has(.native-task-result-card) {
        grid-template-columns: minmax(0, 1fr);
    }


    body.tools-page .native-task-result-card #tool-task-output {
        min-height: 320px;
    }


}


@media (max-width: 900px) {
    body.tools-page .native-task-grid {
        grid-template-columns: minmax(0, 1fr);
    }


    body.tools-page .native-task-command-field,
    body.tools-page .native-task-description-field,
    body.tools-page .native-task-principal-field,
    body.tools-page .native-task-principal-preset-field {
        grid-column: auto;
    }


}


/* =========================================================
   Scheduled Task Builder v2.1 - Visibility + Multi-Select
   ========================================================= */

/* JS setzt zusätzlich .is-task-hidden, weil alte Layout-Regeln hidden teils überfahren können */
body.tools-page .native-task-field.is-task-hidden,
body.tools-page .native-task-field[hidden],
body.tools-page .native-task-time-field.is-task-hidden,
body.tools-page .native-task-days-field.is-task-hidden,
body.tools-page .native-task-repeat-detail-field.is-task-hidden,
body.tools-page .native-task-principal-field.is-task-hidden {
    display: none !important;
}


/* Multi-Select Wochentage */
body.tools-page .native-task-days-field select[multiple],
body.tools-page #tool-task-days[multiple] {
    height: 176px !important;
    min-height: 176px !important;
    padding: 8px 10px !important;
}


body.tools-page .native-task-days-field select[multiple] option,
body.tools-page #tool-task-days[multiple] option {
    padding: 6px 8px !important;
}


body.tools-page .native-task-help {
    display: block;
    margin-top: 2px;
    color: var(--tools-muted);
    font-size: 12px;
    line-height: 1.25;
}


/* Standard-Principal darf breiter laufen, Principal/SID erscheint nur bei Manuell */


body.tools-page .native-task-principal-field.is-task-hidden+.native-task-principal-preset-field,
body.tools-page .native-task-grid .native-task-principal-preset-field {
    min-width: 0 !important;
}


/* =========================================================
   Scheduled Task Builder v2.2 - Cron-like Visibility + Weekday Checkboxes
   ========================================================= */

/*
   Nach tools.css und nach scheduled_task_builder_v2.css laden
   oder ans Ende deiner tools.css hängen.
*/

/* Gleiche Methode wie Cron: data-Feld wird per hidden + Klasse ausgeblendet */
body.tools-page [data-task-generator-field].is-task-field-hidden,
body.tools-page [data-task-generator-field][hidden],
body.tools-page .native-task-field.is-task-field-hidden,
body.tools-page .native-task-field[hidden] {
    display: none !important;
}


/* Label für Checkbox-Gruppen */
body.tools-page .native-task-field-label {
    display: block;
    margin: 0 0 7px 0;
    color: var(--tools-text);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.2;
}


/* Wochentage als 7 Checkboxen */
body.tools-page .native-task-weekday-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}


body.tools-page .native-task-weekday {
    min-width: 0;
    width: 100%;
    justify-content: flex-start;
    box-sizing: border-box;
}


body.tools-page .native-task-weekday input {
    flex: 0 0 auto !important;
}


/* Checkbox-Gruppe darf bei Weekly über die komplette Breite laufen */
body.tools-page .native-task-days-field {
    grid-column: 1 / -1;
}


/* Standard-Principal darf breit sein */
body.tools-page .native-task-principal-preset-field {
    grid-column: span 2;
}


/* Wenn Principal/SID sichtbar ist, bleibt es normales Feld */
body.tools-page .native-task-principal-field {
    grid-column: 1;
}


@media (max-width: 900px) {
    body.tools-page .native-task-weekday-grid {
        grid-template-columns: minmax(0, 1fr);
    }


    body.tools-page .native-task-days-field,
    body.tools-page .native-task-principal-preset-field,
    body.tools-page .native-task-principal-field {
        grid-column: auto;
    }


}


/* =========================================================
   Native Tools - ACL/MSI Button Abstand
   ========================================================= */

/*
   Nach tools.css laden oder ans Ende von tools.css hängen.

   Betrifft nur:
   - acl-builder
   - msi-command

   Zweck:
   - "Erzeugen"-Button bekommt Abstand zu den Checkboxen.
   - Kein JS.
   - Keine JSON.
*/

/* MSI Command: Abstand zwischen Checkbox-Zeile und Erzeugen-Button */
body.tools-page .native-tools-card:has(#tool-msi-file)>.native-tools-chip-list+.native-tools-row,
body.tools-page .native-tools-card:has(#tool-msi-file)>.native-tools-row:last-child {
    margin-top: 16px;
}


/* ACL Builder: Abstand zwischen Rekursiv-Checkbox und Erzeugen-Button */
body.tools-page .native-tools-card:has(#tool-acl-path)>.native-tools-chip-list+.native-tools-row,
body.tools-page .native-tools-card:has(#tool-acl-path)>.native-tools-row:last-child {
    margin-top: 16px;
}


/* Button optisch sauber vom Checkbox-Block trennen */
body.tools-page .native-tools-card:has(#tool-msi-file)>.native-tools-chip-list,
body.tools-page .native-tools-card:has(#tool-acl-path)>.native-tools-chip-list {
    margin-bottom: 0;
}


/* =========================================================
   Native Tools - MSI + ACL Builder extended options
   ========================================================= */

/*
   Nach tools.css laden oder ans Ende von tools.css hängen.
   Betrifft nur:
   - msi-command
   - acl-builder
*/

/* Gemeinsames Layout */
body.tools-page .native-msi-builder-card,
body.tools-page .native-msi-result-card {
    min-width: 0;
    box-sizing: border-box;
}


body.tools-page .native-msi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 16px;
    align-items: end;
}


body.tools-page .native-msi-field {
    min-width: 0;
}


body.tools-page .native-msi-field>label {
    margin: 0 0 7px 0;
    color: var(--tools-text);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.2;
}


body.tools-page .native-msi-field>input,
body.tools-page .native-msi-field>select {
    height: 44px;
    box-sizing: border-box;
}


/* MSI */
body.tools-page .native-msi-props-field {
    grid-column: 1 / -1;
}


body.tools-page [data-msi-generator-field].is-msi-field-hidden,
body.tools-page [data-msi-generator-field][hidden] {
    display: none !important;
}


body.tools-page .native-msi-option-list,
body.tools-page .native-msi-property-list {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}


body.tools-page .native-msi-builder-card>.native-tools-row {
    margin-top: 18px;
}


/* ACL */


body.tools-page .native-acl-output-head strong {
    color: var(--tools-accent);
    font-size: 15px;
}


body.tools-page .native-acl-output-area {
    min-height: 190px;
    font-family: Consolas, Monaco, "Courier New", monospace;
}


/* Responsive */
@media (max-width: 1200px) {

    body.tools-page .native-msi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 760px) {

    body.tools-page .native-msi-grid {
        grid-template-columns: minmax(0, 1fr);
    }


    body.tools-page .native-msi-props-field {
        grid-column: auto !important;
    }


}


/* =========================================================
   Native Tools - ACL Builder Layout Fix
   ========================================================= */

/*
   Nach tools.css UND nach msi_acl_full_options.css laden
   oder ganz ans Ende der bestehenden CSS hängen.

   Fix:
   - ACL-Felder werden explizit in Zeilen/Spalten gelegt.
   - Keine versetzten Labels/Input-Felder mehr.
   - Pfad volle Breite.
   - Bekannte SIDs + Principal/SID sauber nebeneinander.
   - Aktion/Rechte/Scope sauber in einer Reihe.
   - Vererbung sauber darunter.
   - Checkboxen und Erzeugen-Button mit Abstand.
   - Kein JS.
*/

/* ACL-Karte */
body.tools-page .native-acl-builder-card {
    min-width: 0;
    box-sizing: border-box;
}


/* ACL-Grid explizit steuern */
body.tools-page .native-acl-builder-card .native-acl-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 8px;
    align-items: end;
    width: 100%;
    min-width: 0;
}


/* Grundformat für Labels */
body.tools-page .native-acl-builder-card .native-acl-grid>label,
body.tools-page .native-acl-builder-card .native-acl-principal-preset-field>label {
    margin: 0;
    min-width: 0;
    color: var(--tools-text);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.2;
}


/* Grundformat für Inputs/Selects */
body.tools-page .native-acl-builder-card .native-acl-grid>input,
body.tools-page .native-acl-builder-card .native-acl-grid>select,
body.tools-page .native-acl-builder-card .native-acl-principal-preset-field>select {
    height: 44px;
    box-sizing: border-box;
    margin: 0;
}


/* Wrapper für bekannte SIDs */
body.tools-page .native-acl-builder-card .native-acl-principal-preset-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    margin: 0;
}


/* Reihe 1/2: Pfad volle Breite */
body.tools-page .native-acl-builder-card .native-acl-grid>label[for="tool-acl-path"] {
    grid-column: 1 / -1;
    grid-row: 1;
}


body.tools-page .native-acl-builder-card .native-acl-grid>#tool-acl-path {
    grid-column: 1 / -1;
    grid-row: 2;
}


/* Reihe 3/4: Bekannte SIDs links, Principal/SID rechts */
body.tools-page .native-acl-builder-card .native-acl-principal-preset-field {
    grid-column: 1;
    grid-row: 3 / span 2;
}


body.tools-page .native-acl-builder-card .native-acl-grid>label[for="tool-acl-principal"] {
    grid-column: 2 / -1;
    grid-row: 3;
}


body.tools-page .native-acl-builder-card .native-acl-grid>#tool-acl-principal {
    grid-column: 2 / -1;
    grid-row: 4;
}


/* Reihe 5/6: Aktion / Rechte / Scope */
body.tools-page .native-acl-builder-card .native-acl-grid>label[for="tool-acl-action"] {
    grid-column: 1;
    grid-row: 5;
    margin-top: 12px;
}


body.tools-page .native-acl-builder-card .native-acl-grid>#tool-acl-action {
    grid-column: 1;
    grid-row: 6;
}


body.tools-page .native-acl-builder-card .native-acl-grid>label[for="tool-acl-rights"] {
    grid-column: 2;
    grid-row: 5;
    margin-top: 12px;
}


body.tools-page .native-acl-builder-card .native-acl-grid>#tool-acl-rights {
    grid-column: 2;
    grid-row: 6;
}


body.tools-page .native-acl-builder-card .native-acl-grid>label[for="tool-acl-scope"] {
    grid-column: 3;
    grid-row: 5;
    margin-top: 12px;
}


body.tools-page .native-acl-builder-card .native-acl-grid>#tool-acl-scope {
    grid-column: 3;
    grid-row: 6;
}


/* Reihe 7/8: Vererbung */
body.tools-page .native-acl-builder-card .native-acl-grid>label[for="tool-acl-inheritance"] {
    grid-column: 1;
    grid-row: 7;
    margin-top: 12px;
}


body.tools-page .native-acl-builder-card .native-acl-grid>#tool-acl-inheritance {
    grid-column: 1 / span 2;
    grid-row: 8;
}


/* Checkboxen sauber unter dem Grid */
body.tools-page .native-acl-builder-card .native-acl-option-list {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}


/* Button mit Abstand zu Checkboxen */
body.tools-page .native-acl-builder-card>.native-tools-row {
    margin-top: 18px;
    justify-content: flex-start;
}


/* Ergebnisblöcke optisch sauberer */
body.tools-page .native-acl-result-card .native-acl-output-block+.native-acl-output-block {
    margin-top: 18px;
}


body.tools-page .native-acl-result-card .native-acl-output-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 8px 0;
}


body.tools-page .native-acl-result-card .native-acl-output-head strong {
    color: var(--tools-accent);
    font-size: 15px;
    font-weight: 900;
}


body.tools-page .native-acl-result-card .native-acl-output-head .native-tools-btn {
    min-height: 34px;
    padding: 7px 12px;
}


/* Responsive */
@media (max-width: 1250px) {
    body.tools-page .native-acl-builder-card .native-acl-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.tools-page .native-acl-builder-card .native-acl-principal-preset-field {
        grid-column: 1;
        grid-row: 3 / span 2;
    }

    body.tools-page .native-acl-builder-card .native-acl-grid>label[for="tool-acl-principal"] {
        grid-column: 2;
        grid-row: 3;
    }

    body.tools-page .native-acl-builder-card .native-acl-grid>#tool-acl-principal {
        grid-column: 2;
        grid-row: 4;
    }

    body.tools-page .native-acl-builder-card .native-acl-grid>label[for="tool-acl-action"] {
        grid-column: 1;
        grid-row: 5;
    }

    body.tools-page .native-acl-builder-card .native-acl-grid>#tool-acl-action {
        grid-column: 1;
        grid-row: 6;
    }

    body.tools-page .native-acl-builder-card .native-acl-grid>label[for="tool-acl-rights"] {
        grid-column: 2;
        grid-row: 5;
    }

    body.tools-page .native-acl-builder-card .native-acl-grid>#tool-acl-rights {
        grid-column: 2;
        grid-row: 6;
    }

    body.tools-page .native-acl-builder-card .native-acl-grid>label[for="tool-acl-scope"] {
        grid-column: 1;
        grid-row: 7;
    }

    body.tools-page .native-acl-builder-card .native-acl-grid>#tool-acl-scope {
        grid-column: 1;
        grid-row: 8;
    }

    body.tools-page .native-acl-builder-card .native-acl-grid>label[for="tool-acl-inheritance"] {
        grid-column: 2;
        grid-row: 7;
    }

    body.tools-page .native-acl-builder-card .native-acl-grid>#tool-acl-inheritance {
        grid-column: 2;
        grid-row: 8;
    }
}


@media (max-width: 760px) {
    body.tools-page .native-acl-builder-card .native-acl-grid {
        grid-template-columns: minmax(0, 1fr);
    }


    body.tools-page .native-acl-builder-card .native-acl-grid>label,
    body.tools-page .native-acl-builder-card .native-acl-grid>input,
    body.tools-page .native-acl-builder-card .native-acl-grid>select,
    body.tools-page .native-acl-builder-card .native-acl-principal-preset-field {
        grid-column: 1;
        grid-row: auto;
    }


}


/* =========================================================
   Native Tools - Admin/Formatter Expansion Pack
   ========================================================= */

body.tools-page .native-service-builder-card .native-extra-grid,
body.tools-page .native-firewall-builder-card .native-extra-grid,
body.tools-page .native-log-extractor-card .native-extra-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 16px;
}


body.tools-page .native-service-output-card textarea,
body.tools-page .native-firewall-output-card textarea,
body.tools-page .native-log-extractor-card textarea,
body.tools-page .native-tools-card .native-regex-table {
    min-height: 180px;
}


body.tools-page .native-tools-mini-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 13px;
}


body.tools-page .native-tools-mini-table th,
body.tools-page .native-tools-mini-table td {
    border: 1px solid var(--tools-border, rgba(127, 127, 127, .25)) !important;
    padding: 7px 9px;
    text-align: left;
    vertical-align: top;
}


body.tools-page .native-tools-mini-table code {
    white-space: pre-wrap;
    word-break: break-word;
}


@media (max-width: 1150px) {

    body.tools-page .native-service-builder-card .native-extra-grid,
    body.tools-page .native-firewall-builder-card .native-extra-grid,
    body.tools-page .native-log-extractor-card .native-extra-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


}


@media (max-width: 760px) {

    body.tools-page .native-service-builder-card .native-extra-grid,
    body.tools-page .native-firewall-builder-card .native-extra-grid,
    body.tools-page .native-log-extractor-card .native-extra-grid {
        grid-template-columns: minmax(0, 1fr);
    }


}


/* =========================================================
   Native Tools - Form Grid + Hover Readability Rescue
   Datei nach tools.css und tools_big_expansion.css laden.
   ========================================================= */

/*
   Problem:
   ntxField()/ntxSelect() erzeugen Label und Control als getrennte Geschwister:
   label, input, label, select, ...
   Sobald diese Rohstruktur in ein 2/3-Spalten-CSS-Grid gelegt wird, landen
   Labels und Eingabefelder in falschen Spalten.

   Diese Karten benutzen genau diese Rohstruktur und werden deshalb hier
   auf ein sauberes label->field Layout zurückgesetzt.
*/

body.tools-page .native-ini-formatter-card .native-extra-grid,
body.tools-page .native-secret-redactor-card .native-extra-grid,
body.tools-page .native-path-analyzer-card .native-extra-grid,
body.tools-page .native-error-analyzer-card .native-extra-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    align-items: stretch;
}


/* Alle direkten Roh-Labels und Controls sauber untereinander erzwingen */
body.tools-page .native-ini-formatter-card .native-extra-grid>label,
body.tools-page .native-ini-formatter-card .native-extra-grid>input,
body.tools-page .native-ini-formatter-card .native-extra-grid>select,
body.tools-page .native-ini-formatter-card .native-extra-grid>textarea,
body.tools-page .native-secret-redactor-card .native-extra-grid>label,
body.tools-page .native-secret-redactor-card .native-extra-grid>input,
body.tools-page .native-secret-redactor-card .native-extra-grid>select,
body.tools-page .native-secret-redactor-card .native-extra-grid>textarea,
body.tools-page .native-path-analyzer-card .native-extra-grid>label,
body.tools-page .native-path-analyzer-card .native-extra-grid>input,
body.tools-page .native-path-analyzer-card .native-extra-grid>select,
body.tools-page .native-path-analyzer-card .native-extra-grid>textarea,
body.tools-page .native-error-analyzer-card .native-extra-grid>label,
body.tools-page .native-error-analyzer-card .native-extra-grid>input,
body.tools-page .native-error-analyzer-card .native-extra-grid>select,
body.tools-page .native-error-analyzer-card .native-extra-grid>textarea {
    grid-column: 1 / -1;
    grid-row: auto;
    min-width: 0;
    max-width: 100%;
}


/* Label-Abstände im vertikalen Formularlayout korrigieren */
body.tools-page .native-ini-formatter-card .native-extra-grid>label,
body.tools-page .native-secret-redactor-card .native-extra-grid>label,
body.tools-page .native-path-analyzer-card .native-extra-grid>label,
body.tools-page .native-error-analyzer-card .native-extra-grid>label {
    margin: 10px 0 0 0;
    min-height: auto;
    line-height: 1.25;
}


/* Erstes Label ohne unnötigen oberen Abstand */
body.tools-page .native-ini-formatter-card .native-extra-grid>label:first-child,
body.tools-page .native-secret-redactor-card .native-extra-grid>label:first-child,
body.tools-page .native-path-analyzer-card .native-extra-grid>label:first-child,
body.tools-page .native-error-analyzer-card .native-extra-grid>label:first-child {
    margin-top: 0 !important;
}


/*
   Desktop: Die betroffenen Karten dürfen wieder mehrspaltig wirken,
   aber nicht über Label/Input als einzelne Grid-Items.
   Stattdessen werden die Karten selbst sinnvoller verteilt.
*/



/* Service/Firewall/Log Ergebnisboxen nicht höher als nötig, aber gut nutzbar */
body.tools-page .native-service-output-card textarea,
body.tools-page .native-firewall-output-card textarea,
body.tools-page .native-log-extractor-card textarea[readonly] {
    min-height: 220px !important;
}


/* Lange Formular-Karten etwas kompakter, damit sie nicht unnötig ausufern */
body.tools-page .native-service-builder-card,
body.tools-page .native-firewall-builder-card,
body.tools-page .native-log-extractor-card,
body.tools-page .native-ini-formatter-card,
body.tools-page .native-secret-redactor-card,
body.tools-page .native-path-analyzer-card,
body.tools-page .native-error-analyzer-card {
    align-self: start;
}


body.tools-page .native-secret-redactor-card .native-tools-chip-list {
    margin-top: 14px;
}


/* =========================================================
   Hover-/Focus-Kontraste global entschärfen
   ========================================================= */

/* Buttons: keine reinen filter/brightness-Effekte mehr, weil Text unlesbar werden kann */


/* Sekundäre/Outline Buttons bleiben Outline und werden beim Hover nicht gelb mit falscher Schrift */


/* Lightmode: Primärbuttons schwarz/weiß statt gelb/weiß oder gelb/hell */


/* Sidebar Hover/Active lesbar halten */
body.tools-page .native-tools-nav-btn:hover,
body.tools-page .native-tools-nav-btn:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: var(--tools-text);
    border-color: var(--tools-border) !important;
    outline: none;
}


body.tools-page .native-tools-nav-btn.is-active,
body.tools-page .native-tools-nav-btn.is-active:hover,
body.tools-page .native-tools-nav-btn.is-active:focus-visible {
    background: var(--tools-accent) !important;
    color: #111111;
    border-color: var(--tools-accent) !important;
}


body.light-mode.tools-page .native-tools-nav-btn:hover,
body.light-mode .native-tools-nav-btn:hover,
body.light-mode.tools-page .native-tools-nav-btn:focus-visible,
body.light-mode .native-tools-nav-btn:focus-visible {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: rgba(0, 0, 0, 0.16) !important;
}


body.light-mode.tools-page .native-tools-nav-btn.is-active,
body.light-mode .native-tools-nav-btn.is-active,
body.light-mode.tools-page .native-tools-nav-btn.is-active:hover,
body.light-mode .native-tools-nav-btn.is-active:hover,
body.light-mode.tools-page .native-tools-nav-btn.is-active:focus-visible,
body.light-mode .native-tools-nav-btn.is-active:focus-visible {
    background: #111111 !important;
    color: #ffffff !important;
    border-color: #111111 !important;
}


/* Chips/Checkbox-Chips: Hover nicht mehr so hell/dunkel, dass Text verschwindet */


body.tools-page .native-tools-chip:hover span,
body.tools-page .native-tools-chip-checkbox:hover span {
    color: var(--tools-text);
}


body.light-mode.tools-page .native-tools-chip:hover,
body.light-mode .native-tools-chip:hover,
body.light-mode.tools-page .native-tools-chip-checkbox:hover,
body.light-mode .native-tools-chip-checkbox:hover {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: rgba(0, 0, 0, 0.20) !important;
}


body.light-mode.tools-page .native-tools-chip:hover span,
body.light-mode .native-tools-chip:hover span,
body.light-mode.tools-page .native-tools-chip-checkbox:hover span,
body.light-mode .native-tools-chip-checkbox:hover span {
    color: #111111 !important;
}


/* Select-Optionen bleiben lesbar, auch wenn Browser/Theme hover/selected rendert */
body.tools-page .native-tools-card select option {
    background-color: #242424;
    color: #ffffff;
}


body.light-mode.tools-page .native-tools-card select option,
body.light-mode .native-tools-card select option {
    background-color: #ffffff !important;
    color: #111111 !important;
}


/* Tabellen-Hover: nur dezente Fläche, kein Textfarb-Kippen */
body.tools-page .native-tools-mini-table tr:hover,
body.tools-page .native-tools-kv-table tr:hover {
    background: rgba(233, 166, 36, 0.08);
    color: var(--tools-text);
}


body.light-mode.tools-page .native-tools-mini-table tr:hover,
body.light-mode .native-tools-mini-table tr:hover,
body.light-mode.tools-page .native-tools-kv-table tr:hover,
body.light-mode .native-tools-kv-table tr:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #111111 !important;
}


/* Mobile/kleine Breiten: alle betroffenen Formulare bleiben einspaltig */
@media (max-width: 1179px) {

    body.tools-page .native-ini-formatter-card .native-extra-grid,
body.tools-page .native-secret-redactor-card .native-extra-grid,
body.tools-page .native-path-analyzer-card .native-extra-grid,
body.tools-page .native-error-analyzer-card .native-extra-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* =========================================================
   Native Tools - Layout + Hover Fix v2
   Muss nach tools.css, tools_big_expansion.css und tools_form_hover_fix.css geladen werden.
   ========================================================= */

/* ---------------------------------------------------------
   1) Kartenlayout für neue Admin-Tools
   --------------------------------------------------------- */

/* Input links, Ausgaben rechts darunter gestapelt */
body.tools-page #native-tools-content[data-current-tool="service-builder"] .native-tools-card-grid,
body.tools-page #native-tools-content[data-current-tool="firewall-builder"] .native-tools-card-grid {
    grid-template-columns: minmax(560px, 1.15fr) minmax(420px, 0.85fr);
    align-items: start;
}


body.tools-page #native-tools-content[data-current-tool="service-builder"] .native-service-builder-card,
body.tools-page #native-tools-content[data-current-tool="firewall-builder"] .native-firewall-builder-card {
    grid-row: 1 / span 2;
}


body.tools-page #native-tools-content[data-current-tool="service-builder"] .native-service-output-card,
body.tools-page #native-tools-content[data-current-tool="firewall-builder"] .native-firewall-output-card {
    min-width: 0;
}


body.tools-page #native-tools-content[data-current-tool="service-builder"] .native-service-output-card textarea,
body.tools-page #native-tools-content[data-current-tool="firewall-builder"] .native-firewall-output-card textarea {
    min-height: 235px;
    max-height: 42vh;
}


/* Log Extractor: Eingabe etwas größer, Ergebnis daneben */
body.tools-page #native-tools-content[data-current-tool="log-extractor"] .native-tools-card-grid {
    grid-template-columns: minmax(560px, 1fr) minmax(420px, 0.9fr);
    align-items: start;
}


/* ---------------------------------------------------------
   2) Rohstruktur label/input wieder sinnvoll zweispaltig paaren
      wichtig nach dem letzten einspaltigen Rescue-Patch
   --------------------------------------------------------- */

body.tools-page .native-service-builder-card .native-extra-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    column-gap: 18px;
    row-gap: 7px;
    align-items: end;
}


body.tools-page .native-service-builder-card .native-extra-grid>label,
body.tools-page .native-service-builder-card .native-extra-grid>input,
body.tools-page .native-service-builder-card .native-extra-grid>select,
body.tools-page .native-service-builder-card .native-extra-grid>textarea {
    min-width: 0;
    width: 100%;
    max-width: 100%;
}


body.tools-page .native-service-builder-card label[for="tool-svc-name"],
body.tools-page .native-service-builder-card #tool-svc-name {
    grid-column: 1 / 2;
}


body.tools-page .native-service-builder-card label[for="tool-svc-name"] {
    grid-row: 1;
    margin: 0;
    align-self: end;
}


body.tools-page .native-service-builder-card #tool-svc-name {
    grid-row: 2;
    margin: 0;
}


body.tools-page .native-service-builder-card label[for="tool-svc-display"],
body.tools-page .native-service-builder-card #tool-svc-display {
    grid-column: 2 / 3;
}


body.tools-page .native-service-builder-card label[for="tool-svc-display"] {
    grid-row: 1;
    margin: 0;
    align-self: end;
}


body.tools-page .native-service-builder-card #tool-svc-display {
    grid-row: 2;
    margin: 0;
}


body.tools-page .native-service-builder-card label[for="tool-svc-description"],
body.tools-page .native-service-builder-card #tool-svc-description {
    grid-column: 1 / 2;
}


body.tools-page .native-service-builder-card label[for="tool-svc-description"] {
    grid-row: 3;
    margin: 0;
    align-self: end;
}


body.tools-page .native-service-builder-card #tool-svc-description {
    grid-row: 4;
    margin: 0;
}


body.tools-page .native-service-builder-card label[for="tool-svc-exe"],
body.tools-page .native-service-builder-card #tool-svc-exe {
    grid-column: 2 / 3;
}


body.tools-page .native-service-builder-card label[for="tool-svc-exe"] {
    grid-row: 3;
    margin: 0;
    align-self: end;
}


body.tools-page .native-service-builder-card #tool-svc-exe {
    grid-row: 4;
    margin: 0;
}


body.tools-page .native-service-builder-card label[for="tool-svc-args"],
body.tools-page .native-service-builder-card #tool-svc-args {
    grid-column: 1 / 2;
}


body.tools-page .native-service-builder-card label[for="tool-svc-args"] {
    grid-row: 5;
    margin: 0;
    align-self: end;
}


body.tools-page .native-service-builder-card #tool-svc-args {
    grid-row: 6;
    margin: 0;
}


body.tools-page .native-service-builder-card label[for="tool-svc-deps"],
body.tools-page .native-service-builder-card #tool-svc-deps {
    grid-column: 2 / 3;
}


body.tools-page .native-service-builder-card label[for="tool-svc-deps"] {
    grid-row: 5;
    margin: 0;
    align-self: end;
}


body.tools-page .native-service-builder-card #tool-svc-deps {
    grid-row: 6;
    margin: 0;
}


body.tools-page .native-service-builder-card label[for="tool-svc-startup"],
body.tools-page .native-service-builder-card #tool-svc-startup {
    grid-column: 1 / 2;
}


body.tools-page .native-service-builder-card label[for="tool-svc-startup"] {
    grid-row: 7;
    margin: 0;
    align-self: end;
}


body.tools-page .native-service-builder-card #tool-svc-startup {
    grid-row: 8;
    margin: 0;
}


body.tools-page .native-service-builder-card label[for="tool-svc-account"],
body.tools-page .native-service-builder-card #tool-svc-account {
    grid-column: 2 / 3;
}


body.tools-page .native-service-builder-card label[for="tool-svc-account"] {
    grid-row: 7;
    margin: 0;
    align-self: end;
}


body.tools-page .native-service-builder-card #tool-svc-account {
    grid-row: 8;
    margin: 0;
}


body.tools-page .native-service-builder-card label[for="tool-svc-user"],
body.tools-page .native-service-builder-card #tool-svc-user {
    grid-column: 1 / 2;
}


body.tools-page .native-service-builder-card label[for="tool-svc-user"] {
    grid-row: 9;
    margin: 0;
    align-self: end;
}


body.tools-page .native-service-builder-card #tool-svc-user {
    grid-row: 10;
    margin: 0;
}


body.tools-page .native-service-builder-card label[for="tool-svc-reset-days"],
body.tools-page .native-service-builder-card #tool-svc-reset-days {
    grid-column: 2 / 3;
}


body.tools-page .native-service-builder-card label[for="tool-svc-reset-days"] {
    grid-row: 9;
    margin: 0;
    align-self: end;
}


body.tools-page .native-service-builder-card #tool-svc-reset-days {
    grid-row: 10;
    margin: 0;
}


body.tools-page .native-service-builder-card label[for="tool-svc-recovery1"],
body.tools-page .native-service-builder-card #tool-svc-recovery1 {
    grid-column: 1 / 2;
}


body.tools-page .native-service-builder-card label[for="tool-svc-recovery1"] {
    grid-row: 11;
    margin: 0;
    align-self: end;
}


body.tools-page .native-service-builder-card #tool-svc-recovery1 {
    grid-row: 12;
    margin: 0;
}


body.tools-page .native-service-builder-card label[for="tool-svc-recovery2"],
body.tools-page .native-service-builder-card #tool-svc-recovery2 {
    grid-column: 2 / 3;
}


body.tools-page .native-service-builder-card label[for="tool-svc-recovery2"] {
    grid-row: 11;
    margin: 0;
    align-self: end;
}


body.tools-page .native-service-builder-card #tool-svc-recovery2 {
    grid-row: 12;
    margin: 0;
}


body.tools-page .native-service-builder-card label[for="tool-svc-recovery3"],
body.tools-page .native-service-builder-card #tool-svc-recovery3 {
    grid-column: 1 / 2;
}


body.tools-page .native-service-builder-card label[for="tool-svc-recovery3"] {
    grid-row: 13;
    margin: 0;
    align-self: end;
}


body.tools-page .native-service-builder-card #tool-svc-recovery3 {
    grid-row: 14;
    margin: 0;
}


body.tools-page .native-service-builder-card label[for="tool-svc-restart-min"],
body.tools-page .native-service-builder-card #tool-svc-restart-min {
    grid-column: 2 / 3;
}


body.tools-page .native-service-builder-card label[for="tool-svc-restart-min"] {
    grid-row: 13;
    margin: 0;
    align-self: end;
}


body.tools-page .native-service-builder-card #tool-svc-restart-min {
    grid-row: 14;
    margin: 0;
}


body.tools-page .native-firewall-builder-card .native-extra-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    column-gap: 18px;
    row-gap: 7px;
    align-items: end;
}


body.tools-page .native-firewall-builder-card .native-extra-grid>label,
body.tools-page .native-firewall-builder-card .native-extra-grid>input,
body.tools-page .native-firewall-builder-card .native-extra-grid>select,
body.tools-page .native-firewall-builder-card .native-extra-grid>textarea {
    min-width: 0;
    width: 100%;
    max-width: 100%;
}


body.tools-page .native-firewall-builder-card label[for="tool-fw-name"],
body.tools-page .native-firewall-builder-card #tool-fw-name {
    grid-column: 1 / 2;
}


body.tools-page .native-firewall-builder-card label[for="tool-fw-name"] {
    grid-row: 1;
    margin: 0;
    align-self: end;
}


body.tools-page .native-firewall-builder-card #tool-fw-name {
    grid-row: 2;
    margin: 0;
}


body.tools-page .native-firewall-builder-card label[for="tool-fw-dir"],
body.tools-page .native-firewall-builder-card #tool-fw-dir {
    grid-column: 2 / 3;
}


body.tools-page .native-firewall-builder-card label[for="tool-fw-dir"] {
    grid-row: 1;
    margin: 0;
    align-self: end;
}


body.tools-page .native-firewall-builder-card #tool-fw-dir {
    grid-row: 2;
    margin: 0;
}


body.tools-page .native-firewall-builder-card label[for="tool-fw-action"],
body.tools-page .native-firewall-builder-card #tool-fw-action {
    grid-column: 1 / 2;
}


body.tools-page .native-firewall-builder-card label[for="tool-fw-action"] {
    grid-row: 3;
    margin: 0;
    align-self: end;
}


body.tools-page .native-firewall-builder-card #tool-fw-action {
    grid-row: 4;
    margin: 0;
}


body.tools-page .native-firewall-builder-card label[for="tool-fw-protocol"],
body.tools-page .native-firewall-builder-card #tool-fw-protocol {
    grid-column: 2 / 3;
}


body.tools-page .native-firewall-builder-card label[for="tool-fw-protocol"] {
    grid-row: 3;
    margin: 0;
    align-self: end;
}


body.tools-page .native-firewall-builder-card #tool-fw-protocol {
    grid-row: 4;
    margin: 0;
}


body.tools-page .native-firewall-builder-card label[for="tool-fw-local-port"],
body.tools-page .native-firewall-builder-card #tool-fw-local-port {
    grid-column: 1 / 2;
}


body.tools-page .native-firewall-builder-card label[for="tool-fw-local-port"] {
    grid-row: 5;
    margin: 0;
    align-self: end;
}


body.tools-page .native-firewall-builder-card #tool-fw-local-port {
    grid-row: 6;
    margin: 0;
}


body.tools-page .native-firewall-builder-card label[for="tool-fw-remote-port"],
body.tools-page .native-firewall-builder-card #tool-fw-remote-port {
    grid-column: 2 / 3;
}


body.tools-page .native-firewall-builder-card label[for="tool-fw-remote-port"] {
    grid-row: 5;
    margin: 0;
    align-self: end;
}


body.tools-page .native-firewall-builder-card #tool-fw-remote-port {
    grid-row: 6;
    margin: 0;
}


body.tools-page .native-firewall-builder-card label[for="tool-fw-local-address"],
body.tools-page .native-firewall-builder-card #tool-fw-local-address {
    grid-column: 1 / 2;
}


body.tools-page .native-firewall-builder-card label[for="tool-fw-local-address"] {
    grid-row: 7;
    margin: 0;
    align-self: end;
}


body.tools-page .native-firewall-builder-card #tool-fw-local-address {
    grid-row: 8;
    margin: 0;
}


body.tools-page .native-firewall-builder-card label[for="tool-fw-remote-address"],
body.tools-page .native-firewall-builder-card #tool-fw-remote-address {
    grid-column: 2 / 3;
}


body.tools-page .native-firewall-builder-card label[for="tool-fw-remote-address"] {
    grid-row: 7;
    margin: 0;
    align-self: end;
}


body.tools-page .native-firewall-builder-card #tool-fw-remote-address {
    grid-row: 8;
    margin: 0;
}


body.tools-page .native-firewall-builder-card label[for="tool-fw-program"],
body.tools-page .native-firewall-builder-card #tool-fw-program {
    grid-column: 1 / 2;
}


body.tools-page .native-firewall-builder-card label[for="tool-fw-program"] {
    grid-row: 9;
    margin: 0;
    align-self: end;
}


body.tools-page .native-firewall-builder-card #tool-fw-program {
    grid-row: 10;
    margin: 0;
}


body.tools-page .native-firewall-builder-card label[for="tool-fw-service"],
body.tools-page .native-firewall-builder-card #tool-fw-service {
    grid-column: 2 / 3;
}


body.tools-page .native-firewall-builder-card label[for="tool-fw-service"] {
    grid-row: 9;
    margin: 0;
    align-self: end;
}


body.tools-page .native-firewall-builder-card #tool-fw-service {
    grid-row: 10;
    margin: 0;
}


body.tools-page .native-firewall-builder-card label[for="tool-fw-interface"],
body.tools-page .native-firewall-builder-card #tool-fw-interface {
    grid-column: 1 / 2;
}


body.tools-page .native-firewall-builder-card label[for="tool-fw-interface"] {
    grid-row: 11;
    margin: 0;
    align-self: end;
}


body.tools-page .native-firewall-builder-card #tool-fw-interface {
    grid-row: 12;
    margin: 0;
}


body.tools-page .native-log-extractor-card .native-extra-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    column-gap: 18px;
    row-gap: 7px;
    align-items: end;
}


body.tools-page .native-log-extractor-card .native-extra-grid>label,
body.tools-page .native-log-extractor-card .native-extra-grid>input,
body.tools-page .native-log-extractor-card .native-extra-grid>select,
body.tools-page .native-log-extractor-card .native-extra-grid>textarea {
    min-width: 0;
    width: 100%;
    max-width: 100%;
}


body.tools-page .native-log-extractor-card label[for="tool-log-mode"],
body.tools-page .native-log-extractor-card #tool-log-mode {
    grid-column: 1 / 2;
}


body.tools-page .native-log-extractor-card label[for="tool-log-mode"] {
    grid-row: 1;
    margin: 0;
    align-self: end;
}


body.tools-page .native-log-extractor-card #tool-log-mode {
    grid-row: 2;
    margin: 0;
}


body.tools-page .native-log-extractor-card label[for="tool-log-output-format"],
body.tools-page .native-log-extractor-card #tool-log-output-format {
    grid-column: 2 / 3;
}


body.tools-page .native-log-extractor-card label[for="tool-log-output-format"] {
    grid-row: 1;
    margin: 0;
    align-self: end;
}


body.tools-page .native-log-extractor-card #tool-log-output-format {
    grid-row: 2;
    margin: 0;
}


body.tools-page .native-log-extractor-card label[for="tool-log-regex"],
body.tools-page .native-log-extractor-card #tool-log-regex {
    grid-column: 1 / 2;
}


body.tools-page .native-log-extractor-card label[for="tool-log-regex"] {
    grid-row: 3;
    margin: 0;
    align-self: end;
}


body.tools-page .native-log-extractor-card #tool-log-regex {
    grid-row: 4;
    margin: 0;
}


body.tools-page .native-log-extractor-card label[for="tool-log-flags"],
body.tools-page .native-log-extractor-card #tool-log-flags {
    grid-column: 2 / 3;
}


body.tools-page .native-log-extractor-card label[for="tool-log-flags"] {
    grid-row: 3;
    margin: 0;
    align-self: end;
}


body.tools-page .native-log-extractor-card #tool-log-flags {
    grid-row: 4;
    margin: 0;
}


body.tools-page .native-log-extractor-card label[for="tool-log-context-before"],
body.tools-page .native-log-extractor-card #tool-log-context-before {
    grid-column: 1 / 2;
}


body.tools-page .native-log-extractor-card label[for="tool-log-context-before"] {
    grid-row: 5;
    margin: 0;
    align-self: end;
}


body.tools-page .native-log-extractor-card #tool-log-context-before {
    grid-row: 6;
    margin: 0;
}


body.tools-page .native-log-extractor-card label[for="tool-log-context-after"],
body.tools-page .native-log-extractor-card #tool-log-context-after {
    grid-column: 2 / 3;
}


body.tools-page .native-log-extractor-card label[for="tool-log-context-after"] {
    grid-row: 5;
    margin: 0;
    align-self: end;
}


body.tools-page .native-log-extractor-card #tool-log-context-after {
    grid-row: 6;
    margin: 0;
}


/* Textareas/volle Blöcke bleiben unter der Optionszeile über beide Spalten */
body.tools-page .native-log-extractor-card #tool-log-input,
body.tools-page .native-log-extractor-card label[for="tool-log-input"] {
    grid-column: 1 / -1;
}


body.tools-page .native-log-extractor-card label[for="tool-log-input"] {
    grid-row: 7;
    margin-top: 10px;
}


body.tools-page .native-log-extractor-card #tool-log-input {
    grid-row: 8;
}


/* Chips und Buttons sauber unter die Feldgruppen */
body.tools-page .native-service-builder-card .native-tools-chip-list,
body.tools-page .native-firewall-builder-card .native-tools-chip-list,
body.tools-page .native-log-extractor-card .native-tools-chip-list {
    margin-top: 16px;
    padding-top: 2px;
}


body.tools-page .native-service-builder-card .native-tools-row,
body.tools-page .native-firewall-builder-card .native-tools-row,
body.tools-page .native-log-extractor-card .native-tools-row {
    margin-top: 16px;
}


/* ---------------------------------------------------------
   3) Hover-Kontraste: SID-Karten und Tool-Karten
   --------------------------------------------------------- */

/* SID-Karten dürfen beim Hover/Active nicht gelb mit hellem Text werden */
body.tools-page .native-sid-card,
body.tools-page .native-sid-card:hover,
body.tools-page .native-sid-card:focus-visible,
body.tools-page .native-sid-card:active {
    background: rgba(255, 255, 255, 0.055);
    color: var(--tools-text);
    border-color: var(--tools-border) !important;
    box-shadow: none;
    filter: none;
    outline: none;
}


body.tools-page .native-sid-card:hover,
body.tools-page .native-sid-card:focus-visible {
    background: rgba(233, 166, 36, 0.10);
    border-color: rgba(233, 166, 36, 0.68) !important;
}


body.tools-page .native-sid-card strong,
body.tools-page .native-sid-card:hover strong,
body.tools-page .native-sid-card:focus-visible strong,
body.tools-page .native-sid-card:active strong {
    color: var(--tools-accent);
}


body.tools-page .native-sid-card span,
body.tools-page .native-sid-card:hover span,
body.tools-page .native-sid-card:focus-visible span,
body.tools-page .native-sid-card:active span {
    color: var(--tools-text);
}


body.tools-page .native-sid-card small,
body.tools-page .native-sid-card:hover small,
body.tools-page .native-sid-card:focus-visible small,
body.tools-page .native-sid-card:active small {
    color: var(--tools-muted);
}


/* Falls Browser/Button-Styles ein :active erzwingen */
body.tools-page button.native-sid-card {
    appearance: none;
    -webkit-appearance: none;
}


/* Tool-Home-Karten / generische anklickbare Cards */
body.tools-page .native-tools-home-tool-card:hover,
body.tools-page .native-tools-home-tool-card:focus-visible,
body.tools-page .native-tools-home-category-card:hover,
body.tools-page .native-tools-home-category-card:focus-visible {
    background: rgba(233, 166, 36, 0.10) !important;
    color: var(--tools-text);
    border-color: rgba(233, 166, 36, 0.58) !important;
    filter: none;
}


body.tools-page .native-tools-home-tool-card:hover *,
body.tools-page .native-tools-home-tool-card:focus-visible *,
body.tools-page .native-tools-home-category-card:hover *,
body.tools-page .native-tools-home-category-card:focus-visible * {
    color: inherit !important;
}


body.tools-page .native-tools-home-tool-card:hover strong,
body.tools-page .native-tools-home-category-card:hover strong {
    color: var(--tools-accent) !important;
}


/* ---------------------------------------------------------
   4) Button/Chip Hover lesbar halten
   --------------------------------------------------------- */


body.tools-page .native-tools-chip:hover,
body.tools-page .native-tools-chip-checkbox:hover {
    background: rgba(233, 166, 36, 0.10);
    color: var(--tools-text);
    border-color: rgba(233, 166, 36, 0.50);
}


body.tools-page .native-tools-chip:hover *,
body.tools-page .native-tools-chip-checkbox:hover * {
    color: var(--tools-text) !important;
}


/* ---------------------------------------------------------
   5) Lightmode separat sauber halten
   --------------------------------------------------------- */

body.light-mode.tools-page .native-sid-card,
body.light-mode .native-sid-card {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: rgba(0, 0, 0, 0.14) !important;
}


body.light-mode.tools-page .native-sid-card:hover,
body.light-mode .native-sid-card:hover,
body.light-mode.tools-page .native-sid-card:focus-visible,
body.light-mode .native-sid-card:focus-visible {
    background: #f4f4f4 !important;
    color: #111111 !important;
    border-color: rgba(0, 0, 0, 0.32) !important;
}


body.light-mode.tools-page .native-sid-card strong,
body.light-mode .native-sid-card strong {
    color: #111111 !important;
}


body.light-mode.tools-page .native-sid-card span,
body.light-mode .native-sid-card span {
    color: #111111 !important;
}


body.light-mode.tools-page .native-sid-card small,
body.light-mode .native-sid-card small {
    color: #555555 !important;
}


/* ---------------------------------------------------------
   6) Responsive
   --------------------------------------------------------- */

@media (max-width: 1250px) {

    body.tools-page #native-tools-content[data-current-tool="service-builder"] .native-tools-card-grid,
    body.tools-page #native-tools-content[data-current-tool="firewall-builder"] .native-tools-card-grid,
    body.tools-page #native-tools-content[data-current-tool="log-extractor"] .native-tools-card-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.tools-page #native-tools-content[data-current-tool="service-builder"] .native-service-builder-card,
    body.tools-page #native-tools-content[data-current-tool="firewall-builder"] .native-firewall-builder-card {
        grid-row: auto;
    }
}


@media (max-width: 820px) {

    body.tools-page .native-service-builder-card .native-extra-grid,
    body.tools-page .native-firewall-builder-card .native-extra-grid,
    body.tools-page .native-log-extractor-card .native-extra-grid {
        grid-template-columns: minmax(0, 1fr);
    }


    body.tools-page .native-service-builder-card .native-extra-grid>label,
    body.tools-page .native-service-builder-card .native-extra-grid>input,
    body.tools-page .native-service-builder-card .native-extra-grid>select,
    body.tools-page .native-firewall-builder-card .native-extra-grid>label,
    body.tools-page .native-firewall-builder-card .native-extra-grid>input,
    body.tools-page .native-firewall-builder-card .native-extra-grid>select,
    body.tools-page .native-log-extractor-card .native-extra-grid>label,
    body.tools-page .native-log-extractor-card .native-extra-grid>input,
    body.tools-page .native-log-extractor-card .native-extra-grid>select,
    body.tools-page .native-log-extractor-card .native-extra-grid>textarea {
        grid-column: 1 / -1;
        grid-row: auto;
    }


}


/* =========================================================
   Native Tools - Windows Admin Pack 2 CSS
   Laden nach tools.css und den bisherigen Tools-Overrides.
   ========================================================= */

body.tools-page .native-pack2-card .native-exp-form-grid,
body.tools-page .native-registry-builder-card .native-exp-form-grid,
body.tools-page .native-eventlog-builder-card .native-exp-form-grid,
body.tools-page .native-robocopy-builder-card .native-exp-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 12px 16px;
    align-items: end;
}


body.tools-page .native-pack2-card .native-exp-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}


body.tools-page .native-pack2-card .native-exp-field>label {
    margin: 0;
    min-height: auto;
    line-height: 1.25;
}


body.tools-page .native-pack2-card .native-exp-field>input,
body.tools-page .native-pack2-card .native-exp-field>select,
body.tools-page .native-pack2-card .native-exp-field>textarea {
    margin: 0;
}


body.tools-page .native-pack2-card .native-exp-field-wide,
body.tools-page .native-escape-helper-card .native-exp-field,
body.tools-page .native-cert-helper-card .native-exp-field {
    grid-column: 1 / -1;
}


body.tools-page .native-exp-output-grid {
    grid-column: 1 / -1;
}


body.tools-page .native-exp-output-card textarea {
    max-height: 62vh;
}


body.tools-page #native-tools-content[data-current-tool="registry-builder"] .native-tools-card-grid,
body.tools-page #native-tools-content[data-current-tool="winget-builder"] .native-tools-card-grid,
body.tools-page #native-tools-content[data-current-tool="eventlog-builder"] .native-tools-card-grid,
body.tools-page #native-tools-content[data-current-tool="robocopy-builder"] .native-tools-card-grid,
body.tools-page #native-tools-content[data-current-tool="powershell-escape"] .native-tools-card-grid,
body.tools-page #native-tools-content[data-current-tool="cert-tls-helper"] .native-tools-card-grid {
    grid-template-columns: minmax(520px, 0.95fr) minmax(420px, 1.05fr) !important;
    align-items: start !important;
}


body.tools-page #native-tools-content[data-current-tool="registry-builder"] .native-tools-card-grid>.native-exp-output-grid,
body.tools-page #native-tools-content[data-current-tool="eventlog-builder"] .native-tools-card-grid>.native-exp-output-grid {
    grid-column: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
}


body.tools-page #native-tools-content[data-current-tool="winget-builder"] .native-exp-output-card,
body.tools-page #native-tools-content[data-current-tool="robocopy-builder"] .native-exp-output-card,
body.tools-page #native-tools-content[data-current-tool="powershell-escape"] .native-exp-output-card,
body.tools-page #native-tools-content[data-current-tool="cert-tls-helper"] .native-exp-output-card {
    align-self: stretch !important;
}


body.tools-page .native-pack2-card .native-tools-chip-list {
    margin-top: 14px;
    gap: 8px;
}


body.tools-page .native-pack2-card .native-tools-row {
    margin-top: 16px;
}


body.tools-page .native-pack2-card textarea.native-tools-small-textarea {
    min-height: 90px;
}


body.tools-page .native-pack2-card textarea.native-tools-large-textarea {
    min-height: 220px;
}


@media (max-width: 1250px) {

    body.tools-page #native-tools-content[data-current-tool="registry-builder"] .native-tools-card-grid,
body.tools-page #native-tools-content[data-current-tool="winget-builder"] .native-tools-card-grid,
body.tools-page #native-tools-content[data-current-tool="eventlog-builder"] .native-tools-card-grid,
body.tools-page #native-tools-content[data-current-tool="robocopy-builder"] .native-tools-card-grid,
body.tools-page #native-tools-content[data-current-tool="powershell-escape"] .native-tools-card-grid,
body.tools-page #native-tools-content[data-current-tool="cert-tls-helper"] .native-tools-card-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }


    body.tools-page #native-tools-content[data-current-tool="registry-builder"] .native-tools-card-grid>.native-exp-output-grid,
body.tools-page #native-tools-content[data-current-tool="eventlog-builder"] .native-tools-card-grid>.native-exp-output-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }


}


@media (max-width: 760px) {

    body.tools-page .native-pack2-card .native-exp-form-grid,
body.tools-page .native-registry-builder-card .native-exp-form-grid,
body.tools-page .native-eventlog-builder-card .native-exp-form-grid,
body.tools-page .native-robocopy-builder-card .native-exp-form-grid,
body.tools-page .native-exp-output-grid,
body.tools-page #native-tools-content[data-current-tool="registry-builder"] .native-tools-card-grid>.native-exp-output-grid,
body.tools-page #native-tools-content[data-current-tool="eventlog-builder"] .native-tools-card-grid>.native-exp-output-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }


}


/* =========================================================
   Native Tools - Windows Admin Pack 2 v2
   Icons + erweiterte Tool-Layouts
   Nach tools.css, tools_big_expansion.css, tools_layout_hover_fix_v2.css
   und tools_admin_pack2.css laden.
   ========================================================= */

/* Emoji/Text-Icons in Sidebar und Tool-Karten sauber darstellen */
body.tools-page .native-tools-nav-icon,
body.tools-page .native-tools-home-icon,
body.tools-page .native-tools-home-tool-icon {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", system-ui, sans-serif;
    font-size: 18px;
    line-height: 1;
    overflow: hidden;
}


body.tools-page .native-tools-nav-icon {
    min-width: 38px;
    width: 38px;
    height: 36px;
}


/* Neue Admin-Pack-Tools: Formularfelder paarweise, aber nicht chaotisch */
body.tools-page .native-pack2-card .native-exp-form-grid {
    grid-template-columns: repeat(2, minmax(230px, 1fr));
}


body.tools-page .native-pack2-card .native-exp-field,
body.tools-page .native-pack2-card .native-exp-field-wide {
    min-width: 0;
}


body.tools-page .native-pack2-card .native-exp-field-wide {
    grid-column: 1 / -1;
}


body.tools-page .native-pack2-card .native-exp-field label {
    margin: 0 0 6px 0;
    min-height: 18px;
    line-height: 1.25;
}


body.tools-page .native-pack2-card .native-exp-field input,
body.tools-page .native-pack2-card .native-exp-field select,
body.tools-page .native-pack2-card .native-exp-field textarea {
    margin: 0;
}


/* Große Optionslisten wie Robocopy als lesbares Grid statt unendlicher Chip-Wurst */
body.tools-page .native-robo-options {
    
    
    
    align-items: stretch;
}


body.tools-page .native-robo-options .native-tools-chip-checkbox,
body.tools-page .native-nginx-builder-card .native-tools-chip-checkbox {
    min-width: 0;
    min-height: 40px !important;
    padding: 8px 11px;
    border: 1px solid var(--tools-border) !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
}


/* Mirror ist bewusst auffällig, aber lesbar */
body.tools-page .native-robo-options label:has(#tool-robo-mirror),
body.tools-page .native-robo-options .native-tools-chip-checkbox:has(#tool-robo-mirror) {
    border-color: rgba(255, 107, 107, 0.55);
    background: rgba(255, 107, 107, 0.10);
}


body.tools-page .native-robo-mirror-warning {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 107, 107, 0.42);
    background: rgba(255, 107, 107, 0.10);
    color: #ffd1d1;
    font-weight: 750;
}


body.light-mode .native-robo-mirror-warning {
    background: rgba(220, 38, 38, 0.08) !important;
    border-color: rgba(185, 28, 28, 0.32) !important;
    color: #7f1d1d !important;
}


/* Output-Paare der neuen Tools */
body.tools-page .native-exp-output-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}


/* Robocopy / Docker / Nginx brauchen breite Eingabefläche */
body.tools-page #native-tools-content[data-current-tool="robocopy-builder"] .native-tools-card-grid,
body.tools-page #native-tools-content[data-current-tool="registry-builder"] .native-tools-card-grid,
body.tools-page #native-tools-content[data-current-tool="eventlog-builder"] .native-tools-card-grid {
    grid-template-columns: minmax(0, 1fr) !important;
}


/* Hover-Kontraste für neue Options-Chips hart lesbar halten */
body.tools-page .native-pack2-card .native-tools-chip-checkbox:hover,
body.tools-page .native-pack2-card .native-tools-chip-checkbox:focus-within {
    background: rgba(233, 166, 36, 0.12);
    border-color: rgba(233, 166, 36, 0.52);
    color: var(--tools-text);
    filter: none;
}


body.tools-page .native-pack2-card .native-tools-chip-checkbox:hover *,
body.tools-page .native-pack2-card .native-tools-chip-checkbox:focus-within * {
    color: var(--tools-text) !important;
}


body.light-mode .native-pack2-card .native-tools-chip-checkbox:hover,
body.light-mode .native-pack2-card .native-tools-chip-checkbox:focus-within {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.24) !important;
    color: #111111 !important;
}


body.light-mode .native-pack2-card .native-tools-chip-checkbox:hover *,
body.light-mode .native-pack2-card .native-tools-chip-checkbox:focus-within * {
    color: #111111 !important;
}


/* Responsive */
@media (max-width: 1100px) {
    body.tools-page .native-exp-output-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


@media (max-width: 820px) {
    body.tools-page .native-pack2-card .native-exp-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }


    body.tools-page .native-robo-options {
        grid-template-columns: minmax(0, 1fr);
    }


}


/* =========================================================
   Native Tools - Admin Pack 2 v3 Layout + Robocopy/Winget UX
   Ganz zuletzt laden.
   ========================================================= */

/* Allgemein: neue Pack2-Formulare dürfen breiter und dichter werden */
body.tools-page .native-pack2-card .native-exp-form-grid {
    display: grid;
    gap: 12px 16px;
    align-items: end;
}


/* Robocopy: mehr als 2 Spalten, weil viele kleine Parameter */
body.tools-page .native-robocopy-builder-card .native-exp-form-grid {
    grid-template-columns: repeat(4, minmax(160px, 1fr));
}


body.tools-page .native-robocopy-builder-card .native-exp-field:has(#tool-robo-src),
body.tools-page .native-robocopy-builder-card .native-exp-field:has(#tool-robo-dst),
body.tools-page .native-robocopy-builder-card .native-exp-field:has(#tool-robo-log) {
    grid-column: span 2;
}


/* Nginx: viele kleine Werte, daher 4 Spalten */


/* Winget / Eventlog / Registry: 3 Spalten statt unnötig viel Höhe */
body.tools-page .native-eventlog-builder-card .native-exp-form-grid,
body.tools-page .native-registry-builder-card .native-exp-form-grid {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
}


body.tools-page .native-registry-builder-card .native-exp-field:has(#tool-reg-key) {
    grid-column: span 2;
}


/* Robocopy Optionsliste als echte kompakte Parameter-Matrix */


/* Mirror/Purge optisch warnend, aber lesbar */
body.tools-page .native-robo-options .native-tools-chip-checkbox:has(#tool-robo-mirror),
body.tools-page .native-robo-options .native-tools-chip-checkbox:has(#tool-robo-purge) {
    border-color: rgba(255, 107, 107, .55) !important;
    background: rgba(255, 107, 107, .10);
}


body.tools-page .native-robo-help-card {
    margin-top: 14px;
}


body.tools-page .native-robo-help-table td:first-child {
    white-space: nowrap !important;
    width: 150px !important;
}


body.tools-page .native-robo-help-table code {
    color: var(--tools-accent);
    font-weight: 900;
}


/* Winget Suchhinweis sichtbar, aber nicht dominant */


/* Outputbereiche bei großen Tools breiter nutzbar */
body.tools-page #native-tools-content[data-current-tool="robocopy-builder"] .native-tools-card-grid {
    grid-template-columns: minmax(0, 1fr) !important;
}


/* Inputs/Outputs nicht unnötig riesig */
body.tools-page .native-nginx-builder-card textarea,
body.tools-page .native-robocopy-builder-card textarea {
    min-height: 90px;
}


body.tools-page .native-exp-output-card textarea {
    min-height: 260px;
}


/* Hover-Kontraste für neue Hilfetabellen/Chips sicherstellen */
body.tools-page .native-robo-help-table tr:hover {
    background: rgba(233, 166, 36, .08);
    color: var(--tools-text);
}


body.tools-page .native-robo-options .native-tools-chip-checkbox:hover,
body.tools-page .native-nginx-builder-card .native-tools-chip-checkbox:hover {
    background: rgba(233, 166, 36, .13) !important;
    color: var(--tools-text) !important;
    border-color: rgba(233, 166, 36, .56) !important;
    filter: none;
}


body.tools-page .native-robo-options .native-tools-chip-checkbox:hover *,
body.tools-page .native-nginx-builder-card .native-tools-chip-checkbox:hover * {
    color: var(--tools-text) !important;
}


/* Lightmode */


body.light-mode .native-robo-help-table code {
    color: #111111 !important;
}


/* Responsive */
@media (max-width: 1400px) {

    body.tools-page .native-robocopy-builder-card .native-exp-form-grid,
body.tools-page .native-robo-options {
        grid-template-columns: repeat(3, minmax(170px, 1fr));
    }
}


@media (max-width: 1050px) {

    body.tools-page .native-robocopy-builder-card .native-exp-form-grid,
body.tools-page .native-eventlog-builder-card .native-exp-form-grid,
body.tools-page .native-registry-builder-card .native-exp-form-grid,
body.tools-page .native-robo-options {
        grid-template-columns: repeat(2, minmax(190px, 1fr)) !important;
    }


}


@media (max-width: 720px) {

    body.tools-page .native-robocopy-builder-card .native-exp-form-grid,
body.tools-page .native-eventlog-builder-card .native-exp-form-grid,
body.tools-page .native-registry-builder-card .native-exp-form-grid,
body.tools-page .native-robo-options {
        grid-template-columns: minmax(0, 1fr) !important;
    }


    body.tools-page .native-robocopy-builder-card .native-exp-field,
body.tools-page .native-eventlog-builder-card .native-exp-field,
body.tools-page .native-registry-builder-card .native-exp-field {
        grid-column: 1 / -1;
    }


}


/* =========================================================
   Native Tools - Winget Search Modal + Robocopy Compact UX
   Ganz zuletzt laden.
   ========================================================= */

/* Winget Paket-Suche Modal */


/* Robocopy: kompakter und weniger überladen */
body.tools-page .native-robocopy-builder-card .native-robo-compact-layout {
    display: grid;
    gap: 14px;
}


body.tools-page .native-robo-section-block,
body.tools-page .native-robo-details {
    border: 1px solid var(--tools-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
    padding: 14px;
}


body.tools-page .native-robo-section-block h4 {
    margin: 0 0 12px 0;
    color: var(--tools-accent);
}


body.tools-page .native-robo-details summary {
    cursor: pointer;
    color: var(--tools-accent);
    font-weight: 900;
    user-select: none;
}


body.tools-page .native-robo-details[open] summary {
    margin-bottom: 12px;
}


body.tools-page .native-robocopy-builder-card .native-robo-basic-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    gap: 12px 16px;
    align-items: end;
}


body.tools-page .native-robocopy-builder-card .native-robo-basic-grid .native-exp-field:has(#tool-robo-src),
body.tools-page .native-robocopy-builder-card .native-robo-basic-grid .native-exp-field:has(#tool-robo-dst),
body.tools-page .native-robocopy-builder-card .native-robo-basic-grid .native-exp-field:has(#tool-robo-log) {
    grid-column: span 2;
}


body.tools-page .native-robo-filter-grid,
body.tools-page .native-robo-copy-grid,
body.tools-page .native-robo-performance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(170px, 1fr));
    gap: 12px 16px;
    align-items: end;
}


body.tools-page .native-robo-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
    gap: 8px;
}


body.tools-page .native-robo-options-primary {
    grid-template-columns: repeat(4, minmax(180px, 1fr));
}


body.tools-page .native-robo-options .native-tools-chip-checkbox {
    min-height: 38px !important;
    padding: 7px 10px;
    border-radius: 12px;
}


body.tools-page .native-robo-danger-block {
    border-color: rgba(255, 107, 107, .34);
}


body.tools-page .native-robo-danger-block .native-tools-chip-checkbox:has(#tool-robo-mirror),
body.tools-page .native-robo-danger-block .native-tools-chip-checkbox:has(#tool-robo-purge) {
    border-color: rgba(255, 107, 107, .58);
    background: rgba(255, 107, 107, .10);
}


body.tools-page .native-robo-mirror-warning {
    margin: 12px 0 0 0;
}


body.tools-page .native-robo-run-row {
    margin-top: 2px;
}


/* Light Mode Modal */
body.light-mode .native-robo-section-block,
body.light-mode .native-robo-details {
    background: #ffffff;
    color: #111111;
    border-color: rgba(0, 0, 0, .14);
}


/* Responsive */
@media (max-width: 1300px) {
    body.tools-page .native-robocopy-builder-card .native-robo-basic-grid {
        grid-template-columns: repeat(3, minmax(170px, 1fr));
    }

    body.tools-page .native-robo-options-primary {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}


@media (max-width: 950px) {

    body.tools-page .native-robocopy-builder-card .native-robo-basic-grid,
body.tools-page .native-robo-filter-grid,
body.tools-page .native-robo-copy-grid,
body.tools-page .native-robo-performance-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }


}


@media (max-width: 650px) {


    body.tools-page .native-robocopy-builder-card .native-robo-basic-grid,
body.tools-page .native-robo-filter-grid,
body.tools-page .native-robo-copy-grid,
body.tools-page .native-robo-performance-grid,
body.tools-page .native-robo-options-primary {
        grid-template-columns: minmax(0, 1fr);
    }


    body.tools-page .native-robocopy-builder-card .native-robo-basic-grid .native-exp-field {
        grid-column: 1 / -1;
    }


}


/* =========================================================
   Native Tools - Winget.run Modal Polish
   Ganz zuletzt laden.
   ========================================================= */


/* Light Mode */








/* Native Tools - Winget.run Modal Live i18n + UI Polish - ganz zuletzt laden */


/* Light Mode */








/* =========================================================
   Winget Modal - FINAL hard override
   Direkt am Ende von tools.css eingefügt.
   Ziel: sichtbare Änderung ohne weitere Lade-Reihenfolge-Abhängigkeit.
   ========================================================= */

html body .native-winget-search-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(10px) saturate(115%);
}


html body .native-winget-search-modal-backdrop>.native-winget-search-modal,
html body .native-winget-search-modal-backdrop .native-winget-search-modal {
    width: min(1080px, calc(100vw - 44px)) !important;
    max-height: min(860px, calc(100dvh - 44px));
    display: block;
}


html body .native-winget-search-modal-backdrop .native-winget-search-card {
    width: 100% !important;
    max-width: none !important;
    max-height: min(860px, calc(100dvh - 44px));
    overflow: auto;
    padding: 26px;
    border-radius: 22px;
    border: 1px solid rgba(233, 166, 36, .40);
    border-top: 4px solid var(--tools-accent, #e9a624) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018)),
        #1f1f1f !important;
    color: #f6f6f6;
    box-shadow:
        0 26px 90px rgba(0, 0, 0, .70),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}


html body .native-winget-search-modal-backdrop .native-winget-search-card h3 {
    margin: 0 52px 8px 0;
    color: var(--tools-accent, #e9a624);
    font-size: 26px;
    line-height: 1.15;
    font-weight: 950;
    letter-spacing: -.02em;
}


html body .native-winget-search-modal-backdrop .native-winget-search-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    min-height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    background: rgba(255, 255, 255, .055);
    color: #ffffff;
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    box-shadow: none;
    cursor: pointer;
}


html body .native-winget-search-modal-backdrop .native-winget-search-close:hover,
html body .native-winget-search-modal-backdrop .native-winget-search-close:focus-visible {
    background: var(--tools-accent, #e9a624) !important;
    color: #111111;
    border-color: var(--tools-accent, #e9a624) !important;
    outline: none;
}


html body .native-winget-search-modal-backdrop .native-winget-run-note {
    max-width: 940px;
    margin: 0 0 18px 0;
    color: #d7d7d7;
    line-height: 1.45;
    font-size: 15px;
}


/* Formbereich sichtbar als eigenes Panel */
html body .native-winget-search-modal-backdrop .native-winget-modal-grid {
    display: grid;
    gap: 12px;
    align-items: end;
    margin: 18px 0 14px 0;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(0, 0, 0, .18);
}


html body .native-winget-search-modal-backdrop .native-winget-modal-grid label {
    display: grid;
    gap: 7px;
    margin: 0;
    color: #f4f4f4;
    font-weight: 900;
}


html body .native-winget-search-modal-backdrop .native-winget-modal-grid label>span {
    color: #f4f4f4;
    font-size: 13px;
    font-weight: 950;
}


html body .native-winget-search-modal-backdrop .native-winget-modal-check {
    height: 44px;
    min-height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: #292929;
    color: #ffffff;
}


html body .native-winget-search-modal-backdrop .native-winget-modal-check input {
    width: 18px;
    height: 18px;
    min-height: 18px;
    padding: 0;
}


/* Actions links, Suchbutton klar sichtbar */
html body .native-winget-search-modal-backdrop .native-winget-modal-actions {
    margin: 14px 0 14px 0;
    gap: 10px;
}


html body .native-winget-search-modal-backdrop .native-winget-modal-actions .native-tools-btn {
    min-width: 140px;
    filter: none;
}


/* Nur der Command in der Copy-Box */
html body .native-winget-search-modal-backdrop .native-winget-search-command {
    margin: 12px 0 14px 0;
    padding: 13px 15px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: #101010;
    color: #ffffff;
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow: auto;
}


/* Resultate */
html body .native-winget-search-modal-backdrop .native-winget-results {
    max-height: 360px;
    overflow: auto;
    margin-top: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(0, 0, 0, .10);
}


html body .native-winget-search-modal-backdrop .native-winget-result-table {
    width: 100%;
    min-width: 920px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
}


html body .native-winget-search-modal-backdrop .native-winget-result-table th,
html body .native-winget-search-modal-backdrop .native-winget-result-table td {
    padding: 11px 10px;
    border-color: rgba(255, 255, 255, .10);
    color: #eeeeee;
    vertical-align: top;
}


html body .native-winget-search-modal-backdrop .native-winget-result-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #252525;
    color: #ffffff;
    font-weight: 950;
}


html body .native-winget-search-modal-backdrop .native-winget-result-table th:nth-child(1),
html body .native-winget-search-modal-backdrop .native-winget-result-table td:nth-child(1) {
    width: 32% !important;
}


html body .native-winget-search-modal-backdrop .native-winget-result-table th:nth-child(2),
html body .native-winget-search-modal-backdrop .native-winget-result-table td:nth-child(2) {
    width: 30% !important;
}


html body .native-winget-search-modal-backdrop .native-winget-result-table th:nth-child(3),
html body .native-winget-search-modal-backdrop .native-winget-result-table td:nth-child(3) {
    width: 13% !important;
}


html body .native-winget-search-modal-backdrop .native-winget-result-table th:nth-child(4),
html body .native-winget-search-modal-backdrop .native-winget-result-table td:nth-child(4) {
    width: 15% !important;
}


html body .native-winget-search-modal-backdrop .native-winget-result-table th:nth-child(5),
html body .native-winget-search-modal-backdrop .native-winget-result-table td:nth-child(5) {
    width: 145px !important;
    min-width: 145px !important;
    text-align: right !important;
    position: sticky !important;
    right: 0 !important;
    z-index: 1 !important;
    background: #252525 !important;
}


html body .native-winget-search-modal-backdrop .native-winget-result-table tr:hover td {
    background: rgba(233, 166, 36, .08);
}


html body .native-winget-search-modal-backdrop .native-winget-result-table tr:hover td:nth-child(5) {
    background: #302a1e !important;
}


html body .native-winget-search-modal-backdrop .native-winget-result-table td strong {
    display: block;
    color: #ffffff;
    margin-bottom: 4px;
}


html body .native-winget-search-modal-backdrop .native-winget-result-table td small {
    display: block;
    max-height: 3.8em;
    overflow: hidden;
    color: #cfcfcf;
    font-size: 12px;
    line-height: 1.28;
}


html body .native-winget-search-modal-backdrop .native-winget-result-table code {
    color: var(--tools-accent, #e9a624);
    white-space: normal;
    word-break: break-word;
}


html body .native-winget-search-modal-backdrop .native-tools-btn-small {
    min-width: 112px;
    white-space: nowrap;
}


/* Fallback kompakter */
html body .native-winget-search-modal-backdrop .native-winget-paste-fallback {
    margin-top: 16px;
    padding: 13px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .035);
}


html body .native-winget-search-modal-backdrop .native-winget-paste-fallback summary {
    cursor: pointer;
    color: var(--tools-accent, #e9a624);
    font-weight: 950;
}


/* Result-Hinweise unterhalb der Textarea */
html body.tools-page .native-winget-notes {
    margin-top: 12px;
}


html body.tools-page .native-winget-note-box {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(233, 166, 36, .28);
    background: rgba(233, 166, 36, .08);
}


html body.tools-page .native-winget-note-box p {
    margin: 0;
    color: var(--tools-muted, #cfcfcf);
    line-height: 1.4;
}


/* Light Mode */
html body.light-mode .native-winget-search-modal-backdrop {
    background: rgba(0, 0, 0, .50) !important;
}


html body.light-mode .native-winget-search-modal-backdrop .native-winget-search-card {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: rgba(0, 0, 0, .16) !important;
    border-top-color: #111111 !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .28) !important;
}


html body.light-mode .native-winget-search-modal-backdrop .native-winget-search-card h3 {
    color: #111111 !important;
}


html body.light-mode .native-winget-search-modal-backdrop .native-winget-search-close {
    background: #f4f4f4 !important;
    color: #111111 !important;
    border-color: rgba(0, 0, 0, .12) !important;
}


html body.light-mode .native-winget-search-modal-backdrop .native-winget-run-note,
html body.light-mode .native-winget-search-modal-backdrop .native-winget-modal-grid label,
html body.light-mode .native-winget-search-modal-backdrop .native-winget-modal-grid label>span,
html body.light-mode .native-winget-search-modal-backdrop .native-winget-modal-check {
    color: #111111 !important;
}


html body.light-mode .native-winget-search-modal-backdrop .native-winget-modal-grid {
    background: #f7f7f7 !important;
    border-color: rgba(0, 0, 0, .10) !important;
}


html body.light-mode .native-winget-search-modal-backdrop .native-winget-modal-check,
html body.light-mode .native-winget-search-modal-backdrop .native-winget-paste-fallback {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: rgba(0, 0, 0, .14) !important;
}


html body.light-mode .native-winget-search-modal-backdrop .native-winget-results {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, .12) !important;
}


html body.light-mode .native-winget-search-modal-backdrop .native-winget-result-table th,
html body.light-mode .native-winget-search-modal-backdrop .native-winget-result-table td:nth-child(5) {
    background: #f3f3f3 !important;
    color: #111111 !important;
}


html body.light-mode .native-winget-search-modal-backdrop .native-winget-result-table td {
    color: #111111 !important;
    border-color: rgba(0, 0, 0, .10) !important;
}


html body.light-mode .native-winget-search-modal-backdrop .native-winget-result-table td strong {
    color: #111111 !important;
}


html body.light-mode .native-winget-search-modal-backdrop .native-winget-result-table td small {
    color: #555555 !important;
}


html body.light-mode.tools-page .native-winget-note-box {
    background: rgba(0, 0, 0, .035) !important;
    border-color: rgba(0, 0, 0, .12) !important;
}


html body.light-mode.tools-page .native-winget-note-box p {
    color: #333333 !important;
}





@media (max-width: 620px) {
    html body .native-winget-search-modal-backdrop {
        padding: 10px;
    }


    html body .native-winget-search-modal-backdrop>.native-winget-search-modal,
    html body .native-winget-search-modal-backdrop .native-winget-search-modal {
        width: calc(100vw - 20px) !important;
    }


    html body .native-winget-search-modal-backdrop .native-winget-search-card {
        max-height: calc(100dvh - 20px);
        padding: 18px;
    }


}


/* =========================================================
   Winget Modal - Search field removal + version takeover polish
   Ganz unten in tools.css lassen.
   ========================================================= */

html body .native-winget-search-modal-backdrop #winget-modal-by[type="hidden"] {
    display: none !important;
}


html body .native-winget-search-modal-backdrop .native-winget-modal-grid {
    grid-template-columns: minmax(320px, 1fr) minmax(180px, .42fr) minmax(126px, auto);
}


html body .native-winget-search-modal-backdrop .native-winget-modal-grid label:has(#winget-modal-query) {
    grid-column: span 1 !important;
}


html body .native-winget-search-modal-backdrop .native-winget-modal-grid label:has(#winget-modal-source) {
    grid-column: span 1 !important;
}


html body .native-winget-search-modal-backdrop .native-winget-modal-check {
    grid-column: span 1;
}


body.tools-page .native-winget-builder-card .native-tools-chip-checkbox:has(#tool-winget-versions) {
    display: none;
}


@media (max-width: 900px) {
    html body .native-winget-search-modal-backdrop .native-winget-modal-grid {
        grid-template-columns: minmax(0, 1fr) minmax(160px, .55fr);
    }


    html body .native-winget-search-modal-backdrop .native-winget-modal-check {
        justify-content: flex-start;
    }


}


@media (max-width: 620px) {
    html body .native-winget-search-modal-backdrop .native-winget-modal-grid {
        grid-template-columns: minmax(0, 1fr);
    }


}


/* =========================================================
   Winget Tool - sichtbares Suchfeld-Dropdown entfernen
   ========================================================= */

body.tools-page .native-winget-builder-card #tool-winget-search-by[type="hidden"] {
    display: none !important;
}


body.tools-page .native-winget-builder-card .native-exp-field:has(#tool-winget-search-by) {
    display: none;
}



/* Docker Compose Builder CSS wurde nach /css/tools/modules/docker-compose-builder.css ausgelagert. */

/* =========================================================
   Native Tools - Bedienbarkeit / Vollständigkeit UX Pass
   Ergänzt Dropdown-/Combo-Felder, Hilfetexte und Admin-Builder-Abstände.
   ========================================================= */

html body.tools-page .native-exp-combo-field input[list] {
    padding-right: 28px !important;
}


html body.tools-page .native-tools-field-help {
    margin: 10px 0 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(233, 166, 36, .24);
    background: rgba(233, 166, 36, .07);
    line-height: 1.42;
}


html body.tools-page .native-admin-advanced-help {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--tools-border) !important;
    background: rgba(255, 255, 255, .035);
}


html body.tools-page .native-admin-advanced-help summary {
    cursor: pointer;
    color: var(--tools-accent);
    font-weight: 900;
}


html body.tools-page .native-eventlog-builder-card .native-exp-form-grid,
html body.tools-page .native-nginx-builder-card .native-exp-form-grid,
html body.tools-page .native-firewall-builder-card .native-extra-grid,
html body.tools-page .native-service-builder-card .native-extra-grid,
html body.tools-page .native-registry-builder-card .native-exp-form-grid {
    gap: 10px 14px;
}


html body.tools-page .native-eventlog-builder-card input,
html body.tools-page .native-eventlog-builder-card select,
html body.tools-page .native-nginx-builder-card input,
html body.tools-page .native-nginx-builder-card select,
html body.tools-page .native-firewall-builder-card input,
html body.tools-page .native-service-builder-card input,
html body.tools-page .native-registry-builder-card input,
html body.tools-page .native-msi-grid input {
    min-height: 36px;
}


html body.tools-page .native-nginx-builder-card textarea#tool-nginx-extra-headers {
    min-height: 70px;
    height: 70px;
    resize: vertical;
    font-family: Consolas, Monaco, "Courier New", monospace !important;
}


html body.tools-page .native-compose-v2 .native-compose-row-table select {
    min-height: 32px;
    height: 32px;
    padding: 6px 8px;
    font-size: 12.5px;
}


html body.tools-page .native-robo-compact-layout .native-robo-main-block .native-exp-form-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}


/* Light Mode */
html body.light-mode.tools-page .native-tools-field-help,
html body.light-mode.tools-page .native-admin-advanced-help {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, .13) !important;
}


/* =========================================================
   Native Tools - zentrale Formular- und Mobile-Normalisierung
   Stand: Form-Design kommt aus ui-core.css; tools.css regelt hier nur Tools-Layout.
   ========================================================= */


body.tools-page .native-tools-page input[type="checkbox"] {
    width: var(--checkbox-size, 20px) !important;
    min-width: var(--checkbox-size, 20px) !important;
    max-width: var(--checkbox-size, 20px) !important;
    height: var(--checkbox-size, 20px) !important;
    min-height: var(--checkbox-size, 20px) !important;
    max-height: var(--checkbox-size, 20px) !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: var(--checkbox-radius, 6px) !important;
}


body.tools-page .native-tools-page :where(.native-tools-card,
    .native-tools-header,
    .native-tools-result-box,
    .native-tools-dropzone,
    .native-tools-field-help,
    .native-admin-advanced-help) {
    max-width: 100%;
}


@media (max-width: 1100px) {

    body.tools-page .native-tools-header {
        align-items: stretch;
    }


    body.tools-page .native-tools-header-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }


}


@media (max-width: 760px) {
    body.tools-page {
        --tools-mobile-sidebar-width: min(88vw, 340px);
    }


    body.tools-page .native-tools-page {
        height: calc(100dvh - var(--global-nav-height, 66px) - var(--log-height, 0px) - env(safe-area-inset-bottom, 0px));
    }


    body.tools-page .native-tools-main {
        padding: 10px;
        padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    }


    body.tools-page .native-tools-header {
        padding: 12px;
        margin-bottom: 10px;
        border-radius: 16px;
        gap: 10px;
    }


    body.tools-page .native-tools-header h2 {
        font-size: clamp(21px, 7vw, 26px);
        line-height: 1.08;
        overflow-wrap: anywhere;
    }


    body.tools-page .native-tools-header p {
        font-size: 14px;
        line-height: 1.35;
    }


    body.tools-page .native-tools-header-actions {
        grid-template-columns: minmax(0, 1fr);
    }


    body.tools-page .native-tools-card {
        padding: 12px;
    }


    body.tools-page .native-tools-card h3 {
        font-size: 17px;
        line-height: 1.15;
    }


    body.tools-page .native-tools-card h4 {
        font-size: 15px;
        line-height: 1.2;
    }


    body.tools-page .native-tools-page :where(input:not([type]),
        input[type="text"],
        input[type="search"],
        input[type="password"],
        input[type="number"],
        input[type="email"],
        input[type="url"],
        input[type="tel"],
        input[type="time"],
        input[type="date"],
        input[type="datetime-local"],
        select,
        textarea) {
        font-size: 16px !important;
    }


    body.tools-page .native-tools-chip-list,
    body.tools-page .native-tools-format-options {
        overflow-x: visible;
    }


    body.tools-page .native-tools-chip,
    body.tools-page .native-tools-chip-checkbox,
    body.tools-page label.native-tools-chip:has(input[type="checkbox"]),
    body.tools-page .native-tools-option:has(input[type="checkbox"]),
    body.tools-page .native-tools-check:has(input[type="checkbox"]) {
        min-height: 42px !important;
        height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        line-height: 1.2 !important;
    }


    body.tools-page .native-tools-kv-table,
    body.tools-page .native-tools-kv-table tbody,
    body.tools-page .native-tools-kv-table tr,
    body.tools-page .native-tools-kv-table th,
    body.tools-page .native-tools-kv-table td {
        display: block;
        width: 100%;
    }


    body.tools-page .native-tools-kv-table th,
    body.tools-page .native-tools-kv-table td {
        padding: 8px 0;
    }


    body.tools-page .native-chmod-table {
        min-width: 0;
        font-size: 13px;
    }


    body.tools-page .native-chmod-table th,
    body.tools-page .native-chmod-table td {
        padding: 12px 8px;
    }


    body.tools-page .native-tools-result-box,
    body.tools-page .native-tools-card textarea,
    body.tools-page textarea.native-tools-large-textarea {
        max-height: 50dvh;
    }


}


@media (max-width: 520px) {
    body.tools-page .native-tools-main {
        padding: 8px;
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    }


    body.tools-page .native-tools-card {
        padding: 10px;
    }


    body.tools-page .native-tools-header {
        padding: 10px;
    }


    body.tools-page .native-tools-page :where(.native-exp-form-grid,
        .native-extra-grid,
        .native-exp-output-grid,
        .native-compose-grid,
        .native-compose-two-col,
        .native-compose-v2,
        .native-compose-v2 .native-compose-basic .native-exp-form-grid,
        .native-compose-v2 .native-compose-details .native-exp-form-grid,
        .native-compose-v2 .native-compose-side .native-exp-output-grid,
        .native-compose-v2 .native-compose-row-table) {
        grid-template-columns: minmax(0, 1fr);
    }


    body.tools-page .native-tools-page :where(.native-compose-row-editor,
        .native-compose-section,
        .native-compose-details) {
        padding: 10px;
        border-radius: 13px;
    }


    body.tools-page .native-compose-v2 .native-compose-row-editor-head {
        flex-direction: column;
        align-items: stretch;
    }


    body.tools-page .native-compose-v2 .native-compose-row-editor-head>* {
        width: 100% !important;
    }




}


/* =========================================================
   Native Tools - Mobile portrait app shell / usability layer
   Desktop and landscape stay unchanged by design.
   ========================================================= */
@media (max-width: 900px) and (orientation: portrait),
(hover: none) and (pointer: coarse) and (orientation: portrait) {
    body.tools-page {
        --tools-mobile-bottom-bar-height: 68px;
        --tools-mobile-sidebar-width: min(92vw, 360px);
    }

    body.tools-page #content,
    body.tools-page #content-area {
        overflow: hidden;
    }

    body.tools-page .native-tools-page {
        height: calc(100dvh - var(--global-nav-height, 66px) - var(--log-height, 0px));
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        overflow: hidden;
    }

    body.tools-page .native-tools-main {
        grid-column: 1 / -1;
        min-height: 0;
        height: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        padding: 10px 10px calc(var(--tools-mobile-bottom-bar-height) + 18px + env(safe-area-inset-bottom, 0px)) !important;
        overscroll-behavior: contain;
    }

    body.tools-page .native-tools-sidebar {
        position: fixed;
        top: var(--global-nav-height, 66px);
        left: 0;
        right: auto;
        bottom: calc(var(--log-height, 0px) + env(safe-area-inset-bottom, 0px));
        z-index: 2147483647;
        width: var(--tools-mobile-sidebar-width);
        max-width: var(--tools-mobile-sidebar-width);
        height: auto;
        max-height: none;
        padding: 12px;
        border-right: 1px solid var(--tools-border) !important;
        border-bottom: 0;
        box-shadow: 18px 0 44px rgba(0, 0, 0, .48);
        transform: translateX(calc(-1 * var(--tools-mobile-sidebar-width) - 18px));
        transition: transform .22s ease !important;
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr);
        pointer-events: auto;
        touch-action: pan-y;
        overflow: hidden;
    }

    body.tools-page.tools-native-sidebar-open .native-tools-sidebar,
    html.tools-native-sidebar-open body.tools-page .native-tools-sidebar,
    body.tools-page .native-tools-page.tools-native-sidebar-open .native-tools-sidebar {
        transform: translateX(0);
    }

    body.tools-page .native-tools-nav {
        min-height: 0;
        max-height: none;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 0 2px 84px 0;
    }

    body.tools-page .native-tools-search-wrap input {
        height: 46px;
        min-height: 46px;
        font-size: 16px;
    }

    body.tools-page .native-tools-nav-btn {
        min-height: 50px;
        padding: 10px 12px;
        border-radius: 14px;
    }

    body.tools-page .native-tools-mobile-backdrop {
        position: fixed;
        top: var(--global-nav-height, 66px);
        left: 0;
        right: 0;
        bottom: var(--log-height, 0px);
        z-index: 2147483646;
        display: none;
        border: 0;
        background: rgba(0, 0, 0, .46);
        padding: 0;
        margin: 0;
        cursor: pointer;
        pointer-events: none;
    }

    body.tools-page.tools-native-sidebar-open .native-tools-mobile-backdrop,
    html.tools-native-sidebar-open body.tools-page .native-tools-mobile-backdrop {
        display: block;
        pointer-events: auto;
    }


    body.tools-page .native-tools-mobile-shell {
        position: fixed;
        left: max(8px, env(safe-area-inset-left, 0px));
        right: max(8px, env(safe-area-inset-right, 0px));
        bottom: calc(8px + var(--log-height, 0px) + env(safe-area-inset-bottom, 0px));
        z-index: 420430;
        min-height: 58px;
        display: grid;
        gap: 4px;
        padding: 6px;
        border: 1px solid var(--tools-border) !important;
        border-radius: 22px;
        background: color-mix(in srgb, var(--tools-card) 94%, transparent);
        box-shadow: 0 16px 44px rgba(0, 0, 0, .42);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    body.light-mode.tools-page .native-tools-mobile-shell {
        background: rgba(255, 255, 255, .94) !important;
        box-shadow: 0 14px 36px rgba(15, 23, 42, .22) !important;
    }

    body.tools-page .native-tools-mobile-shell-btn {
        min-width: 0;
        min-height: 48px;
        display: grid;
        place-items: center;
        gap: 2px;
        padding: 5px 2px;
        border: 0;
        border-radius: 16px;
        background: transparent;
        color: var(--tools-text);
        font: inherit !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    body.tools-page .native-tools-mobile-shell-btn span {
        font-size: 18px;
        line-height: 1;
    }

    body.tools-page .native-tools-mobile-shell-btn strong {
        max-width: 100%;
        overflow: hidden;
        color: inherit;
        font-size: 10px;
        font-weight: 900;
        line-height: 1.05;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.tools-page .native-tools-mobile-shell-btn:active,
    body.tools-page .native-tools-mobile-shell-btn:focus-visible {
        background: rgba(233, 166, 36, .18);
        outline: none;
    }

    body.tools-page .native-tools-mobile-shell-btn.is-disabled,
    body.tools-page .native-tools-mobile-shell-btn:disabled {
        opacity: .42;
        cursor: default;
    }

    body.tools-page .native-tools-header {
        position: sticky;
        top: 0;
        z-index: 10;
        margin: 0 0 10px;
        padding: 12px;
        border-radius: 16px;
        background: color-mix(in srgb, var(--tools-card) 94%, transparent);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    body.tools-page .native-tools-header h2 {
        font-size: 22px;
        line-height: 1.08;
    }

    body.tools-page .native-tools-header p {
        font-size: 13px;
        line-height: 1.35;
    }

    body.tools-page .native-tools-header-actions {
        display: none;
    }

    body.tools-page .native-tools-status {
        position: sticky;
        top: 84px;
        z-index: 9;
        min-height: 0;
        margin: 0 0 10px;
        padding: 8px 10px;
        border-radius: 12px;
        background: rgba(0, 0, 0, .24);
        font-size: 13px;
    }

    body.light-mode.tools-page .native-tools-status {
        background: rgba(255, 255, 255, .72) !important;
    }

    body.tools-page .native-tools-card-grid,
    body.tools-page .native-tools-card-grid-single,
    body.tools-page .native-tools-two-col,
    body.tools-page .native-tools-three-col,
    body.tools-page .native-tools-four-col,
    body.tools-page .native-tools-b64-file-grid,
    body.tools-page .native-color-picker-layout,
    body.tools-page .native-cron-grid,
    body.tools-page .native-docker-compose-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    body.tools-page .native-tools-card {
        padding: 12px;
        overflow: hidden;
    }

    body.tools-page .native-tools-card[data-mobile-accordion="1"] {
        padding-top: 8px !important;
    }

    body.tools-page .native-tools-mobile-card-toggle {
        width: 100%;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: -2px 0 8px;
        padding: 8px 10px;
        border: 1px solid var(--tools-border) !important;
        border-radius: 14px;
        background: rgba(255, 255, 255, .06);
        color: var(--tools-text);
        font: inherit !important;
        font-weight: 950 !important;
        text-align: left;
        cursor: pointer;
    }

    body.light-mode.tools-page .native-tools-mobile-card-toggle {
        background: rgba(0, 0, 0, .045) !important;
    }

    body.tools-page .native-tools-mobile-card-toggle span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.tools-page .native-tools-card[data-mobile-collapsed="1"]> :not(.native-tools-mobile-card-toggle) {
        display: none !important;
    }

    body.tools-page .native-tools-card[data-mobile-collapsed="1"] .native-tools-mobile-card-toggle strong {
        transform: rotate(-90deg) !important;
    }

    body.tools-page .native-tools-card input,
    body.tools-page .native-tools-card select,
    body.tools-page .native-tools-card textarea {
        min-height: 46px;
        font-size: 16px;
    }

    body.tools-page .native-tools-card textarea {
        min-height: 132px;
        max-height: 42dvh;
        resize: vertical;
    }

    body.tools-page .native-tools-large-textarea,
    body.tools-page textarea.native-tools-large-textarea {
        min-height: 190px;
    }

    body.tools-page .native-tools-row,
    body.tools-page .native-tools-header-actions {
        gap: 8px;
    }

    body.tools-page .native-tools-btn {
        min-height: 46px;
        flex: 1 1 auto !important;
    }

    body.tools-page .native-tools-kv-table,
    body.tools-page .native-cron-symbol-table,
    body.tools-page .native-tools-dns-table {
        min-width: 620px;
    }

    body.tools-page .native-tools-kv-table,
    body.tools-page .native-tools-kv-table tbody,
    body.tools-page .native-tools-kv-table tr,
    body.tools-page .native-tools-kv-table th,
    body.tools-page .native-tools-kv-table td {
        display: block;
        width: 100%;
    }

    body.tools-page .native-tools-kv-table tr {
        padding: 10px 0;
        border-bottom: 1px solid var(--tools-border) !important;
    }

    body.tools-page .native-tools-kv-table th,
    body.tools-page .native-tools-kv-table td {
        padding: 4px 0;
        border: 0;
    }

    body.tools-page .native-tools-result-box,
    body.tools-page .native-tools-json-tree,
    body.tools-page .native-tools-tree-placeholder,
    body.tools-page .native-cron-help {
        max-height: 46dvh;
        font-size: 13px;
        -webkit-overflow-scrolling: touch;
    }

    body.tools-page .native-tools-mobile-output-open-btn {
        width: 100%;
        min-height: 42px;
        margin: 8px 0;
        border: 1px solid var(--tools-accent) !important;
        border-radius: 12px;
        background: transparent;
        color: var(--tools-accent);
        font-weight: 900;
        cursor: pointer;
    }

    body.tools-page .native-tools-global-search-panel,
    body.tools-page .native-tools-home-modal-panel {
        width: calc(100vw - 18px) !important;
        max-width: none !important;
        max-height: calc(100dvh - var(--global-nav-height, 66px) - var(--log-height, 0px) - 20px);
        border-radius: 22px;
    }
}


@media (max-width: 900px) and (orientation: portrait),
(hover: none) and (pointer: coarse) and (orientation: portrait) {
    body.tools-page .native-tools-mobile-output-modal {
        position: fixed;
        inset: 0;
        z-index: 2147483647;
        display: none;
    }


    body.tools-page .native-tools-mobile-output-modal.is-open {
        display: block;
    }


    body.tools-page .native-tools-mobile-output-backdrop {
        position: absolute;
        inset: 0;
        border: 0;
        background: rgba(0, 0, 0, .58);
        padding: 0;
        margin: 0;
    }


    body.tools-page .native-tools-mobile-output-panel {
        position: absolute;
        left: max(8px, env(safe-area-inset-left, 0px));
        right: max(8px, env(safe-area-inset-right, 0px));
        top: calc(var(--global-nav-height, 66px) + 8px);
        bottom: calc(var(--log-height, 0px) + 8px + env(safe-area-inset-bottom, 0px));
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        overflow: hidden;
        border: 1px solid var(--tools-border, rgba(255, 255, 255, .15)) !important;
        border-radius: 22px;
        background: var(--tools-card, #222) !important;
        color: var(--tools-text, #fff);
        box-shadow: 0 18px 56px rgba(0, 0, 0, .52);
    }


    body.light-mode.tools-page .native-tools-mobile-output-panel {
        background: #ffffff !important;
        color: #222222 !important;
    }


    body.tools-page .native-tools-mobile-output-header,
    body.tools-page .native-tools-mobile-output-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px;
        border-bottom: 1px solid var(--tools-border) !important;
    }


    body.tools-page .native-tools-mobile-output-actions {
        border-top: 1px solid var(--tools-border) !important;
        border-bottom: 0 !important;
    }


    body.tools-page .native-tools-mobile-output-header h3 {
        margin: 0;
        color: var(--tools-accent, #e9a624);
        font-size: 18px;
        font-weight: 950;
    }


    body.tools-page .native-tools-mobile-output-close {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border: 1px solid var(--tools-border) !important;
        border-radius: 999px;
        background: transparent;
        color: var(--tools-text, #fff);
        font-size: 28px;
        line-height: 1;
    }


    body.light-mode.tools-page .native-tools-mobile-output-close {
        color: #222222 !important;
    }


    body.tools-page .native-tools-mobile-output-value {
        min-height: 0;
        margin: 0;
        padding: 14px;
        overflow: auto;
        white-space: pre-wrap;
        word-break: break-word;
        color: inherit;
        background: rgba(0, 0, 0, .18);
        font-family: Consolas, Monaco, 'Courier New', monospace;
        font-size: 13px;
        line-height: 1.45;
        -webkit-overflow-scrolling: touch;
    }


    body.light-mode.tools-page .native-tools-mobile-output-value {
        background: #f1f1f1 !important;
    }


}


@media (min-width: 901px),
(orientation: landscape) and (hover: hover) and (pointer: fine) {

    .native-tools-mobile-shell,
    .native-tools-mobile-backdrop,
    .native-tools-mobile-card-toggle,
    .native-tools-mobile-output-open-btn,
    .native-tools-mobile-output-modal {
        display: none;
    }


}


/* =========================================================
   Native Tools - Mobile portrait Phase 2: generic layout
   Desktop remains untouched: only portrait/mobile media gates.
   ========================================================= */
@media (max-width: 900px) and (orientation: portrait),
(hover: none) and (pointer: coarse) and (orientation: portrait) {
    body.tools-page .native-tools-mobile-tabs {
        position: sticky;
        top: 0;
        z-index: 21;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 7px;
        margin: 0 0 10px;
        padding: 8px;
        border: 1px solid var(--tools-border) !important;
        border-radius: 16px;
        background: color-mix(in srgb, var(--tools-card) 94%, transparent);
        box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    body.light-mode.tools-page .native-tools-mobile-tabs {
        background: rgba(255, 255, 255, .90) !important;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .10) !important;
    }

    body.tools-page .native-tools-mobile-tab {
        min-width: 0;
        min-height: 44px;
        display: grid;
        grid-template-rows: auto auto;
        place-items: center;
        gap: 2px;
        border: 1px solid transparent;
        border-radius: 12px;
        background: rgba(255, 255, 255, .055);
        color: var(--tools-text);
        font: inherit !important;
        cursor: pointer;
        padding: 6px 5px;
        -webkit-tap-highlight-color: transparent;
    }

    body.light-mode.tools-page .native-tools-mobile-tab {
        background: rgba(0, 0, 0, .045) !important;
    }

    body.tools-page .native-tools-mobile-tab span {
        font-size: 15px;
        line-height: 1;
    }

    body.tools-page .native-tools-mobile-tab strong {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px;
        line-height: 1.1;
        font-weight: 950;
    }

    body.tools-page #native-tools-content[data-mobile-tab="input"] .native-tools-card[data-mobile-card-role="output"],
    body.tools-page #native-tools-content[data-mobile-tab="input"] .native-tools-card[data-mobile-card-role="help"],
    body.tools-page #native-tools-content[data-mobile-tab="output"] .native-tools-card:not([data-mobile-card-role="output"]):not([data-mobile-card-role="mixed"]),
    body.tools-page #native-tools-content[data-mobile-tab="help"] .native-tools-card:not([data-mobile-card-role="help"]) {
        display: none !important;
    }

    body.tools-page #native-tools-content[data-mobile-tab="output"] .native-tools-card[data-mobile-card-role="mixed"] .native-tools-mobile-card-toggle span::after {
        content: " · Output";
        color: var(--tools-muted) !important;
        font-weight: 800 !important;
    }

    body.tools-page table[data-mobile-table-cards="1"],
    body.tools-page table[data-mobile-table-cards="1"] tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        border: 0 !important;
        background: transparent !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        overflow: visible !important;
    }

    body.tools-page table[data-mobile-table-cards="1"] thead,
    body.tools-page table[data-mobile-table-cards="1"] colgroup {
        display: none !important;
    }

    body.tools-page table[data-mobile-table-cards="1"] tr[data-mobile-table-row="1"] {
        display: block !important;
        width: 100% !important;
        margin: 0 0 10px !important;
        padding: 10px 11px !important;
        border: 1px solid var(--tools-border) !important;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, .045) !important;
        box-shadow: none !important;
    }

    body.light-mode.tools-page table[data-mobile-table-cards="1"] tr[data-mobile-table-row="1"] {
        background: rgba(255, 255, 255, .72) !important;
    }

    body.tools-page table[data-mobile-table-cards="1"] th,
    body.tools-page table[data-mobile-table-cards="1"] td {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(88px, 34%) minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: start !important;
        padding: 5px 0 !important;
        border: 0 !important;
        text-align: left !important;
        color: var(--tools-text) !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    body.tools-page table[data-mobile-table-cards="1"] th::before,
    body.tools-page table[data-mobile-table-cards="1"] td::before {
        content: attr(data-mobile-label) !important;
        min-width: 0 !important;
        color: var(--tools-accent) !important;
        font-size: 11px !important;
        font-weight: 950 !important;
        line-height: 1.25 !important;
        text-transform: uppercase !important;
        letter-spacing: .045em !important;
        opacity: .95 !important;
    }

    body.tools-page table[data-mobile-table-cards="1"] th[data-mobile-row-title="1"] {
        display: block !important;
        padding: 0 0 7px !important;
        color: var(--tools-accent) !important;
        font-size: 14px !important;
        font-weight: 950 !important;
        line-height: 1.25 !important;
    }

    body.tools-page table[data-mobile-table-cards="1"] th[data-mobile-row-title="1"]::before {
        content: none !important;
    }

    body.tools-page table[data-mobile-table-cards="1"][data-mobile-kv-table="1"] td,
    body.tools-page table[data-mobile-table-cards="1"][data-mobile-kv-table="1"] th:not([data-mobile-row-title="1"]) {
        grid-template-columns: minmax(70px, 28%) minmax(0, 1fr) !important;
    }

    body.tools-page .native-tools-result-box,
    body.tools-page .native-tools-json-tree,
    body.tools-page .native-tools-tree-placeholder,
    body.tools-page .native-cron-help,
    body.tools-page textarea[readonly][data-mobile-output-enhanced="1"] {
        max-height: 38dvh !important;
    }

    body.tools-page .native-tools-mobile-output-open-btn+.native-tools-result-box,
    body.tools-page .native-tools-mobile-output-open-btn+.native-tools-json-tree,
    body.tools-page .native-tools-mobile-output-open-btn+.native-tools-tree-placeholder,
    body.tools-page .native-tools-mobile-output-open-btn+textarea[readonly] {
        margin-top: 0 !important;
    }
}


@media (min-width: 901px),
(orientation: landscape) and (hover: hover) and (pointer: fine) {
    .native-tools-mobile-tabs {
        display: none;
    }


}


/* =========================================================
   Native Tools - Mobile portrait Phase 4: comfort layer
   Zuletzt genutzt, Command Palette, Clipboard/Share, Toasts
   Desktop remains untouched.
   ========================================================= */

@media (max-width: 900px) and (orientation: portrait),
(hover: none) and (pointer: coarse) and (orientation: portrait) {

    body.tools-page .native-tools-mobile-shell {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    body.tools-page .native-tools-mobile-shell-btn-share {
        display: grid;
    }

    body.tools-page .native-tools-mobile-recent {
        display: grid;
        gap: 8px;
        min-height: 0;
        padding: 8px 2px 2px;
        border-top: 1px solid var(--tools-border) !important;
    }

    body.tools-page .native-tools-mobile-recent h3 {
        margin: 0 4px;
        color: var(--tools-muted);
        font-size: 10px;
        font-weight: 950;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    body.tools-page .native-tools-mobile-recent-list {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 2px 6px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    body.tools-page .native-tools-mobile-recent-btn {
        flex: 0 0 auto !important;
        max-width: 190px;
        min-height: 42px;
        padding: 8px 12px;
        border: 1px solid var(--tools-border) !important;
        border-radius: 999px;
        background: rgba(255, 255, 255, .065);
        color: var(--tools-text);
        font: inherit !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    body.light-mode.tools-page .native-tools-mobile-recent-btn {
        background: rgba(255, 255, 255, .72) !important;
    }

    body.tools-page .native-tools-mobile-recent-btn strong {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: inherit;
        font-size: 12px;
        font-weight: 900;
    }

    body.tools-page .native-tools-mobile-command {
        position: fixed;
        inset: 0;
        z-index: 420480;
        display: none;
        pointer-events: none;
    }

    body.native-tools-mobile-command-open.tools-page .native-tools-mobile-command,
    body.tools-page .native-tools-mobile-command[aria-hidden="false"] {
        display: block !important;
        pointer-events: auto !important;
    }

    body.tools-page .native-tools-mobile-command-backdrop {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        background: rgba(0, 0, 0, .58);
        cursor: pointer;
    }

    body.tools-page .native-tools-mobile-command-panel {
        position: absolute;
        left: max(10px, env(safe-area-inset-left, 0px));
        right: max(10px, env(safe-area-inset-right, 0px));
        top: calc(var(--global-nav-height, 66px) + 10px);
        bottom: calc(var(--log-height, 0px) + env(safe-area-inset-bottom, 0px) + 84px);
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
        border: 1px solid var(--tools-border) !important;
        border-radius: 22px;
        background: color-mix(in srgb, var(--tools-card) 96%, transparent);
        color: var(--tools-text);
        box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        overflow: hidden;
    }

    body.light-mode.tools-page .native-tools-mobile-command-panel {
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 24px 70px rgba(15, 23, 42, .28) !important;
    }

    body.tools-page .native-tools-mobile-command-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
    }

    body.tools-page .native-tools-mobile-command-header p {
        margin: 0 0 3px;
        color: var(--tools-accent);
        font-size: 11px;
        font-weight: 950;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    body.tools-page .native-tools-mobile-command-header h3 {
        margin: 0;
        color: var(--tools-text);
        font-size: 22px;
        line-height: 1.1;
        font-weight: 950;
    }

    body.tools-page .native-tools-mobile-command-close {
        flex: 0 0 auto !important;
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border: 1px solid var(--tools-border) !important;
        border-radius: 999px;
        background: rgba(255, 255, 255, .075);
        color: var(--tools-text);
        font-size: 26px;
        font-weight: 900;
        line-height: 1;
        cursor: pointer;
    }

    body.tools-page #native-tools-mobile-command-input {
        min-height: 52px;
        font-size: 16px;
    }

    body.tools-page .native-tools-mobile-command-body {
        min-height: 0;
        overflow: auto;
        display: grid;
        align-content: start;
        gap: 14px;
        padding: 2px 2px 8px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    body.tools-page .native-tools-mobile-command-body section {
        display: grid;
        gap: 8px;
    }

    body.tools-page .native-tools-mobile-command-body h4 {
        margin: 0 2px;
        color: var(--tools-muted);
        font-size: 11px;
        font-weight: 950;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    body.tools-page .native-tools-mobile-command-result {
        width: 100%;
        min-height: 58px;
        display: grid;
        gap: 3px;
        padding: 11px 12px;
        border: 1px solid var(--tools-border) !important;
        border-radius: 16px;
        background: rgba(255, 255, 255, .055);
        color: var(--tools-text);
        text-align: left;
        font: inherit !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    body.light-mode.tools-page .native-tools-mobile-command-result {
        background: rgba(255, 255, 255, .74) !important;
    }

    body.tools-page .native-tools-mobile-command-result:focus-visible,
    body.tools-page .native-tools-mobile-command-result:active {
        border-color: var(--tools-accent) !important;
        background: rgba(233, 166, 36, .16) !important;
        outline: none;
    }

    body.tools-page .native-tools-mobile-command-result strong {
        min-width: 0;
        overflow: hidden;
        color: var(--tools-text);
        font-size: 15px;
        font-weight: 950;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.tools-page .native-tools-mobile-command-result span {
        min-width: 0;
        overflow: hidden;
        color: var(--tools-muted);
        font-size: 12px;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.tools-page .native-tools-mobile-command-empty {
        margin: 0;
        padding: 14px;
        border: 1px dashed var(--tools-border) !important;
        border-radius: 14px;
        color: var(--tools-muted);
        text-align: center;
    }

    body.tools-page .native-tools-mobile-toast-host {
        position: fixed;
        left: max(12px, env(safe-area-inset-left, 0px));
        right: max(12px, env(safe-area-inset-right, 0px));
        bottom: calc(var(--log-height, 0px) + env(safe-area-inset-bottom, 0px) + 82px);
        z-index: 420500;
        display: grid;
        gap: 8px;
        pointer-events: none;
    }

    body.tools-page .native-tools-mobile-toast {
        justify-self: center;
        max-width: min(100%, 560px);
        padding: 10px 13px;
        border: 1px solid var(--tools-border) !important;
        border-radius: 999px;
        background: color-mix(in srgb, var(--tools-card) 94%, transparent);
        color: var(--tools-text);
        box-shadow: 0 12px 40px rgba(0, 0, 0, .38);
        opacity: 0;
        transform: translateY(10px) scale(.98);
        transition: opacity .18s ease, transform .18s ease !important;
        font-size: 13px;
        font-weight: 850;
        text-align: center;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    body.light-mode.tools-page .native-tools-mobile-toast {
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 14px 40px rgba(15, 23, 42, .24) !important;
    }

    body.tools-page .native-tools-mobile-toast.is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    body.tools-page .native-tools-mobile-toast--success {
        border-color: rgba(120, 217, 143, .42);
    }

    body.tools-page .native-tools-mobile-toast--error {
        border-color: rgba(255, 107, 107, .52);
        color: var(--tools-danger);
    }

    body.tools-page .native-tools-mobile-output-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


@media (min-width: 901px),
(orientation: landscape) and (hover: hover) and (pointer: fine) {

    .native-tools-mobile-recent,
    .native-tools-mobile-command,
    .native-tools-mobile-toast-host,
    .native-tools-mobile-shell-btn-share {
        display: none;
    }


}


@media (max-width: 380px) and (orientation: portrait),
(hover: none) and (pointer: coarse) and (max-width: 380px) and (orientation: portrait) {
    body.tools-page .native-tools-mobile-shell {
        --tools-mobile-bottom-bar-height: 72px;
        left: 6px;
        right: 6px;
        gap: 2px;
        padding: 5px;
    }


    body.tools-page .native-tools-mobile-shell-btn span {
        font-size: 16px;
    }


    body.tools-page .native-tools-mobile-shell-btn strong {
        font-size: 8.5px;
    }


}


/* =========================================================
   Native Tools - Mobile shell stabilization
   Step 1: body-level shell, portrait bottom-bar, landscape action-rail,
   right drawer, reattach-safe visibility. Desktop stays untouched.
   ========================================================= */

@media (max-width: 900px) and (orientation: portrait),
(hover: none) and (pointer: coarse) and (orientation: portrait) {
    html body.tools-page.native-tools-mobile-portrait {
        --tools-mobile-bottom-bar-height: 72px;
        --tools-mobile-sidebar-width: min(92vw, 370px);
    }

    html body.tools-page.native-tools-mobile-portrait #native-tools-mobile-shell,
    html body.tools-page.native-tools-mobile-portrait .native-tools-mobile-shell {
        position: fixed;
        left: max(8px, env(safe-area-inset-left, 0px));
        right: max(8px, env(safe-area-inset-right, 0px));
        top: auto;
        bottom: calc(8px + var(--log-height, 0px) + env(safe-area-inset-bottom, 0px));
        width: auto;
        max-width: none;
        height: auto;
        min-height: 58px;
        max-height: none;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        grid-auto-flow: column;
        align-items: stretch;
        gap: 4px !important;
        padding: 6px;
        border: 1px solid var(--tools-border) !important;
        border-radius: 22px;
        background: color-mix(in srgb, var(--tools-card) 94%, transparent) !important;
        box-shadow: 0 16px 44px rgba(0, 0, 0, .42) !important;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        z-index: 420430;
        pointer-events: auto;
        visibility: visible;
        opacity: 1;
        transform: none;
    }

    html body.tools-page.native-tools-mobile-portrait #native-tools-mobile-shell[data-action-count="6"],
    html body.tools-page.native-tools-mobile-portrait .native-tools-mobile-shell[data-action-count="6"] {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 3px !important;
    }

    html body.tools-page.native-tools-mobile-portrait #native-tools-mobile-shell[data-action-count="4"],
    html body.tools-page.native-tools-mobile-portrait .native-tools-mobile-shell[data-action-count="4"] {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    html body.tools-page.native-tools-mobile-portrait .native-tools-main {
        padding-bottom: calc(var(--tools-mobile-bottom-bar-height) + 18px + env(safe-area-inset-bottom, 0px)) !important;
    }

    html body.tools-page.native-tools-mobile-portrait .native-tools-sidebar {
        left: auto;
        right: 0;
        width: var(--tools-mobile-sidebar-width);
        max-width: var(--tools-mobile-sidebar-width);
        border-left: 1px solid var(--tools-border) !important;
        border-right: 0 !important;
        box-shadow: -18px 0 44px rgba(0, 0, 0, .48);
        transform: translateX(calc(100% + 18px));
        touch-action: pan-y;
    }

    html body.tools-page.native-tools-mobile-portrait.tools-native-sidebar-open .native-tools-sidebar,
    html.tools-native-sidebar-open body.tools-page.native-tools-mobile-portrait .native-tools-sidebar,
    html body.tools-page.native-tools-mobile-portrait .native-tools-page.tools-native-sidebar-open .native-tools-sidebar {
        transform: translateX(var(--native-tools-drawer-drag-x, 0px));
    }
}


@media (hover: none) and (pointer: coarse) and (orientation: landscape),
(any-hover: none) and (any-pointer: coarse) and (orientation: landscape),
(max-height: 560px) and (max-width: 1180px) and (orientation: landscape) {
    html body.tools-page.native-tools-mobile-landscape {
        --tools-mobile-action-rail-width: 66px;
        --tools-mobile-sidebar-width: min(82vw, 390px);
    }


    html body.tools-page.native-tools-mobile-landscape #content,
    html body.tools-page.native-tools-mobile-landscape #content-area {
        overflow: hidden;
    }


    html body.tools-page.native-tools-mobile-landscape .native-tools-page {
        height: calc(100dvh - var(--global-nav-height, 66px) - var(--log-height, 0px));
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        overflow: hidden;
    }


    html body.tools-page.native-tools-mobile-landscape .native-tools-main {
        grid-column: 1 / -1;
        height: 100%;
        min-height: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 8px calc(var(--tools-mobile-action-rail-width) + 14px + env(safe-area-inset-right, 0px)) 8px 10px !important;
    }


    html body.tools-page.native-tools-mobile-landscape #native-tools-mobile-shell,
    html body.tools-page.native-tools-mobile-landscape .native-tools-mobile-shell {
        position: fixed;
        left: auto;
        right: max(6px, env(safe-area-inset-right, 0px));
        top: calc(var(--global-nav-height, 66px) + 6px);
        bottom: calc(var(--log-height, 0px) + 6px + env(safe-area-inset-bottom, 0px));
        width: var(--tools-mobile-action-rail-width);
        max-width: var(--tools-mobile-action-rail-width);
        min-height: 0;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        gap: 5px;
        padding: 6px;
        border: 1px solid var(--tools-border) !important;
        border-radius: 20px;
        background: color-mix(in srgb, var(--tools-card) 94%, transparent);
        box-shadow: 0 16px 44px rgba(0, 0, 0, .42);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        z-index: 420430;
        overflow-y: auto;
        overflow-x: hidden;
        pointer-events: auto;
        visibility: visible;
        opacity: 1;
        transform: none;
        -webkit-overflow-scrolling: touch;
    }


    html body.light-mode.tools-page.native-tools-mobile-landscape #native-tools-mobile-shell,
    html body.light-mode.tools-page.native-tools-mobile-landscape .native-tools-mobile-shell {
        background: rgba(255, 255, 255, .94) !important;
        box-shadow: 0 14px 36px rgba(15, 23, 42, .22) !important;
    }


    html body.tools-page.native-tools-mobile-landscape .native-tools-mobile-shell-btn {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        flex: 0 0 auto !important;
        display: grid;
        place-items: center;
        gap: 1px;
        padding: 4px 2px;
        border: 0;
        border-radius: 15px;
        background: transparent;
        color: var(--tools-text);
        font: inherit !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }


    html body.tools-page.native-tools-mobile-landscape .native-tools-mobile-shell-btn span {
        font-size: 17px;
        line-height: 1;
    }


    html body.tools-page.native-tools-mobile-landscape .native-tools-mobile-shell-btn strong {
        max-width: 100%;
        overflow: hidden;
        color: inherit;
        font-size: 8.5px;
        font-weight: 900;
        line-height: 1.02;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    html body.tools-page.native-tools-mobile-landscape .native-tools-mobile-shell-btn.is-disabled,
    html body.tools-page.native-tools-mobile-landscape .native-tools-mobile-shell-btn:disabled {
        opacity: .42;
    }


    html body.tools-page.native-tools-mobile-landscape .native-tools-sidebar {
        position: fixed;
        top: var(--global-nav-height, 66px);
        left: auto;
        right: 0;
        bottom: calc(var(--log-height, 0px) + env(safe-area-inset-bottom, 0px));
        z-index: 420470 !important;
        width: var(--tools-mobile-sidebar-width);
        max-width: var(--tools-mobile-sidebar-width);
        height: auto;
        max-height: none;
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr);
        padding: 10px;
        border-left: 1px solid var(--tools-border) !important;
        border-right: 0 !important;
        border-bottom: 0;
        background: color-mix(in srgb, var(--tools-card) 96%, transparent) !important;
        box-shadow: -18px 0 44px rgba(0, 0, 0, .48);
        transform: translateX(calc(100% + 18px));
        transition: transform .22s ease !important;
        overflow: hidden;
        pointer-events: auto;
        touch-action: pan-y;
    }


    html body.tools-page.native-tools-mobile-landscape.tools-native-sidebar-open .native-tools-sidebar,
    html.tools-native-sidebar-open body.tools-page.native-tools-mobile-landscape .native-tools-sidebar,
    html body.tools-page.native-tools-mobile-landscape .native-tools-page.tools-native-sidebar-open .native-tools-sidebar {
        transform: translateX(var(--native-tools-drawer-drag-x, 0px)) !important;
    }


    html body.tools-page.native-tools-mobile-landscape .native-tools-sidebar.is-swipe-closing {
        transition: none !important;
        will-change: transform;
    }


    html body.tools-page.native-tools-mobile-landscape .native-tools-nav {
        min-height: 0;
        max-height: none;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 16px;
    }


    html body.tools-page.native-tools-mobile-landscape .native-tools-mobile-backdrop {
        position: fixed;
        top: var(--global-nav-height, 66px);
        left: 0;
        right: 0;
        bottom: var(--log-height, 0px);
        z-index: 420460;
        display: none;
        border: 0;
        background: rgba(0, 0, 0, .46);
        padding: 0;
        margin: 0;
        pointer-events: none;
    }


    html body.tools-page.native-tools-mobile-landscape.tools-native-sidebar-open .native-tools-mobile-backdrop,
    html.tools-native-sidebar-open body.tools-page.native-tools-mobile-landscape .native-tools-mobile-backdrop {
        display: block;
        pointer-events: auto;
    }


    html body.tools-page.native-tools-mobile-landscape .native-tools-header {
        margin: 0 0 8px;
        padding: 10px 12px;
        border-radius: 16px;
    }


    html body.tools-page.native-tools-mobile-landscape .native-tools-header h2 {
        font-size: 20px;
        line-height: 1.08;
    }


    html body.tools-page.native-tools-mobile-landscape .native-tools-header p,
    html body.tools-page.native-tools-mobile-landscape .native-tools-eyebrow {
        font-size: 12px;
    }


    html body.tools-page.native-tools-mobile-landscape .native-tools-header-actions,
    html body.tools-page.native-tools-mobile-landscape .native-tools-mobile-tabs,
    html body.tools-page.native-tools-mobile-landscape .native-tools-mobile-card-toggle,
    html body.tools-page.native-tools-mobile-landscape .native-tools-mobile-output-open-btn {
        display: none;
    }


    html body.tools-page.native-tools-mobile-landscape .native-tools-card {
        overflow: visible;
    }


}


@media (min-width: 901px) and (hover: hover) and (pointer: fine) {

    html body.tools-page:not(.native-tools-mobile-mode) #native-tools-mobile-shell,
    html body.tools-page:not(.native-tools-mobile-mode) .native-tools-mobile-shell,
    html body.tools-page:not(.native-tools-mobile-mode) .native-tools-mobile-backdrop {
        display: none;
    }


}


/* =========================================================
   Native Tools - Mobile whitelist tabs/accordions
   Desktop remains untouched.
   ========================================================= */
@media (max-width: 900px) and (orientation: portrait),
(hover: none) and (pointer: coarse) and (orientation: portrait) {

    body.tools-page .native-tools-mobile-tab[hidden],
    body.tools-page .native-tools-mobile-tab[aria-hidden="true"] {
        display: none !important;
    }

    body.tools-page #native-tools-content[data-mobile-tabs-enabled="0"] .native-tools-card,
    body.tools-page #native-tools-content[data-mobile-tabs-enabled="0"][data-mobile-tab="all"] .native-tools-card {
        display: block !important;
    }

    body.tools-page #native-tools-content[data-mobile-tabs-enabled="0"] .native-tools-mobile-card-toggle,
    body.tools-page #native-tools-content .native-tools-card.native-tools-mobile-no-accordion>.native-tools-mobile-card-toggle {
        display: none !important;
    }

    body.tools-page #native-tools-content .native-tools-card.native-tools-mobile-no-accordion,
    body.tools-page #native-tools-content .native-tools-card.native-tools-mobile-no-accordion[data-mobile-collapsed="1"] {
        display: block !important;
    }

    body.tools-page #native-tools-content .native-tools-card.native-tools-mobile-no-accordion[data-mobile-collapsed="1"]> :not(.native-tools-mobile-card-toggle) {
        display: revert !important;
    }
}


/* =========================================================
   Native Tools Runtime v2
   Grundprinzip: Shell + Tool-Instanz + Layout-Typen.
   Desktop bleibt unangetastet; mobile Regeln sind strikt gescoped.
   ========================================================= */
#native-tools-content>.native-tools-tool-instance {
    min-width: 0;
}


#native-tools-page[data-runtime="v2"] #native-tools-content>.native-tools-tool-instance[data-layout] {
    width: 100%;
}


body.native-tools-v2-mobile #native-tools-content>.native-tools-tool-instance {
    max-width: 100%;
    min-width: 0;
}


body.native-tools-v2-mobile #native-tools-content>.native-tools-tool-instance input,
body.native-tools-v2-mobile #native-tools-content>.native-tools-tool-instance textarea,
body.native-tools-v2-mobile #native-tools-content>.native-tools-tool-instance select,
body.native-tools-v2-mobile #native-tools-content>.native-tools-tool-instance button {
    min-width: 0;
}


/* =========================================================
   Native Tools - eleganter initialer Ladezustand
   ========================================================= */
.native-tools-loader-instance {
    display: grid;
    min-height: min(560px, calc(100dvh - 210px));
    place-items: center;
    padding: 22px;
}

.native-tools-loader-card {
    width: min(760px, 100%);
    padding: 26px;
    border: 1px solid color-mix(in srgb, var(--tools-accent) 34%, var(--tools-border));
    border-radius: 24px;
    background:
        radial-gradient(circle at top left, rgba(233, 166, 36, .16), transparent 36%),
        color-mix(in srgb, var(--tools-card) 92%, transparent);
    box-shadow: 0 22px 70px rgba(0, 0, 0, .28);
    overflow: hidden;
}

.native-tools-loader-card.is-error {
    border-color: rgba(255, 107, 107, .5);
}

.native-tools-loader-topline {
    display: flex;
    align-items: center;
    gap: 16px;
}

.native-tools-loader-orb {
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    border-radius: 20px;
    background: var(--tools-accent);
    position: relative;
    box-shadow: 0 0 0 8px rgba(233, 166, 36, .12);
}

.native-tools-loader-orb::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 999px;
    border: 4px solid rgba(0, 0, 0, .2);
    border-top-color: #111;
    animation: nativeToolsLoaderSpin .8s linear infinite;
}

.native-tools-loader-card h3 {
    margin: 0 0 6px;
    color: var(--tools-accent);
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 950;
}

.native-tools-loader-card p {
    margin: 0;
    color: var(--tools-muted);
    line-height: 1.45;
}

.native-tools-loader-progress {
    height: 8px;
    margin: 22px 0 18px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, .08);
}

.native-tools-loader-progress span {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, var(--tools-accent), transparent);
    animation: nativeToolsLoaderSweep 1.05s ease-in-out infinite;
}

.native-tools-loader-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.native-tools-loader-grid span,
.native-tools-loader-skeleton i {
    display: block;
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .13), rgba(255, 255, 255, .055));
    background-size: 240% 100%;
    animation: nativeToolsLoaderShimmer 1.35s ease-in-out infinite;
}

.native-tools-loader-grid span {
    min-height: 74px;
}

.native-tools-loader-skeleton {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.native-tools-loader-skeleton i {
    height: 16px;
}

.native-tools-loader-skeleton i:nth-child(2) {
    width: 82%;
}

.native-tools-loader-skeleton i:nth-child(3) {
    width: 62%;
}

@keyframes nativeToolsLoaderSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes nativeToolsLoaderSweep {
    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(260%);
    }
}

@keyframes nativeToolsLoaderShimmer {
    0% {
        background-position: 120% 0;
    }

    100% {
        background-position: -120% 0;
    }
}

body.light-mode .native-tools-loader-card {
    background: rgba(255, 255, 255, .84);
    box-shadow: 0 22px 70px rgba(0, 0, 0, .14);
}

body.light-mode .native-tools-loader-grid span,
body.light-mode .native-tools-loader-skeleton i {
    background: linear-gradient(90deg, rgba(0, 0, 0, .055), rgba(0, 0, 0, .115), rgba(0, 0, 0, .055));
    background-size: 240% 100%;
}

@media (max-width: 620px) {
    .native-tools-loader-card {
        padding: 20px;
        border-radius: 20px;
    }

    .native-tools-loader-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Native Tools - mehrzeilige Textboxen / Ergebnisboxen größer
   v17: hebt den späteren generischen 42px-Control-Override für
   echte Textareas wieder auf und vergrößert kleine Outputs.
   ========================================================= */

body.tools-page .native-tools-page textarea {
    line-height: 1.45;
    resize: vertical;
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
    body.tools-page .native-tools-page .native-tools-card textarea:not(.native-tools-small-textarea):not(.native-tools-large-textarea) {
        min-height: 150px;
    }

    body.tools-page .native-tools-page .native-tools-card textarea.native-tools-small-textarea {
        min-height: 150px;
    }

    body.tools-page .native-tools-page .native-tools-card textarea.native-tools-large-textarea {
        min-height: clamp(190px, 26vh, 440px);
    }

    body.tools-page .native-tools-page .native-tools-card textarea[readonly].native-tools-large-textarea,
    body.tools-page .native-tools-page .native-tools-card textarea[data-primary-output="1"] {
        min-height: clamp(190px, 28vh, 480px) !important;
    }

    body.tools-page #native-tools-content[data-current-tool="color"] #tool-color-output,
    body.tools-page #native-tools-content[data-current-tool="base64-file"] #tool-b64file-info,
    body.tools-page #native-tools-content[data-current-tool="json"] #tool-json-stats,
    body.tools-page #native-tools-content[data-current-tool="mac-lookup"] #tool-maclookup-plain,
    body.tools-page #native-tools-content[data-current-tool="list"] #tool-list-input-b,
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] #tool-nginx-extra-headers,
    body.tools-page #native-tools-content[data-current-tool="docker-compose-builder"] #tool-compose-network-defs,
    body.tools-page #native-tools-content[data-current-tool="docker-compose-builder"] #tool-compose-volume-defs {
        min-height: 170px !important;
    }

    body.tools-page #native-tools-content[data-current-tool="color"] #tool-color-output {
        min-height: 180px !important;
    }

    body.tools-page .native-tools-page .native-exp-output-card textarea,
    body.tools-page .native-tools-page .native-compose-output-card textarea {
        min-height: clamp(260px, 36vh, 620px);
    }
}

@media (min-width: 1400px) and (hover: hover) and (pointer: fine) {
    body.tools-page .native-tools-page .native-tools-card textarea.native-tools-small-textarea {
        min-height: 180px;
    }

    body.tools-page .native-tools-page .native-tools-card textarea.native-tools-large-textarea,
    body.tools-page .native-tools-page .native-tools-card textarea[data-primary-output="1"] {
        min-height: clamp(220px, 30vh, 560px) !important;
    }

    body.tools-page #native-tools-content[data-current-tool="color"] #tool-color-output {
        min-height: 220px !important;
    }
}

/* =========================================================
   Native Tools - Nginx Proxy Config Builder Layout v18
   Breitere Felder nach Inhalt statt gleich breite Mini-Spalten
   ========================================================= */

body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-tools-card-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card {
    width: 100%;
}

body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-form-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px 14px;
    align-items: end;
}

body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field {
    min-width: 0;
    grid-column: span 3;
}

body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field>label {
    min-height: 18px !important;
    margin: 0 0 6px 0;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field>input,
body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field>select,
body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field>textarea {
    margin: 0;
    box-sizing: border-box;
}

/* Reihe 1: Preset kurz, Domain breit, Location mittel */
body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-preset) {
    grid-column: span 2;
}

body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-domain) {
    grid-column: span 7;
}

body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-path) {
    grid-column: span 3;
}

/* Reihe 2: Scheme kurz, Upstream breit, Port mittel */
body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-scheme) {
    grid-column: span 2;
}

body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-upstream) {
    grid-column: span 7;
}

body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-port) {
    grid-column: span 3;
}

/* Reihe 3: kleine technische Werte kompakt nebeneinander */
body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-upstream-path) {
    grid-column: span 3;
}

body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-client-max) {
    grid-column: span 3;
}

body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-read-timeout),
body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-send-timeout),
body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-connect-timeout) {
    grid-column: span 2;
}

/* Extra Header: eigene volle Zeile, nicht mehr zwischen kleinen Feldern eingeklemmt */
body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-extra-headers) {
    grid-column: 1 / -1;
}

body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] #tool-nginx-extra-headers {
    min-height: clamp(120px, 15vh, 230px) !important;
    max-height: 32vh !important;
}

body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-tools-chip-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 9px 10px;
    margin-top: 16px;
}

body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-tools-chip-checkbox {
    width: 100%;
    min-height: 40px !important;
    padding: 8px 11px;
    justify-content: flex-start;
}

body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-tools-row {
    margin-top: 16px;
    justify-content: flex-start;
}

body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-exp-output-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    grid-column: 1 / -1;
}

body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-exp-output-card textarea {
    min-height: clamp(340px, 42vh, 680px) !important;
    max-height: 70vh !important;
}

@media (max-width: 1500px) {
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-form-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-preset),
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-scheme),
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-port),
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-read-timeout),
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-send-timeout),
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-connect-timeout) {
        grid-column: span 2;
    }

    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-domain),
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-upstream) {
        grid-column: span 4;
    }

    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-path),
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-upstream-path),
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-client-max) {
        grid-column: span 2;
    }

    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-extra-headers) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px),
(hover: none) and (pointer: coarse) {

    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-form-grid,
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-exp-output-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field,
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-preset),
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-domain),
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-path),
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-scheme),
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-upstream),
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-port),
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-upstream-path),
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-client-max),
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-read-timeout),
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-send-timeout),
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-connect-timeout),
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-extra-headers) {
        grid-column: 1 / -1;
    }

    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] #tool-nginx-extra-headers,
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-exp-output-card textarea {
        min-height: 180px !important;
        max-height: none !important;
    }
}



/* =========================================================
   Native Tools - Label/Control Beziehung v19
   Betroffene flache ntxGrid()-Tools erzeugen Label und Input als einzelne
   Geschwister. Hier werden die Paare optisch wieder zusammengeführt:
   Label direkt über dem zugehörigen Eingabefeld.
   ========================================================= */

body.tools-page .native-tools-card:has(#tool-regex-pattern) .native-extra-grid,
body.tools-page .native-tools-card:has(#tool-work-start) .native-extra-grid,
body.tools-page .native-tools-card:has(#tool-redact-replacement) .native-extra-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 6px 18px;
    align-items: end;
}

body.tools-page .native-tools-card:has(#tool-regex-pattern) .native-extra-grid>label,
body.tools-page .native-tools-card:has(#tool-work-start) .native-extra-grid>label,
body.tools-page .native-tools-card:has(#tool-redact-replacement) .native-extra-grid>label {
    margin: 0;
    min-height: 18px;
    line-height: 1.2;
    align-self: end;
}

body.tools-page .native-tools-card:has(#tool-regex-pattern) .native-extra-grid>input,
body.tools-page .native-tools-card:has(#tool-regex-pattern) .native-extra-grid>select,
body.tools-page .native-tools-card:has(#tool-work-start) .native-extra-grid>input,
body.tools-page .native-tools-card:has(#tool-work-start) .native-extra-grid>select,
body.tools-page .native-tools-card:has(#tool-redact-replacement) .native-extra-grid>input,
body.tools-page .native-tools-card:has(#tool-redact-replacement) .native-extra-grid>select {
    margin: 0;
    align-self: start;
}

/* Regex-Tester: Pattern / Flags / Modus / Ersatztext */
body.tools-page .native-tools-card:has(#tool-regex-pattern) .native-extra-grid> :nth-child(1),
body.tools-page .native-tools-card:has(#tool-regex-pattern) .native-extra-grid> :nth-child(2) {
    grid-column: 1 / 4;
}

body.tools-page .native-tools-card:has(#tool-regex-pattern) .native-extra-grid> :nth-child(3),
body.tools-page .native-tools-card:has(#tool-regex-pattern) .native-extra-grid> :nth-child(4) {
    grid-column: 4 / 6;
}

body.tools-page .native-tools-card:has(#tool-regex-pattern) .native-extra-grid> :nth-child(5),
body.tools-page .native-tools-card:has(#tool-regex-pattern) .native-extra-grid> :nth-child(6) {
    grid-column: 6 / 9;
}

body.tools-page .native-tools-card:has(#tool-regex-pattern) .native-extra-grid> :nth-child(7),
body.tools-page .native-tools-card:has(#tool-regex-pattern) .native-extra-grid> :nth-child(8) {
    grid-column: 9 / 13;
}

body.tools-page .native-tools-card:has(#tool-regex-pattern) .native-extra-grid> :nth-child(odd) {
    grid-row: 1;
}

body.tools-page .native-tools-card:has(#tool-regex-pattern) .native-extra-grid> :nth-child(even) {
    grid-row: 2;
}

/* Arbeitszeit-Rechner: Kommen / Gehen / Pause */
body.tools-page .native-tools-card:has(#tool-work-start) .native-extra-grid> :nth-child(1),
body.tools-page .native-tools-card:has(#tool-work-start) .native-extra-grid> :nth-child(2) {
    grid-column: 1 / 5;
}

body.tools-page .native-tools-card:has(#tool-work-start) .native-extra-grid> :nth-child(3),
body.tools-page .native-tools-card:has(#tool-work-start) .native-extra-grid> :nth-child(4) {
    grid-column: 5 / 9;
}

body.tools-page .native-tools-card:has(#tool-work-start) .native-extra-grid> :nth-child(5),
body.tools-page .native-tools-card:has(#tool-work-start) .native-extra-grid> :nth-child(6) {
    grid-column: 9 / 13;
}

body.tools-page .native-tools-card:has(#tool-work-start) .native-extra-grid> :nth-child(odd) {
    grid-row: 1;
}

body.tools-page .native-tools-card:has(#tool-work-start) .native-extra-grid> :nth-child(even) {
    grid-row: 2;
}

/* Secret Redactor: Ersatztext / Eigene Regex */
body.tools-page .native-tools-card:has(#tool-redact-replacement) .native-extra-grid> :nth-child(1),
body.tools-page .native-tools-card:has(#tool-redact-replacement) .native-extra-grid> :nth-child(2) {
    grid-column: 1 / 7;
}

body.tools-page .native-tools-card:has(#tool-redact-replacement) .native-extra-grid> :nth-child(3),
body.tools-page .native-tools-card:has(#tool-redact-replacement) .native-extra-grid> :nth-child(4) {
    grid-column: 7 / 13;
}

body.tools-page .native-tools-card:has(#tool-redact-replacement) .native-extra-grid> :nth-child(odd) {
    grid-row: 1;
}

body.tools-page .native-tools-card:has(#tool-redact-replacement) .native-extra-grid> :nth-child(even) {
    grid-row: 2;
}

@media (max-width: 900px) {

    body.tools-page .native-tools-card:has(#tool-regex-pattern) .native-extra-grid,
    body.tools-page .native-tools-card:has(#tool-work-start) .native-extra-grid,
    body.tools-page .native-tools-card:has(#tool-redact-replacement) .native-extra-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
    }

    body.tools-page .native-tools-card:has(#tool-regex-pattern) .native-extra-grid>*,
    body.tools-page .native-tools-card:has(#tool-work-start) .native-extra-grid>*,
    body.tools-page .native-tools-card:has(#tool-redact-replacement) .native-extra-grid>* {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    body.tools-page .native-tools-card:has(#tool-regex-pattern) .native-extra-grid>label:not(:first-child),
    body.tools-page .native-tools-card:has(#tool-work-start) .native-extra-grid>label:not(:first-child),
    body.tools-page .native-tools-card:has(#tool-redact-replacement) .native-extra-grid>label:not(:first-child) {
        margin-top: 6px;
    }
}


/* =========================================================
   Native Tools - Button-Abstand nach Eingabefeldern v20
   Einige Tool-Templates setzen die Aktions-Row direkt nach dem letzten
   Input/Textarea/Grid. Dadurch klebte der linke Button unten links am
   letzten Feld. Diese Regel gibt nur Button-Zeilen in Cards Abstand.
   ========================================================= */

body.tools-page .native-tools-card>input+.native-tools-row:has(.native-tools-btn),
body.tools-page .native-tools-card>select+.native-tools-row:has(.native-tools-btn),
body.tools-page .native-tools-card>textarea+.native-tools-row:has(.native-tools-btn),
body.tools-page .native-tools-card>.native-extra-grid+.native-tools-row:has(.native-tools-btn),
body.tools-page .native-tools-card>.native-extra-two-col+.native-tools-row:has(.native-tools-btn),
body.tools-page .native-tools-card>.native-tools-two-col+.native-tools-row:has(.native-tools-btn),
body.tools-page .native-tools-card>.native-tools-three-col+.native-tools-row:has(.native-tools-btn),
body.tools-page .native-tools-card>.native-tools-four-col+.native-tools-row:has(.native-tools-btn),
body.tools-page .native-tools-card>.native-tools-chip-list+.native-tools-row:has(.native-tools-btn),
body.tools-page .native-tools-card>.native-tools-option-grid+.native-tools-row:has(.native-tools-btn),
body.tools-page .native-tools-card>.native-cron-options+.native-tools-row:has(.native-tools-btn),
body.tools-page .native-tools-card>.native-exp-form-grid+.native-tools-row:has(.native-tools-btn) {
    margin-top: 14px;
}

body.tools-page .native-tools-card>p.native-tools-hint+.native-tools-row:has(.native-tools-btn),
body.tools-page .native-tools-card>.native-tools-hint+.native-tools-row:has(.native-tools-btn) {
    margin-top: 12px;
}

body.tools-page .native-tools-card>.native-tools-row:has(.native-tools-btn):not(:first-child) {
    row-gap: 10px;
}

@media (max-width: 900px),
(hover: none) and (pointer: coarse) {

    body.tools-page .native-tools-card>input+.native-tools-row:has(.native-tools-btn),
    body.tools-page .native-tools-card>select+.native-tools-row:has(.native-tools-btn),
    body.tools-page .native-tools-card>textarea+.native-tools-row:has(.native-tools-btn),
    body.tools-page .native-tools-card>.native-extra-grid+.native-tools-row:has(.native-tools-btn),
    body.tools-page .native-tools-card>.native-extra-two-col+.native-tools-row:has(.native-tools-btn),
    body.tools-page .native-tools-card>.native-tools-two-col+.native-tools-row:has(.native-tools-btn),
    body.tools-page .native-tools-card>.native-tools-three-col+.native-tools-row:has(.native-tools-btn),
    body.tools-page .native-tools-card>.native-tools-four-col+.native-tools-row:has(.native-tools-btn),
    body.tools-page .native-tools-card>.native-tools-chip-list+.native-tools-row:has(.native-tools-btn),
    body.tools-page .native-tools-card>.native-tools-option-grid+.native-tools-row:has(.native-tools-btn),
    body.tools-page .native-tools-card>.native-cron-options+.native-tools-row:has(.native-tools-btn),
    body.tools-page .native-tools-card>.native-exp-form-grid+.native-tools-row:has(.native-tools-btn) {
        margin-top: 12px;
    }
}


/* =========================================================
   Native Tools - Nginx Proxy Config Builder Split Layout v21
   Breite Desktop-Monitore: Eingabe kompakt links, Ergebnisse rechts
   ========================================================= */

@media (min-width: 1650px) and (hover: hover) and (pointer: fine) {
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-tools-card-grid {
        display: grid;
        grid-template-columns: minmax(560px, 700px) minmax(0, 1fr);
        gap: 16px;
        align-items: start;
    }

    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card {
        grid-column: 1;
        align-self: start;
    }

    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-exp-output-grid {
        grid-column: 2;
        align-self: stretch;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        min-width: 0;
    }

    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-form-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 12px 12px;
        align-items: end;
    }

    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field,
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-preset),
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-scheme),
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-port),
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-read-timeout),
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-send-timeout),
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-connect-timeout) {
        grid-column: span 2;
    }

    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-domain),
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-upstream) {
        grid-column: span 4;
    }

    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-path),
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-upstream-path),
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-client-max) {
        grid-column: span 2;
    }

    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-exp-field:has(#tool-nginx-extra-headers) {
        grid-column: 1 / -1;
    }

    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] #tool-nginx-extra-headers {
        min-height: clamp(130px, 18vh, 260px) !important;
        max-height: 32vh !important;
    }

    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card .native-tools-chip-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px 10px;
    }

    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-exp-output-card {
        min-width: 0;
        height: 100% !important;
        display: flex;
        flex-direction: column !important;
    }

    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-exp-output-card textarea {
        flex: 1 1 auto !important;
        min-height: clamp(520px, 62vh, 860px) !important;
        max-height: none !important;
    }
}

@media (min-width: 1650px) and (max-width: 2050px) and (hover: hover) and (pointer: fine) {
    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-tools-card-grid {
        grid-template-columns: minmax(540px, 660px) minmax(0, 1fr);
    }

    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-exp-output-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.tools-page #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-exp-output-card textarea {
        min-height: clamp(320px, 34vh, 560px) !important;
    }
}
/* =========================================================
   Native Tools Mobile Shell - V7 fixed bottom bar
   Ziel: keine rechte Action-Rail mehr; die Mobile-Bar bleibt unten.
   ========================================================= */
body.tools-page #native-tools-mobile-toggle,
html body.tools-page #native-tools-mobile-toggle,
body.tools-page .native-tools-mobile-toggle,
html body.tools-page .native-tools-mobile-toggle {
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

html body.tools-page.native-tools-mobile-landscape {
    --tools-mobile-bottom-bar-height: 72px;
    --tools-mobile-action-rail-width: 0px;
}

html body.tools-page.native-tools-mobile-landscape .native-tools-main {
    padding: 8px 10px calc(var(--tools-mobile-bottom-bar-height, 72px) + 18px + env(safe-area-inset-bottom, 0px)) 10px !important;
}

html body.tools-page.native-tools-mobile-landscape #native-tools-mobile-shell,
html body.tools-page.native-tools-mobile-landscape .native-tools-mobile-shell,
html body.tools-page.native-tools-mobile-mode #native-tools-mobile-shell,
html body.tools-page.native-tools-mobile-mode .native-tools-mobile-shell {
    position: fixed;
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc(8px + var(--log-height, 0px) + env(safe-area-inset-bottom, 0px));
    width: min(calc(100vw - 20px), 680px);
    max-width: min(calc(100vw - 20px), 680px);
    height: auto;
    min-height: 58px;
    max-height: none;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-flow: column;
    align-items: stretch;
    gap: 4px !important;
    padding: 6px;
    border: 1px solid var(--tools-border) !important;
    border-radius: 22px;
    background: color-mix(in srgb, var(--tools-card) 94%, transparent) !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .42) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 420430;
    overflow: visible;
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%);
    box-sizing: border-box;
}

html body.tools-page.native-tools-mobile-mode #native-tools-mobile-shell[data-action-count="6"],
html body.tools-page.native-tools-mobile-mode .native-tools-mobile-shell[data-action-count="6"] {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

html body.tools-page.native-tools-mobile-mode #native-tools-mobile-shell[data-action-count="4"],
html body.tools-page.native-tools-mobile-mode .native-tools-mobile-shell[data-action-count="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html body.tools-page.native-tools-mobile-landscape .native-tools-mobile-shell-btn,
html body.tools-page.native-tools-mobile-mode .native-tools-mobile-shell-btn {
    width: auto;
    min-width: 0;
    min-height: 48px;
    flex: none !important;
    display: grid;
    place-items: center;
    gap: 2px;
    padding: 5px 2px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--tools-text);
    font: inherit !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

html body.tools-page.native-tools-mobile-landscape .native-tools-mobile-shell-btn span,
html body.tools-page.native-tools-mobile-mode .native-tools-mobile-shell-btn span {
    font-size: 18px;
    line-height: 1;
}

html body.tools-page.native-tools-mobile-landscape .native-tools-mobile-shell-btn strong,
html body.tools-page.native-tools-mobile-mode .native-tools-mobile-shell-btn strong {
    max-width: 100%;
    overflow: hidden;
    color: inherit;
    font-size: 10px !important;
    font-weight: 900;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 720px) {
    html body.tools-page.native-tools-mobile-mode #native-tools-mobile-shell,
    html body.tools-page.native-tools-mobile-mode .native-tools-mobile-shell {
        width: min(calc(100vw - 24px), 620px);
        max-width: min(calc(100vw - 24px), 620px);
    }
}

/* =========================================================
   Native Tools Mobile - schmaler ACL-Fallback
   Der alte V8-Bottom-Bar-Teil wurde durch den spaeteren V10-Block ersetzt.
   ========================================================= */
@media (max-width: 920px), (hover: none) and (pointer: coarse) {
    body.tools-page #native-tools-content[data-current-tool="acl-builder"] .native-acl-builder-card .native-acl-grid,
    body.tools-page .native-tools-tool-instance[data-tool-id="acl-builder"] .native-acl-builder-card .native-acl-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    body.tools-page #native-tools-content[data-current-tool="acl-builder"] .native-acl-builder-card .native-acl-grid > label,
    body.tools-page #native-tools-content[data-current-tool="acl-builder"] .native-acl-builder-card .native-acl-grid > input,
    body.tools-page #native-tools-content[data-current-tool="acl-builder"] .native-acl-builder-card .native-acl-grid > select,
    body.tools-page #native-tools-content[data-current-tool="acl-builder"] .native-acl-builder-card .native-acl-principal-preset-field,
    body.tools-page .native-tools-tool-instance[data-tool-id="acl-builder"] .native-acl-builder-card .native-acl-grid > label,
    body.tools-page .native-tools-tool-instance[data-tool-id="acl-builder"] .native-acl-builder-card .native-acl-grid > input,
    body.tools-page .native-tools-tool-instance[data-tool-id="acl-builder"] .native-acl-builder-card .native-acl-grid > select,
    body.tools-page .native-tools-tool-instance[data-tool-id="acl-builder"] .native-acl-builder-card .native-acl-principal-preset-field {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    body.tools-page #native-tools-content[data-current-tool="acl-builder"] .native-acl-builder-card .native-acl-grid > input,
    body.tools-page #native-tools-content[data-current-tool="acl-builder"] .native-acl-builder-card .native-acl-grid > select,
    body.tools-page #native-tools-content[data-current-tool="acl-builder"] .native-acl-builder-card .native-acl-principal-preset-field > select,
    body.tools-page .native-tools-tool-instance[data-tool-id="acl-builder"] .native-acl-builder-card .native-acl-grid > input,
    body.tools-page .native-tools-tool-instance[data-tool-id="acl-builder"] .native-acl-builder-card .native-acl-grid > select,
    body.tools-page .native-tools-tool-instance[data-tool-id="acl-builder"] .native-acl-builder-card .native-acl-principal-preset-field > select {
        height: auto !important;
        min-height: 50px !important;
        font-size: 16px !important;
    }

    body.tools-page #native-tools-content[data-current-tool="acl-builder"] .native-acl-builder-card .native-acl-option-list,
    body.tools-page .native-tools-tool-instance[data-tool-id="acl-builder"] .native-acl-builder-card .native-acl-option-list {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }
}


/* =========================================================
   Native Tools Mobile Shell - V10 log-safe low bar
   Ziel: Bottom-Bar so tief wie möglich, Log-Grabber bleibt durch höheren Z-Index greifbar.
   ========================================================= */
html body.tools-page {
    --tools-mobile-bottom-gap-v10: 10px;
}

html body.tools-page.native-tools-mobile-mode #native-tools-mobile-shell,
html body.tools-page.native-tools-mobile-mode .native-tools-mobile-shell,
html body.tools-page.native-tools-mobile-landscape #native-tools-mobile-shell,
html body.tools-page.native-tools-mobile-landscape .native-tools-mobile-shell {
    bottom: calc(var(--tools-mobile-bottom-gap-v10, 10px) + var(--log-height, 0px) + env(safe-area-inset-bottom, 0px));
    z-index: 420430;
}

html body.tools-page.native-tools-mobile-mode .native-tools-main,
html body.tools-page.native-tools-mobile-landscape .native-tools-main {
    padding-bottom: calc(var(--tools-mobile-bottom-bar-height, 72px) + var(--tools-mobile-bottom-gap-v10, 10px) + var(--log-height, 0px) + env(safe-area-inset-bottom, 0px) + 18px) !important;
}


/* =========================================================
   Native Tools Mobile - V11 ACL responsive restore
   Ziel: ACL Builder darf ab sinnvoller Breite wieder zweispaltig sein; nur sehr schmal einspaltig.
   ========================================================= */
@media (min-width: 700px) {
    body.tools-page #native-tools-content[data-current-tool="acl-builder"] .native-acl-builder-card .native-acl-grid,
    body.tools-page .native-tools-tool-instance[data-tool-id="acl-builder"] .native-acl-builder-card .native-acl-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 14px !important;
        row-gap: 8px !important;
        align-items: end !important;
    }

    body.tools-page #native-tools-content[data-current-tool="acl-builder"] .native-acl-builder-card .native-acl-grid > label,
    body.tools-page #native-tools-content[data-current-tool="acl-builder"] .native-acl-builder-card .native-acl-grid > input,
    body.tools-page #native-tools-content[data-current-tool="acl-builder"] .native-acl-builder-card .native-acl-grid > select,
    body.tools-page #native-tools-content[data-current-tool="acl-builder"] .native-acl-builder-card .native-acl-principal-preset-field,
    body.tools-page .native-tools-tool-instance[data-tool-id="acl-builder"] .native-acl-builder-card .native-acl-grid > label,
    body.tools-page .native-tools-tool-instance[data-tool-id="acl-builder"] .native-acl-builder-card .native-acl-grid > input,
    body.tools-page .native-tools-tool-instance[data-tool-id="acl-builder"] .native-acl-builder-card .native-acl-grid > select,
    body.tools-page .native-tools-tool-instance[data-tool-id="acl-builder"] .native-acl-builder-card .native-acl-principal-preset-field {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    body.tools-page #native-tools-content[data-current-tool="acl-builder"] .native-acl-builder-card .native-acl-grid > label[for="tool-acl-path"],
    body.tools-page .native-tools-tool-instance[data-tool-id="acl-builder"] .native-acl-builder-card .native-acl-grid > label[for="tool-acl-path"] {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
    }

    body.tools-page #native-tools-content[data-current-tool="acl-builder"] .native-acl-builder-card .native-acl-grid > #tool-acl-path,
    body.tools-page .native-tools-tool-instance[data-tool-id="acl-builder"] .native-acl-builder-card .native-acl-grid > #tool-acl-path {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
    }

    body.tools-page #native-tools-content[data-current-tool="acl-builder"] .native-acl-builder-card .native-acl-principal-preset-field,
    body.tools-page .native-tools-tool-instance[data-tool-id="acl-builder"] .native-acl-builder-card .native-acl-principal-preset-field {
        grid-column: 1 !important;
        grid-row: 3 / span 2 !important;
    }

    body.tools-page #native-tools-content[data-current-tool="acl-builder"] .native-acl-builder-card .native-acl-grid > label[for="tool-acl-principal"],
    body.tools-page .native-tools-tool-instance[data-tool-id="acl-builder"] .native-acl-builder-card .native-acl-grid > label[for="tool-acl-principal"] {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    body.tools-page #native-tools-content[data-current-tool="acl-builder"] .native-acl-builder-card .native-acl-grid > #tool-acl-principal,
    body.tools-page .native-tools-tool-instance[data-tool-id="acl-builder"] .native-acl-builder-card .native-acl-grid > #tool-acl-principal {
        grid-column: 2 !important;
        grid-row: 4 !important;
    }

    body.tools-page #native-tools-content[data-current-tool="acl-builder"] .native-acl-builder-card .native-acl-grid > label[for="tool-acl-action"],
    body.tools-page .native-tools-tool-instance[data-tool-id="acl-builder"] .native-acl-builder-card .native-acl-grid > label[for="tool-acl-action"] {
        grid-column: 1 !important;
        grid-row: 5 !important;
    }

    body.tools-page #native-tools-content[data-current-tool="acl-builder"] .native-acl-builder-card .native-acl-grid > #tool-acl-action,
    body.tools-page .native-tools-tool-instance[data-tool-id="acl-builder"] .native-acl-builder-card .native-acl-grid > #tool-acl-action {
        grid-column: 1 !important;
        grid-row: 6 !important;
    }

    body.tools-page #native-tools-content[data-current-tool="acl-builder"] .native-acl-builder-card .native-acl-grid > label[for="tool-acl-rights"],
    body.tools-page .native-tools-tool-instance[data-tool-id="acl-builder"] .native-acl-builder-card .native-acl-grid > label[for="tool-acl-rights"] {
        grid-column: 2 !important;
        grid-row: 5 !important;
    }

    body.tools-page #native-tools-content[data-current-tool="acl-builder"] .native-acl-builder-card .native-acl-grid > #tool-acl-rights,
    body.tools-page .native-tools-tool-instance[data-tool-id="acl-builder"] .native-acl-builder-card .native-acl-grid > #tool-acl-rights {
        grid-column: 2 !important;
        grid-row: 6 !important;
    }

    body.tools-page #native-tools-content[data-current-tool="acl-builder"] .native-acl-builder-card .native-acl-grid > label[for="tool-acl-scope"],
    body.tools-page .native-tools-tool-instance[data-tool-id="acl-builder"] .native-acl-builder-card .native-acl-grid > label[for="tool-acl-scope"] {
        grid-column: 1 !important;
        grid-row: 7 !important;
    }

    body.tools-page #native-tools-content[data-current-tool="acl-builder"] .native-acl-builder-card .native-acl-grid > #tool-acl-scope,
    body.tools-page .native-tools-tool-instance[data-tool-id="acl-builder"] .native-acl-builder-card .native-acl-grid > #tool-acl-scope {
        grid-column: 1 !important;
        grid-row: 8 !important;
    }

    body.tools-page #native-tools-content[data-current-tool="acl-builder"] .native-acl-builder-card .native-acl-grid > label[for="tool-acl-inheritance"],
    body.tools-page .native-tools-tool-instance[data-tool-id="acl-builder"] .native-acl-builder-card .native-acl-grid > label[for="tool-acl-inheritance"] {
        grid-column: 2 !important;
        grid-row: 7 !important;
    }

    body.tools-page #native-tools-content[data-current-tool="acl-builder"] .native-acl-builder-card .native-acl-grid > #tool-acl-inheritance,
    body.tools-page .native-tools-tool-instance[data-tool-id="acl-builder"] .native-acl-builder-card .native-acl-grid > #tool-acl-inheritance {
        grid-column: 2 !important;
        grid-row: 8 !important;
    }

    body.tools-page #native-tools-content[data-current-tool="acl-builder"] .native-acl-builder-card .native-acl-option-list,
    body.tools-page .native-tools-tool-instance[data-tool-id="acl-builder"] .native-acl-builder-card .native-acl-option-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
}

@media (max-width: 699px) {
    body.tools-page #native-tools-content[data-current-tool="acl-builder"] .native-acl-builder-card .native-acl-grid,
    body.tools-page .native-tools-tool-instance[data-tool-id="acl-builder"] .native-acl-builder-card .native-acl-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}


/* =========================================================
   Native Tools - Mobile CSS sweep v14
   Ziel: generische Mobile-Tools mit flachen ntxGrid()-Formularen stabilisieren.
   Beispiele: Regex-Tester, Arbeitszeit-Rechner, Secret Redactor,
   Aspect Ratio, Resolution Scaler, Log Extractor, Service/Firewall/INI.

   Hintergrund:
   ntxField()/ntxSelect() erzeugen Label und Control als getrennte
   Geschwister. Auf Mobile darf daraus kein mehrspaltiges Grid bleiben,
   sonst werden Labels extrem schmal und brechen wie im Regex-Tester.
   ========================================================= */

html body.tools-page.native-tools-mobile-portrait .native-tools-tool-instance:not([data-tool-id="word-html"]):not([data-tool-id="image-editor"]):not([data-tool-id="docker-compose-builder"]) .native-tools-card .native-extra-grid,
html body.tools-page.native-tools-mobile-portrait #native-tools-content:not([data-current-tool="word-html"]):not([data-current-tool="image-editor"]):not([data-current-tool="docker-compose-builder"]) .native-tools-card .native-extra-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 7px !important;
    align-items: stretch !important;
    overflow: visible !important;
}

html body.tools-page.native-tools-mobile-portrait .native-tools-tool-instance:not([data-tool-id="word-html"]):not([data-tool-id="image-editor"]):not([data-tool-id="docker-compose-builder"]) .native-tools-card .native-extra-grid > *,
html body.tools-page.native-tools-mobile-portrait #native-tools-content:not([data-current-tool="word-html"]):not([data-current-tool="image-editor"]):not([data-current-tool="docker-compose-builder"]) .native-tools-card .native-extra-grid > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

html body.tools-page.native-tools-mobile-portrait .native-tools-card .native-extra-grid > label {
    display: block;
    width: 100%;
    margin: 8px 0 0 0;
    min-height: 0;
    line-height: 1.22;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    text-align: left;
}

html body.tools-page.native-tools-mobile-portrait .native-tools-card .native-extra-grid > label:first-child {
    margin-top: 0 !important;
}

html body.tools-page.native-tools-mobile-portrait .native-tools-card .native-extra-grid > input,
html body.tools-page.native-tools-mobile-portrait .native-tools-card .native-extra-grid > select,
html body.tools-page.native-tools-mobile-portrait .native-tools-card .native-extra-grid > textarea {
    margin: 0;
}

html body.tools-page.native-tools-mobile-portrait .native-tools-card .native-extra-grid + .native-tools-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin-top: 12px !important;
}

html body.tools-page.native-tools-mobile-portrait .native-tools-card .native-extra-grid + .native-tools-row > .native-tools-btn,
html body.tools-page.native-tools-mobile-portrait .native-tools-card .native-extra-grid + .native-tools-row > button {
    width: 100% !important;
    min-width: 0 !important;
}

html body.tools-page.native-tools-mobile-portrait #native-tools-content[data-current-tool="regex"] .native-tools-card:has(#tool-regex-pattern) .native-extra-grid,
html body.tools-page.native-tools-mobile-portrait .native-tools-tool-instance[data-tool-id="regex"] .native-tools-card:has(#tool-regex-pattern) .native-extra-grid {
    grid-template-columns: minmax(0, 1fr) !important;
}

html body.tools-page.native-tools-mobile-portrait #native-tools-content[data-current-tool="regex"] .native-tools-card:has(#tool-regex-pattern) .native-extra-grid > *,
html body.tools-page.native-tools-mobile-portrait .native-tools-tool-instance[data-tool-id="regex"] .native-tools-card:has(#tool-regex-pattern) .native-extra-grid > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
}

/* Touch-/Tablet-Portrait: auch dann greifen, wenn der Viewport breiter als 900px ist. */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
    html body.tools-page .native-tools-tool-instance:not([data-tool-id="word-html"]):not([data-tool-id="image-editor"]):not([data-tool-id="docker-compose-builder"]) .native-tools-card .native-extra-grid,
    html body.tools-page #native-tools-content:not([data-current-tool="word-html"]):not([data-current-tool="image-editor"]):not([data-current-tool="docker-compose-builder"]) .native-tools-card .native-extra-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-flow: row !important;
        gap: 7px !important;
    }

    html body.tools-page .native-tools-tool-instance:not([data-tool-id="word-html"]):not([data-tool-id="image-editor"]):not([data-tool-id="docker-compose-builder"]) .native-tools-card .native-extra-grid > *,
    html body.tools-page #native-tools-content:not([data-current-tool="word-html"]):not([data-current-tool="image-editor"]):not([data-current-tool="docker-compose-builder"]) .native-tools-card .native-extra-grid > * {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}


/* =========================================================
   Native Tools - CSS Scope Guard v28
   Ziel: Dynamisch geladene Tools-CSS darf nach Seitenwechseln keine
   mobilen Tool-Overlays, Sidebars oder Modals auf anderen Seiten sichtbar
   oder klickbar lassen. Auf der Tools-Seite selbst ändert dieser Block nichts.
   ========================================================= */
body:not(.tools-page) :where(
    #native-tools-page,
    #native-tools-content,
    #native-tools-mobile-toggle,
    #native-tools-mobile-shell,
    #native-tools-mobile-backdrop,
    #native-tools-mobile-output-modal,
    #native-tools-mobile-editor-modal,
    #native-tools-command-palette,
    #native-tools-toast-host,
    #native-tools-global-search-modal,
    .native-tools-page,
    .native-tools-sidebar,
    .native-tools-mobile-toggle,
    .native-tools-mobile-shell,
    .native-tools-mobile-backdrop,
    .native-tools-mobile-output-modal,
    .native-tools-mobile-editor-modal,
    .native-tools-command-palette,
    .native-tools-toast-host,
    .native-tools-global-search-modal,
    .native-wordhtml-mobile-bar,
    .native-wordhtml-mobile-toolbar,
    .native-wordhtml-mobile-toolbar-backdrop,
    .native-word-html-mobile-bar,
    .native-word-html-mobile-toolbar,
    .native-image-mobile-bar,
    .native-image-mobile-portal,
    .image-editor-mobile-bar,
    .image-editor-mobile-sheet,
    .image-editor-mobile-backdrop,
    .native-compose-mobile-wizard
) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body:not(.tools-page) {
    --tools-mobile-bottom-bar-height: 0px;
    --tools-mobile-bottom-gap-v10: 0px;
}

body:not(.tools-page).tools-native-sidebar-open,
body:not(.tools-page).native-tools-mobile-output-open,
body:not(.tools-page).native-tools-mobile-editor-open,
body:not(.tools-page).native-tools-mobile-command-open,
body:not(.tools-page).native-wordhtml-mobile-toolbar-open {
    overflow: auto !important;
}


/* =========================================================
   Tools Overview - Sidebar flush + Home card contrast tune
   ========================================================= */
@media (min-width: 901px) {
    body.tools-page #content,
    body.tools-page #content-area {
        padding: 0 !important;
    }

    body.tools-page .native-tools-page {
        width: calc(100% + (var(--content-padding, 0px) * 2));
        max-width: none;
        margin: calc(-1 * var(--content-padding, 0px));
    }
}

body.tools-page .native-tools-sidebar {
    margin: 0;
    border-radius: 0;
}

body:not(.light-mode) .native-tools-home-compact-dashboard .native-tools-home-feature-card,
body:not(.light-mode) .native-tools-home-compact-dashboard .native-tools-home-category-card {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(20, 20, 20, 0.92);
}

body:not(.light-mode) .native-tools-home-compact-dashboard .native-tools-home-mini-tool {
    border-color: rgba(255, 255, 255, 0.17);
    background: rgba(255, 255, 255, 0.035);
}

body:not(.light-mode) .native-tools-home-compact-dashboard .native-tools-home-search-box,
body:not(.light-mode) .native-tools-home-compact-dashboard .native-tools-home-stats span {
    border-color: rgba(255, 255, 255, 0.16) !important;
}

html.light-mode body.tools-page .native-tools-page,
body.light-mode.tools-page .native-tools-page,
body.light-mode .native-tools-page {
    --tools-bg: #f3f4f6 !important;
    --tools-bg-2: #f6f7f9 !important;
    --tools-card: #ffffff !important;
    --tools-card-2: #fbfcfd !important;
    --tools-border: rgba(15, 23, 42, 0.10) !important;
    --tools-text: #20242b !important;
    --tools-muted: #5f6772 !important;
    background: #f3f4f6 !important;
}

html.light-mode body.tools-page .native-tools-main,
body.light-mode.tools-page .native-tools-main,
body.light-mode .native-tools-main,
html.light-mode body.tools-page .native-tools-content,
body.light-mode.tools-page .native-tools-content,
body.light-mode .native-tools-content {
    background: #f3f4f6 !important;
}

body.light-mode .native-tools-home-compact-dashboard .native-tools-home-hero,
html.light-mode .native-tools-home-compact-dashboard .native-tools-home-hero,
body.light-mode .native-tools-home-compact-dashboard .native-tools-home-feature-card,
html.light-mode .native-tools-home-compact-dashboard .native-tools-home-feature-card,
body.light-mode .native-tools-home-compact-dashboard .native-tools-home-category-card,
html.light-mode .native-tools-home-compact-dashboard .native-tools-home-category-card,
body.light-mode .native-tools-home-compact-dashboard .native-tools-home-search-box,
html.light-mode .native-tools-home-compact-dashboard .native-tools-home-search-box,
body.light-mode .native-tools-home-compact-dashboard .native-tools-home-stats span,
html.light-mode .native-tools-home-compact-dashboard .native-tools-home-stats span {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
}

body.light-mode .native-tools-home-compact-dashboard .native-tools-home-mini-tool,
html.light-mode .native-tools-home-compact-dashboard .native-tools-home-mini-tool {
    background: #fbfcfd !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
}

body.light-mode .native-tools-home-compact-dashboard .native-tools-home-mini-tool:hover,
body.light-mode .native-tools-home-compact-dashboard .native-tools-home-mini-tool:focus-visible,
html.light-mode .native-tools-home-compact-dashboard .native-tools-home-mini-tool:hover,
html.light-mode .native-tools-home-compact-dashboard .native-tools-home-mini-tool:focus-visible {
    background: #ffffff !important;
    border-color: rgba(233, 166, 36, 0.48) !important;
}

body.light-mode .native-tools-home-compact-dashboard .native-tools-home-feature-card:hover,
body.light-mode .native-tools-home-compact-dashboard .native-tools-home-feature-card:focus-visible,
body.light-mode .native-tools-home-compact-dashboard .native-tools-home-category-card:hover,
body.light-mode .native-tools-home-compact-dashboard .native-tools-home-category-card:focus-visible,
html.light-mode .native-tools-home-compact-dashboard .native-tools-home-feature-card:hover,
html.light-mode .native-tools-home-compact-dashboard .native-tools-home-feature-card:focus-visible,
html.light-mode .native-tools-home-compact-dashboard .native-tools-home-category-card:hover,
html.light-mode .native-tools-home-compact-dashboard .native-tools-home-category-card:focus-visible {
    background: #ffffff !important;
}