/*
 * The styles of the mask field components and their overlays (MaskUi), once for the whole page instead of one <style>
 * element per component instance: a large mask rendered the component's whole stylesheet with every field (UXBN: 979
 * <style> elements, 14.5 MB of CSS). Taken from the components named in the section comments ("@@" is "@"); where field
 * types defined the same selector differently, the later section wins. Linked at the end of the head, after every other
 * stylesheet, as the inline blocks came after them.
 *
 * The file is the whole page's, but its rules reach only the masks, as the inline blocks did only while a mask
 * component was shown: every selector S is written as ":where(.mask-ui-part, .mask-renderer-bound) S" (inside a mask
 * component's root or the mask renderer) and, when its first part is a class, also with ":where(.mask-ui-part)" on that
 * part (the component's root element itself). Each component's root elements carry the class mask-ui-part. :where adds no
 * specificity, so the rules cascade among themselves as before. MaskUiArchitectureTests keep <style> out of these
 * components and every selector here scoped.
 */

/* ---- UiImageElement.razor ---- */

:where(.mask-ui-part, .mask-renderer-bound) .imageContainer,
.imageContainer:where(.mask-ui-part) {
    position: relative;
    width: var(--canvas-width, auto);
    height: var(--canvas-height, auto);
    overflow: visible;
}

:where(.mask-ui-part, .mask-renderer-bound) .imageContainer img,
.imageContainer:where(.mask-ui-part) img {
    position: absolute;
    left: var(--image-x, 0);
    top: var(--image-y, 0);
}

:where(.mask-ui-part, .mask-renderer-bound) .imageContainer.auto-size,
.imageContainer.auto-size:where(.mask-ui-part) {
    display: inline-block;
}

:where(.mask-ui-part, .mask-renderer-bound) .imageContainer.auto-size img,
.imageContainer.auto-size:where(.mask-ui-part) img {
    position: relative;
    left: 0;
    top: 0;
}

:where(.mask-ui-part, .mask-renderer-bound) .imageTextElement,
.imageTextElement:where(.mask-ui-part) {
    position: absolute;
    top: var(--img-el-y);
    left: var(--img-el-x);
    max-width: var(--img-el-maxw, none);
    margin: 0;
    padding: 2px 6px;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: break-word;
}

:where(.mask-ui-part, .mask-renderer-bound) .imageTextElement.input-with-unit,
.imageTextElement.input-with-unit:where(.mask-ui-part) {
    position: absolute;
    top: var(--img-el-y);
    left: var(--img-el-x);
    display: flex;
    align-items: baseline;
    padding: 0;
    border: none;
    background-color: transparent;
}

/* Input innerhalb der Grafik: transparent, nur Unterstrich am Input selbst */
:where(.mask-ui-part, .mask-renderer-bound) .imageTextElement.input-with-unit .imageInput,
.imageTextElement.input-with-unit:where(.mask-ui-part) .imageInput,
:where(.mask-ui-part, .mask-renderer-bound) .imageTextElement.input-with-unit .modern-input,
.imageTextElement.input-with-unit:where(.mask-ui-part) .modern-input,
:where(.mask-ui-part, .mask-renderer-bound) .imageTextElement.input-with-unit .inputBox,
.imageTextElement.input-with-unit:where(.mask-ui-part) .inputBox {
    padding: 1px 3px;
    font-size: 0.85em;
    text-align: right;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0;
    outline: none;
    transition: background-color 0.15s, border-color 0.15s;
}

:where(.mask-ui-part, .mask-renderer-bound) .imageTextElement.input-with-unit:hover .imageInput,
.imageTextElement.input-with-unit:hover:where(.mask-ui-part) .imageInput,
:where(.mask-ui-part, .mask-renderer-bound) .imageTextElement.input-with-unit:hover .modern-input,
.imageTextElement.input-with-unit:hover:where(.mask-ui-part) .modern-input,
:where(.mask-ui-part, .mask-renderer-bound) .imageTextElement.input-with-unit:hover .inputBox,
.imageTextElement.input-with-unit:hover:where(.mask-ui-part) .inputBox {
    background-color: rgba(255, 255, 255, 0.5);
    border-bottom-color: rgba(0, 0, 0, 0.35);
}

