/* =========================================================
   Angler.org UI System Harmonization
   Stand: 20260901-ui-system-v4

   Zweck:
   - zentrale Typografie- und Spacing-Skala
   - drei Kartenrollen: Standard / Interactive / Highlight
   - vier Buttonrollen: Primary / Secondary / Ghost / Danger
   - gemeinsame Form-Control-Geometrie
   - letzte globale Design-Schicht nach allen Route-CSS-Dateien

   Wichtig:
   Spezialoberflächen (z. B. Emulator- und 3D-Gizmos) behalten ihre
   bewusst abweichenden Controls. Die normalen App-Komponenten werden
   dagegen auf dieselben Tokens zusammengeführt.
   ========================================================= */

/* =========================================================
   1. Typografie / Lesbarkeit
   ========================================================= */
html,
body {
    font-size: var(--ui-font-size-md);
    line-height: var(--ui-line-height-normal);
}

#content-area {
    font-size: var(--ui-font-size-md);
    line-height: var(--ui-line-height-normal);
}

#content-area :where(h1, h2, h3, h4, h5, h6) {
    color: var(--ui-text);
    line-height: var(--ui-line-height-tight);
}

#content-area :where(h1) {
    font-size: var(--ui-font-size-2xl);
}

#content-area :where(h2) {
    font-size: var(--ui-font-size-xl);
}

#content-area :where(h3) {
    font-size: var(--ui-font-size-lg);
}

#content-area :where(h4, h5, h6) {
    font-size: var(--ui-font-size-md);
}

#content-area :where(p, li, dd, dt) {
    line-height: var(--ui-line-height-normal);
}

/* Normale Nebeninformationen sollen nicht mehr in 10-12px verschwinden. */
#content-area small,
#content-area .ui-field__hint,
#content-area .ui-field__error,
#content-area :where(.form-hint, .field-hint, .hint, .pr-hint, .user-avatar-hint, .admin-modal-subtitle, .guest-login-card__subtitle) {
    font-size: var(--ui-font-size-sm) !important;
    line-height: var(--ui-line-height-normal) !important;
}

/* Wirklich kompakte Metadaten dürfen eine Stufe kleiner sein, aber nicht 10/11px. */
:where(.nav-section-title, footer .footer-text, .orders-page .badge, .home-slide-meta, .order-meta, .fa-card-meta) {
    font-size: var(--ui-font-size-caption) !important;
    line-height: 1.35 !important;
}

/* Tools: Beschreibungen/Hinweise/Labels konsistent lesbar. */
body.tools-page :where(label,
    .native-tools-hint,
    .native-tools-header p,
    .native-tools-status,
    .native-tools-result-box,
    .native-tools-json-tree,
    .native-tools-tree-placeholder,
    .native-cron-help,
    .native-chmod-preset-description,
    .native-list-panel-subtitle,
    .native-data-formats-source-status,
    .native-data-formats-editor-shell,
    .native-chmod-recommendation,
    .native-chmod-warning,
    .native-tools-home-v3-tool-description,
    .native-tools-home-v3-studio-description,
    .native-tools-home-v3-section-header p) {
    font-size: var(--ui-font-size-sm) !important;
    line-height: var(--ui-line-height-normal) !important;
}

body.tools-page :where(small,
    .native-tools-nav-section,
    .native-tools-eyebrow,
    .native-tools-home-v3-kicker,
    .native-tools-home-v3-result-count,
    .native-tools-home-v3-category-chip,
    .native-tools-home-v3-category-chip strong,
    .native-tools-home-v3-compact-copy small,
    .native-tools-home-v3-studio-features,
    .native-tools-home-v3-tool-footer small,
    .native-tools-mobile-shell-btn strong,
    .native-tools-mobile-tab strong,
    .native-tools-mobile-recent-btn strong) {
    font-size: var(--ui-font-size-caption) !important;
    line-height: 1.4 !important;
}






/* Hotkey-/Mini-Badges bleiben kompakt, aber nicht winzig. */
#emu-page-root :where(.emu-hotkey, .emu-hotkey-inline, .emu-speed-hotkey-badge),
.three-viewer-orientation__more button {
    font-size: var(--ui-font-size-caption) !important;
}

/* =========================================================
   2. Spacing-Grundlagen
   ========================================================= */
.ui-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-4);
}

.ui-stack--sm {
    gap: var(--ui-space-2);
}

.ui-stack--lg {
    gap: var(--ui-section-gap);
}

.ui-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-2);
}

/* =========================================================
   3. Cards: Standard / Interactive / Highlight
   ========================================================= */
html body .ui-card {
    min-width: 0;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-1);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow-card);
}

html body .ui-card--flat {
    box-shadow: none;
}

html body .ui-card--interactive {
    cursor: pointer;
    transition:
        background-color var(--ui-transition-fast),
        border-color var(--ui-transition-fast),
        box-shadow var(--ui-transition-fast);
}

html body .ui-card--interactive:hover,
html body .ui-card--interactive:focus-within {
    border-color: color-mix(in srgb, var(--ui-accent) 52%, var(--ui-border));
    background: var(--ui-surface-2);
    box-shadow: var(--ui-shadow-card);
}

html body .ui-card--highlight {
    border-color: color-mix(in srgb, var(--ui-accent) 58%, var(--ui-border));
    background: color-mix(in srgb, var(--ui-accent) 7%, var(--ui-surface-1));
}

html body :where(.ui-card__header, .ui-card__body, .ui-card__footer) {
    padding: var(--ui-card-padding);
}

/* Legacy-Karten auf dieselbe Geometrie ziehen. Spezialinhalt bleibt unangetastet. */
html body :is(.home-slide-card,
    .pg-tile,
    .fa-filament-card,
    .fa-accessory-card,
    .orders-picker-card,
    .admin-game-option,
    .ep-model-item,
    .pr-product-card,
    .pr-selection-card,
    .order-card,
    .cl-card,
    .native-tools-home-v3-tool-card,
    .native-tools-home-v3-studio-card,
    .native-tools-home-v3-compact-card) {
    border-radius: var(--ui-radius-lg);
    border-color: var(--ui-border);
}

html body :is(.home-slide-card,
    .pg-tile,
    .fa-filament-card,
    .fa-accessory-card,
    .orders-picker-card,
    .admin-game-option,
    .ep-model-item,
    .pr-product-card,
    .pr-selection-card,
    .native-tools-home-v3-tool-card,
    .native-tools-home-v3-studio-card,
    .native-tools-home-v3-compact-card) {
    transition:
        background-color var(--ui-transition-fast),
        border-color var(--ui-transition-fast),
        box-shadow var(--ui-transition-fast);
}

html body :is(.home-slide-card,
    .pg-tile,
    .fa-filament-card,
    .fa-accessory-card,
    .orders-picker-card,
    .admin-game-option,
    .ep-model-item,
    .pr-product-card,
    .pr-selection-card,
    .native-tools-home-v3-tool-card,
    .native-tools-home-v3-studio-card,
    .native-tools-home-v3-compact-card):hover {
    border-color: color-mix(in srgb, var(--ui-accent) 52%, var(--ui-border));
}

/* =========================================================
   4. Buttons: Primary / Secondary / Ghost / Danger
   ========================================================= */
html body button.ui-btn,
html body a.ui-btn {
    min-height: var(--ui-control-height);
    height: var(--ui-control-height);
    padding: 0 var(--ui-button-padding-x);
    gap: var(--ui-space-2);
    border-width: 1px;
    border-style: solid;
    border-radius: var(--ui-radius-md);
    font-family: var(--app-font-family, inherit);
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-font-weight-medium);
    line-height: 1;
    box-shadow: none;
    transform: none;
}

html body button.ui-btn:hover:not(:disabled):not([aria-disabled="true"]),
html body a.ui-btn:hover:not([aria-disabled="true"]) {
    transform: none;
}

html body button.ui-btn.ui-btn--primary,
html body a.ui-btn.ui-btn--primary {
    border-color: color-mix(in srgb, var(--ui-accent) 78%, var(--ui-border));
    background: var(--ui-accent);
    color: var(--ui-accent-contrast);
}

html body button.ui-btn.ui-btn--secondary,
html body a.ui-btn.ui-btn--secondary {
    border-color: var(--ui-border-strong);
    background: var(--ui-surface-2);
    color: var(--ui-text);
}

html body button.ui-btn.ui-btn--ghost,
html body a.ui-btn.ui-btn--ghost {
    border-color: transparent;
    background: transparent;
    color: var(--ui-text);
}

html body button.ui-btn.ui-btn--danger,
html body a.ui-btn.ui-btn--danger {
    border-color: var(--ui-danger);
    background: var(--ui-danger);
    color: #fff;
}

html body button.ui-btn.ui-btn--primary:hover:not(:disabled):not([aria-disabled="true"]),
html body a.ui-btn.ui-btn--primary:hover:not([aria-disabled="true"]) {
    border-color: color-mix(in srgb, var(--ui-accent-hover) 80%, var(--ui-border));
    background: var(--ui-accent-hover);
    color: var(--ui-accent-contrast);
}

html body button.ui-btn.ui-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]),
html body a.ui-btn.ui-btn--secondary:hover:not([aria-disabled="true"]) {
    border-color: var(--ui-border-strong);
    background: var(--ui-surface-hover);
    color: var(--ui-text);
}

html body button.ui-btn.ui-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]),
html body a.ui-btn.ui-btn--ghost:hover:not([aria-disabled="true"]) {
    border-color: var(--ui-border);
    background: var(--ui-surface-hover);
    color: var(--ui-text);
}

html body button.ui-btn.ui-btn--danger:hover:not(:disabled):not([aria-disabled="true"]),
html body a.ui-btn.ui-btn--danger:hover:not([aria-disabled="true"]) {
    border-color: #ef6666;
    background: #ef6666;
    color: #fff;
}