:where(.mask-ui-part, .mask-renderer-bound) .imageTextElement.input-with-unit .imageInput:focus,
.imageTextElement.input-with-unit:where(.mask-ui-part) .imageInput:focus,
:where(.mask-ui-part, .mask-renderer-bound) .imageTextElement.input-with-unit .modern-input:focus,
.imageTextElement.input-with-unit:where(.mask-ui-part) .modern-input:focus,
:where(.mask-ui-part, .mask-renderer-bound) .imageTextElement.input-with-unit .inputBox:focus,
.imageTextElement.input-with-unit:where(.mask-ui-part) .inputBox:focus {
    background-color: rgba(255, 255, 255, 0.7);
    border-bottom: 2px solid var(--mud-palette-primary, #1a73e8);
}

:where(.mask-ui-part, .mask-renderer-bound) .imageUnit,
.imageUnit:where(.mask-ui-part) {
    color: var(--mud-palette-primary, #1a73e8);
    font-size: 0.85em;
    white-space: nowrap;
    padding: 0 2px;
}

:where(.mask-ui-part, .mask-renderer-bound) .imageUnit:hover,
.imageUnit:hover:where(.mask-ui-part) {
    text-decoration: underline;
    color: var(--mud-palette-primary-darken, #1565c0);
}

/* ---- UiMeshUpload.razor ---- */

:where(.mask-ui-part, .mask-renderer-bound) .mesh-upload,
.mesh-upload:where(.mask-ui-part) {
    margin-bottom: 1rem;
}

:where(.mask-ui-part, .mask-renderer-bound) .mesh-upload.disabled,
.mesh-upload.disabled:where(.mask-ui-part) {
    opacity: 0.6;
    pointer-events: none;
}

:where(.mask-ui-part, .mask-renderer-bound) .upload-dropzone,
.upload-dropzone:where(.mask-ui-part) {
    display: block;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    background: #f8fafc;
    transition: all 0.2s ease;
    cursor: pointer;
}

:where(.mask-ui-part, .mask-renderer-bound) .upload-dropzone:hover:not(.uploading),
.upload-dropzone:hover:not(.uploading):where(.mask-ui-part) {
    border-color: #94a3b8;
    background: #f1f5f9;
}

:where(.mask-ui-part, .mask-renderer-bound) .upload-dropzone.drag-over,
.upload-dropzone.drag-over:where(.mask-ui-part) {
    border-color: #3b82f6;
    background: #eff6ff;
}

:where(.mask-ui-part, .mask-renderer-bound) .upload-dropzone.uploading,
.upload-dropzone.uploading:where(.mask-ui-part) {
    cursor: wait;
}

:where(.mask-ui-part, .mask-renderer-bound) .hidden-input,
.hidden-input:where(.mask-ui-part) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:where(.mask-ui-part, .mask-renderer-bound) .upload-content,
.upload-content:where(.mask-ui-part) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
}

:where(.mask-ui-part, .mask-renderer-bound) .upload-icon,
.upload-icon:where(.mask-ui-part) {
    color: #64748b;
}

:where(.mask-ui-part, .mask-renderer-bound) .upload-text,
.upload-text:where(.mask-ui-part) {
    color: #475569;
    font-size: 0.875rem;
}

:where(.mask-ui-part, .mask-renderer-bound) .upload-hint,
.upload-hint:where(.mask-ui-part) {
    color: #94a3b8;
    font-size: 0.75rem;
}

:where(.mask-ui-part, .mask-renderer-bound) .upload-progress,
.upload-progress:where(.mask-ui-part) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #3b82f6;
}

:where(.mask-ui-part, .mask-renderer-bound) .upload-spinner,
.upload-spinner:where(.mask-ui-part) {
    width: 20px;
    height: 20px;
    border: 2px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

:where(.mask-ui-part, .mask-renderer-bound) .file-info,
.file-info:where(.mask-ui-part) {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
}

:where(.mask-ui-part, .mask-renderer-bound) .file-header,
.file-header:where(.mask-ui-part) {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

:where(.mask-ui-part, .mask-renderer-bound) .file-icon,
.file-icon:where(.mask-ui-part) {
    color: #3b82f6;
    flex-shrink: 0;
}

:where(.mask-ui-part, .mask-renderer-bound) .file-details,
.file-details:where(.mask-ui-part) {
    flex: 1;
    min-width: 0;
}

:where(.mask-ui-part, .mask-renderer-bound) .file-name,
.file-name:where(.mask-ui-part) {
    display: block;
    font-weight: 500;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

:where(.mask-ui-part, .mask-renderer-bound) .file-size,
.file-size:where(.mask-ui-part) {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
}

:where(.mask-ui-part, .mask-renderer-bound) .clear-btn,
.clear-btn:where(.mask-ui-part) {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: #94a3b8;
    border-radius: 4px;
    transition: all 0.2s;
}

:where(.mask-ui-part, .mask-renderer-bound) .clear-btn:hover,
.clear-btn:hover:where(.mask-ui-part) {
    color: #ef4444;
    background: #fef2f2;
}

:where(.mask-ui-part, .mask-renderer-bound) .mesh-details,
.mesh-details:where(.mask-ui-part) {
    padding: 0.75rem 1rem;
}

:where(.mask-ui-part, .mask-renderer-bound) .detail-row,
.detail-row:where(.mask-ui-part) {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
    padding: 0.25rem 0;
}

:where(.mask-ui-part, .mask-renderer-bound) .detail-row.highlight,
.detail-row.highlight:where(.mask-ui-part) {
    background: #fefce8;
    margin: 0.25rem -1rem;
    padding: 0.375rem 1rem;
}

:where(.mask-ui-part, .mask-renderer-bound) .detail-label,
.detail-label:where(.mask-ui-part) {
    color: #64748b;
}

:where(.mask-ui-part, .mask-renderer-bound) .detail-value,
.detail-value:where(.mask-ui-part) {
    color: #000000 !important;
    font-family: monospace;
    font-weight: 500;
}

:where(.mask-ui-part, .mask-renderer-bound) .upload-error,
.upload-error:where(.mask-ui-part) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #dc2626;
    font-size: 0.8125rem;
}

/* ---- UiTextArea.razor ---- */

:where(.mask-ui-part, .mask-renderer-bound) .ui-textarea-container,
.ui-textarea-container:where(.mask-ui-part) {
    width: 100%;
    position: relative;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-textarea-container.impact-highlight .mud-input,
.ui-textarea-container.impact-highlight:where(.mask-ui-part) .mud-input {
    border-color: rgba(232, 133, 13, 0.72) !important;
    background: linear-gradient(180deg, rgba(255, 247, 224, 0.98), rgba(255, 241, 204, 0.98)) !important;
    box-shadow: 0 0 0 4px rgba(232, 133, 13, 0.18) !important;
}

/* ---- UiCheckBox.razor ---- */

:where(.mask-ui-part, .mask-renderer-bound) .ui-checkbox-container,
.ui-checkbox-container:where(.mask-ui-part) {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    position: relative;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-checkbox-container.input-processing,
.ui-checkbox-container.input-processing:where(.mask-ui-part) {
    opacity: 0.7;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-checkbox-container.impact-highlight .ui-checkbox .mud-button-root,
.ui-checkbox-container.impact-highlight:where(.mask-ui-part) .ui-checkbox .mud-button-root {
    border-color: rgba(232, 133, 13, 0.72) !important;
    background: linear-gradient(180deg, rgba(255, 247, 224, 0.98), rgba(255, 241, 204, 0.98)) !important;
    box-shadow: 0 0 0 4px rgba(232, 133, 13, 0.18) !important;
}

/* Gleicher CSS-Spinner wie UiInput (keine MudBlazor-Animation mit Drift) */
:where(.mask-ui-part, .mask-renderer-bound) .ui-checkbox-container .input-spinner,
.ui-checkbox-container:where(.mask-ui-part) .input-spinner {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    border: 2px solid #e0e4e8;
    border-top-color: var(--mask-petrol-deep, #106772);
    border-radius: 50%;
    animation: ui-checkbox-spin 0.6s linear infinite;
}

@keyframes ui-checkbox-spin {
    to { transform: rotate(360deg); }
}

:where(.mask-ui-part, .mask-renderer-bound) .result-check .mud-checkbox-icons,
.result-check:where(.mask-ui-part) .mud-checkbox-icons {
    pointer-events: none;
}

/* A result check whose value is not finite: the symbol instead of a check mark, marked as a number field is. */
:where(.mask-ui-part, .mask-renderer-bound) .result-check-nonfinite,
.result-check-nonfinite:where(.mask-ui-part) {
    display: inline-block;
    min-width: 24px;
    padding: 0 6px;
    border: 1px solid rgba(194, 65, 12, 0.7);
    border-radius: 4px;
    background: #fff7f2;
    box-shadow: inset 3px 0 0 #c2410c;
    color: #9a3412;
    font-weight: 600;
    text-align: center;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-checkbox,
.ui-checkbox:where(.mask-ui-part) {
    border-radius: 10px;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-checkbox .mud-checkbox,
.ui-checkbox:where(.mask-ui-part) .mud-checkbox {
    border-radius: 10px;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-checkbox .mud-button-root,
.ui-checkbox:where(.mask-ui-part) .mud-button-root {
    padding: 3px !important;
    border-radius: 9px !important;
    background: var(--mask-input-bg, #ffffff) !important;
    border: 1px solid var(--mask-input-border, rgba(20, 49, 79, 0.5)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    transition: border-color 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-checkbox .mud-icon-button-label,
.ui-checkbox:where(.mask-ui-part) .mud-icon-button-label {
    color: var(--mask-muted, #4d5f74) !important;
}

/* Help button "?" - gleicher Stil wie UiInput */
:where(.mask-ui-part, .mask-renderer-bound) .help-button,
.help-button:where(.mask-ui-part) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--mask-petrol-deep, #106772);
    background: rgba(21, 125, 138, 0.06);
    border: 1px solid rgba(21, 125, 138, 0.16);
    border-radius: 999px;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 3px;
    line-height: 1;
    transition: background-color 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

:where(.mask-ui-part, .mask-renderer-bound) .help-button:hover,
.help-button:hover:where(.mask-ui-part) {
    background: rgba(21, 125, 138, 0.14);
    color: var(--mask-petrol-deep, #106772);
    border-color: rgba(21, 125, 138, 0.28);
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-checkbox .mud-svg-icon,
.ui-checkbox:where(.mask-ui-part) .mud-svg-icon {
    width: 1.08rem !important;
    height: 1.08rem !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-checkbox .mud-icon-root,
.ui-checkbox:where(.mask-ui-part) .mud-icon-root {
    color: inherit !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-checkbox .mud-checkbox.mud-checked .mud-button-root,
.ui-checkbox:where(.mask-ui-part) .mud-checkbox.mud-checked .mud-button-root,
:where(.mask-ui-part, .mask-renderer-bound) .ui-checkbox .mud-checkbox.mud-checkbox-disabled.mud-checked .mud-button-root,
.ui-checkbox:where(.mask-ui-part) .mud-checkbox.mud-checkbox-disabled.mud-checked .mud-button-root {
    background: rgba(28, 138, 155, 0.12) !important;
    border-color: rgba(28, 138, 155, 0.55) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 0 0 3px rgba(28, 138, 155, 0.08) !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-checkbox .mud-checkbox.mud-checked .mud-icon-button-label,
.ui-checkbox:where(.mask-ui-part) .mud-checkbox.mud-checked .mud-icon-button-label {
    color: var(--mask-petrol-deep, #106772) !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-checkbox .mud-checkbox.mud-checked .mud-svg-icon,
.ui-checkbox:where(.mask-ui-part) .mud-checkbox.mud-checked .mud-svg-icon,
:where(.mask-ui-part, .mask-renderer-bound) .ui-checkbox .mud-checkbox.mud-checked .mud-icon-root,
.ui-checkbox:where(.mask-ui-part) .mud-checkbox.mud-checked .mud-icon-root,
:where(.mask-ui-part, .mask-renderer-bound) .ui-checkbox .mud-checkbox.mud-checked .mud-icon-button-label *,
.ui-checkbox:where(.mask-ui-part) .mud-checkbox.mud-checked .mud-icon-button-label *,
:where(.mask-ui-part, .mask-renderer-bound) .ui-checkbox .mud-checkbox.mud-checked .mud-primary-text,
.ui-checkbox:where(.mask-ui-part) .mud-checkbox.mud-checked .mud-primary-text {
    color: var(--mask-petrol-deep, #106772) !important;
    fill: currentColor !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-checkbox .mud-checkbox:not(.mud-checked) .mud-button-root:hover,
.ui-checkbox:where(.mask-ui-part) .mud-checkbox:not(.mud-checked) .mud-button-root:hover,
:where(.mask-ui-part, .mask-renderer-bound) .ui-checkbox .mud-button-root:hover,
.ui-checkbox:where(.mask-ui-part) .mud-button-root:hover {
    background: rgba(21, 125, 138, 0.06) !important;
    border-color: rgba(21, 125, 138, 0.28) !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-checkbox .mud-checkbox.mud-checked .mud-button-root:hover,
.ui-checkbox:where(.mask-ui-part) .mud-checkbox.mud-checked .mud-button-root:hover {
    background: rgba(28, 138, 155, 0.16) !important;
    border-color: rgba(28, 138, 155, 0.5) !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-checkbox.mud-disabled .mud-icon-button-label,
.ui-checkbox.mud-disabled:where(.mask-ui-part) .mud-icon-button-label,
:where(.mask-ui-part, .mask-renderer-bound) .ui-checkbox .mud-disabled .mud-icon-button-label,
.ui-checkbox:where(.mask-ui-part) .mud-disabled .mud-icon-button-label {
    color: #8aa0b2 !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-checkbox.mud-disabled .mud-button-root,
.ui-checkbox.mud-disabled:where(.mask-ui-part) .mud-button-root,
:where(.mask-ui-part, .mask-renderer-bound) .ui-checkbox .mud-disabled .mud-button-root,
.ui-checkbox:where(.mask-ui-part) .mud-disabled .mud-button-root {
    background: rgba(245, 248, 250, 0.88) !important;
    border-color: rgba(144, 160, 176, 0.22) !important;
    box-shadow: none !important;
}

/* ---- UiDropdown.razor ---- */

:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown-container,
.ui-dropdown-container:where(.mask-ui-part) {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    height: 26px;
}

:where(.mask-ui-part, .mask-renderer-bound) .impact-highlight-dropdown .mud-input.mud-input-text,
.impact-highlight-dropdown:where(.mask-ui-part) .mud-input.mud-input-text {
    border-color: rgba(232, 133, 13, 0.72) !important;
    background: linear-gradient(180deg, rgba(255, 247, 224, 0.98), rgba(255, 241, 204, 0.98)) !important;
    box-shadow: 0 0 0 4px rgba(232, 133, 13, 0.18) !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown-container.input-processing,
.ui-dropdown-container.input-processing:where(.mask-ui-part) {
    opacity: 0.7;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown-container.is-disabled,
.ui-dropdown-container.is-disabled:where(.mask-ui-part) {
    cursor: not-allowed;
}

/* Gleicher CSS-Spinner wie UiInput (keine MudBlazor-Animation mit Drift) */
:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown-container .input-spinner,
.ui-dropdown-container:where(.mask-ui-part) .input-spinner {
    position: absolute;
    right: 28px;
    top: 50%;
    left: auto;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    z-index: 1;
    border: 2px solid #e0e4e8;
    border-top-color: var(--mask-petrol-deep, #106772);
    border-radius: 50%;
    animation: ui-dropdown-spin 0.6s linear infinite;
}

@keyframes ui-dropdown-spin {
    to { transform: translateY(-50%) rotate(360deg); }
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown,
.ui-dropdown:where(.mask-ui-part) {
    min-width: 120px;
    width: 100%;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown .mud-input-root,
.ui-dropdown:where(.mask-ui-part) .mud-input-root {
    min-height: 26px !important;
    height: 26px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    color: var(--mask-ink, #14314f) !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown .mud-input.mud-input-text,
.ui-dropdown:where(.mask-ui-part) .mud-input.mud-input-text {
    background: var(--mask-input-bg, #ffffff) !important;
    border-radius: 8px !important;
    border: 1px solid var(--mask-input-border, rgba(20, 49, 79, 0.5)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown .mud-input::before,
.ui-dropdown:where(.mask-ui-part) .mud-input::before,
:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown .mud-input::after,
.ui-dropdown:where(.mask-ui-part) .mud-input::after,
:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown .mud-input-root::before,
.ui-dropdown:where(.mask-ui-part) .mud-input-root::before,
:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown .mud-input-root::after,
.ui-dropdown:where(.mask-ui-part) .mud-input-root::after,
:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown .mud-input-slot::before,
.ui-dropdown:where(.mask-ui-part) .mud-input-slot::before,
:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown .mud-input-slot::after,
.ui-dropdown:where(.mask-ui-part) .mud-input-slot::after {
    display: none !important;
    border-bottom: none !important;
    content: none !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .calculated-dropdown .mud-input.mud-input-text,
.calculated-dropdown:where(.mask-ui-part) .mud-input.mud-input-text {
    border: 1px solid var(--mask-result-border, rgba(21, 125, 138, 0.55)) !important;
    background: var(--mask-result-bg, #f2fbfb) !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown .mud-select,
.ui-dropdown:where(.mask-ui-part) .mud-select,
:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown .mud-select-input,
.ui-dropdown:where(.mask-ui-part) .mud-select-input,
:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown .mud-select-value,
.ui-dropdown:where(.mask-ui-part) .mud-select-value,
:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown .mud-input-input,
.ui-dropdown:where(.mask-ui-part) .mud-input-input {
    font-size: 0.87rem !important;
    line-height: 26px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    color: var(--mask-ink, #14314f) !important;
    font-weight: 600 !important;
}

/* Desktop style: arrow stays at right edge of full-width box */
:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown .mud-select-input,
.ui-dropdown:where(.mask-ui-part) .mud-select-input {
    flex: 1 1 auto !important;
    padding-left: 7px !important;
    padding-right: 4px !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown .mud-input-adornment.mud-input-adornment-end,
.ui-dropdown:where(.mask-ui-part) .mud-input-adornment.mud-input-adornment-end {
    min-width: auto !important;
    width: auto !important;
    padding: 0 7px 0 4px !important;
    margin-left: 2px;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown .mud-input-adornment-end .mud-icon-root,
.ui-dropdown:where(.mask-ui-part) .mud-input-adornment-end .mud-icon-root {
    color: var(--mask-petrol, #157d8a) !important;
    width: 1.08em !important;
    height: 1.08em !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown .mud-input-slot,
.ui-dropdown:where(.mask-ui-part) .mud-input-slot {
    color: var(--mask-ink, #14314f) !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown .mud-input-control:focus-within .mud-input.mud-input-text,
.ui-dropdown:where(.mask-ui-part) .mud-input-control:focus-within .mud-input.mud-input-text,
:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown .mud-input.mud-input-text:hover,
.ui-dropdown:where(.mask-ui-part) .mud-input.mud-input-text:hover {
    background: #ffffff !important;
    border-color: var(--mask-focus-border, rgba(21, 125, 138, 0.8)) !important;
    box-shadow: 0 0 0 3px var(--mask-focus-ring, rgba(21, 125, 138, 0.18)) !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown.mud-disabled .mud-input.mud-input-text,
.ui-dropdown.mud-disabled:where(.mask-ui-part) .mud-input.mud-input-text,
:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown .mud-disabled .mud-input.mud-input-text,
.ui-dropdown:where(.mask-ui-part) .mud-disabled .mud-input.mud-input-text {
    background: #f7fafc !important;
    border-color: var(--mask-line-strong, rgba(20, 49, 79, 0.3)) !important;
    color: var(--mask-muted, #4d5f74) !important;
    box-shadow: none !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .readonly-dropdown .mud-input.mud-input-text,
.readonly-dropdown:where(.mask-ui-part) .mud-input.mud-input-text,
:where(.mask-ui-part, .mask-renderer-bound) .locked-dropdown .mud-input.mud-input-text,
.locked-dropdown:where(.mask-ui-part) .mud-input.mud-input-text {
    border-style: dashed !important;
    cursor: not-allowed !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown .mud-select-value,
.ui-dropdown:where(.mask-ui-part) .mud-select-value,
:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown .mud-select-input,
.ui-dropdown:where(.mask-ui-part) .mud-select-input {
    color: var(--mask-ink, #14314f) !important;
}

/* Leeres Dropdown: Platzhalter sichtbar, aber klar als "noch keine Auswahl" */
:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown .mud-input-input::placeholder,
.ui-dropdown:where(.mask-ui-part) .mud-input-input::placeholder,
:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown .mud-select-input::placeholder,
.ui-dropdown:where(.mask-ui-part) .mud-select-input::placeholder {
    color: var(--mask-muted, #4d5f74) !important;
    font-style: italic;
    font-weight: 500 !important;
    opacity: 1;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown-popover,
.ui-dropdown-popover:where(.mask-ui-part) {
    width: max-content !important;
    max-width: min(72vw, 760px) !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown-popover .mud-paper,
.ui-dropdown-popover:where(.mask-ui-part) .mud-paper {
    width: max-content !important;
    min-width: max(100%, 280px) !important;
    max-width: min(72vw, 760px) !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown-list,
.ui-dropdown-list:where(.mask-ui-part),
:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown-popover .mud-list,
.ui-dropdown-popover:where(.mask-ui-part) .mud-list {
    padding: 6px !important;
    border-radius: 12px !important;
    border: 1px solid var(--mask-line, rgba(20, 49, 79, 0.18)) !important;
    box-shadow: 0 14px 30px rgba(17, 43, 69, 0.12) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px);
    width: max-content !important;
    min-width: 100% !important;
    max-width: min(72vw, 760px) !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown-list .mud-list-item,
.ui-dropdown-list:where(.mask-ui-part) .mud-list-item,
:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown-popover .mud-list-item,
.ui-dropdown-popover:where(.mask-ui-part) .mud-list-item {
    min-height: 28px !important;
    border-radius: 8px !important;
    color: var(--mask-ink, #14314f) !important;
    font-size: 0.87rem !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    white-space: nowrap !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown-list .mud-list-item:hover,
.ui-dropdown-list:where(.mask-ui-part) .mud-list-item:hover,
:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown-list .mud-list-item.mud-selected-item,
.ui-dropdown-list:where(.mask-ui-part) .mud-list-item.mud-selected-item,
:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown-popover .mud-list-item:hover,
.ui-dropdown-popover:where(.mask-ui-part) .mud-list-item:hover,
:where(.mask-ui-part, .mask-renderer-bound) .ui-dropdown-popover .mud-list-item.mud-selected-item,
.ui-dropdown-popover:where(.mask-ui-part) .mud-list-item.mud-selected-item {
    background: rgba(21, 125, 138, 0.1) !important;
    color: var(--mask-petrol-deep, #106772) !important;
}

/* Help button "?" - gleicher Stil wie UiInput */
:where(.mask-ui-part, .mask-renderer-bound) .help-button,
.help-button:where(.mask-ui-part) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--mask-petrol-deep, #106772);
    background: rgba(21, 125, 138, 0.06);
    border: 1px solid rgba(21, 125, 138, 0.16);
    border-radius: 999px;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 3px;
    line-height: 1;
    transition: background-color 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

:where(.mask-ui-part, .mask-renderer-bound) .help-button:hover,
.help-button:hover:where(.mask-ui-part) {
    background: rgba(21, 125, 138, 0.14);
    color: var(--mask-petrol-deep, #106772);
    border-color: rgba(21, 125, 138, 0.28);
}

/* ---- UiInput.razor ---- */

:where(.mask-ui-part, .mask-renderer-bound) .input-compact-container,
.input-compact-container:where(.mask-ui-part) { display: flex; align-items: center; width: 100%; }
:where(.mask-ui-part, .mask-renderer-bound) .inputElement,
.inputElement:where(.mask-ui-part) {
    text-align: right;
    margin: 0;
    display: inline-block;
    width: 14ch;
    min-width: 14ch;
    max-width: 14ch;
    padding: 3px 7px;
    box-sizing: border-box;
    direction: ltr;
    font-weight: 600;
    min-height: 26px;
}

:where(.mask-ui-part, .mask-renderer-bound) input[type=text],
:where(.mask-ui-part, .mask-renderer-bound) .modern-input,
.modern-input:where(.mask-ui-part),
:where(.mask-ui-part, .mask-renderer-bound) .inputElement,
.inputElement:where(.mask-ui-part),
:where(.mask-ui-part, .mask-renderer-bound) .inputBox,
.inputBox:where(.mask-ui-part) {
    background-color: var(--mask-input-bg, #ffffff);
    color: var(--color, var(--mask-ink, var(--mud-palette-text-primary, #333)));
    border: 1px solid var(--mask-input-border, rgba(20, 49, 79, 0.5));
    padding: 3px 7px;
    border-radius: 8px;
    box-sizing: border-box;
    height: 100%;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}

:where(.mask-ui-part, .mask-renderer-bound) .input-with-unit,
.input-with-unit:where(.mask-ui-part) {
    display: inline-flex;
    width: auto;
    position: relative;
    align-items: center;
}

:where(.mask-ui-part, .mask-renderer-bound) .input-without-unit,
.input-without-unit:where(.mask-ui-part) {
    display: inline-flex;
    max-width: 14ch;
    position: relative;
    align-items: center;
}

:where(.mask-ui-part, .mask-renderer-bound) .input-without-unit.fill-cell,
.input-without-unit.fill-cell:where(.mask-ui-part) {
    display: inline-flex;
    width: 100%;
    max-width: none;
    align-items: center;
}

:where(.mask-ui-part, .mask-renderer-bound) .impact-highlight,
.impact-highlight:where(.mask-ui-part) {
    animation: impactPulse 1.2s ease;
}

:where(.mask-ui-part, .mask-renderer-bound) .impact-highlight-input,
.impact-highlight-input:where(.mask-ui-part) {
    border-color: rgba(232, 133, 13, 0.72) !important;
    background: linear-gradient(180deg, rgba(255, 247, 224, 0.98), rgba(255, 241, 204, 0.98)) !important;
    box-shadow: 0 0 0 4px rgba(232, 133, 13, 0.18) !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .range-reference-highlight,
.range-reference-highlight:where(.mask-ui-part) {
    animation: rangeReferencePulse 1.4s ease;
}

:where(.mask-ui-part, .mask-renderer-bound) .range-reference-highlight-input,
.range-reference-highlight-input:where(.mask-ui-part) {
    border-color: rgba(232, 133, 13, 0.9) !important;
    background: linear-gradient(180deg, #fff7df, #ffedbd) !important;
    box-shadow:
        0 0 0 3px rgba(232, 133, 13, 0.2),
        inset 0 0 0 1px rgba(184, 98, 0, 0.2) !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .material-missing-input,
.material-missing-input:where(.mask-ui-part) {
    border-color: rgba(196, 142, 72, 0.52) !important;
    background: linear-gradient(180deg, #fffaf0, #fff6e6) !important;
    box-shadow: inset 2px 0 0 rgba(214, 158, 80, 0.68), 0 0 0 1px rgba(214, 158, 80, 0.08) !important;
    color: #7a4a19 !important;
}

/* A known value that is not finite (∞, −∞, NaN): the field shows the symbol, framed and striped on its left edge in
   the colour of the header's warning (MaskInputWarningBar), which explains it once per mask. Not a valid result.
   Two classes, so it wins over .calculated-border further down. */
:where(.mask-ui-part, .mask-renderer-bound) .modern-input.non-finite-input,
.modern-input.non-finite-input:where(.mask-ui-part) {
    border-color: rgba(194, 65, 12, 0.7) !important;
    background: #fff7f2 !important;
    box-shadow: inset 3px 0 0 #c2410c !important;
    color: #9a3412 !important;
    font-weight: 600;
}

@keyframes impactPulse {
    0% { transform: translateY(0); }
    25% { transform: translateY(-1px); }
    100% { transform: translateY(0); }
}

@keyframes rangeReferencePulse {
    0% { transform: translateY(0); }
    22% { transform: translateY(-1px); }
    100% { transform: translateY(0); }
}

:where(.mask-ui-part, .mask-renderer-bound) .input-without-unit.fill-cell .inputElement,
.input-without-unit.fill-cell:where(.mask-ui-part) .inputElement {
    flex: 1;
    min-width: 8ch;
    max-width: none;
}

:where(.mask-ui-part, .mask-renderer-bound) .fill-cell,
.fill-cell:where(.mask-ui-part) {
    display: flex;
    width: 100%;
}

:where(.mask-ui-part, .mask-renderer-bound) .fill-cell .inputElement,
.fill-cell:where(.mask-ui-part) .inputElement {
    display: block;
    width: auto;
    min-width: 8ch;
    max-width: none;
    margin: 0;
    flex: 1 1 auto;
}

:where(.mask-ui-part, .mask-renderer-bound) .fill-cell .unit,
.fill-cell:where(.mask-ui-part) .unit {
    flex: 0 0 auto;
    width: auto;
    min-width: 2ch;
}

:where(.mask-ui-part, .mask-renderer-bound) .unit,
.unit:where(.mask-ui-part) {
    display: inline-block;
    width: auto;
    min-width: 2ch;
    max-width: 15ch;
    padding: 0 7px 0 4px;
    text-align: left;
    white-space: nowrap;
    color: var(--mask-muted, #4d5f74);
    cursor: pointer;
    flex: 0 0 auto;
    font-weight: 600;
}

:where(.mask-ui-part, .mask-renderer-bound) .unit:hover,
.unit:hover:where(.mask-ui-part) {
    text-decoration: underline;
    color: var(--mask-petrol-deep, #106772);
}

:where(.mask-ui-part, .mask-renderer-bound) .modern-input,
.modern-input:where(.mask-ui-part) {
    border: 1px solid var(--mask-input-border, rgba(20, 49, 79, 0.5));
}

/* Keep the preview in normal flow so compact rows grow with its text. */
:where(.mask-ui-part, .mask-renderer-bound) .input-with-unit.pick-candidate:has(> .mask-pick-preview),
.input-with-unit.pick-candidate:has(> .mask-pick-preview):where(.mask-ui-part),
:where(.mask-ui-part, .mask-renderer-bound) .input-without-unit.pick-candidate:has(> .mask-pick-preview),
.input-without-unit.pick-candidate:has(> .mask-pick-preview):where(.mask-ui-part) {
    flex-wrap: wrap;
}

:where(.mask-ui-part, .mask-renderer-bound) input:focus,
:where(.mask-ui-part, .mask-renderer-bound) .input-with-unit:focus,
.input-with-unit:focus:where(.mask-ui-part) {
    background-color: #ffffff;
    color: var(--focused-color, var(--mask-ink, #14314f));
    outline: none;
}

/* The masks' own inputs; a MudBlazor field draws its own focus frame around its inner input (.mud-input-slot), and a
   second one inside it showed as an inner green frame (the module search field, U-09). */
:where(.mask-ui-part, .mask-renderer-bound) input:not(.mud-input-slot):focus-visible,
input:not(.mud-input-slot):focus-visible:where(.mask-ui-part) {
    outline: none;
    border-color: var(--mask-focus-border, rgba(21, 125, 138, 0.8));
    box-shadow: 0 0 0 3px var(--mask-focus-ring, rgba(21, 125, 138, 0.18));
}

:where(.mask-ui-part, .mask-renderer-bound) .readonly-input,
.readonly-input:where(.mask-ui-part) {
    background-color: #f7fafc !important;
    border-color: var(--mask-line-strong, rgba(20, 49, 79, 0.3)) !important;
    color: var(--mask-muted, #4d5f74) !important;
}

/* Locked variable (Ben() "_"-prefix: value is derived from other inputs).
   A light hatch communicates the locked state without competing with the
   value itself. Empty locked fields intentionally stay empty. */
:where(.mask-ui-part, .mask-renderer-bound) .locked-input,
.locked-input:where(.mask-ui-part) {
    background-color: #f7fafc !important;
    border-color: rgba(20, 49, 79, 0.22) !important;
    color: #2c3e5a !important;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(20, 49, 79, 0.065) 10px,
        rgba(20, 49, 79, 0.065) 11px
    ) !important;
    cursor: not-allowed !important;
}

/* Normally locked, manually unlocked (ManualFieldUnlockService): an amber frame on the
   field itself; the stripe on its left edge is ManualFieldUnlockIndicator. Nothing sits
   beside the input, so it keeps its full width. */
:where(.mask-ui-part, .mask-renderer-bound) .manually-unlocked-input,
.manually-unlocked-input:where(.mask-ui-part) {
    border-color: #c88c20 !important;
    background-color: #fffdf6 !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .manually-unlocked-input:focus-visible,
.manually-unlocked-input:focus-visible:where(.mask-ui-part) {
    border-color: #c88c20 !important;
    box-shadow: 0 0 0 3px rgba(200, 140, 32, 0.22) !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .locked-container,
.locked-container:where(.mask-ui-part) {
    position: relative;
}

:where(.mask-ui-part, .mask-renderer-bound) .calculated-border,
.calculated-border:where(.mask-ui-part) {
    border: 1px solid var(--mask-result-border, rgba(21, 125, 138, 0.55)) !important;
    background: var(--mask-result-bg, #f2fbfb) !important;
    color: var(--mask-petrol-deep, #106772) !important;
}

/* An expert's own value replaces the equation's result. */
:where(.mask-ui-part, .mask-renderer-bound) .equation-deviation-input,
.equation-deviation-input:where(.mask-ui-part) {
    border: 1px dashed #b73928 !important;
    color: #b73928 !important;
    font-weight: 600;
}

/* Link indicator: colored left border by the member's permission */
:where(.mask-ui-part, .mask-renderer-bound) .linked-rw,
.linked-rw:where(.mask-ui-part) {
    border-left: 3.5px solid #4caf50 !important;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

:where(.mask-ui-part, .mask-renderer-bound) .linked-ro,
.linked-ro:where(.mask-ui-part) {
    border-left: 3.5px solid #ff9800 !important;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

:where(.mask-ui-part, .mask-renderer-bound) .linked-req,
.linked-req:where(.mask-ui-part) {
    border-left: 3.5px solid #9c27b0 !important;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

/* ValidatorPro BEK assessment indicators */
:where(.mask-ui-part, .mask-renderer-bound) .vp-ok,
.vp-ok:where(.mask-ui-part) {
    border-right: 3.5px solid #27ae60 !important;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

:where(.mask-ui-part, .mask-renderer-bound) .vp-uncommon,
.vp-uncommon:where(.mask-ui-part) {
    border-right: 3.5px solid #5dade2 !important;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

:where(.mask-ui-part, .mask-renderer-bound) .vp-rare,
.vp-rare:where(.mask-ui-part) {
    border-right: 3.5px solid #e67e22 !important;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

:where(.mask-ui-part, .mask-renderer-bound) .vp-novel,
.vp-novel:where(.mask-ui-part) {
    border-right: 3.5px solid #8e44ad !important;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* ASME check findings (left edge; ValidatorPro uses the right one) */
:where(.mask-ui-part, .mask-renderer-bound) .asme-error,
.asme-error:where(.mask-ui-part) {
    border-left: 3.5px solid #c62828 !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .asme-warning,
.asme-warning:where(.mask-ui-part) {
    border-left: 3.5px solid #ef8f00 !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .asme-info,
.asme-info:where(.mask-ui-part) {
    border-left: 3.5px solid #1e88e5 !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .input-processing,
.input-processing:where(.mask-ui-part) {
    opacity: 0.7;
    pointer-events: none;
}

:where(.mask-ui-part, .mask-renderer-bound) .input-spinner,
.input-spinner:where(.mask-ui-part) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    z-index: 1;
    border: 2px solid #e0e4e8;
    border-top-color: var(--mask-petrol-deep, #106772);
    border-radius: 50%;
    animation: input-spin 0.6s linear infinite;
}

@keyframes input-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

:where(.mask-ui-part, .mask-renderer-bound) .cursorPointer,
.cursorPointer:where(.mask-ui-part) {
    cursor: pointer;
}

/* Help button "?" - Desktop style */
:where(.mask-ui-part, .mask-renderer-bound) .help-button,
.help-button:where(.mask-ui-part) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--mask-petrol-deep, #106772);
    background: rgba(21, 125, 138, 0.06);
    border: 1px solid rgba(21, 125, 138, 0.16);
    border-radius: 999px;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 3px;
    line-height: 1;
    transition: background-color 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

:where(.mask-ui-part, .mask-renderer-bound) .help-button:hover,
.help-button:hover:where(.mask-ui-part) {
    background: rgba(21, 125, 138, 0.14);
    color: var(--mask-petrol-deep, #106772);
    border-color: rgba(21, 125, 138, 0.28);
}

:where(.mask-ui-part, .mask-renderer-bound) .scale-slider-panel,
.scale-slider-panel:where(.mask-ui-part) {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    min-width: 220px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(20, 49, 79, 0.12);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 14px 28px rgba(20, 49, 79, 0.14);
    z-index: 20;
    backdrop-filter: blur(8px);
}

:where(.mask-ui-part, .mask-renderer-bound) .scale-slider-header,
.scale-slider-header:where(.mask-ui-part) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

:where(.mask-ui-part, .mask-renderer-bound) .scale-slider-factor,
.scale-slider-factor:where(.mask-ui-part) {
    color: #14314f;
    font-size: 0.8rem;
    font-weight: 700;
}

:where(.mask-ui-part, .mask-renderer-bound) .scale-slider-chip,
.scale-slider-chip:where(.mask-ui-part) {
    border: 1px solid rgba(21, 125, 138, 0.18);
    background: rgba(21, 125, 138, 0.06);
    color: var(--mask-petrol-deep, #106772);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    cursor: pointer;
}

:where(.mask-ui-part, .mask-renderer-bound) .scale-slider-chip.close,
.scale-slider-chip.close:where(.mask-ui-part) {
    padding: 2px 7px;
    color: var(--mask-muted, #4d5f74);
}

:where(.mask-ui-part, .mask-renderer-bound) .scale-slider-range,
.scale-slider-range:where(.mask-ui-part) {
    width: 100%;
    accent-color: var(--mask-petrol-deep, #106772);
    cursor: ew-resize;
}

:where(.mask-ui-part, .mask-renderer-bound) .scale-slider-preview,
.scale-slider-preview:where(.mask-ui-part) {
    margin-top: 6px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--mask-muted, #4d5f74);
    text-align: right;
}

:where(.mask-ui-part, .mask-renderer-bound) .validation-error,
.validation-error:where(.mask-ui-part) {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    padding: 2px 6px;
    font-size: 0.75rem;
    color: #d32f2f;
    background: #ffebee;
    border-radius: 4px;
}

:where(.mask-ui-part, .mask-renderer-bound) .validation-error.validation-hint,
.validation-error.validation-hint:where(.mask-ui-part) {
    color: #7a5200;
    background: #fff4d6;
    border: 1px solid #f2d28a;
}

/* Interactive Test Mode hint */
:where(.mask-ui-part, .mask-renderer-bound) .test-hint,
.test-hint:where(.mask-ui-part) {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 1px;
    padding: 0px 5px;
    font-size: 0.68rem;
    color: #1565c0;
    background: #e3f2fd;
    border: 1px solid #90caf9;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

:where(.mask-ui-part, .mask-renderer-bound) .test-hint:hover,
.test-hint:hover:where(.mask-ui-part) {
    background: #bbdefb;
    border-color: #1976d2;
}

:where(.mask-ui-part, .mask-renderer-bound) .test-hint-matched,
.test-hint-matched:where(.mask-ui-part) {
    color: #1b5e20;
    background: #e8f5e9;
    border-color: #a5d6a7;
    cursor: default;
}

:where(.mask-ui-part, .mask-renderer-bound) .test-hint-matched:hover,
.test-hint-matched:hover:where(.mask-ui-part) {
    background: #e8f5e9;
    border-color: #a5d6a7;
}

:where(.mask-ui-part, .mask-renderer-bound) .test-hint-icon,
.test-hint-icon:where(.mask-ui-part) {
    font-size: 0.6rem;
    font-weight: bold;
    opacity: 0.8;
}

/* Compact MudTextField styling */
:where(.mask-ui-part, .mask-renderer-bound) .compact-input.mud-input-control,
.compact-input.mud-input-control:where(.mask-ui-part) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .compact-input .mud-input-outlined,
.compact-input:where(.mask-ui-part) .mud-input-outlined {
    height: 26px !important;
    background-color: #f8f9fa !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .compact-input .mud-input-slot,
.compact-input:where(.mask-ui-part) .mud-input-slot {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 26px !important;
    display: flex;
    align-items: center;
    font-size: 13px !important;
    line-height: 1 !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .compact-input .mud-input-label-outlined.mud-input-label-animated,
.compact-input:where(.mask-ui-part) .mud-input-label-outlined.mud-input-label-animated {
    transform: translate(14px, 4px) scale(1);
    font-size: 13px !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .compact-input .mud-input-label-outlined.mud-input-label-animated.mud-input-label-inputcontrol,
.compact-input:where(.mask-ui-part) .mud-input-label-outlined.mud-input-label-animated.mud-input-label-inputcontrol {
    transform: translate(14px, -8px) scale(0.75);
    background-color: #fff;
    padding: 0 4px;
}

:where(.mask-ui-part, .mask-renderer-bound) .compact-input input.mud-input-root,
.compact-input:where(.mask-ui-part) input.mud-input-root {
    font-size: 13px !important;
    height: 26px !important;
}

/* ---- BookmarkLinkOverlay.razor ---- */

:where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-backdrop,
.bookmark-link-backdrop:where(.mask-ui-part) {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background:
        radial-gradient(circle at top, rgba(28, 138, 155, 0.12), transparent 28%),
        rgba(9, 20, 35, 0.54);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: bookmarkLinkFadeIn 0.15s ease-out;
}

@keyframes bookmarkLinkFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

:where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-panel,
.bookmark-link-panel:where(.mask-ui-part) {
    background: linear-gradient(180deg, rgba(252, 253, 253, 0.98) 0%, rgba(246, 250, 251, 0.98) 100%);
    border-radius: 18px;
    border: 1px solid rgba(18, 39, 60, 0.12);
    box-shadow: 0 26px 54px rgba(10, 30, 48, 0.22);
    width: 96vw;
    height: 90vh;
    max-width: 1720px;
    display: grid;
    grid-template-columns: minmax(280px, 0.42fr) minmax(0, 2fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    overflow: hidden;
    animation: bookmarkLinkSlideUp 0.2s ease-out;
}

@keyframes bookmarkLinkSlideUp {
    from { transform: translateY(16px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

:where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-panel .overlay-header,
.bookmark-link-panel:where(.mask-ui-part) .overlay-header {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 24px 18px;
    background:
        linear-gradient(180deg, #102a43 0%, #173958 100%),
        linear-gradient(90deg, rgba(48, 155, 160, 0.14), transparent 45%);
    border-bottom: 1px solid rgba(117, 196, 199, 0.14);
}

:where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-panel .overlay-header-text h3,
.bookmark-link-panel:where(.mask-ui-part) .overlay-header-text h3 {
    margin: 0;
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: white;
}

:where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-panel .overlay-subtitle,
.bookmark-link-panel:where(.mask-ui-part) .overlay-subtitle {
    display: inline-block;
    margin-top: 5px;
    font-size: 0.84rem;
    color: rgba(233, 245, 247, 0.8);
}

:where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-panel .close-btn,
.bookmark-link-panel:where(.mask-ui-part) .close-btn {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(220, 240, 243, 0.18) !important;
    border-radius: 12px;
    cursor: pointer;
    color: white !important;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    min-width: 40px;
    min-height: 40px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

:where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-panel .close-btn:hover,
.bookmark-link-panel:where(.mask-ui-part) .close-btn:hover {
    background: rgba(255,255,255,0.14) !important;
    border-color: rgba(220, 240, 243, 0.28) !important;
}

:where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-panel .overlay-target,
.bookmark-link-panel:where(.mask-ui-part) .overlay-target {
    grid-column: 1 / -1;
    padding: 14px 24px;
    background: rgba(245, 249, 251, 0.95);
    border-bottom: 1px solid rgba(18, 39, 60, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

:where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-panel .target-info,
.bookmark-link-panel:where(.mask-ui-part) .target-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    flex-wrap: wrap;
}

:where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-panel .target-label,
.bookmark-link-panel:where(.mask-ui-part) .target-label {
    font-weight: 700;
    color: #445a6d;
}

:where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-panel .target-name,
.bookmark-link-panel:where(.mask-ui-part) .target-name {
    font-weight: 800;
    font-size: 1rem;
    color: #1c8a9b;
}

:where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-panel .target-module,
.bookmark-link-panel:where(.mask-ui-part) .target-module {
    padding: 4px 8px;
    border-radius: 7px;
    background: #173958;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

:where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-panel .target-unit,
.bookmark-link-panel:where(.mask-ui-part) .target-unit {
    color: #547083;
    font-size: 0.78rem;
    background: #e7eef2;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid #d8e3e8;
}

:where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-panel .toggle-label,
.bookmark-link-panel:where(.mask-ui-part) .toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #617789;
    cursor: pointer;
}

:where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-panel .toggle-label input,
.bookmark-link-panel:where(.mask-ui-part) .toggle-label input {
    accent-color: #1c8a9b;
}

:where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-panel .overlay-content,
.bookmark-link-panel:where(.mask-ui-part) .overlay-content {
    grid-column: 1;
    grid-row: 3;
    min-height: 0;
    overflow: auto;
    padding: 4px 0;
    border-right: 1px solid rgba(18, 39, 60, 0.08);
    background: rgba(252, 253, 253, 0.72);
}

:where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-panel .overlay-preview-pane,
.bookmark-link-panel:where(.mask-ui-part) .overlay-preview-pane {
    grid-column: 2;
    grid-row: 3;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 18px;
    background: linear-gradient(180deg, rgba(239, 246, 248, 0.88) 0%, rgba(248, 251, 252, 0.96) 100%);
    border-left: 1px solid rgba(255, 255, 255, 0.76);
}

:where(.mask-ui-part, .mask-renderer-bound) .context-preview-grid,
.context-preview-grid:where(.mask-ui-part) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

:where(.mask-ui-part, .mask-renderer-bound) .context-preview-card,
.context-preview-card:where(.mask-ui-part) {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(23, 57, 88, 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 14px 30px rgba(16, 42, 67, 0.08);
}

:where(.mask-ui-part, .mask-renderer-bound) .context-preview-title,
.context-preview-title:where(.mask-ui-part) {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 58px;
    padding: 10px 13px;
    border-bottom: 1px solid rgba(23, 57, 88, 0.1);
    background: rgba(247, 250, 252, 0.96);
}

:where(.mask-ui-part, .mask-renderer-bound) .context-preview-role,
.context-preview-role:where(.mask-ui-part) {
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

:where(.mask-ui-part, .mask-renderer-bound) .context-preview-card--source .context-preview-role,
.context-preview-card--source:where(.mask-ui-part) .context-preview-role { background: #167b87; }
:where(.mask-ui-part, .mask-renderer-bound) .context-preview-card--target .context-preview-role,
.context-preview-card--target:where(.mask-ui-part) .context-preview-role { background: #a85f00; }

:where(.mask-ui-part, .mask-renderer-bound) .context-preview-identity,
.context-preview-identity:where(.mask-ui-part) {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
}

:where(.mask-ui-part, .mask-renderer-bound) .context-preview-identity strong,
.context-preview-identity:where(.mask-ui-part) strong {
    color: #173958;
    font-size: 0.82rem;
    white-space: nowrap;
}

:where(.mask-ui-part, .mask-renderer-bound) .context-preview-identity > span,
.context-preview-identity:where(.mask-ui-part) > span {
    color: #547083;
    font-size: 0.76rem;
    font-weight: 800;
    white-space: nowrap;
}

:where(.mask-ui-part, .mask-renderer-bound) .context-preview-identity small,
.context-preview-identity:where(.mask-ui-part) small {
    overflow: hidden;
    color: #667d8f;
    font-size: 0.74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:where(.mask-ui-part, .mask-renderer-bound) .context-preview-content,
.context-preview-content:where(.mask-ui-part) {
    min-width: 0;
    min-height: 0;
    padding: 10px;
    overflow: hidden;
}

/* Grouped bookmark items */
:where(.mask-ui-part, .mask-renderer-bound) .ov-group,
.ov-group:where(.mask-ui-part) {
    border-bottom: 1px solid rgba(18, 39, 60, 0.05);
}

:where(.mask-ui-part, .mask-renderer-bound) .ov-group:last-child,
.ov-group:last-child:where(.mask-ui-part) {
    border-bottom: none;
}

:where(.mask-ui-part, .mask-renderer-bound) .ov-group-header,
.ov-group-header:where(.mask-ui-part) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 14px 20px 8px;
    user-select: none;
}

:where(.mask-ui-part, .mask-renderer-bound) .ov-group-main,
.ov-group-main:where(.mask-ui-part) {
    display: flex;
    align-items: center;
    gap: 8px;
}

:where(.mask-ui-part, .mask-renderer-bound) .ov-group-name,
.ov-group-name:where(.mask-ui-part) {
    font-size: 1.05rem;
    font-weight: 700;
    color: #173958;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

:where(.mask-ui-part, .mask-renderer-bound) .ov-group-count,
.ov-group-count:where(.mask-ui-part) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(28, 138, 155, 0.12);
    color: #166f7d;
    font-size: 0.74rem;
    font-weight: 800;
}

:where(.mask-ui-part, .mask-renderer-bound) .ov-group-caption,
.ov-group-caption:where(.mask-ui-part) {
    max-width: 100%;
    color: #63798b;
    font-size: 0.76rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:where(.mask-ui-part, .mask-renderer-bound) .ov-item,
.ov-item:where(.mask-ui-part) {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px 11px 22px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

:where(.mask-ui-part, .mask-renderer-bound) .ov-item:hover,
.ov-item:hover:where(.mask-ui-part) {
    background: rgba(28, 138, 155, 0.08);
}

:where(.mask-ui-part, .mask-renderer-bound) .ov-item.ov-item-active,
.ov-item.ov-item-active:where(.mask-ui-part) {
    background: rgba(28, 138, 155, 0.14);
    box-shadow: inset 4px 0 0 #1c8a9b;
}

:where(.mask-ui-part, .mask-renderer-bound) .ov-item:active,
.ov-item:active:where(.mask-ui-part) {
    background: rgba(28, 138, 155, 0.14);
}

:where(.mask-ui-part, .mask-renderer-bound) .ov-item.ov-incompatible,
.ov-item.ov-incompatible:where(.mask-ui-part) {
    opacity: 0.6;
}

:where(.mask-ui-part, .mask-renderer-bound) .ov-item.ov-incompatible:hover,
.ov-item.ov-incompatible:hover:where(.mask-ui-part) {
    background: rgba(241, 186, 74, 0.12);
}

:where(.mask-ui-part, .mask-renderer-bound) .ov-varnr,
.ov-varnr:where(.mask-ui-part) {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1c8a9b;
    min-width: 36px;
    flex-shrink: 0;
}

:where(.mask-ui-part, .mask-renderer-bound) .ov-varname,
.ov-varname:where(.mask-ui-part) {
    display: none;
    font-size: 0.82rem;
    color: #445a6d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

:where(.mask-ui-part, .mask-renderer-bound) .ov-warn,
.ov-warn:where(.mask-ui-part) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    background: #d49a3a;
    color: white;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
}

:where(.mask-ui-part, .mask-renderer-bound) .ov-fill,
.ov-fill:where(.mask-ui-part) { flex: 1; }

:where(.mask-ui-part, .mask-renderer-bound) .ov-unit,
.ov-unit:where(.mask-ui-part) {
    font-size: 0.78rem;
    color: #647b8d;
    min-width: 40px;
    text-align: right;
}

:where(.mask-ui-part, .mask-renderer-bound) .ov-unit-warn,
.ov-unit-warn:where(.mask-ui-part) {
    color: #b57a17;
}

:where(.mask-ui-part, .mask-renderer-bound) .ov-val,
.ov-val:where(.mask-ui-part) {
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: 0.82rem;
    font-weight: 600;
    color: #24374b;
    background: #eef4f6;
    padding: 3px 10px;
    border-radius: 8px;
    border: 1px solid #dde7eb;
    min-width: 60px;
    text-align: right;
}

:where(.mask-ui-part, .mask-renderer-bound) .ov-val-mat,
.ov-val-mat:where(.mask-ui-part) {
    font-family: inherit;
    font-size: 0.72rem;
    color: #6a5c8e;
    font-weight: 500;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:where(.mask-ui-part, .mask-renderer-bound) .ov-val-empty,
.ov-val-empty:where(.mask-ui-part) {
    color: #aab8c3;
    background: #f7fafb;
}

:where(.mask-ui-part, .mask-renderer-bound) .ov-link-icon,
.ov-link-icon:where(.mask-ui-part) {
    color: #9dbbc2;
    flex-shrink: 0;
    transition: color 0.15s;
}

:where(.mask-ui-part, .mask-renderer-bound) .ov-item:hover .ov-link-icon,
.ov-item:hover:where(.mask-ui-part) .ov-link-icon {
    color: #1c8a9b;
}

:where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-panel .overlay-empty,
.bookmark-link-panel:where(.mask-ui-part) .overlay-empty {
    grid-column: 1;
    grid-row: 3;
    min-height: 194px;
    padding: 30px 24px;
    display: grid;
    place-items: center;
    text-align: center;
    color: #8194a4;
    background:
        linear-gradient(180deg, rgba(252, 253, 253, 0.9) 0%, rgba(246, 250, 251, 0.96) 100%);
}

:where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-panel .overlay-empty-inner,
.bookmark-link-panel:where(.mask-ui-part) .overlay-empty-inner {
    max-width: 340px;
}

:where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-panel .overlay-empty-icon,
.bookmark-link-panel:where(.mask-ui-part) .overlay-empty-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: #166f7d;
    background: rgba(28, 138, 155, 0.12);
}

:where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-panel .overlay-empty p,
.bookmark-link-panel:where(.mask-ui-part) .overlay-empty p {
    font-size: 1rem;
    line-height: 1.45;
    color: #698094;
    margin: 0 0 8px 0;
}

:where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-panel .overlay-empty small,
.bookmark-link-panel:where(.mask-ui-part) .overlay-empty small {
    display: block;
    margin: 0 0 18px;
    font-size: 0.82rem;
    line-height: 1.55;
    color: #8093a4;
}

:where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-panel .show-all-btn,
.bookmark-link-panel:where(.mask-ui-part) .show-all-btn {
    padding: 12px 18px;
    background: linear-gradient(180deg, #1c8a9b 0%, #166f7d 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
    box-shadow: 0 12px 24px rgba(13, 77, 88, 0.18);
}

:where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-panel .show-all-btn:hover,
.bookmark-link-panel:where(.mask-ui-part) .show-all-btn:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
}

:where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-panel .overlay-footer,
.bookmark-link-panel:where(.mask-ui-part) .overlay-footer {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    background: rgba(241, 247, 248, 0.92);
    border-top: 1px solid rgba(18, 39, 60, 0.08);
    color: #7d92a3;
    font-size: 0.8rem;
}

:where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-panel .overlay-footer-icon,
.bookmark-link-panel:where(.mask-ui-part) .overlay-footer-icon {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(18, 39, 60, 0.14);
    background: rgba(255, 255, 255, 0.8);
    color: #668392;
}

:where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-panel .overlay-footer svg,
.bookmark-link-panel:where(.mask-ui-part) .overlay-footer svg {
    flex-shrink: 0;
}

:where(.mask-ui-part, .mask-renderer-bound) .link-mask-preview,
.link-mask-preview:where(.mask-ui-part) {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px;
    background: #f8fbfd;
    border: 1px solid rgba(23, 57, 88, 0.14);
    box-shadow: 0 16px 34px rgba(16, 42, 67, 0.12);
}

:where(.mask-ui-part, .mask-renderer-bound) .link-mask-preview__header,
.link-mask-preview__header:where(.mask-ui-part) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(180deg, #102a43 0%, #173958 100%);
    color: #ffffff;
    font-size: 12px;
    flex-shrink: 0;
}

:where(.mask-ui-part, .mask-renderer-bound) .link-mask-preview__module,
.link-mask-preview__module:where(.mask-ui-part) {
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
}

:where(.mask-ui-part, .mask-renderer-bound) .link-mask-preview__section,
.link-mask-preview__section:where(.mask-ui-part) {
    color: rgba(255, 255, 255, 0.78);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:where(.mask-ui-part, .mask-renderer-bound) .link-mask-preview__body,
.link-mask-preview__body:where(.mask-ui-part) {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: auto;
}

:where(.mask-ui-part, .mask-renderer-bound) .link-mask-preview__row,
.link-mask-preview__row:where(.mask-ui-part) {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 14px;
    min-width: max-content;
    padding: 10px 12px;
    border-radius: 9px;
    background: rgba(16, 42, 67, 0.035);
}

:where(.mask-ui-part, .mask-renderer-bound) .link-mask-preview__row--target,
.link-mask-preview__row--target:where(.mask-ui-part) {
    background: #fff3bf;
    outline: 2px solid #d98b00;
    box-shadow: inset 5px 0 0 #a24b00;
}

:where(.mask-ui-part, .mask-renderer-bound) .context-preview-card--source .link-mask-preview__row--target,
.context-preview-card--source:where(.mask-ui-part) .link-mask-preview__row--target {
    background: #dff4f4;
    outline-color: #1c8a9b;
    box-shadow: inset 5px 0 0 #166f7d;
}

:where(.mask-ui-part, .mask-renderer-bound) .link-mask-preview__label,
.link-mask-preview__label:where(.mask-ui-part) {
    color: #234;
    font-size: 13px;
    flex: 1 1 280px;
    min-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:where(.mask-ui-part, .mask-renderer-bound) .link-mask-preview__var,
.link-mask-preview__var:where(.mask-ui-part) {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 0 auto;
    white-space: nowrap;
}

:where(.mask-ui-part, .mask-renderer-bound) .link-mask-preview__value,
.link-mask-preview__value:where(.mask-ui-part) {
    font-weight: 700;
    color: #173958;
    font-variant-numeric: tabular-nums;
}

:where(.mask-ui-part, .mask-renderer-bound) .link-mask-preview__value--target,
.link-mask-preview__value--target:where(.mask-ui-part) {
    color: #ffffff;
    background: #102a43;
    border-radius: 6px;
    padding: 2px 7px;
}

:where(.mask-ui-part, .mask-renderer-bound) .context-preview-card--source .link-mask-preview__value--target,
.context-preview-card--source:where(.mask-ui-part) .link-mask-preview__value--target {
    background: #166f7d;
}

:where(.mask-ui-part, .mask-renderer-bound) .link-mask-preview__value--calc,
.link-mask-preview__value--calc:where(.mask-ui-part) {
    text-decoration: underline dotted;
}

:where(.mask-ui-part, .mask-renderer-bound) .link-mask-preview__unit,
.link-mask-preview__unit:where(.mask-ui-part) {
    font-size: 12px;
    color: #5d7285;
    white-space: nowrap;
}

:where(.mask-ui-part, .mask-renderer-bound) .link-mask-preview__var--target .link-mask-preview__unit,
.link-mask-preview__var--target:where(.mask-ui-part) .link-mask-preview__unit {
    color: #5a3300;
    font-weight: 700;
}

:where(.mask-ui-part, .mask-renderer-bound) .preview-empty,
.preview-empty:where(.mask-ui-part) {
    height: 100%;
    display: grid;
    place-items: center;
    text-align: center;
    color: #7d92a3;
    border: 1px dashed rgba(18, 39, 60, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.62);
    padding: 24px;
}

:where(.mask-ui-part, .mask-renderer-bound) .preview-empty-icon,
.preview-empty-icon:where(.mask-ui-part) {
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #166f7d;
    background: rgba(28, 138, 155, 0.12);
}

:where(.mask-ui-part, .mask-renderer-bound) .preview-empty p,
.preview-empty:where(.mask-ui-part) p {
    margin: 0 0 8px 0;
    color: #5f7587;
    font-weight: 700;
}

:where(.mask-ui-part, .mask-renderer-bound) .preview-empty small,
.preview-empty:where(.mask-ui-part) small {
    display: block;
    color: #8497a6;
}

:where(.mask-ui-part, .mask-renderer-bound) .preview-loading-spinner,
.preview-loading-spinner:where(.mask-ui-part) {
    width: 24px;
    height: 24px;
    display: block;
    border: 3px solid rgba(28, 138, 155, 0.2);
    border-top-color: #1c8a9b;
    border-radius: 50%;
    animation: linkMaskPreviewSpin 0.8s linear infinite;
}

@keyframes linkMaskPreviewSpin {
    to { transform: rotate(360deg); }
}

@media (max-width: 1280px) {
    :where(.mask-ui-part, .mask-renderer-bound) .context-preview-grid,
    .context-preview-grid:where(.mask-ui-part) {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, minmax(260px, 1fr));
        height: auto;
        min-height: 100%;
    }
}

@media (max-width: 980px) {
    :where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-panel,
    .bookmark-link-panel:where(.mask-ui-part) {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto minmax(180px, 0.95fr) minmax(240px, 1fr) auto;
    }

    :where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-panel .overlay-content,
    .bookmark-link-panel:where(.mask-ui-part) .overlay-content,
    :where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-panel .overlay-empty,
    .bookmark-link-panel:where(.mask-ui-part) .overlay-empty {
        grid-column: 1;
        grid-row: 3;
        border-right: none;
        border-bottom: 1px solid rgba(18, 39, 60, 0.08);
    }

    :where(.mask-ui-part, .mask-renderer-bound) .bookmark-link-panel .overlay-preview-pane,
    .bookmark-link-panel:where(.mask-ui-part) .overlay-preview-pane {
        grid-column: 1;
        grid-row: 4;
        border-left: none;
        padding: 12px;
    }

    :where(.mask-ui-part, .mask-renderer-bound) .context-preview-grid,
    .context-preview-grid:where(.mask-ui-part) {
        grid-template-rows: repeat(2, minmax(240px, 1fr));
    }
}

/* The dependency highlight (DependencyHighlight): a field the variable menu or the inspector marks as a source of a
   variable (teal) or as an effect (amber). On the field's container, the same for every kind of field. */
:where(.mask-ui-part, .mask-renderer-bound) .dependency-source,
.dependency-source:where(.mask-ui-part) {
    border-radius: 6px;
    background-color: rgba(196, 233, 227, 0.95);
    box-shadow: -6px 0 0 -1px #1d7f77, 0 0 0 3px rgba(29, 127, 119, 0.55), 0 0 10px 2px rgba(29, 127, 119, 0.25);
}

/* A value still to enter for the inspected one (the inspector's "highlight what is missing"): violet, as "enter" and
   "not known yet" are in the inspector; a bar outside left (the input covers the inside), a thick ring and a glow; it
   pulses once when it appears. */
:where(.mask-ui-part, .mask-renderer-bound) .dependency-missing,
.dependency-missing:where(.mask-ui-part) {
    border-radius: 6px;
    background-color: rgba(230, 222, 251, 0.97);
    box-shadow: -6px 0 0 -1px #6b4fbf, 0 0 0 3px rgba(107, 79, 191, 0.75), 0 0 12px 3px rgba(107, 79, 191, 0.3);
    animation: dependency-missing-pulse 1.4s ease-out 1;
}

@keyframes dependency-missing-pulse {
    0% { box-shadow: -6px 0 0 -1px #6b4fbf, 0 0 0 3px rgba(107, 79, 191, 0.75), 0 0 0 0 rgba(107, 79, 191, 0.6); }
    60% { box-shadow: -6px 0 0 -1px #6b4fbf, 0 0 0 3px rgba(107, 79, 191, 0.75), 0 0 0 12px rgba(107, 79, 191, 0); }
    100% { box-shadow: -6px 0 0 -1px #6b4fbf, 0 0 0 3px rgba(107, 79, 191, 0.75), 0 0 12px 3px rgba(107, 79, 191, 0.3); }
}

/* The variable a dependency highlight starts from (its anchor): blue, doubled ring, apart from the marks of what it
   reaches (petrol sources, amber effects, violet values to enter). */
:where(.mask-ui-part, .mask-renderer-bound) .dependency-anchor,
.dependency-anchor:where(.mask-ui-part) {
    border-radius: 6px;
    background-color: rgba(219, 234, 254, 0.97);
    box-shadow: -6px 0 0 -1px #1d4ed8, 0 0 0 2px #ffffff, 0 0 0 5px #1d4ed8, 0 0 12px 4px rgba(29, 78, 216, 0.3);
}

:where(.mask-ui-part, .mask-renderer-bound) .dependency-effect,
.dependency-effect:where(.mask-ui-part) {
    border-radius: 6px;
    background-color: rgba(255, 213, 150, 0.95);
    box-shadow: inset 4px 0 0 #d46b08, 0 0 0 2px rgba(212, 107, 8, 0.65);
}

/* The field whose variable the pointer is over in the variable inspector (its variable-inspector.js). */
:where(.mask-ui-part, .mask-renderer-bound) .variable-peek {
    outline: 2px dashed var(--sa-primary, #256fae);
    outline-offset: 2px;
    border-radius: 6px;
}