html body button.ui-btn.ui-btn--sm,
html body a.ui-btn.ui-btn--sm,
html body button.ui-btn[data-ui-size="compact"],
html body a.ui-btn[data-ui-size="compact"] {
    min-height: var(--ui-control-height-sm);
    height: var(--ui-control-height-sm);
    padding-inline: var(--ui-space-3);
    border-radius: var(--ui-radius-sm);
    font-size: var(--ui-font-size-caption);
}


html body button.ui-btn.ui-btn--lg,
html body a.ui-btn.ui-btn--lg,
html body button.ui-btn[data-ui-size="large"],
html body a.ui-btn[data-ui-size="large"] {
    min-height: var(--ui-control-height-lg);
    height: var(--ui-control-height-lg);
    padding-inline: var(--ui-space-5);
    border-radius: var(--ui-radius-lg);
    font-size: var(--ui-font-size-md);
}

html body .ui-icon-btn[data-ui-size="compact"],
html body .ui-icon-btn.ui-icon-btn--sm {
    width: var(--ui-control-height-sm);
    min-width: var(--ui-control-height-sm);
    height: var(--ui-control-height-sm);
    min-height: var(--ui-control-height-sm);
    border-radius: var(--ui-radius-sm);
}

html body .ui-icon-btn[data-ui-size="large"],
html body .ui-icon-btn.ui-icon-btn--lg {
    width: var(--ui-control-height-lg);
    min-width: var(--ui-control-height-lg);
    height: var(--ui-control-height-lg);
    min-height: var(--ui-control-height-lg);
    border-radius: var(--ui-radius-lg);
}

/* Legacy-Buttonrollen. Bestehende Breiten-/Layoutregeln bleiben erhalten. */
html body :is(button.btn-modern, a.btn-modern, .btn-primary, .btn-accent) {
    min-height: var(--ui-control-height);
    height: var(--ui-control-height);
    padding-top: 0;
    padding-bottom: 0;
    border: 1px solid color-mix(in srgb, var(--ui-accent) 78%, var(--ui-border));
    border-radius: var(--ui-radius-md);
    background: var(--ui-accent);
    color: var(--ui-accent-contrast);
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-font-weight-medium);
    box-shadow: none;
    transform: none;
}

html body .btn-secondary {
    height: var(--ui-control-height);
    min-height: var(--ui-control-height);
    padding: 0 var(--ui-button-padding-x);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-2);
    color: var(--ui-text);
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-font-weight-medium);
    box-shadow: none;
    transform: none;
}

html body :is(button.btn-small, .btn-inline-neutral) {
    height: var(--ui-control-height-sm);
    min-height: var(--ui-control-height-sm);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-2);
    color: var(--ui-text);
    font-size: var(--ui-font-size-caption);
    font-weight: var(--ui-font-weight-medium);
    box-shadow: none;
    transform: none;
}

html body :is(.btn-inline, .btn-inline-slim) {
    height: var(--ui-control-height-sm);
    min-height: var(--ui-control-height-sm);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    background: transparent;
    color: var(--ui-text);
    font-size: var(--ui-font-size-caption);
    font-weight: var(--ui-font-weight-medium);
    box-shadow: none;
    transform: none;
}

html body :is(.btn-danger) {
    border-color: var(--ui-danger);
    background: var(--ui-danger);
    color: #fff;
}

html body :is(button.btn-modern, a.btn-modern, .btn-primary, .btn-accent):hover:not(:disabled),
html body :is(.btn-secondary, button.btn-small, .btn-inline-neutral, .btn-inline, .btn-inline-slim):hover:not(:disabled) {
    transform: none;
}

/* =========================================================
   5. Inputs / Selects / Textareas
   ========================================================= */
html body :is(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) {
    max-width: 100%;
    min-width: 0;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background-color: var(--ui-control-bg);
    color: var(--ui-text);
    font-family: var(--app-font-family, inherit);
    font-size: var(--ui-font-size-md);
    line-height: 1.25;
    outline: none;
    box-shadow: none;
    transition:
        background-color var(--ui-transition-fast),
        border-color var(--ui-transition-fast),
        box-shadow var(--ui-transition-fast),
        color var(--ui-transition-fast);
}

html body :is(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) {
    min-height: var(--ui-control-height);
    height: var(--ui-control-height);
    padding: 0 var(--ui-control-padding-x);
}

html body textarea {
    min-height: 104px;
    padding: var(--ui-space-3) var(--ui-control-padding-x);
    resize: vertical;
}

html body :is(input, textarea)::placeholder {
    color: var(--ui-text-subtle);
    opacity: 1;
}

html body :is(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):hover:not(:disabled):not([readonly]) {
    border-color: var(--ui-border-strong);
}

html body :is(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):focus {
    border-color: var(--ui-accent);
    box-shadow: var(--ui-focus-ring);
}

html body :is(input, select, textarea):disabled,
html body :is(input, textarea)[readonly] {
    opacity: .62;
}

html body #content-area label:not(.ui-field) {
    color: var(--ui-text);
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-font-weight-medium);
    line-height: 1.35;
}

/* Kompakte Controls bleiben explizit möglich und werden später von der
   Settings-Dichte ebenfalls mit skaliert. */
html body :is(.ui-input, .ui-select)[data-ui-size="compact"],
html body :is(input, select).select-sm,
html body :is(input, select).input-sm {
    min-height: var(--ui-control-height-sm);
    height: var(--ui-control-height-sm);
    padding-inline: var(--ui-space-3);
    border-radius: var(--ui-radius-sm);
    font-size: var(--ui-font-size-caption);
}


html body :is(.ui-input, .ui-select)[data-ui-size="large"] {
    min-height: var(--ui-control-height-lg);
    height: var(--ui-control-height-lg);
    padding-inline: var(--ui-control-padding-x);
    border-radius: var(--ui-radius-lg);
    font-size: var(--ui-font-size-md);
}

/* Spezialeditoren/Gizmos behalten ihre bewusst kompakte Geometrie. */
html body :where(.pm-3d-transform-toolbar,
    .pm-3d-axis-number,
    .pm-3d-number-suffix,
    .pr-3d-drawer,
    .pr-3d-gizmo,
    .three-viewer-orientation,
    #emu-page-root) :is(input, select, textarea, button) {
    --ui-focus-ring: 0 0 0 2px color-mix(in srgb, var(--ui-accent) 24%, transparent);
}

/* =========================================================
   6. Mobile: Lesbarkeit behalten statt die ganze UI herunterzuskalieren
   ========================================================= */
@media (max-width: 900px) {

    :root,
    html.is-mobile {
        --font-size-base: var(--ui-font-size-md);
        --font-size-small: var(--ui-font-size-sm);
        --input-font-size: var(--ui-font-size-md);
        --label-font-size: var(--ui-font-size-sm);
        --button-font-size: var(--ui-font-size-sm);
        --sidebar-font-size: var(--ui-font-size-sm);
    }
}

@media (hover: none) and (pointer: coarse) {

    html body button.ui-btn,
    html body a.ui-btn,
    html body :is(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) {
        min-height: var(--ui-touch-target);
    }
}


/* =========================================================
   7. Design Consistency Audit v2
   ---------------------------------------------------------
   Nur drei normale Control-Rollen:
   - Standard: var(--ui-control-height)
   - Compact:  var(--ui-control-height-sm)
   - Large:    var(--ui-control-height-lg) / Touch Target

   Spezial-Controls wie Cron-Feldeditor, CHMOD-Ziffern, Color-Inputs,
   3D-Gizmos und Dateifelder werden bewusst nicht normalisiert.
   ========================================================= */

/* ---------- gemeinsame Layout-Rhythmik ---------- */
body.tools-page .native-tools-card-grid {
    gap: var(--ui-card-gap);
}

body.tools-page .native-tools-card {
    padding: var(--ui-card-padding-lg);
}

body.tools-page .native-tools-card h3 {
    margin-bottom: var(--ui-space-3);
}

html body.tools-page .native-tools-card :is(.native-extra-grid, .native-exp-form-grid) {
    column-gap: var(--ui-form-gap-x) !important;
    row-gap: var(--ui-form-gap-y) !important;
}

/* ---------- normale Tool-Formfelder ---------- */
html body.tools-page .native-tools-page .native-tools-card :is(.ui-input, .ui-select) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: var(--ui-control-height) !important;
    min-height: var(--ui-control-height) !important;
    padding: 0 var(--ui-control-padding-x) !important;
    border-radius: var(--ui-radius-md) !important;
    font-size: var(--ui-font-size-md) !important;
    line-height: 1.25 !important;
    box-sizing: border-box !important;
}

html body.tools-page .native-tools-page .native-tools-card :is(.ui-input, .ui-select)[data-ui-size="compact"] {
    height: var(--ui-control-height-sm) !important;
    min-height: var(--ui-control-height-sm) !important;
    padding-inline: var(--ui-space-3) !important;
    border-radius: var(--ui-radius-sm) !important;
    font-size: var(--ui-font-size-caption) !important;
}

html body.tools-page .native-tools-page .native-tools-card :is(.ui-input, .ui-select)[data-ui-size="large"] {
    height: var(--ui-control-height-lg) !important;
    min-height: var(--ui-control-height-lg) !important;
    padding-inline: var(--ui-control-padding-x) !important;
    border-radius: var(--ui-radius-lg) !important;
    font-size: var(--ui-font-size-md) !important;
}

html body.tools-page .native-tools-page .native-tools-card .ui-textarea {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: var(--ui-space-3) var(--ui-control-padding-x) !important;
    border-radius: var(--ui-radius-md) !important;
    font-size: var(--ui-font-size-md) !important;
    box-sizing: border-box !important;
}

/* Die drei klassischen Windows-Admin-Builder erhalten exakt denselben
   Eingabe-/Ausgabe-Anteil. So sind ihre normalen Felder bei identischer
   Viewportbreite auch identisch breit. */
@media (min-width: 1381px) {

    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(620px, 1.15fr) minmax(360px, .75fr) !important;
        gap: var(--ui-card-gap) !important;
        align-items: start;
    }
}

@media (max-width: 1380px) {

    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) !important;
    }
}

body.tools-page :is(.native-service-builder-card,
    .native-firewall-builder-card,
    .native-log-extractor-card) .native-extra-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: var(--ui-form-gap-x) !important;
    row-gap: var(--ui-form-gap-y) !important;
}

@media (max-width: 760px) {

    body.tools-page :is(.native-service-builder-card,
        .native-firewall-builder-card,
        .native-log-extractor-card) .native-extra-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Legacy-Toolgruppen mit 44/36px-Zwischenwerten folgen wieder dem Standard. */
html body.tools-page :is(.native-task-field,
    .native-msi-field,
    .native-acl-builder-card .native-acl-grid,
    .native-acl-principal-preset-field,
    .native-eventlog-builder-card,
    .native-nginx-builder-card,
    .native-firewall-builder-card,
    .native-service-builder-card,
    .native-registry-builder-card,
    .native-msi-grid,
    .native-data-formats-format-field,
    .native-data-formats-option-field) :is(input.ui-input, select.ui-select) {
    height: var(--ui-control-height) !important;
    min-height: var(--ui-control-height) !important;
    border-radius: var(--ui-radius-md) !important;
    font-size: var(--ui-font-size-md) !important;
}

/* Dichte Tabellen-/Editorcontrols nutzen ausschließlich die Compact-Rolle. */
html body.tools-page .native-compose-v2 .native-compose-row-table select,
html body.tools-page .native-data-formats-card-actions .native-tools-btn,
html body.tools-page .native-data-formats-local-actions .native-tools-btn,
html body.tools-page .native-rompatcher-file-button,
html body.tools-page .native-tools-home-v3-palette-button {
    height: var(--ui-control-height-sm) !important;
    min-height: var(--ui-control-height-sm) !important;
    border-radius: var(--ui-radius-sm) !important;
    font-size: var(--ui-font-size-caption) !important;
}

/* Frühere 9.5/10/12px-Overrides dürfen die zentrale Lesbarkeit nicht schlagen. */
html body.tools-page .native-tools-mobile-shell-btn strong,
html body.tools-page .native-tools-home-v3-category-chip,
html body.tools-page .native-tools-home-v3-palette-button,
html body.tools-page .native-tools-home-v3-tool-footer small,
html body.tools-page #native-tools-content[data-current-tool="chmod"] .native-chmod-preset-description,
html body.tools-page table[data-mobile-table-cards="1"] :is(th, td)::before,
html body.tools-page #native-image-mobile-local-shell.native-image-mobile-local-shell .native-tools-mobile-shell-btn strong,
html body.image-editor-mobile-active .image-editor-mobile-bar button strong {
    font-size: var(--ui-font-size-caption) !important;
    line-height: 1.35 !important;
}

/* ---------- Registrierung: Standard-Formrolle ---------- */
html body #register-box :is(input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="tel"],
    input[type="search"],
    input[type="number"]) {
    height: var(--ui-control-height) !important;
    min-height: var(--ui-control-height) !important;
    padding-inline: var(--ui-control-padding-x) !important;
    border-radius: var(--ui-radius-md) !important;
    font-size: var(--ui-font-size-md) !important;
}

html body #register-box :is(.btn-modern, .btn, #reg-submit, #btn-register-submit) {
    height: var(--ui-control-height) !important;
    min-height: var(--ui-control-height) !important;
    padding: 0 var(--ui-button-padding-x) !important;
    border-radius: var(--ui-radius-md) !important;
    font-size: var(--ui-font-size-sm) !important;
}

/* ---------- Produktverwaltung: normale Formfelder ---------- */
html body #productForm select#productSelector,
html body .ep-selector select:not(.ui-select),
html body .ep-filament-tools input[type="search"] {
    height: var(--ui-control-height) !important;
    min-height: var(--ui-control-height) !important;
    border-radius: var(--ui-radius-md) !important;
    font-size: var(--ui-font-size-md) !important;
}

/* ---------- Produktseite: mobiler Kategorie-Select = Touch-Rolle ---------- */
html body .pg-category-select {
    height: var(--ui-touch-target) !important;
    min-height: var(--ui-touch-target) !important;
    padding-block: 0 !important;
    border-radius: var(--ui-radius-lg) !important;
    font-size: var(--ui-font-size-sm) !important;
}

/* ---------- Start/Login: bewusst große, aber tokenisierte Controls ---------- */
html body .guest-login-form__control input,
html body .guest-login-form__submit {
    height: var(--ui-control-height-lg) !important;
    min-height: var(--ui-control-height-lg) !important;
    border-radius: var(--ui-radius-lg) !important;
}

html body .guest-login-form__label {
    font-size: var(--ui-font-size-sm) !important;
}

html body .guest-login-actions__button--ghost {
    min-height: var(--ui-control-height) !important;
    border-radius: var(--ui-radius-md) !important;
}










/* ---------- kleine Legacy-Modalbuttons = Compact-Rolle ---------- */
html body.wiki-page #wiki-sort-modal button:not(.ui-btn) {
    min-height: var(--ui-control-height-sm);
    padding: 0 var(--ui-space-3);
    border-radius: var(--ui-radius-sm);
    font-size: var(--ui-font-size-caption);
}



/* ---------- konsequente Mindesttypografie innerhalb der Tools ----------
   Höher spezifisch als alte mobile/legacy Overrides. */
html body.tools-page .native-tools-page label,
html body.tools-page .native-tools-page :is(.native-tools-brand p,
    .native-tools-nav-section,
    .native-tools-eyebrow,
    .native-tools-json-type,
    .native-cron-visual-label,
    .native-cron-visual-help-table td,
    .native-cron-field-card span,
    .native-cron-help,
    .native-task-help,
    .native-regex-example-card span,
    .native-regex-snippet-card span,
    .native-list-pane-head span,
    .native-cron-next-limit-hint,
    .native-data-formats-format-field > span,
    .native-data-formats-option-field > span,
    .native-data-formats-format-badge,
    .native-data-formats-view-tab,
    .native-data-formats-output-status,
    .native-data-formats-options-summary,
    .native-data-formats-stat span,
    .native-chmod-collapsible > summary small) {
    font-size: var(--ui-font-size-caption) !important;
    line-height: 1.4 !important;
}

html body.tools-page .native-tools-page :is(.native-tools-hint,
    .native-tools-header p,
    .native-tools-status,
    .native-tools-result-box,
    .native-tools-home-v3-tool-description,
    .native-tools-home-v3-studio-description,
    .native-tools-home-v3-section-header p) {
    font-size: var(--ui-font-size-sm) !important;
    line-height: var(--ui-line-height-normal) !important;
}

/* ---------- Emulator: kleine Aktionsbuttons bleiben Compact, Touch >= 44px ---------- */
html body #emu-page-root .emu-savestate-row-actions .emu-btn {
    min-height: var(--ui-control-height-sm) !important;
    height: var(--ui-control-height-sm) !important;
    font-size: var(--ui-font-size-caption) !important;
}

@media (hover: none) and (pointer: coarse) {
    html body #emu-page-root .emu-savestate-row-actions .emu-btn {
        min-height: var(--ui-touch-target) !important;
        height: var(--ui-touch-target) !important;
    }
}

/* ---------- Touch: kompakte Rollen bleiben mindestens 44px bedienbar ---------- */
@media (hover: none) and (pointer: coarse) {
    html body.tools-page .native-tools-page .native-tools-card :is(.ui-input, .ui-select) {
        height: var(--ui-control-height-lg) !important;
        min-height: var(--ui-control-height-lg) !important;
    }

    html body #register-box :is(input[type="text"],
        input[type="password"],
        input[type="email"],
        input[type="tel"],
        input[type="search"],
        input[type="number"]),
    html body #productForm select#productSelector,
    html body .ep-selector select:not(.ui-select),
    html body .ep-filament-tools input[type="search"],
    html body :is(.btn-secondary, button.btn-small, .btn-inline-neutral, .btn-inline, .btn-inline-slim) {
        min-height: var(--ui-touch-target) !important;
    }


}


/* =========================================================
   9. Design consistency audit v50 - final cascade floor
   ---------------------------------------------------------
   Nur normale UI-Elemente werden vereinheitlicht. Spezialcontrols wie
   CHMOD-Oktalziffern, Color-Picker, Range-Slider, Emulator- und 3D-Gizmos
   bleiben bewusst außerhalb dieser Regeln.
   ========================================================= */

/* Top-Level-Toolkarten teilen dieselbe Grundgeometrie; komplexe Studios
   besitzen weiterhin ihr eigenes internes Layout. */
html body.tools-page #native-tools-content:not([data-current-tool="image-editor"]):not([data-current-tool="word-html"]):not([data-current-tool="docker-compose-builder"]):not([data-current-tool="docker-compose-studio"]) .native-tools-card {
    border-radius: var(--ui-radius-lg) !important;
}

/* Noch vorhandene Legacy-Metadaten dürfen nicht unter die zentrale
   Caption-Stufe fallen. */
html body.tools-page .native-tools-page :is(.native-tools-home-kicker,
    .native-tools-home-stats span,
    .native-tools-home-section-head span,
    .native-tools-home-feature-card small,
    .native-tools-home-tool small,
    .native-tools-home-category p,
    .native-chmod-results span,
    .native-regex-example-card code,
    .native-regex-snippet-card code,
    .native-tools-mobile-recent h3,
    .native-tools-mobile-command-header p,
    .native-tools-mobile-command-body h4,
    .native-tools-mobile-command-result span,
    .native-chmod-umask-results span,
    .native-tool-suite-tab span,
    .native-tool-suite-tab strong,
    .native-tools-home-v3-search-panel > small,
    .native-tools-home-v3-empty span,
    .native-data-formats-mobile-tabs button,
    .native-winget-modal small,
    .native-winget-version-state,
    .native-winget-index-state) {
    font-size: var(--ui-font-size-caption) !important;
    line-height: 1.4 !important;
}

/* Dichte Editorleisten verwenden Compact auf Desktop. */
html body.tools-page #native-tools-content[data-current-tool="image-editor"] :is(.native-image-toolbar, .native-image-text-toolbar) :is(input[type="text"], input[type="number"], select) {
    height: var(--ui-control-height-sm) !important;
    min-height: var(--ui-control-height-sm) !important;
    border-radius: var(--ui-radius-sm) !important;
    font-size: var(--ui-font-size-caption) !important;
}

/* Optionsmatrizen bleiben kompakt, aber folgen derselben Größenrolle. */
html body.tools-page :is(.native-robo-options,
    #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card) .native-tools-chip-checkbox {
    min-height: var(--ui-control-height-sm) !important;
    padding-block: 0 !important;
    padding-inline: var(--ui-space-3) !important;
    border-radius: var(--ui-radius-sm) !important;
}

@media (hover: none) and (pointer: coarse) {

    html body.tools-page #native-tools-content[data-current-tool="image-editor"] :is(.native-image-toolbar, .native-image-text-toolbar) :is(input[type="text"], input[type="number"], select),
    html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-bottom-sheet :is(button, .native-word-icon-btn, select, input[type="color"]),
    html body.tools-page :is(.native-robo-options, #native-tools-content[data-current-tool="nginx-proxy-builder"] .native-nginx-builder-card) .native-tools-chip-checkbox {
        height: var(--ui-touch-target) !important;
        min-height: var(--ui-touch-target) !important;
    }
}

/* Weitere beim Vollscan gefundene Legacy-Ausreißer. */
html body .pr-selection-remove {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.055) !important;
    color: rgba(255, 255, 255, 0.82) !important;

    font-size: 22px !important;
    font-weight: 500 !important;
    line-height: 1 !important;

    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;

    transition:
        background-color 140ms ease,
        border-color 140ms ease,
        color 140ms ease,
        transform 140ms ease,
        box-shadow 140ms ease !important;
}

html body .pr-selection-remove:hover {
    border-color: rgba(255, 77, 77, 0.50) !important;
    background: rgba(255, 77, 77, 0.14) !important;
    color: #ff6868 !important;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(255, 77, 77, 0.08) !important;
}

html body .pr-selection-remove:focus-visible {
    outline: none !important;
    border-color: rgba(255, 77, 77, 0.65) !important;
    background: rgba(255, 77, 77, 0.14) !important;
    color: #ff6868 !important;
    box-shadow: 0 0 0 3px rgba(255, 77, 77, 0.16) !important;
}

html body .pr-selection-remove:active {
    transform: scale(0.94);
}

html body.light-mode .pr-selection-remove,
html.light-mode body .pr-selection-remove {
    border-color: rgba(15, 23, 42, 0.14) !important;
    background: rgba(15, 23, 42, 0.045) !important;
    color: rgba(15, 23, 42, 0.72) !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.70) !important;
}

html body.light-mode .pr-selection-remove:hover,
html.light-mode body .pr-selection-remove:hover,
html body.light-mode .pr-selection-remove:focus-visible,
html.light-mode body .pr-selection-remove:focus-visible {
    border-color: rgba(220, 38, 38, 0.34) !important;
    background: rgba(220, 38, 38, 0.08) !important;
    color: #dc2626 !important;
}

html body :is(.pr-selection-meta, #print-request-root .fa-card .meta, #print-request-root .pm-card .pm-meta) {
    font-size: var(--ui-font-size-caption) !important;
    line-height: 1.4 !important;
}

html.native-tools-mobile-mode body.tools-page :is(.native-word-html-mobile-sheet-tabs button strong,
    .native-word-html-mobile-bar button strong) {
    font-size: var(--ui-font-size-caption) !important;
    line-height: 1.25 !important;
}


/* =========================================================
   10. Bewusste Hero-Value-Ausnahmen
   ---------------------------------------------------------
   Manche Werkzeuge besitzen einen fachlich zentralen Hauptwert, der
   absichtlich NICHT wie ein normales Formularfeld aussehen soll.

   Diese Controls bilden einen festen Ausnahmevertrag zum globalen
   UI-System. Normale Eingabefelder innerhalb derselben Tools bleiben
   weiterhin Standard-/Compact-/Large-Controls.

   Aktuelle Hero-Values:
   - Crontab: visuell editierbarer Cron-Hauptausdruck
   - CHMOD: Oktalziffern + symbolische Rechte
   ========================================================= */

/* ---------- Crontab: Hauptausdruck ---------- */
html body.tools-page #native-tools-content[data-current-tool="cron"] .native-cron-field-input {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: max(80px, calc((var(--cron-field-chars) + .75) * 1ch + 24px)) !important;
    min-width: max(80px, calc((var(--cron-field-chars) + .75) * 1ch + 24px)) !important;
    max-width: none !important;
    padding: 5px 10px !important;
    border: 0 !important;
    border-right: 1px solid color-mix(in srgb, var(--cron-accent) 28%, var(--tools-border)) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--tools-text) !important;
    font-family: Consolas, Monaco, "Courier New", monospace !important;
    font-size: clamp(30px, 2.6vw, 42px) !important;
    font-weight: 550 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    caret-color: var(--cron-accent) !important;
    outline: 0 !important;
    box-shadow: none !important;
}

html body.tools-page #native-tools-content[data-current-tool="cron"] .native-cron-field-input:last-child {
    border-right: 0 !important;
}

html body.tools-page #native-tools-content[data-current-tool="cron"] .native-cron-field-input:hover {
    background: color-mix(in srgb, var(--cron-accent) 5%, transparent) !important;
}

html body.tools-page #native-tools-content[data-current-tool="cron"] .native-cron-field-input:is(.is-active, :focus) {
    border-color: transparent !important;
    color: var(--cron-accent) !important;
    background: color-mix(in srgb, var(--cron-accent) 12%, transparent) !important;
    box-shadow: none !important;
}

html body.tools-page #native-tools-content[data-current-tool="cron"] .native-cron-visual-box.is-invalid .native-cron-field-input {
    caret-color: var(--tools-danger) !important;
    border-right-color: color-mix(in srgb, var(--tools-danger) 28%, var(--tools-border)) !important;
}

html body.tools-page #native-tools-content[data-current-tool="cron"] .native-cron-visual-box.is-invalid .native-cron-field-input:is(.is-active, :focus) {
    color: var(--tools-danger) !important;
    background: color-mix(in srgb, var(--tools-danger) 12%, transparent) !important;
}

html body.tools-page #native-tools-content[data-current-tool="cron"] .native-cron-visual-expression-single .native-cron-field-input {
    width: min(100%, 620px) !important;
    min-width: 0 !important;
    border-right: 0 !important;
}

/* ---------- CHMOD: Hauptwert ---------- */
html body.tools-page #native-tools-content[data-current-tool="chmod"] :is(.native-chmod-special-prefix, .native-chmod-digit-input) {
    box-sizing: border-box !important;
    flex: 0 0 70px !important;
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    padding: 0 !important;
    border: 0 !important;
    border-right: 1px solid color-mix(in srgb, var(--tools-accent) 34%, transparent) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--tools-text) !important;
    font-family: Consolas, Monaco, "Courier New", monospace !important;
    font-size: 40px !important;
    font-weight: 800 !important;
    line-height: 58px !important;
    text-align: center !important;
    outline: 0 !important;
    box-shadow: none !important;
}

html body.tools-page #native-tools-content[data-current-tool="chmod"] .native-chmod-digit-input:last-of-type {
    border-right: 0 !important;
}

html body.tools-page #native-tools-content[data-current-tool="chmod"] .native-chmod-digit-input:focus {
    border-color: transparent !important;
    color: var(--tools-accent) !important;
    background: color-mix(in srgb, var(--tools-accent) 13%, transparent) !important;
    box-shadow: none !important;
}

html body.tools-page #native-tools-content[data-current-tool="chmod"] .native-chmod-symbolic-editor {
    width: 100% !important;
    height: auto !important;
    min-height: 50px !important;
    max-height: none !important;
    padding: 10px 54px 10px 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--tools-text) !important;
    font-family: Consolas, Monaco, "Courier New", monospace !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    outline: 0 !important;
    box-shadow: none !important;
}

html body.tools-page #native-tools-content[data-current-tool="chmod"] .native-chmod-symbolic-editor:focus {
    border-color: transparent !important;
    background: color-mix(in srgb, var(--tools-accent) 7%, transparent) !important;
    box-shadow: none !important;
}

/* Die Hauptwert-Ausnahmen behalten auch mobil ihre eigene, bewusst
   größere Geometrie. Sie werden nicht auf Compact/Standard reduziert. */
@media (max-width: 640px) {
    html body.tools-page #native-tools-content[data-current-tool="cron"] .native-cron-field-input {
        width: max(58px, calc((var(--cron-field-chars) + .5) * 1ch + 16px)) !important;
        min-width: max(58px, calc((var(--cron-field-chars) + .5) * 1ch + 16px)) !important;
        padding: 4px 6px !important;
        font-size: clamp(22px, 7vw, 30px) !important;
    }

    html body.tools-page #native-tools-content[data-current-tool="cron"] .native-cron-visual-expression-single .native-cron-field-input {
        width: min(100%, 620px) !important;
        min-width: 0 !important;
    }

    html body.tools-page #native-tools-content[data-current-tool="chmod"] :is(.native-chmod-special-prefix, .native-chmod-digit-input) {
        flex-basis: 54px !important;
        width: 54px !important;
        min-width: 54px !important;
        max-width: 54px !important;
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
        font-size: 34px !important;
        line-height: 50px !important;
    }
}