@layer ddm-admin-table-typography, ddm-page-box-spacing, ddm-label-prefix-spacing, ddm-admin-modal-headings, ddm-fixed-shell-fonts, ddm-form-colors, ddm-layout-font-sizes, ddm-admin-form-typography, ddm-admin-modals;
@import url('./admin-modals.css?v=20261023-empty-detail-status-1');
@import url('./admin-card-spacing.css?v=20261016-admin-card-spacing-1');
@import url('./workflow-card-insets.css?v=20261026-statement-preview-card-1');
@import url('./admin-card-insets.css?v=20261021-page-insets-1');
/* Shell identity, page metadata, subscription controls, and footer keep their own sizes. */
@layer ddm-fixed-shell-fonts {
    @media screen {
        .app-shell[data-dashboard-shell] > .sidebar :is([data-sidebar-brand-name], [data-sidebar-brand-name] *) {
            font-size:14px !important;
        }
        .app-shell[data-dashboard-shell] > .main-area .page-heading
            :is(.eyebrow, .eyebrow *, p, p *, .date-stamp, .date-stamp *) {
            font-size:10px !important;
        }
        .app-shell[data-dashboard-shell] > .main-area > .app-footer,
        .app-shell[data-dashboard-shell] > .main-area > .app-footer * {
            font-size:9px !important;
        }
        .app-shell[data-dashboard-shell] > .sidebar .sidebar-expiry-copy,
        .app-shell[data-dashboard-shell] > .sidebar .sidebar-expiry-copy :is(output, output *) {
            font-size:10px !important;
        }
        .app-shell[data-dashboard-shell] > .sidebar .sidebar-expiry-copy > strong,
        .app-shell[data-dashboard-shell] > .sidebar .sidebar-expiry-copy > strong * {
            font-size:11px !important;
        }
        .app-shell[data-dashboard-shell] > .sidebar .sidebar-footer-buttons > .icon-button,
        .app-shell[data-dashboard-shell] > .sidebar .sidebar-footer-buttons > .icon-button > :is(i, svg) {
            font-size:18px !important;
        }
        .app-shell[data-dashboard-shell] > .sidebar .sidebar-footer-buttons > .icon-button > svg {
            width:18px !important;
            height:18px !important;
        }
    }
    @media screen and (max-width:560px) {
        .app-shell[data-dashboard-shell] > .main-area > .app-footer,
        .app-shell[data-dashboard-shell] > .main-area > .app-footer * {
            font-size:8px !important;
        }
    }
}
/* Optional workspace overrides inherit through reference body portals instead
   of freezing the computed values copied when each modal was opened. */
.ddm-mall-shell {
    --admin-form-font-family:inherit !important;
    --admin-form-font-size:inherit !important;
    --layout-font-size:inherit !important;
    --layout-label-font-size:inherit !important;
    --layout-group-box-title-font-size:inherit !important;
    --layout-group-box-title-color:inherit !important;
    --layout-title-font-size:inherit !important;
    --layout-form-font-size:inherit !important;
    --layout-group-box-radius:inherit !important;
    --layout-group-box-background:inherit !important;
    --layout-group-box-border-color:inherit !important;
    --layout-group-box-border-width:inherit !important;
    --layout-label-color:inherit !important;
    --layout-font-color:inherit !important;
    --layout-title-color:inherit !important;
    --layout-menu-background:inherit !important;
}
html:root[data-layout-group-box-radius='custom'] body:has(:where(.app-shell,[data-dashboard-workspace-surface],.messenger-only-content,.ddm-mall-shell))
    :is(.section-card,.design-settings-box,.dashboard-workspace-color-section,
        .dashboard-workspace-memo-toolbar,.dashboard-workspace-memo-fields,
        .dashboard-workspace-password-options,.dashboard-workspace-password-history,
        .dashboard-workspace-generator-card,.dashboard-workspace-qr-decoration-option,
        .dashboard-workspace-world-clock-settings,.dashboard-workspace-unit-result):not(:where(.quick-messenger-app .section-card)) { border-radius:var(--layout-group-box-radius) !important; }
html:root[data-layout-group-box-background='custom'] body:has(:where(.app-shell,[data-dashboard-workspace-surface],.messenger-only-content,.ddm-mall-shell))
    :is(.section-card,.design-settings-box,.dashboard-workspace-color-section,
        .dashboard-workspace-memo-toolbar,.dashboard-workspace-memo-fields,
        .dashboard-workspace-password-options,.dashboard-workspace-password-history,
        .dashboard-workspace-generator-card,.dashboard-workspace-qr-decoration-option,
        .dashboard-workspace-world-clock-settings,.dashboard-workspace-unit-result):not(:where(.quick-messenger-app .section-card)) { background:var(--layout-group-box-background) !important; }
html:root[data-layout-group-box-border-color='custom'] body:has(:where(.app-shell,[data-dashboard-workspace-surface],.messenger-only-content,.ddm-mall-shell))
    :is(.section-card,.design-settings-box,.dashboard-workspace-color-section,
        .dashboard-workspace-memo-toolbar,.dashboard-workspace-memo-fields,
        .dashboard-workspace-password-options,.dashboard-workspace-password-history,
        .dashboard-workspace-generator-card,.dashboard-workspace-qr-decoration-option,
        .dashboard-workspace-world-clock-settings,.dashboard-workspace-unit-result):not(:where(.quick-messenger-app .section-card)) { border-color:var(--layout-group-box-border-color) !important; }
html:root[data-layout-group-box-border-width='custom'] body:has(:where(.app-shell,[data-dashboard-workspace-surface],.messenger-only-content,.ddm-mall-shell))
    :is(.section-card,.design-settings-box,.dashboard-workspace-color-section,
        .dashboard-workspace-memo-toolbar,.dashboard-workspace-memo-fields,
        .dashboard-workspace-password-options,.dashboard-workspace-password-history,
        .dashboard-workspace-generator-card,.dashboard-workspace-qr-decoration-option,
        .dashboard-workspace-world-clock-settings,.dashboard-workspace-unit-result):not(:where(.quick-messenger-app .section-card)) { border-width:var(--layout-group-box-border-width) !important; border-style:solid !important; }
html:root[data-layout-label-color='custom'] body:has(:where(.app-shell,[data-dashboard-workspace-surface],.messenger-only-content,.ddm-mall-shell))
    :is(label:not(:where(.switch,.quick-theme-switch,.dashboard-workspace-qr-switch,.layout-menu-switch,.form-check-label,.company-tax-choice,[class*='checkbox'],[class*='-check-label'])):not(:has(input:is([type='checkbox'],[type='radio'],[role='switch']))),
        .company-tax-group>legend,.company-workflow-payment-group>legend,
        .design-field-label,.form-label,[data-ui-field-label],[data-layout-field-label],
        [data-font-settings] .setting-row>div>strong):not(:where(#quick-tools-panel *, .dashboard-workspace-password-modal *, .quick-calendar-time-picker *, [data-bookmark-delete-confirm] *, [data-quick-tools-font-scope] *)) { color:var(--layout-label-color) !important; }
html:root[data-layout-label-color='custom'] body:has(:where(.app-shell,[data-dashboard-workspace-surface],.messenger-only-content,.ddm-mall-shell))
    label:not(:where(.switch,.quick-theme-switch,.dashboard-workspace-qr-switch,.layout-menu-switch,.form-check-label,.company-tax-choice,[class*='checkbox'],[class*='-check-label'])):not(:has(input:is([type='checkbox'],[type='radio'],[role='switch'])))
        >span:not(:where(.ddm-required-marker,.required-star,.required-mark,.admin-client-required-star,.status,[class*='-status'])):not(:where(#quick-tools-panel *, .dashboard-workspace-password-modal *, .quick-calendar-time-picker *, [data-bookmark-delete-confirm] *, [data-quick-tools-font-scope] *)) { color:inherit !important; }
html:root[data-layout-menu-background='custom'] body .app-shell>.sidebar,
html:root[data-layout-menu-background='custom'][data-menu-mode='horizontal'] body .sidebar .nav-submenu,
html:root[data-layout-menu-background='custom'][data-menu-mode='horizontal'] body .sidebar .nav-submenu::after { background:var(--layout-menu-background) !important; }
/* Default typography follows workspace settings; semantic status colors keep their own rules. */
html:root[data-layout-font-color='custom'] {
    --ui-muted-color:var(--layout-font-color);
    --supporting-text-color:var(--layout-font-color);
    --layout-form-text-color:var(--layout-font-color);
    --admin-modal-text:var(--layout-font-color);
    --admin-modal-muted:var(--layout-font-color);
}
html:root[data-layout-font-color='custom'] body:has(:where(.app-shell,[data-dashboard-workspace-surface],.messenger-only-content,.ddm-mall-shell)) {
    --ink:var(--layout-font-color);
    --muted:var(--layout-font-color);
    --ui-text-color:var(--layout-font-color);
    --ui-muted-color:var(--layout-font-color);
    --supporting-text-color:var(--layout-font-color);
    --layout-form-text-color:var(--layout-font-color);
    color:var(--layout-font-color);
}
html:root[data-layout-font-color='custom'] body .ddm-mall-shell {
    --dashboard-content-text:var(--layout-font-color) !important;
    --dashboard-content-muted:var(--layout-font-color) !important;
}
/* Portaled reference forms must keep following live settings instead of copied values. */
.ddm-mall-shell[data-reference-modal-surface] {
    --admin-placeholder-color:inherit !important;
    --ink:inherit !important;
    --muted:inherit !important;
    --ui-text-color:inherit !important;
    --ui-muted-color:inherit !important;
    --supporting-text-color:inherit !important;
    --layout-form-text-color:inherit !important;
    --admin-modal-text:inherit !important;
    --admin-modal-muted:inherit !important;
    --dashboard-content-text:var(--ui-text-color) !important;
    --dashboard-content-muted:var(--ui-muted-color) !important;
}
html:root[data-layout-font-color='custom'] body :is(.quick-tools-panel,.dashboard-workspace-tool-app,.dashboard-workspace-password-modal-dialog) {
    --ui-muted-color:var(--layout-font-color);
    --supporting-text-color:var(--layout-font-color);
    --layout-form-text-color:var(--layout-font-color);
}
html:root[data-layout-font-color='custom'] body .sidebar .nav-link:not(.is-active):not(:hover):not(:where(.nav-group[data-hover-open] > .nav-group-toggle)) {
    color:var(--layout-font-color);
}
html:root[data-layout-font-color='custom'] body .page-content .logistics-item-thumbnail-box button.logistics-thumbnail-drop > small {
    color:var(--layout-font-color) !important;
}
/* Page titles keep their own default even before a title color has been saved. */
html:root body :is(.page-heading h1,.page-header h1,.page-title h1,.content-header h1,[data-font-preview-title]) {
    color:var(--layout-title-color,#55595d) !important;
}
/* Shared ERP and QUICK TOOLS component styles. */
.logistics-section-links { display:flex; flex-shrink:0; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.logistics-section-links>.button { min-width:0; }
.workflow-navigation-card { flex:0 0 auto; min-width:0; padding:16px; border-radius:10px; }
.workflow-navigation-card>.logistics-section-links { margin:0; }
html:root body .logistics-section-links>.button.is-active { border-color:var(--accent); background:var(--accent); color:#fff!important; }
html:root .ddm-required-marker { display: inline; margin-inline-start: 3px; color: #dc3545 !important; font: inherit; white-space: nowrap; }
html:root .ddm-required-label:is(.is-required, .required-label)::after { content: none !important; }
html:root .ddm-required-label > :is(.admin-client-required-star, .required-star, .required-mark) { display: none !important; }
:root {
    --ui-control-height: 38px;
    --ui-control-radius: 8px;
    --ui-control-border: #ebeae4;
    --ui-control-background: var(--surface, #fff);
    --ui-text-color: var(--layout-font-color, #55595d);
    --ui-label-color: #808286;
    --ui-muted-color: #92949a;
    /* Resolve once at the workspace root so modal/tool palettes cannot darken placeholders. */
    --admin-placeholder-color: color-mix(in srgb, var(--layout-font-color, #55595d) 50%, #fff);
    --ui-title-color: var(--ui-text-color);
    --ui-text-size: 10px;
    --ui-label-size: 9px;
    --ui-title-size: 14px;
    --ui-subtitle-size: 11px;
    --ui-select-inset: 12px;
    --ui-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23808286' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --supporting-text-color: var(--ui-muted-color);
    --supporting-text-size: var(--ui-text-size);
    --admin-form-font-family: var(--app-font-family);
    --admin-form-font-size: var(--ui-text-size);
}

.layout-color-grid > [data-layout-font-sizes] {
    grid-column:1 / -1;
    padding:0;
    border-bottom:0;
}

/* Optional pixel sizes affect administrator UI text only. No custom attribute
 * means no override: existing responsive sizes and document typography survive.
 * Earlier important layers win, including against reference and modal styles.
 * QUICK TOOLS apps and their body-mounted pickers keep their own type scales;
 * only the home title continues to follow the shell typography. */
@layer ddm-layout-font-sizes {
    @media screen {
        html:root[data-layout-font-size='custom'] body:has(> [data-dashboard-shell]:is([data-ddm-role='superadmin'], [data-ddm-role='company']), > .messenger-only-content)
            :is(p, span, small, strong, b, em, a, button, li, dt, dd, th, td,
                h2, h3, h4, h5, h6, summary, output, time, blockquote, figcaption,
                caption, address, mark, samp, kbd, div:not(:has(*))):not(:has(
                .ck-content, .ql-editor, [contenteditable], .CodeMirror, .cm-editor,
                .board-editor, .board-body, .transaction-statement-slip, .partner-order-slip,
                .partner-submitted-order-print-area, .purchase-order-print-page,
                .approval-write-preview-paper, .approval-document-preview-paper,
                .approval-write-draft-print-stage, .statement-page, .skin-preview,
                [data-shopping-mall-preview]
            )):not(:where(
                /* Summary values inherit the saved base size on their strong
                 * wrapper; keep the integer/fraction ratio on its child spans. */
                .sales-report-summary [data-sales-total] > :is(.summary-number-integer, .summary-number-fraction),
                .business-dashboard [data-business-dashboard-summary-value] > :is(.summary-number-integer, .summary-number-fraction),
                .partner-statements .ps-summary strong > :is(.summary-number-integer, .summary-number-fraction),
                .finance-workflow > [data-finance-summary] strong > :is(.summary-number-integer, .summary-number-fraction),
                label, label *, legend, legend *, .design-field-label, .design-field-label *,
                .form-label, .form-label *, .company-list-field-label, .company-list-field-label *,
                [data-ui-field-label], [data-ui-field-label] *, [data-layout-field-label], [data-layout-field-label] *,
                .setting-row:has(input, select, textarea) > div > strong,
                .setting-row:has(input, select, textarea) > div > strong *,
                .page-heading h1, .page-heading h1 *, .page-header h1, .page-header h1 *,
                .page-title h1, .page-title h1 *, .content-header h1, .content-header h1 *,
                [data-font-preview-title], [data-font-preview-title] *,
                .icon-button, .icon-button *, .btn-close, .btn-close *, .auth-close, .auth-close *,
                .row-action, .row-action *, .hint-button, .hint-button *, .circle-link, .circle-link *,
                [class*='icon-button'], [class*='icon-button'] *,
                [data-bs-dismiss='modal'], [data-bs-dismiss='modal'] *,
                [data-dashboard-modal-standard-close], [data-dashboard-modal-standard-close] *,
                [data-admin-password-toggle], [data-admin-password-toggle] *,
                .topbar [data-logout], .topbar [data-logout] *,
                .company-input-icon, .company-input-icon *, .design-icon-box, .design-icon-box *,
                .input-group-text:has(i, svg), .input-group-text:has(i, svg) *,
                .layout-menu-switch, .layout-menu-switch *, .quick-theme-switch, .quick-theme-switch *
            )):not(:where(
                input, select, select *, textarea, button.form-select, button.form-select *,
                [role='combobox'], [role='combobox'] *, [role='listbox'], [role='listbox'] *,
                .language-picker-trigger, .language-picker-trigger *, [data-language-option], [data-language-option] *,
                [class*='multiselect-button'], [class*='multiselect-button'] *,
                [class*='multiselect-text'], [class*='multiselect-option'], [class*='multiselect-option'] *,
                .basic-bank-selected-text, .basic-bank-select-option, .basic-bank-select-option *,
                .ddm-bank-trigger, .ddm-bank-trigger *, .ddm-bank-option, .ddm-bank-option *,
                .dashboard-workspace-memo-tag-select-trigger, .dashboard-workspace-memo-tag-select-trigger *,
                .dashboard-workspace-memo-tag-select-option, .dashboard-workspace-memo-tag-select-option *,
                .partner-product-keyword-suggestion, .partner-product-keyword-suggestion *,
                .purchase-order-suggestion-item, .purchase-order-suggestion-item *,
                [role='checkbox'], [role='checkbox'] *, [role='radio'], [role='radio'] *
            )):not(:where(
                .ck, .ck *, .ck-content, .ck-content *, .ql-editor, .ql-editor *,
                .ql-toolbar, .ql-toolbar *, .ql-tooltip, .ql-tooltip *,
                .CodeMirror, .CodeMirror *, .cm-editor, .cm-editor *,
                [contenteditable], [contenteditable] *, [data-source-code],
                .board-editor, .board-editor *, .board-body, .board-body *,
                .transaction-statement-slip, .transaction-statement-slip *,
                .partner-order-slip, .partner-order-slip *,
                .partner-submitted-order-print-area, .partner-submitted-order-print-area *,
                .purchase-order-print-page, .purchase-order-print-page *,
                .approval-write-preview-paper, .approval-write-preview-paper *,
                .approval-document-preview-paper, .approval-document-preview-paper *,
                .approval-write-draft-print-stage, .approval-write-draft-print-stage *,
                .statement-page, .statement-page *, .skin-preview, .skin-preview *,
                [data-shopping-mall-preview], [data-shopping-mall-preview] *,
                iframe, iframe *, svg, svg *, canvas, canvas *,
                [aria-hidden='true'], [aria-hidden='true'] *,
                .bi, .bi *, .fa, .fa *, .fas, .far, .fab,
                [class^='fa-'], [class*=' fa-'],
                .basic-bank-option-logo, .basic-bank-option-logo *, .ddm-bank-logo, .ddm-bank-logo *
            )):not(:where(
                #quick-tools-panel :not(.dashboard-workspace-app-home-heading > h2),
                .dashboard-workspace-password-modal, .dashboard-workspace-password-modal *,
                .quick-calendar-time-picker, .quick-calendar-time-picker *,
                .quick-bookmark-drag-layer, .quick-bookmark-drag-layer *,
                [data-bookmark-delete-confirm], [data-bookmark-delete-confirm] *,
                [data-quick-tools-font-scope], [data-quick-tools-font-scope] *,
                .dashboard-workspace-calculator-history-menu, .dashboard-workspace-calculator-history-menu *,
                .dashboard-workspace-color-copy-toast
            )) {
            font-size: var(--layout-font-size) !important;
        }

        /* Semantic card/group headings override the base size only while set.
         * Their own original styles and a saved base size remain intact on reset. */
        html:root[data-layout-group-box-title-font-size='custom'] body:has(> [data-dashboard-shell]:is([data-ddm-role='superadmin'], [data-ddm-role='company']), > .messenger-only-content)
            :is(
                .section-heading :is(h2, h3, h4), .design-box-heading :is(h2, h3, h4),
                .panel-heading :is(h2, h3, h4),
                :is(.section-card, .design-settings-box, .work-panel) > h2,
                .section-heading > strong, .section-heading > div > strong,
                .design-box-heading > strong, .panel-heading > strong,
                .approval-document-panel-heading h3,
                :is(h2, h3, h4).approval-write-section-heading,
                .sales-subheading h3, .sms-compose-library-heading h3,
                .dispatch-assignment-heading h3, .partner-product-barcode-settings-heading > strong,
                .quick-tools-panel :is(.dashboard-workspace-color-heading,
                    .dashboard-workspace-password-section-heading,
                    .dashboard-workspace-password-history-heading,
                    .dashboard-workspace-generator-section-heading,
                    .dashboard-workspace-calculator-history-heading,
                    .dashboard-workspace-world-clock-settings-heading,
                    .dashboard-workspace-vat-intro,
                    .dashboard-workspace-qr-decoration-heading) > strong,
                [data-layout-group-title]
            ):not(:where(
                h1, h1 *, [data-font-preview-title], [data-font-preview-title] *,
                label, label *, .design-field-label, .design-field-label *,
                .form-label, .form-label *, [data-layout-field-label], [data-layout-field-label] *,
                [data-ui-field-label], [data-ui-field-label] *,
                input, select, select *, textarea, button.form-select, button.form-select *,
                [role='combobox'], [role='combobox'] *, [role='listbox'], [role='listbox'] *,
                .language-picker-trigger, .language-picker-trigger *, [data-language-option], [data-language-option] *,
                [class*='multiselect-button'], [class*='multiselect-button'] *,
                [class*='multiselect-text'], [class*='multiselect-option'], [class*='multiselect-option'] *,
                .basic-bank-selected-text, .basic-bank-select-option, .basic-bank-select-option *,
                .ddm-bank-trigger, .ddm-bank-trigger *, .ddm-bank-option, .ddm-bank-option *,
                .dashboard-workspace-memo-tag-select-trigger, .dashboard-workspace-memo-tag-select-trigger *,
                .dashboard-workspace-memo-tag-select-option, .dashboard-workspace-memo-tag-select-option *,
                .partner-product-keyword-suggestion, .partner-product-keyword-suggestion *,
                .purchase-order-suggestion-item, .purchase-order-suggestion-item *,
                [role='checkbox'], [role='checkbox'] *, [role='radio'], [role='radio'] *,
                .ck, .ck *, .ck-content, .ck-content *, .ql-editor, .ql-editor *,
                .ql-toolbar, .ql-toolbar *, .ql-tooltip, .ql-tooltip *,
                .CodeMirror, .CodeMirror *, .cm-editor, .cm-editor *,
                [contenteditable], [contenteditable] *, [data-source-code],
                .board-editor, .board-editor *, .board-body, .board-body *,
                .transaction-statement-slip, .transaction-statement-slip *,
                .partner-order-slip, .partner-order-slip *,
                .partner-submitted-order-print-area, .partner-submitted-order-print-area *,
                .purchase-order-print-page, .purchase-order-print-page *,
                .approval-write-preview-paper, .approval-write-preview-paper *,
                .approval-document-preview-paper, .approval-document-preview-paper *,
                .approval-write-draft-print-stage, .approval-write-draft-print-stage *,
                .statement-page, .statement-page *, .skin-preview, .skin-preview *,
                [data-shopping-mall-preview], [data-shopping-mall-preview] *,
                iframe, iframe *, svg, svg *, canvas, canvas *,
                [aria-hidden='true'], [aria-hidden='true'] *,
                .bi, .bi *, .fa, .fa *, .fas, .far, .fab,
                [class^='fa-'], [class*=' fa-'],
                .basic-bank-option-logo, .basic-bank-option-logo *, .ddm-bank-logo, .ddm-bank-logo *
            )):not(:where(
                #quick-tools-panel :not(.dashboard-workspace-app-home-heading > h2),
                .dashboard-workspace-password-modal, .dashboard-workspace-password-modal *,
                .quick-calendar-time-picker, .quick-calendar-time-picker *,
                .quick-bookmark-drag-layer, .quick-bookmark-drag-layer *,
                [data-bookmark-delete-confirm], [data-bookmark-delete-confirm] *,
                [data-quick-tools-font-scope], [data-quick-tools-font-scope] *,
                .dashboard-workspace-calculator-history-menu, .dashboard-workspace-calculator-history-menu *,
                .dashboard-workspace-color-copy-toast
            )) {
            font-size:var(--layout-group-box-title-font-size) !important;
        }
        html:root[data-layout-group-box-title-font-size='custom'] body:has(> [data-dashboard-shell]:is([data-ddm-role='superadmin'], [data-ddm-role='company']), > .messenger-only-content)
            :is(
                .section-heading :is(h2, h3, h4), .design-box-heading :is(h2, h3, h4),
                .panel-heading :is(h2, h3, h4),
                :is(.section-card, .design-settings-box, .work-panel) > h2,
                .section-heading > strong, .section-heading > div > strong,
                .design-box-heading > strong, .panel-heading > strong,
                .approval-document-panel-heading h3,
                :is(h2, h3, h4).approval-write-section-heading,
                .sales-subheading h3, .sms-compose-library-heading h3,
                .dispatch-assignment-heading h3, .partner-product-barcode-settings-heading > strong,
                .quick-tools-panel :is(.dashboard-workspace-color-heading,
                    .dashboard-workspace-password-section-heading,
                    .dashboard-workspace-password-history-heading,
                    .dashboard-workspace-generator-section-heading,
                    .dashboard-workspace-calculator-history-heading,
                    .dashboard-workspace-world-clock-settings-heading,
                    .dashboard-workspace-vat-intro,
                    .dashboard-workspace-qr-decoration-heading) > strong,
                [data-layout-group-title]
            ) :is(span, small, strong, b, em, a):not(:where(
                h1, h1 *, [data-font-preview-title], [data-font-preview-title] *,
                label, label *, .design-field-label, .design-field-label *,
                .form-label, .form-label *, [data-layout-field-label], [data-layout-field-label] *,
                [data-ui-field-label], [data-ui-field-label] *,
                input, select, select *, textarea, button.form-select, button.form-select *,
                [role='combobox'], [role='combobox'] *, [role='listbox'], [role='listbox'] *,
                .language-picker-trigger, .language-picker-trigger *, [data-language-option], [data-language-option] *,
                [class*='multiselect-button'], [class*='multiselect-button'] *,
                [class*='multiselect-text'], [class*='multiselect-option'], [class*='multiselect-option'] *,
                .basic-bank-selected-text, .basic-bank-select-option, .basic-bank-select-option *,
                .ddm-bank-trigger, .ddm-bank-trigger *, .ddm-bank-option, .ddm-bank-option *,
                .dashboard-workspace-memo-tag-select-trigger, .dashboard-workspace-memo-tag-select-trigger *,
                .dashboard-workspace-memo-tag-select-option, .dashboard-workspace-memo-tag-select-option *,
                .partner-product-keyword-suggestion, .partner-product-keyword-suggestion *,
                .purchase-order-suggestion-item, .purchase-order-suggestion-item *,
                [role='checkbox'], [role='checkbox'] *, [role='radio'], [role='radio'] *,
                .ck, .ck *, .ck-content, .ck-content *, .ql-editor, .ql-editor *,
                .ql-toolbar, .ql-toolbar *, .ql-tooltip, .ql-tooltip *,
                .CodeMirror, .CodeMirror *, .cm-editor, .cm-editor *,
                [contenteditable], [contenteditable] *, [data-source-code],
                .board-editor, .board-editor *, .board-body, .board-body *,
                .transaction-statement-slip, .transaction-statement-slip *,
                .partner-order-slip, .partner-order-slip *,
                .partner-submitted-order-print-area, .partner-submitted-order-print-area *,
                .purchase-order-print-page, .purchase-order-print-page *,
                .approval-write-preview-paper, .approval-write-preview-paper *,
                .approval-document-preview-paper, .approval-document-preview-paper *,
                .approval-write-draft-print-stage, .approval-write-draft-print-stage *,
                .statement-page, .statement-page *, .skin-preview, .skin-preview *,
                [data-shopping-mall-preview], [data-shopping-mall-preview] *,
                iframe, iframe *, svg, svg *, canvas, canvas *,
                [aria-hidden='true'], [aria-hidden='true'] *,
                .bi, .bi *, .fa, .fa *, .fas, .far, .fab,
                [class^='fa-'], [class*=' fa-'],
                .basic-bank-option-logo, .basic-bank-option-logo *, .ddm-bank-logo, .ddm-bank-logo *
            )):not(:where(
                #quick-tools-panel :not(.dashboard-workspace-app-home-heading > h2),
                .dashboard-workspace-password-modal, .dashboard-workspace-password-modal *,
                .quick-calendar-time-picker, .quick-calendar-time-picker *,
                .quick-bookmark-drag-layer, .quick-bookmark-drag-layer *,
                [data-bookmark-delete-confirm], [data-bookmark-delete-confirm] *,
                [data-quick-tools-font-scope], [data-quick-tools-font-scope] *,
                .dashboard-workspace-calculator-history-menu, .dashboard-workspace-calculator-history-menu *,
                .dashboard-workspace-color-copy-toast
            )) {
            font-size:var(--layout-group-box-title-font-size) !important;
        }

        html:root[data-layout-group-box-title-color='custom'] body:is(.company-design-page, :has(> [data-dashboard-shell]:is([data-ddm-role='superadmin'], [data-ddm-role='company']), > .messenger-only-content))
            :is(
                .section-heading :is(h2, h3, h4), .design-box-heading :is(h2, h3, h4),
                .panel-heading :is(h2, h3, h4),
                :is(.section-card, .design-settings-box, .work-panel) > h2,
                .section-heading > strong, .section-heading > div > strong,
                .design-box-heading > strong, .panel-heading > strong,
                .approval-document-panel-heading h3,
                :is(h2, h3, h4).approval-write-section-heading,
                .sales-subheading h3, .sms-compose-library-heading h3,
                .dispatch-assignment-heading h3, .partner-product-barcode-settings-heading > strong,
                .quick-tools-panel :is(.dashboard-workspace-color-heading,
                    .dashboard-workspace-password-section-heading,
                    .dashboard-workspace-password-history-heading,
                    .dashboard-workspace-generator-section-heading,
                    .dashboard-workspace-calculator-history-heading,
                    .dashboard-workspace-world-clock-settings-heading,
                    .dashboard-workspace-vat-intro,
                    .dashboard-workspace-qr-decoration-heading) > strong,
                [data-layout-group-title]
            ):not(:where(
                h1, h1 *, [data-font-preview-title], [data-font-preview-title] *,
                label, label *, .design-field-label, .design-field-label *,
                .form-label, .form-label *, [data-layout-field-label], [data-layout-field-label] *,
                [data-ui-field-label], [data-ui-field-label] *,
                input, select, select *, textarea, button.form-select, button.form-select *,
                [role='combobox'], [role='combobox'] *, [role='listbox'], [role='listbox'] *,
                .language-picker-trigger, .language-picker-trigger *, [data-language-option], [data-language-option] *,
                [class*='multiselect-button'], [class*='multiselect-button'] *,
                [class*='multiselect-text'], [class*='multiselect-option'], [class*='multiselect-option'] *,
                .basic-bank-selected-text, .basic-bank-select-option, .basic-bank-select-option *,
                .ddm-bank-trigger, .ddm-bank-trigger *, .ddm-bank-option, .ddm-bank-option *,
                .dashboard-workspace-memo-tag-select-trigger, .dashboard-workspace-memo-tag-select-trigger *,
                .dashboard-workspace-memo-tag-select-option, .dashboard-workspace-memo-tag-select-option *,
                .partner-product-keyword-suggestion, .partner-product-keyword-suggestion *,
                .purchase-order-suggestion-item, .purchase-order-suggestion-item *,
                [role='checkbox'], [role='checkbox'] *, [role='radio'], [role='radio'] *,
                .ck, .ck *, .ck-content, .ck-content *, .ql-editor, .ql-editor *,
                .ql-toolbar, .ql-toolbar *, .ql-tooltip, .ql-tooltip *,
                .CodeMirror, .CodeMirror *, .cm-editor, .cm-editor *,
                [contenteditable], [contenteditable] *, [data-source-code],
                .board-editor, .board-editor *, .board-body, .board-body *,
                .transaction-statement-slip, .transaction-statement-slip *,
                .partner-order-slip, .partner-order-slip *,
                .partner-submitted-order-print-area, .partner-submitted-order-print-area *,
                .purchase-order-print-page, .purchase-order-print-page *,
                .approval-write-preview-paper, .approval-write-preview-paper *,
                .approval-document-preview-paper, .approval-document-preview-paper *,
                .approval-write-draft-print-stage, .approval-write-draft-print-stage *,
                .statement-page, .statement-page *, .skin-preview, .skin-preview *,
                [data-shopping-mall-preview], [data-shopping-mall-preview] *,
                iframe, iframe *, svg, svg *, canvas, canvas *,
                [aria-hidden='true'], [aria-hidden='true'] *,
                .bi, .bi *, .fa, .fa *, .fas, .far, .fab,
                [class^='fa-'], [class*=' fa-'],
                .basic-bank-option-logo, .basic-bank-option-logo *, .ddm-bank-logo, .ddm-bank-logo *
            )):not(:where(
                #quick-tools-panel :not(.dashboard-workspace-app-home-heading > h2),
                .dashboard-workspace-password-modal, .dashboard-workspace-password-modal *,
                .quick-calendar-time-picker, .quick-calendar-time-picker *,
                .quick-bookmark-drag-layer, .quick-bookmark-drag-layer *,
                [data-bookmark-delete-confirm], [data-bookmark-delete-confirm] *,
                [data-quick-tools-font-scope], [data-quick-tools-font-scope] *,
                .dashboard-workspace-calculator-history-menu, .dashboard-workspace-calculator-history-menu *,
                .dashboard-workspace-color-copy-toast
            )) {
            color:var(--preview-group-title-color,var(--layout-group-box-title-color)) !important;
        }
        html:root[data-layout-group-box-title-color='custom'] body:is(.company-design-page, :has(> [data-dashboard-shell]:is([data-ddm-role='superadmin'], [data-ddm-role='company']), > .messenger-only-content))
            :is(
                .section-heading :is(h2, h3, h4), .design-box-heading :is(h2, h3, h4),
                .panel-heading :is(h2, h3, h4),
                :is(.section-card, .design-settings-box, .work-panel) > h2,
                .section-heading > strong, .section-heading > div > strong,
                .design-box-heading > strong, .panel-heading > strong,
                .approval-document-panel-heading h3,
                :is(h2, h3, h4).approval-write-section-heading,
                .sales-subheading h3, .sms-compose-library-heading h3,
                .dispatch-assignment-heading h3, .partner-product-barcode-settings-heading > strong,
                .quick-tools-panel :is(.dashboard-workspace-color-heading,
                    .dashboard-workspace-password-section-heading,
                    .dashboard-workspace-password-history-heading,
                    .dashboard-workspace-generator-section-heading,
                    .dashboard-workspace-calculator-history-heading,
                    .dashboard-workspace-world-clock-settings-heading,
                    .dashboard-workspace-vat-intro,
                    .dashboard-workspace-qr-decoration-heading) > strong,
                [data-layout-group-title]
            ) :is(span, small, strong, b, em, a):not(:where(
                h1, h1 *, [data-font-preview-title], [data-font-preview-title] *,
                label, label *, .design-field-label, .design-field-label *,
                .form-label, .form-label *, [data-layout-field-label], [data-layout-field-label] *,
                [data-ui-field-label], [data-ui-field-label] *,
                input, select, select *, textarea, button.form-select, button.form-select *,
                [role='combobox'], [role='combobox'] *, [role='listbox'], [role='listbox'] *,
                .language-picker-trigger, .language-picker-trigger *, [data-language-option], [data-language-option] *,
                [class*='multiselect-button'], [class*='multiselect-button'] *,
                [class*='multiselect-text'], [class*='multiselect-option'], [class*='multiselect-option'] *,
                .basic-bank-selected-text, .basic-bank-select-option, .basic-bank-select-option *,
                .ddm-bank-trigger, .ddm-bank-trigger *, .ddm-bank-option, .ddm-bank-option *,
                .dashboard-workspace-memo-tag-select-trigger, .dashboard-workspace-memo-tag-select-trigger *,
                .dashboard-workspace-memo-tag-select-option, .dashboard-workspace-memo-tag-select-option *,
                .partner-product-keyword-suggestion, .partner-product-keyword-suggestion *,
                .purchase-order-suggestion-item, .purchase-order-suggestion-item *,
                [role='checkbox'], [role='checkbox'] *, [role='radio'], [role='radio'] *,
                .ck, .ck *, .ck-content, .ck-content *, .ql-editor, .ql-editor *,
                .ql-toolbar, .ql-toolbar *, .ql-tooltip, .ql-tooltip *,
                .CodeMirror, .CodeMirror *, .cm-editor, .cm-editor *,
                [contenteditable], [contenteditable] *, [data-source-code],
                .board-editor, .board-editor *, .board-body, .board-body *,
                .transaction-statement-slip, .transaction-statement-slip *,
                .partner-order-slip, .partner-order-slip *,
                .partner-submitted-order-print-area, .partner-submitted-order-print-area *,
                .purchase-order-print-page, .purchase-order-print-page *,
                .approval-write-preview-paper, .approval-write-preview-paper *,
                .approval-document-preview-paper, .approval-document-preview-paper *,
                .approval-write-draft-print-stage, .approval-write-draft-print-stage *,
                .statement-page, .statement-page *, .skin-preview, .skin-preview *,
                [data-shopping-mall-preview], [data-shopping-mall-preview] *,
                iframe, iframe *, svg, svg *, canvas, canvas *,
                [aria-hidden='true'], [aria-hidden='true'] *,
                .bi, .bi *, .fa, .fa *, .fas, .far, .fab,
                [class^='fa-'], [class*=' fa-'],
                .basic-bank-option-logo, .basic-bank-option-logo *, .ddm-bank-logo, .ddm-bank-logo *
            )):not(:where(
                #quick-tools-panel :not(.dashboard-workspace-app-home-heading > h2),
                .dashboard-workspace-password-modal, .dashboard-workspace-password-modal *,
                .quick-calendar-time-picker, .quick-calendar-time-picker *,
                .quick-bookmark-drag-layer, .quick-bookmark-drag-layer *,
                [data-bookmark-delete-confirm], [data-bookmark-delete-confirm] *,
                [data-quick-tools-font-scope], [data-quick-tools-font-scope] *,
                .dashboard-workspace-calculator-history-menu, .dashboard-workspace-calculator-history-menu *,
                .dashboard-workspace-color-copy-toast
            )) {
            color:var(--preview-group-title-color,var(--layout-group-box-title-color)) !important;
        }

        /* Field captions keep their own category; checkbox/radio copy is form text. */
        html:root[data-layout-label-font-size='custom'] body:has(> [data-dashboard-shell]:is([data-ddm-role='superadmin'], [data-ddm-role='company']), > .messenger-only-content)
            :is(
                label:not(:where(.switch, .quick-theme-switch, .dashboard-workspace-qr-switch,
                    .layout-menu-switch, .form-check-label, .company-tax-choice,
                    .company-workflow-payment-choice, .board-choice, .inline-checkbox,
                    [class*='checkbox'], [class*='-check-label'])):not(:has(input:is([type='checkbox'], [type='radio'], [role='switch']))),
                legend, .design-field-label, .form-label, .company-list-field-label,
                [data-ui-field-label], [data-layout-field-label],
                .setting-row:has(input, select, textarea) > div > strong
            ):not(:where(
                label:has(input:is([type='checkbox'], [type='radio'], [role='switch'])),
                label:has(input:is([type='checkbox'], [type='radio'], [role='switch'])) *,
                input:is([type='checkbox'], [type='radio']) + label,
                input:is([type='checkbox'], [type='radio']) + label *
            )):not(:where(
                input, select, select *, textarea, button.form-select, button.form-select *,
                [role='combobox'], [role='combobox'] *, [role='listbox'], [role='listbox'] *,
                .language-picker-trigger, .language-picker-trigger *, [data-language-option], [data-language-option] *,
                [class*='multiselect-button'], [class*='multiselect-button'] *,
                [class*='multiselect-text'], [class*='multiselect-option'], [class*='multiselect-option'] *,
                .basic-bank-selected-text, .basic-bank-select-option, .basic-bank-select-option *,
                .ddm-bank-trigger, .ddm-bank-trigger *, .ddm-bank-option, .ddm-bank-option *,
                .dashboard-workspace-memo-tag-select-trigger, .dashboard-workspace-memo-tag-select-trigger *,
                .dashboard-workspace-memo-tag-select-option, .dashboard-workspace-memo-tag-select-option *,
                .partner-product-keyword-suggestion, .partner-product-keyword-suggestion *,
                .purchase-order-suggestion-item, .purchase-order-suggestion-item *,
                [role='checkbox'], [role='checkbox'] *, [role='radio'], [role='radio'] *
            )):not(:where(
                .ck, .ck *, .ck-content, .ck-content *, .ql-editor, .ql-editor *,
                .ql-toolbar, .ql-toolbar *, .ql-tooltip, .ql-tooltip *,
                .CodeMirror, .CodeMirror *, .cm-editor, .cm-editor *,
                [contenteditable], [contenteditable] *, [data-source-code],
                .board-editor, .board-editor *, .board-body, .board-body *,
                .transaction-statement-slip, .transaction-statement-slip *,
                .partner-order-slip, .partner-order-slip *,
                .partner-submitted-order-print-area, .partner-submitted-order-print-area *,
                .purchase-order-print-page, .purchase-order-print-page *,
                .approval-write-preview-paper, .approval-write-preview-paper *,
                .approval-document-preview-paper, .approval-document-preview-paper *,
                .approval-write-draft-print-stage, .approval-write-draft-print-stage *,
                .statement-page, .statement-page *, .skin-preview, .skin-preview *,
                [data-shopping-mall-preview], [data-shopping-mall-preview] *,
                iframe, iframe *, svg, svg *, canvas, canvas *,
                [aria-hidden='true'], [aria-hidden='true'] *,
                .bi, .bi *, .fa, .fa *, .fas, .far, .fab,
                [class^='fa-'], [class*=' fa-'],
                .basic-bank-option-logo, .basic-bank-option-logo *, .ddm-bank-logo, .ddm-bank-logo *
            )):not(:where(
                #quick-tools-panel :not(.dashboard-workspace-app-home-heading > h2),
                .dashboard-workspace-password-modal, .dashboard-workspace-password-modal *,
                .quick-calendar-time-picker, .quick-calendar-time-picker *,
                .quick-bookmark-drag-layer, .quick-bookmark-drag-layer *,
                [data-bookmark-delete-confirm], [data-bookmark-delete-confirm] *,
                [data-quick-tools-font-scope], [data-quick-tools-font-scope] *,
                .dashboard-workspace-calculator-history-menu, .dashboard-workspace-calculator-history-menu *,
                .dashboard-workspace-color-copy-toast
            )) {
            font-size: var(--layout-label-font-size) !important;
        }
        html:root[data-layout-label-font-size='custom'] body:has(> [data-dashboard-shell]:is([data-ddm-role='superadmin'], [data-ddm-role='company']), > .messenger-only-content)
            :is(
                label:not(:where(.switch, .quick-theme-switch, .dashboard-workspace-qr-switch,
                    .layout-menu-switch, .form-check-label, .company-tax-choice,
                    .company-workflow-payment-choice, .board-choice, .inline-checkbox,
                    [class*='checkbox'], [class*='-check-label'])):not(:has(input:is([type='checkbox'], [type='radio'], [role='switch']))),
                legend, .design-field-label, .form-label, .company-list-field-label,
                [data-ui-field-label], [data-layout-field-label],
                .setting-row:has(input, select, textarea) > div > strong
            ) :is(span, small, strong, b, em):not(:where(
                label:has(input:is([type='checkbox'], [type='radio'], [role='switch'])),
                label:has(input:is([type='checkbox'], [type='radio'], [role='switch'])) *,
                input:is([type='checkbox'], [type='radio']) + label,
                input:is([type='checkbox'], [type='radio']) + label *
            )):not(:where(
                input, select, select *, textarea, button.form-select, button.form-select *,
                [role='combobox'], [role='combobox'] *, [role='listbox'], [role='listbox'] *,
                .language-picker-trigger, .language-picker-trigger *, [data-language-option], [data-language-option] *,
                [class*='multiselect-button'], [class*='multiselect-button'] *,
                [class*='multiselect-text'], [class*='multiselect-option'], [class*='multiselect-option'] *,
                .basic-bank-selected-text, .basic-bank-select-option, .basic-bank-select-option *,
                .ddm-bank-trigger, .ddm-bank-trigger *, .ddm-bank-option, .ddm-bank-option *,
                .dashboard-workspace-memo-tag-select-trigger, .dashboard-workspace-memo-tag-select-trigger *,
                .dashboard-workspace-memo-tag-select-option, .dashboard-workspace-memo-tag-select-option *,
                .partner-product-keyword-suggestion, .partner-product-keyword-suggestion *,
                .purchase-order-suggestion-item, .purchase-order-suggestion-item *,
                [role='checkbox'], [role='checkbox'] *, [role='radio'], [role='radio'] *
            )):not(:where(
                .ck, .ck *, .ck-content, .ck-content *, .ql-editor, .ql-editor *,
                .ql-toolbar, .ql-toolbar *, .ql-tooltip, .ql-tooltip *,
                .CodeMirror, .CodeMirror *, .cm-editor, .cm-editor *,
                [contenteditable], [contenteditable] *, [data-source-code],
                .board-editor, .board-editor *, .board-body, .board-body *,
                .transaction-statement-slip, .transaction-statement-slip *,
                .partner-order-slip, .partner-order-slip *,
                .partner-submitted-order-print-area, .partner-submitted-order-print-area *,
                .purchase-order-print-page, .purchase-order-print-page *,
                .approval-write-preview-paper, .approval-write-preview-paper *,
                .approval-document-preview-paper, .approval-document-preview-paper *,
                .approval-write-draft-print-stage, .approval-write-draft-print-stage *,
                .statement-page, .statement-page *, .skin-preview, .skin-preview *,
                [data-shopping-mall-preview], [data-shopping-mall-preview] *,
                iframe, iframe *, svg, svg *, canvas, canvas *,
                [aria-hidden='true'], [aria-hidden='true'] *,
                .bi, .bi *, .fa, .fa *, .fas, .far, .fab,
                [class^='fa-'], [class*=' fa-'],
                .basic-bank-option-logo, .basic-bank-option-logo *, .ddm-bank-logo, .ddm-bank-logo *
            )):not(:where(
                #quick-tools-panel :not(.dashboard-workspace-app-home-heading > h2),
                .dashboard-workspace-password-modal, .dashboard-workspace-password-modal *,
                .quick-calendar-time-picker, .quick-calendar-time-picker *,
                .quick-bookmark-drag-layer, .quick-bookmark-drag-layer *,
                [data-bookmark-delete-confirm], [data-bookmark-delete-confirm] *,
                [data-quick-tools-font-scope], [data-quick-tools-font-scope] *,
                .dashboard-workspace-calculator-history-menu, .dashboard-workspace-calculator-history-menu *,
                .dashboard-workspace-color-copy-toast
            )) {
            font-size: var(--layout-label-font-size) !important;
        }

        /* Page headings and the design preview title share the title setting. */
        html:root[data-layout-title-font-size='custom'] body:has(> [data-dashboard-shell]:is([data-ddm-role='superadmin'], [data-ddm-role='company']), > .messenger-only-content)
            :is(.page-heading h1, .page-header h1, .page-title h1, .content-header h1, [data-font-preview-title]):not(:where(
                .ck, .ck *, .ck-content, .ck-content *, .ql-editor, .ql-editor *,
                .ql-toolbar, .ql-toolbar *, .ql-tooltip, .ql-tooltip *,
                .CodeMirror, .CodeMirror *, .cm-editor, .cm-editor *,
                [contenteditable], [contenteditable] *, [data-source-code],
                .board-editor, .board-editor *, .board-body, .board-body *,
                .transaction-statement-slip, .transaction-statement-slip *,
                .partner-order-slip, .partner-order-slip *,
                .partner-submitted-order-print-area, .partner-submitted-order-print-area *,
                .purchase-order-print-page, .purchase-order-print-page *,
                .approval-write-preview-paper, .approval-write-preview-paper *,
                .approval-document-preview-paper, .approval-document-preview-paper *,
                .approval-write-draft-print-stage, .approval-write-draft-print-stage *,
                .statement-page, .statement-page *, .skin-preview, .skin-preview *,
                [data-shopping-mall-preview], [data-shopping-mall-preview] *,
                iframe, iframe *, svg, svg *, canvas, canvas *,
                [aria-hidden='true'], [aria-hidden='true'] *,
                .bi, .bi *, .fa, .fa *, .fas, .far, .fab,
                [class^='fa-'], [class*=' fa-'],
                .basic-bank-option-logo, .basic-bank-option-logo *, .ddm-bank-logo, .ddm-bank-logo *
            )):not(:where(
                #quick-tools-panel :not(.dashboard-workspace-app-home-heading > h2),
                .dashboard-workspace-password-modal, .dashboard-workspace-password-modal *,
                .quick-calendar-time-picker, .quick-calendar-time-picker *,
                .quick-bookmark-drag-layer, .quick-bookmark-drag-layer *,
                [data-bookmark-delete-confirm], [data-bookmark-delete-confirm] *,
                [data-quick-tools-font-scope], [data-quick-tools-font-scope] *,
                .dashboard-workspace-calculator-history-menu, .dashboard-workspace-calculator-history-menu *,
                .dashboard-workspace-color-copy-toast
            )) {
            font-size: var(--layout-title-font-size) !important;
        }
        html:root[data-layout-title-font-size='custom'] body:has(> [data-dashboard-shell]:is([data-ddm-role='superadmin'], [data-ddm-role='company']), > .messenger-only-content)
            :is(.page-heading h1, .page-header h1, .page-title h1, .content-header h1, [data-font-preview-title])
            :is(span, small, strong, b, em):not(:where(
                .ck, .ck *, .ck-content, .ck-content *, .ql-editor, .ql-editor *,
                .ql-toolbar, .ql-toolbar *, .ql-tooltip, .ql-tooltip *,
                .CodeMirror, .CodeMirror *, .cm-editor, .cm-editor *,
                [contenteditable], [contenteditable] *, [data-source-code],
                .board-editor, .board-editor *, .board-body, .board-body *,
                .transaction-statement-slip, .transaction-statement-slip *,
                .partner-order-slip, .partner-order-slip *,
                .partner-submitted-order-print-area, .partner-submitted-order-print-area *,
                .purchase-order-print-page, .purchase-order-print-page *,
                .approval-write-preview-paper, .approval-write-preview-paper *,
                .approval-document-preview-paper, .approval-document-preview-paper *,
                .approval-write-draft-print-stage, .approval-write-draft-print-stage *,
                .statement-page, .statement-page *, .skin-preview, .skin-preview *,
                [data-shopping-mall-preview], [data-shopping-mall-preview] *,
                iframe, iframe *, svg, svg *, canvas, canvas *,
                [aria-hidden='true'], [aria-hidden='true'] *,
                .bi, .bi *, .fa, .fa *, .fas, .far, .fab,
                [class^='fa-'], [class*=' fa-'],
                .basic-bank-option-logo, .basic-bank-option-logo *, .ddm-bank-logo, .ddm-bank-logo *
            )):not(:where(
                #quick-tools-panel :not(.dashboard-workspace-app-home-heading > h2),
                .dashboard-workspace-password-modal, .dashboard-workspace-password-modal *,
                .quick-calendar-time-picker, .quick-calendar-time-picker *,
                .quick-bookmark-drag-layer, .quick-bookmark-drag-layer *,
                [data-bookmark-delete-confirm], [data-bookmark-delete-confirm] *,
                [data-quick-tools-font-scope], [data-quick-tools-font-scope] *,
                .dashboard-workspace-calculator-history-menu, .dashboard-workspace-calculator-history-menu *,
                .dashboard-workspace-color-copy-toast
            )) {
            font-size: var(--layout-title-font-size) !important;
        }

        /* Native fields, custom pickers, and choice labels share the form size. */
        html:root[data-layout-form-font-size='custom'] body:has(> [data-dashboard-shell]:is([data-ddm-role='superadmin'], [data-ddm-role='company']), > .messenger-only-content)
            :is(
                input:not(:where([type='hidden'], [type='checkbox'], [type='radio'],
                    [type='button'], [type='submit'], [type='reset'], [type='file'],
                    [type='range'], [type='color'], [type='image'])),
                select, option, optgroup, textarea, input[type='file'],
                button.form-select, [role='combobox'], [role='listbox'] [role='option'],
                .language-picker-trigger, [data-language-option],
                [class*='multiselect-button'], [class*='multiselect-text'], [class*='multiselect-option'],
                .basic-bank-selected-text, .basic-bank-select-option, .ddm-bank-trigger, .ddm-bank-option,
                .dashboard-workspace-memo-tag-select-trigger, .dashboard-workspace-memo-tag-select-option,
                .partner-product-keyword-suggestion, .purchase-order-suggestion-item,
                label:has(input:is([type='checkbox'], [type='radio'])),
                input:is([type='checkbox'], [type='radio']) + label,
                .form-check-label, .company-tax-choice, .company-workflow-payment-choice,
                .board-choice, .inline-checkbox, [role='checkbox'], [role='radio']
            ):not(:where(
                .ck, .ck *, .ck-content, .ck-content *, .ql-editor, .ql-editor *,
                .ql-toolbar, .ql-toolbar *, .ql-tooltip, .ql-tooltip *,
                .CodeMirror, .CodeMirror *, .cm-editor, .cm-editor *,
                [contenteditable], [contenteditable] *, [data-source-code],
                .board-editor, .board-editor *, .board-body, .board-body *,
                .transaction-statement-slip, .transaction-statement-slip *,
                .partner-order-slip, .partner-order-slip *,
                .partner-submitted-order-print-area, .partner-submitted-order-print-area *,
                .purchase-order-print-page, .purchase-order-print-page *,
                .approval-write-preview-paper, .approval-write-preview-paper *,
                .approval-document-preview-paper, .approval-document-preview-paper *,
                .approval-write-draft-print-stage, .approval-write-draft-print-stage *,
                .statement-page, .statement-page *, .skin-preview, .skin-preview *,
                [data-shopping-mall-preview], [data-shopping-mall-preview] *,
                iframe, iframe *, svg, svg *, canvas, canvas *,
                [aria-hidden='true'], [aria-hidden='true'] *,
                .bi, .bi *, .fa, .fa *, .fas, .far, .fab,
                [class^='fa-'], [class*=' fa-'],
                .basic-bank-option-logo, .basic-bank-option-logo *, .ddm-bank-logo, .ddm-bank-logo *
            )):not(:where(
                #quick-tools-panel :not(.dashboard-workspace-app-home-heading > h2),
                .dashboard-workspace-password-modal, .dashboard-workspace-password-modal *,
                .quick-calendar-time-picker, .quick-calendar-time-picker *,
                .quick-bookmark-drag-layer, .quick-bookmark-drag-layer *,
                [data-bookmark-delete-confirm], [data-bookmark-delete-confirm] *,
                [data-quick-tools-font-scope], [data-quick-tools-font-scope] *,
                .dashboard-workspace-calculator-history-menu, .dashboard-workspace-calculator-history-menu *,
                .dashboard-workspace-color-copy-toast
            )) {
            font-size: var(--layout-form-font-size) !important;
        }
        html:root[data-layout-form-font-size='custom'] body:has(> [data-dashboard-shell]:is([data-ddm-role='superadmin'], [data-ddm-role='company']), > .messenger-only-content)
            :is(
                input:not(:where([type='hidden'], [type='checkbox'], [type='radio'],
                    [type='button'], [type='submit'], [type='reset'], [type='file'],
                    [type='range'], [type='color'], [type='image'])),
                select, option, optgroup, textarea, input[type='file'],
                button.form-select, [role='combobox'], [role='listbox'] [role='option'],
                .language-picker-trigger, [data-language-option],
                [class*='multiselect-button'], [class*='multiselect-text'], [class*='multiselect-option'],
                .basic-bank-selected-text, .basic-bank-select-option, .ddm-bank-trigger, .ddm-bank-option,
                .dashboard-workspace-memo-tag-select-trigger, .dashboard-workspace-memo-tag-select-option,
                .partner-product-keyword-suggestion, .purchase-order-suggestion-item,
                label:has(input:is([type='checkbox'], [type='radio'])),
                input:is([type='checkbox'], [type='radio']) + label,
                .form-check-label, .company-tax-choice, .company-workflow-payment-choice,
                .board-choice, .inline-checkbox, [role='checkbox'], [role='radio']
            ) :is(span, small, strong, b, em):not(:where(
                .ck, .ck *, .ck-content, .ck-content *, .ql-editor, .ql-editor *,
                .ql-toolbar, .ql-toolbar *, .ql-tooltip, .ql-tooltip *,
                .CodeMirror, .CodeMirror *, .cm-editor, .cm-editor *,
                [contenteditable], [contenteditable] *, [data-source-code],
                .board-editor, .board-editor *, .board-body, .board-body *,
                .transaction-statement-slip, .transaction-statement-slip *,
                .partner-order-slip, .partner-order-slip *,
                .partner-submitted-order-print-area, .partner-submitted-order-print-area *,
                .purchase-order-print-page, .purchase-order-print-page *,
                .approval-write-preview-paper, .approval-write-preview-paper *,
                .approval-document-preview-paper, .approval-document-preview-paper *,
                .approval-write-draft-print-stage, .approval-write-draft-print-stage *,
                .statement-page, .statement-page *, .skin-preview, .skin-preview *,
                [data-shopping-mall-preview], [data-shopping-mall-preview] *,
                iframe, iframe *, svg, svg *, canvas, canvas *,
                [aria-hidden='true'], [aria-hidden='true'] *,
                .bi, .bi *, .fa, .fa *, .fas, .far, .fab,
                [class^='fa-'], [class*=' fa-'],
                .basic-bank-option-logo, .basic-bank-option-logo *, .ddm-bank-logo, .ddm-bank-logo *
            )):not(:where(
                #quick-tools-panel :not(.dashboard-workspace-app-home-heading > h2),
                .dashboard-workspace-password-modal, .dashboard-workspace-password-modal *,
                .quick-calendar-time-picker, .quick-calendar-time-picker *,
                .quick-bookmark-drag-layer, .quick-bookmark-drag-layer *,
                [data-bookmark-delete-confirm], [data-bookmark-delete-confirm] *,
                [data-quick-tools-font-scope], [data-quick-tools-font-scope] *,
                .dashboard-workspace-calculator-history-menu, .dashboard-workspace-calculator-history-menu *,
                .dashboard-workspace-color-copy-toast
            )) {
            font-size: var(--layout-form-font-size) !important;
        }
        html:root[data-layout-form-font-size='custom'] body:has(> [data-dashboard-shell]:is([data-ddm-role='superadmin'], [data-ddm-role='company']), > .messenger-only-content)
            :is(input, textarea):not(:where(
                .ck, .ck *, .ck-content, .ck-content *, .ql-editor, .ql-editor *,
                .ql-toolbar, .ql-toolbar *, .ql-tooltip, .ql-tooltip *,
                .CodeMirror, .CodeMirror *, .cm-editor, .cm-editor *,
                [contenteditable], [contenteditable] *, [data-source-code],
                .board-editor, .board-editor *, .board-body, .board-body *,
                .transaction-statement-slip, .transaction-statement-slip *,
                .partner-order-slip, .partner-order-slip *,
                .partner-submitted-order-print-area, .partner-submitted-order-print-area *,
                .purchase-order-print-page, .purchase-order-print-page *,
                .approval-write-preview-paper, .approval-write-preview-paper *,
                .approval-document-preview-paper, .approval-document-preview-paper *,
                .approval-write-draft-print-stage, .approval-write-draft-print-stage *,
                .statement-page, .statement-page *, .skin-preview, .skin-preview *,
                [data-shopping-mall-preview], [data-shopping-mall-preview] *,
                iframe, iframe *, svg, svg *, canvas, canvas *,
                [aria-hidden='true'], [aria-hidden='true'] *,
                .bi, .bi *, .fa, .fa *, .fas, .far, .fab,
                [class^='fa-'], [class*=' fa-'],
                .basic-bank-option-logo, .basic-bank-option-logo *, .ddm-bank-logo, .ddm-bank-logo *
            )):not(:where(
                #quick-tools-panel :not(.dashboard-workspace-app-home-heading > h2),
                .dashboard-workspace-password-modal, .dashboard-workspace-password-modal *,
                .quick-calendar-time-picker, .quick-calendar-time-picker *,
                .quick-bookmark-drag-layer, .quick-bookmark-drag-layer *,
                [data-bookmark-delete-confirm], [data-bookmark-delete-confirm] *,
                [data-quick-tools-font-scope], [data-quick-tools-font-scope] *,
                .dashboard-workspace-calculator-history-menu, .dashboard-workspace-calculator-history-menu *,
                .dashboard-workspace-color-copy-toast
            ))::placeholder {
            font-size: var(--layout-form-font-size) !important;
        }
    }
}

/* Administrator fields share the sales report search typography. The important
 * layer also covers late-loaded reference pages and body-mounted pickers, while
 * retaining the workspace's font/size settings and existing form color layer.
 * Print layouts and rich-text document/editor contents keep their own styles. */
@layer ddm-admin-form-typography {
    @media screen {
        html:root body:has(> [data-dashboard-shell]:is([data-ddm-role='superadmin'], [data-ddm-role='company']), > .messenger-only-content)
            :is(
                input:not(:where([type='hidden'], [type='checkbox'], [type='radio'],
                    [type='button'], [type='submit'], [type='reset'], [type='file'],
                    [type='range'], [type='color'], [type='image'])),
                select, select option, select optgroup, textarea,
                button.form-select, [role='combobox'], .language-picker-trigger, [data-language-option],
                [class*='multiselect-button'], [class*='multiselect-text'],
                [class*='multiselect-option'], .basic-bank-selected-text,
                .basic-bank-select-option, .ddm-bank-trigger, .ddm-bank-option,
                .dashboard-workspace-memo-tag-select-trigger,
                .dashboard-workspace-memo-tag-select-option,
                .partner-product-keyword-suggestion, .purchase-order-suggestion-item
            ):not(:where(.ck, .ck *, .ck-content, .ck-content *, .ql-editor, .ql-editor *,
                .ql-toolbar *, .ql-tooltip *, .CodeMirror *, .cm-editor *, [data-source-code])) {
            font-family: var(--admin-form-font-family) !important;
            font-size: var(--admin-form-font-size) !important;
            font-weight: 400 !important;
            font-style: normal !important;
            font-stretch: normal !important;
            font-variant: normal !important;
            line-height: 1.5 !important;
            letter-spacing: normal !important;
            text-transform: none !important;
            color: var(--layout-form-text-color, var(--ui-text-color)) !important;
        }

        /* VAT entry matches the supply result's numeric typography. */
        html:root body :is(#quick-tools-panel, .dashboard-workspace-vat-app)
            .dashboard-workspace-vat-amount-field input {
            font-family: var(--font-medium) !important;
            font-size: 1.02rem !important;
            font-weight: 500 !important;
            line-height: normal !important;
        }

        /* Pickers render their selected value and options in child labels. */
        html:root body:has(> [data-dashboard-shell]:is([data-ddm-role='superadmin'], [data-ddm-role='company']), > .messenger-only-content)
            :is(button.form-select, [role='combobox'], .language-picker-trigger, [data-language-option],
                [class*='multiselect-button'], [class*='multiselect-option'],
                .basic-bank-select-option, .ddm-bank-trigger, .ddm-bank-option,
                .dashboard-workspace-memo-tag-select-trigger, .dashboard-workspace-memo-tag-select-option,
                .partner-product-keyword-suggestion, .purchase-order-suggestion-item)
            :is(span, small, strong, b, em):not(:where(
                [aria-hidden='true'], [aria-hidden='true'] *, .bi, .bi *, .fa, .fa *,
                .fas, .far, .fab, [class^='fa-'], [class*=' fa-'], svg *,
                .basic-bank-option-logo, .basic-bank-option-logo *, .ddm-bank-logo, .ddm-bank-logo *,
                .ck *, .ck-content *, .ql-editor *, .ql-toolbar *, .ql-tooltip *,
                .CodeMirror *, .cm-editor *)) {
            font-family: inherit !important;
            font-size: inherit !important;
            font-weight: inherit !important;
            font-style: inherit !important;
            font-stretch: inherit !important;
            font-variant: inherit !important;
            line-height: inherit !important;
            letter-spacing: inherit !important;
            text-transform: inherit !important;
            color: inherit !important;
        }

        html:root body:has(> [data-dashboard-shell]:is([data-ddm-role='superadmin'], [data-ddm-role='company']), > .messenger-only-content)
            :is(input, textarea):not(:where(.ck *, .ck-content *, .ql-editor *,
                .ql-toolbar *, .ql-tooltip *, .CodeMirror *, .cm-editor *, [data-source-code]))::placeholder {
            font-family: var(--admin-form-font-family) !important;
            font-size: var(--admin-form-font-size) !important;
            font-weight: 400 !important;
            font-style: normal !important;
            font-stretch: normal !important;
            font-variant: normal !important;
            line-height: normal !important;
            letter-spacing: normal !important;
            text-transform: none !important;
        }

        /* All native admin placeholders use an opaque half-white tint of the saved font color. */
        html:root body:is(.company-design-page, :has(> [data-dashboard-shell]:is([data-ddm-role='superadmin'], [data-ddm-role='company']), > .messenger-only-content))
            :is(input, textarea)::placeholder {
            color: var(--admin-placeholder-color) !important;
            opacity: 1 !important;
        }
    }
}

:is(.quick-tools-panel, .dashboard-workspace-password-modal-dialog)[data-quick-tool-theme='dark'],
.quick-tools-panel:has(.dashboard-workspace-tool-app[data-quick-tool-theme='dark']:not([hidden])),
.dashboard-workspace-tool-app[data-quick-tool-theme='dark'],
.dashboard-workspace-password-modal[data-password-theme='dark'] .dashboard-workspace-password-modal-dialog {
    --ui-control-border: var(--line);
    --ui-control-background: var(--surface);
    --ui-text-color: var(--ink);
    --ui-label-color: var(--muted);
    --ui-muted-color: var(--muted);
    --ui-title-color: var(--ink);
    --ui-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b6aea5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Reserve room for the arrow and use the same inset on every single select. */
html:root select:not([multiple]):not([size]),
html:root select[size='1']:not([multiple]) {
    appearance: none;
    background-image: var(--ui-select-arrow);
    background-repeat: no-repeat;
    background-position: right var(--ui-select-inset) center;
    background-size: 12px 12px;
    padding-right: 36px;
    cursor: pointer;
}
html:root select:disabled { cursor: not-allowed; }

/* Fill the color input's interior instead of rendering an inset swatch. */
:root :is(.page-content, .quick-tools-panel.dashboard-workspace-app-panel, .login-card, .auth-dialog, .development-request-dialog) input[type='color'] {
    padding: 0; overflow: hidden; cursor: pointer;
}
html:root input[type='color']::-webkit-color-swatch-wrapper { padding: 0; }
html:root input[type='color']::-webkit-color-swatch { border: 0; border-radius: 0; }
html:root input[type='color']::-moz-color-swatch { border: 0; border-radius: 0; }
.language-picker > svg { display: none; }
.language-picker select { --ui-select-inset: 12px; }

:root :is(.page-content, .quick-tools-panel.dashboard-workspace-app-panel, .login-card, .auth-dialog, .development-request-dialog) {
    font-family: var(--app-font-family);
    font-size: var(--ui-text-size);
    color: var(--ui-text-color);
}
:root .quick-tools-panel :is([data-qr-empty], [data-qr-canvas], [data-barcode-empty], [data-barcode-canvas])[hidden] { display: none !important; }

:root :is(.page-content, .quick-tools-panel.dashboard-workspace-app-panel, .login-card, .auth-dialog, .development-request-dialog)
    :is(input:not(:where([type='checkbox'], [type='radio'], [type='range'], [type='hidden'], [type='file'])), select:not(:where([multiple], [size]:not([size='1'])))) {
    box-sizing: border-box;
    min-width: 0;
    height: var(--ui-control-height);
    min-height: var(--ui-control-height);
    max-height: var(--ui-control-height);
    padding: 0 10px;
    border: 1px solid var(--ui-control-border);
    border-radius: var(--ui-control-radius);
    background-color: var(--ui-control-background);
    color: var(--ui-text-color);
    font-family: var(--app-font-family);
    font-size: var(--ui-text-size);
    font-weight: 400;
    line-height: 1.5;
    outline: 0;
    box-shadow: none;
}

:root :is(.page-content, .quick-tools-panel.dashboard-workspace-app-panel, .login-card, .auth-dialog, .development-request-dialog) select {
    padding-right: 36px;
}

:root :is(.page-content, .quick-tools-panel.dashboard-workspace-app-panel, .login-card, .auth-dialog, .development-request-dialog) textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: calc(var(--ui-control-height) * 3);
    padding: 10px;
    border: 1px solid var(--ui-control-border);
    border-radius: var(--ui-control-radius);
    background: var(--ui-control-background);
    color: var(--ui-text-color);
    font-family: var(--app-font-family);
    font-size: var(--ui-text-size);
    font-weight: 400;
    line-height: 1.5;
    outline: 0;
    box-shadow: none;
}

:root :is(.page-content, .quick-tools-panel.dashboard-workspace-app-panel, .login-card, .auth-dialog, .development-request-dialog)
    :is(input:not(:where([type='checkbox'], [type='radio'], [type='range'], [type='hidden'], [type='file'])), select, textarea):focus {
    border-color: var(--accent, #91391e);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #91391e) 12%, transparent);
}
:root :is(.page-content, .quick-tools-panel.dashboard-workspace-app-panel, .login-card, .auth-dialog, .development-request-dialog) :is(input, textarea)::placeholder {
    color: var(--ui-muted-color);
    font-family: var(--app-font-family);
    font-size: var(--ui-text-size);
    font-weight: 400;
}

:root :is(.page-content, .quick-tools-panel.dashboard-workspace-app-panel, .login-card, .auth-dialog, .development-request-dialog)
    :is(button, a.button):not(:where([hidden], .icon-button, .circle-link, .row-action, .hint-button,
        .language-picker-trigger, [data-language-option],
        .dashboard-workspace-tool-icon-button, .dashboard-workspace-world-clock-move,
        .dashboard-workspace-app-button, .dashboard-workspace-app-edit-toggle, .quick-tools-close,
        .dashboard-workspace-tone-toggle-button, .dashboard-workspace-color-copy,
        .dashboard-workspace-memo-tag-select-trigger, .dashboard-workspace-memo-tag-select-option,
        [data-quick-memo-more], [data-quick-memo-tag-color],
        .dashboard-workspace-calculator-keypad button,
        .dashboard-workspace-calculator-history-entry,
        .dashboard-workspace-generator-swatches button, .skin-preview button,
        .admin-list-pagination button)) {
    display: inline-flex;
    min-width: 0;
    height: var(--ui-control-height);
    min-height: var(--ui-control-height);
    max-height: var(--ui-control-height);
    aspect-ratio: auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    border: 1px solid var(--ui-control-border);
    border-radius: var(--ui-control-radius);
    background: var(--ui-control-background);
    color: var(--ui-text-color);
    font-family: var(--app-font-family);
    font-size: var(--ui-text-size);
    font-weight: 400;
    line-height: 1.5;
    box-shadow: none;
}
:root :is(.page-content, .quick-tools-panel.dashboard-workspace-app-panel, .login-card, .auth-dialog, .development-request-dialog)
    :is(.button-primary, button.is-primary, .dashboard-workspace-password-generate,
        [data-world-clock-country-save], [data-calculator-action='equals'],
        button[aria-pressed='true'], .dashboard-workspace-color-categories button.is-active):not(:where([data-quick-memo-tag-color])) {
    border-color: var(--accent, #91391e);
    background: var(--accent, #91391e);
    color: #fff;
}
:root :is(.page-content, .quick-tools-panel.dashboard-workspace-app-panel, .login-card, .auth-dialog, .development-request-dialog)
    button:not(:where([hidden], .icon-button, .dashboard-workspace-tool-icon-button, .dashboard-workspace-app-button,
        .language-picker-trigger, [data-language-option],
        .dashboard-workspace-color-copy, .dashboard-workspace-generator-swatches button)):hover {
    filter: brightness(.97);
}
:root :is(.page-content, .quick-tools-panel.dashboard-workspace-app-panel, .login-card, .auth-dialog, .development-request-dialog) button:focus-visible:not(:where(.language-picker-trigger, [data-language-option])) {
    outline: 2px solid var(--accent, #91391e);
    outline-offset: 2px;
}
:root :is(.page-content, .quick-tools-panel.dashboard-workspace-app-panel, .login-card, .auth-dialog, .development-request-dialog) button:disabled {
    cursor: not-allowed;
    opacity: .58;
}
:root :is(.page-content, .quick-tools-panel.dashboard-workspace-app-panel, .login-card, .auth-dialog, .development-request-dialog)
    :is(button, a.button) > :is(span, i, svg) { color: inherit; }

/* Image removal controls use one transparent, two-tone X across native and legacy forms. */
html:root button:is([data-company-image-delete], [data-profile-image-delete], [data-bank-logo-clear],
    [data-shopping-mall-design-banner-delete], [data-shopping-mall-design-logo-delete],
    [data-shopping-mall-design-favicon-delete], [data-shopping-mall-seo-delete-image],
    [data-online-product-image-remove], [data-logo-clear], .bank-logo-clear-button, .profile-image-delete-button,
    .partner-product-thumbnail-delete, .partner-product-option-image-delete-button) {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    translate: 10px 0 !important;
}
html:root button:is([data-company-image-delete], [data-profile-image-delete], [data-bank-logo-clear],
    [data-shopping-mall-design-banner-delete], [data-shopping-mall-design-logo-delete],
    [data-shopping-mall-design-favicon-delete], [data-shopping-mall-seo-delete-image],
    [data-online-product-image-remove], [data-logo-clear], .bank-logo-clear-button, .profile-image-delete-button,
    .partner-product-thumbnail-delete, .partner-product-option-image-delete-button) > :is(svg, i) {
    display: none !important;
}
html:root button:is([data-company-image-delete], [data-profile-image-delete], [data-bank-logo-clear],
    [data-shopping-mall-design-banner-delete], [data-shopping-mall-design-logo-delete],
    [data-shopping-mall-design-favicon-delete], [data-shopping-mall-seo-delete-image],
    [data-online-product-image-remove], [data-logo-clear], .bank-logo-clear-button, .profile-image-delete-button,
    .partner-product-thumbnail-delete, .partner-product-option-image-delete-button)::before {
    display: inline-block;
    width: 14.4px;
    height: 14.4px;
    flex: 0 0 14.4px;
    background: url('/assets/images/image-delete.svg?v=20261007-1') center / contain no-repeat;
    content: '';
    pointer-events: none;
}
html:root button:is([data-company-image-delete], [data-profile-image-delete], [data-bank-logo-clear],
    [data-shopping-mall-design-banner-delete], [data-shopping-mall-design-logo-delete],
    [data-shopping-mall-design-favicon-delete], [data-shopping-mall-seo-delete-image],
    [data-online-product-image-remove], [data-logo-clear], .bank-logo-clear-button, .profile-image-delete-button,
    .partner-product-thumbnail-delete, .partner-product-option-image-delete-button)[hidden],
html:root button:is([data-shopping-mall-seo-delete-image], .bank-logo-clear-button, .profile-image-delete-button):not(.is-visible),
html:root .partner-product-option-image-wrap:not(.has-image) .partner-product-option-image-delete-button {
    display: none !important;
}

:root :is(.page-content, .quick-tools-panel.dashboard-workspace-app-panel, .auth-dialog) h2,
:root .quick-tools-panel.dashboard-workspace-app-panel
    :is(.dashboard-workspace-color-heading, .dashboard-workspace-password-section-heading,
        .dashboard-workspace-password-history-heading, .dashboard-workspace-generator-section-heading,
        .dashboard-workspace-calculator-history-heading, .dashboard-workspace-world-clock-settings-heading,
        .dashboard-workspace-vat-intro) strong {
    color: var(--ui-title-color);
    font-family: var(--app-font-family);
    font-size: var(--ui-title-size);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.025em;
}
:root :is(.page-content, .quick-tools-panel.dashboard-workspace-app-panel, .auth-dialog)
    :is(h3, .setting-row strong, .channel-grid strong, .dashboard-workspace-qr-decoration-heading strong,
        .dashboard-workspace-memo-tag-popover strong) {
    color: var(--ui-title-color);
    font-size: var(--ui-subtitle-size);
    font-weight: 500;
    line-height: 1.4;
}
:root .page-content .page-heading h1 { color: var(--ui-title-color); font-weight: 500; }

/* Card headings share the company form's short accent divider. */
:root .page-content .section-card .section-heading {
    margin-bottom: 20px;
}
:root .page-content :is(.section-card .section-heading, .ddm-mall-shell .design-box-heading, .ddm-mall-shell .panel-heading) h2 {
    margin: 0;
}
:root .page-content .ddm-mall-shell :is(.design-box-divider, .dashboard-box-divider) {
    height: 1px;
    margin: 5px 0 20px;
}
:root .page-content .ddm-mall-shell .dashboard-collapsible-box.is-box-collapsed > :is(.design-box-divider, .dashboard-box-divider) {
    margin-bottom: 0;
}
:root .page-content .section-card .section-heading h2::after {
    display: block; width: 8px; height: 1px; margin-top: 5px; background: var(--accent); content: '';
}
:root :is(.quick-tools-panel.dashboard-workspace-app-panel, .dashboard-workspace-password-modal) :is(button, button *, .dashboard-workspace-qr-file > label) {
    font-weight: 400 !important;
}
[data-ui-field-label]::before {
    display: inline-block; margin-right: 7px; content:var(--layout-label-prefix,'‣'); font-family:var(--layout-label-prefix-font-family,'Pretendard','Noto Sans KR','Nanum Gothic','MaruBuri','NeoDunggeunmo',sans-serif); font-weight:400; font-style:normal; font-synthesis:none;
}
/* Keep one 7px space after a label prefix, including flex captions and required fields. */
@layer ddm-label-prefix-spacing {
    html:root body:has(:where(.app-shell[data-ddm-role='superadmin'], .app-shell[data-ddm-role='company'], [data-dashboard-workspace-surface], .messenger-only-content, .utility-document))
        :is([data-ui-field-label], [data-layout-field-label], .company-list-field-label, .design-field-label,
            .company-profile-field > label, .company-tax-group > legend, .company-workflow-payment-group legend,
            .setting-row:has(input, select, textarea) > div > strong,
            .utility-document :is(.ut-field, .calc-field, .ex-field) > :is(span, strong):first-child,
            :is(.company-management-dialog, .server-settings-form) label:not(:where(.company-profile-field > label)) > span:not(.company-input-group),
            .ddm-mall-shell .admin-client-company-controls label > span, .ddm-mall-shell .page-guide-menu-label) {
        column-gap: 0 !important;
    }
    html:root body:has(:where(.app-shell[data-ddm-role='superadmin'], .app-shell[data-ddm-role='company'], [data-dashboard-workspace-surface], .messenger-only-content, .utility-document))
        :is([data-ui-field-label], [data-layout-field-label], .company-list-field-label, .design-field-label,
            .company-profile-field > label, .company-tax-group > legend, .company-workflow-payment-group legend,
            .setting-row:has(input, select, textarea) > div > strong,
            .utility-document :is(.ut-field, .calc-field, .ex-field) > :is(span, strong):first-child,
            :is(.company-management-dialog, .server-settings-form) label:not(:where(.company-profile-field > label)) > span:not(.company-input-group),
            .ddm-mall-shell .admin-client-company-controls label > span, .ddm-mall-shell .page-guide-menu-label)::before {
        margin-inline: 0 7px !important;
        flex-shrink: 0 !important;
    }
    html:root body .company-workflow-fields .company-profile-field > label.company-workflow-negative {
        column-gap: 8px !important;
    }
}
/* Existing label/legend owners remain responsible for their prefix. */
html:root body .company-list-field-label::before,
html:root body .design-field-label::before,
html:root body .setting-row:has(input,select,textarea) > div > strong:not([data-layout-field-label])::before {
    display:inline-block; margin-right:7px; content:var(--layout-label-prefix,'‣'); font-family:var(--layout-label-prefix-font-family,'Pretendard','Noto Sans KR','Nanum Gothic','MaruBuri','NeoDunggeunmo',sans-serif); font-weight:400; font-style:normal; font-synthesis:none;
}
html:root body [data-font-settings] .setting-row > div > strong::before { margin-right:0; }
:root :is(.page-content, .quick-tools-panel.dashboard-workspace-app-panel, .auth-dialog)
    :is(p, small, .section-heading p,
        .dashboard-workspace-generator-section-heading span, .dashboard-workspace-password-section-heading span,
        .dashboard-workspace-password-history-heading span, .dashboard-workspace-color-heading span,
        .dashboard-workspace-world-clock-settings-heading span, .dashboard-workspace-qr-decoration-heading > div > span) {
    color: var(--ui-muted-color);
    font-size: var(--ui-text-size);
    font-weight: 400;
    line-height: 1.5;
}
:root .quick-tools-panel.dashboard-workspace-app-panel .dashboard-workspace-color-app
    :is(.dashboard-workspace-color-chip, .dashboard-workspace-favorite-color) small {
    color: inherit;
    opacity: 1;
}
:root :is(.page-content, .quick-tools-panel.dashboard-workspace-app-panel, .login-card, .auth-dialog, .development-request-dialog)
    label:not(:where(.switch, .quick-theme-switch, .dashboard-workspace-qr-switch)) {
    color: var(--ui-label-color);
    font-family: var(--app-font-family);
    font-size: var(--ui-label-size);
    font-weight: 400;
    line-height: 1.5;
}
:root :is(.page-content, .quick-tools-panel.dashboard-workspace-app-panel, .auth-dialog)
    :is(label > span, .dashboard-workspace-memo-tag-filter > span, .dashboard-workspace-memo-title-toolbar > span) {
    color: var(--ui-label-color);
    font-size: var(--ui-label-size);
    font-weight: 400;
    line-height: 1.5;
}
:root .quick-tools-panel.dashboard-workspace-app-panel
    :is(.dashboard-workspace-generator-field, .dashboard-workspace-password-fields, .dashboard-workspace-unit-selects) label { gap: 6px; }

/* A compound field has one shared border, including its suffix or prefix. */
:root .quick-tools-panel.dashboard-workspace-app-panel
    :is(.dashboard-workspace-vat-amount-field, .dashboard-workspace-qr-caption-input, .dashboard-workspace-memo-tag-select) {
    height: var(--ui-control-height);
    min-height: var(--ui-control-height);
    border: 1px solid var(--ui-control-border);
    border-radius: var(--ui-control-radius);
    background: var(--ui-control-background);
}
:root .quick-tools-panel.dashboard-workspace-app-panel .dashboard-workspace-vat-amount-field {
    height: 58px;
    min-height: 58px;
    padding: 0 16px;
    gap: 8px;
    border-color: var(--vat-line);
    border-radius: 12px;
    background: var(--vat-surface);
}
:root .quick-tools-panel.dashboard-workspace-app-panel
    :is(.dashboard-workspace-vat-amount-field, .dashboard-workspace-qr-caption-input) input {
    height: calc(var(--ui-control-height) - 2px);
    min-height: calc(var(--ui-control-height) - 2px);
    max-height: calc(var(--ui-control-height) - 2px);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
:root .quick-tools-panel.dashboard-workspace-app-panel .dashboard-workspace-vat-amount-field input {
    flex: 1 1 auto;
    width: 0;
    height: 54px;
    min-height: 0;
    max-height: none;
    padding: 0;
    color: var(--vat-text);
    font-family: var(--font-medium);
    font-size: 1.02rem;
    font-weight: 500;
    text-align: right;
}
:root .quick-tools-panel.dashboard-workspace-app-panel .dashboard-workspace-vat-amount-field input:focus {
    box-shadow: none;
}
:root .quick-tools-panel.dashboard-workspace-app-panel .dashboard-workspace-vat-amount-field em {
    flex: 0 0 auto;
    color: var(--vat-muted);
    font-size: .8rem;
    font-style: normal;
}
:root .quick-tools-panel.dashboard-workspace-app-panel .dashboard-workspace-memo-tag-select {
    --memo-select-background: #e7f1f0;
    --memo-select-border: #d1e2e0;
    --memo-select-text: #7d9290;
    --memo-select-icon: #0d9488;
    height: 42px;
    min-height: 42px;
    box-sizing: border-box;
    grid-template-columns: 42px minmax(0, 1fr);
    border-color: var(--memo-select-border);
    border-radius: 12px;
    background: var(--memo-select-background);
}
:root .quick-tools-panel.dashboard-workspace-app-panel [data-quick-tool-theme='dark'] .dashboard-workspace-memo-tag-select {
    --memo-select-background: #243b39;
    --memo-select-border: #3b5753;
    --memo-select-text: #b4cfcb;
    --memo-select-icon: #5ed3c3;
}
:root .quick-tools-panel.dashboard-workspace-app-panel .dashboard-workspace-memo-tag-select > i {
    border-color: var(--memo-select-border);
    color: var(--memo-select-icon);
    font-size: 14px;
}
:root .quick-tools-panel.dashboard-workspace-app-panel .dashboard-workspace-memo-tag-select-trigger {
    position: relative;
    height: 100%;
    padding-right: 36px !important;
    border-radius: 0 12px 12px 0 !important;
    color: var(--memo-select-text) !important;
    font-size: .75rem;
    font-weight: 400;
}
:root .quick-tools-panel.dashboard-workspace-app-panel [data-quick-memo-tag-select-value] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
:root .quick-tools-panel.dashboard-workspace-app-panel .dashboard-workspace-memo-tag-select-trigger > i {
    position: absolute;
    top: 50%;
    right: var(--ui-select-inset);
    font-size: 12px;
    transform: translateY(-50%);
}
:root .quick-tools-panel.dashboard-workspace-app-panel .dashboard-workspace-memo-tag-select-trigger[aria-expanded='true'] > i {
    transform: translateY(-50%) rotate(180deg);
}
:root .quick-tools-panel.dashboard-workspace-app-panel .dashboard-workspace-memo-tag-select-option {
    min-height: var(--ui-control-height) !important;
    color: var(--ui-text-color) !important;
    font-size: var(--ui-text-size);
}
:root .quick-tools-panel.dashboard-workspace-app-panel .dashboard-workspace-calculator-keypad { gap: 1px; padding: 0; }
:root .quick-tools-panel.dashboard-workspace-app-panel .dashboard-workspace-calculator-keypad button {
    height: auto;
    min-height: 72px;
    max-height: none;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: 22px;
    font-weight: 400;
    box-shadow: none;
}
:root .quick-tools-panel.dashboard-workspace-app-panel .dashboard-workspace-calculator-keypad button:is(:hover, .is-key-flash) {
    /* Darken the existing fill by 5% without dimming text or icons. */
    background-image: linear-gradient(rgb(0 0 0 / 5%), rgb(0 0 0 / 5%)), var(--calculator-button-background);
    filter: none;
}
:root .quick-tools-panel.dashboard-workspace-app-panel .dashboard-workspace-calculator-keypad button[data-calculator-action="equals"]:is(:hover, .is-key-flash) {
    /* Equals uses the shared primary button's flat accent fill. */
    background-image: linear-gradient(rgb(0 0 0 / 5%), rgb(0 0 0 / 5%));
}
:root .quick-tools-panel.dashboard-workspace-app-panel .dashboard-workspace-calculator-keypad button[data-calculator-action="history"][aria-expanded="true"]:is(:hover, .is-key-flash) {
    filter: brightness(.9);
}
@media (max-height: 720px) {
    :root .quick-tools-panel.dashboard-workspace-app-panel .dashboard-workspace-calculator-display { min-height: 0; }
    :root .quick-tools-panel.dashboard-workspace-app-panel .dashboard-workspace-calculator-keypad button {
        height: clamp(36px, calc((100dvh - 260px) / 5), 72px);
        min-height: 0;
        aspect-ratio: auto;
    }
}
:root .quick-tools-panel.dashboard-workspace-app-panel .dashboard-workspace-color-categories button { flex-direction: column; gap: 0; }
:root .quick-tools-panel.dashboard-workspace-app-panel .dashboard-workspace-color-categories strong { font-size: .53rem; }
:root .quick-tools-panel.dashboard-workspace-app-panel .dashboard-workspace-color-categories span { font-size: .43rem; }
:root .quick-tools-panel.dashboard-workspace-app-panel .dashboard-workspace-qr-file > label {
    min-height: var(--ui-control-height);
    border-radius: var(--ui-control-radius);
    color: #fff;
    font-size: var(--ui-text-size);
}
:root .quick-tools-panel.dashboard-workspace-app-panel .dashboard-workspace-memo-fields textarea { min-height: 260px; }
html:root body :is(.page-content, .quick-tools-panel.dashboard-workspace-app-panel, .auth-dialog) :is(p, small).is-error { color: #bf3f36; }
html:root body :is(.page-content, .quick-tools-panel.dashboard-workspace-app-panel, .auth-dialog) :is(p, small).is-success { color: var(--green, #168c62); }
:root .quick-tools-panel.dashboard-workspace-app-panel .dashboard-workspace-password-modal-dialog > header h3 {
    color: var(--ui-title-color);
    font-size: var(--ui-title-size);
}

@media (forced-colors: active) {
    html:root select:not([multiple]):not([size]) { appearance: auto; background-image: none; }
}

/* The language list uses the top layer so a narrow page never clips flags or names. */
.language-picker[data-language-picker-ready] {
    width: max-content;
    min-width: 112px;
    flex: 0 0 auto;
}
.language-picker-trigger {
    position: relative;
    display: inline-flex;
    width: 100%;
    height: 36px;
    align-items: center;
    gap: 8px;
    padding: 0 36px 0 11px;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: var(--ui-text-color);
    font: 400 var(--ui-text-size)/1.5 var(--app-font-family);
    white-space: nowrap;
    cursor: pointer;
}
.language-picker:not([data-language-picker-ready]) .language-picker-trigger { display: none; }
.language-picker:not([data-language-picker-ready]) select { color: var(--ui-text-color); }
.language-picker .language-picker-trigger img { position: static; width: 20px; height: 15px; flex: 0 0 20px; }
.language-picker-trigger > svg { position: absolute; right: 12px; width: 12px; height: 12px; }
.language-picker-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.language-options {
    position: fixed;
    inset: auto;
    z-index: 100;
    margin: 0;
    padding: 5px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--ui-control-border);
    border-radius: 10px;
    background: var(--ui-control-background);
    color: var(--ui-text-color);
    box-shadow: 0 8px 28px #30281c1f;
    list-style: none;
    font-family: var(--app-font-family);
}
.language-options[hidden] { display: none !important; }
.language-options::backdrop { background: transparent; }
.language-options button {
    display: flex;
    width: 100%;
    min-height: 38px;
    align-items: center;
    gap: 9px;
    padding: 6px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--ui-text-color);
    text-align: left;
    font: 400 var(--ui-text-size)/1.5 var(--app-font-family);
}
.language-options button:hover, .language-options button:focus-visible { background: var(--canvas, #f0efe7); outline: 0; }
.language-options button[aria-selected='true'] { background: #f3e9df; color: var(--accent, #91391e); }
.language-options img { position: static; width: 20px; height: 15px; flex: 0 0 20px; object-fit: contain; }
.language-options .language-option-check { width: 14px; height: 14px; margin-left: auto; visibility: hidden; }
.language-options button[aria-selected='true'] .language-option-check { visibility: visible; }

:root .page-content .table-search,
:root .quick-tools-panel.dashboard-workspace-app-panel .dashboard-workspace-app-search { height: var(--ui-control-height); }
:root .page-content .table-search input,
:root .quick-tools-panel.dashboard-workspace-app-panel .dashboard-workspace-app-search input {
    height: calc(var(--ui-control-height) - 2px);
    min-height: calc(var(--ui-control-height) - 2px);
    max-height: calc(var(--ui-control-height) - 2px);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

@media (min-width: 801px) and (max-width: 930px) {
    html.quick-tools-open .main-area { grid-template-rows: 84px minmax(0, 1fr) auto; }
    html.quick-tools-open .topbar { height: 84px; }
    html.quick-tools-open .topbar-actions { max-width: 100%; flex-wrap: wrap; justify-content: flex-end; row-gap: 5px; }
}
@media (max-width: 560px) {
    .topbar { gap: 8px; }
    .topbar-actions { gap: 6px; }
    .topbar .breadcrumbs { display: none; }
}

/* Administration links and buttons keep the same decoration in every state. */
html:root body :is(a,button,[role='button'],[role='link']),
html:root body :is(a,button,[role='button'],[role='link']):is(:hover,:active,:focus,:visited),
html:root body :is(a,button,[role='button'],[role='link']) :is(span,strong,small,em,i,.text-decoration-underline) {
    text-decoration:none!important;
}

/* Important modal colors already use this layer; semantic colors precede them. */
@layer ddm-form-colors, ddm-admin-modals;
@layer ddm-form-colors {
/* Semantic delete actions preserve their own size, radius and icon. */
html:root body :is(button,a):is(
    .ddm-delete-action[data-ddm-delete-action], [data-partner-delete], [data-permission-preset-delete], [data-org-unit-delete],
    [data-bank-delete], [data-banner-delete], [data-banner-delete-confirm], [data-board-delete],
    [data-development-delete], [data-messenger-management-erase], [data-message-action-id], [data-password-delete],
    [data-password-clear-all], [data-calculator-history-delete], [data-quick-memo-delete], [data-favorite-remove],
    [data-bookmark-delete-accept], [data-company-delete-open], [data-warehouse-delete], [data-dispatch-return-open], [data-staff-account-toggle][data-staff-account-action="deactivate"], [data-item-list-delete],
    [data-online-product-delete], [data-transaction-statement-delete], [data-shopping-mall-delivery-delete], [data-shopping-mall-category-delete],
    [data-custom-remove], [data-dispatch-item-delete], [data-transaction-statement-remove], [data-shopping-mall-bank-delete],
    [data-approval-write-remove-expense], [data-approval-write-remove-attachment], [data-approval-write-remove-approver], .logistics-item-delete-button,
    .partner-product-delete-button, .warehouse-delete-button, .partner-product-option-delete-button, .partner-product-option-selected-delete-button,
    .quick-bookmarks-list [data-bookmark-action="delete"], .short-card-actions [data-action="delete"], [data-company-delete-form] button[type="submit"]) {
    border: 1px solid #e53935 !important;
    background: transparent !important;
    color: #e53935 !important;
    box-shadow: none !important;
}
html:root body :is(button,a):is(
    .ddm-delete-action[data-ddm-delete-action], [data-partner-delete], [data-permission-preset-delete], [data-org-unit-delete],
    [data-bank-delete], [data-banner-delete], [data-banner-delete-confirm], [data-board-delete],
    [data-development-delete], [data-messenger-management-erase], [data-message-action-id], [data-password-delete],
    [data-password-clear-all], [data-calculator-history-delete], [data-quick-memo-delete], [data-favorite-remove],
    [data-bookmark-delete-accept], [data-company-delete-open], [data-warehouse-delete], [data-dispatch-return-open], [data-staff-account-toggle][data-staff-account-action="deactivate"], [data-item-list-delete],
    [data-online-product-delete], [data-transaction-statement-delete], [data-shopping-mall-delivery-delete], [data-shopping-mall-category-delete],
    [data-custom-remove], [data-dispatch-item-delete], [data-transaction-statement-remove], [data-shopping-mall-bank-delete],
    [data-approval-write-remove-expense], [data-approval-write-remove-attachment], [data-approval-write-remove-approver], .logistics-item-delete-button,
    .partner-product-delete-button, .warehouse-delete-button, .partner-product-option-delete-button, .partner-product-option-selected-delete-button,
    .quick-bookmarks-list [data-bookmark-action="delete"], .short-card-actions [data-action="delete"], [data-company-delete-form] button[type="submit"]) :is(span,i,svg) { color: inherit !important; }
html:root body :is(button,a):is(
    .ddm-delete-action[data-ddm-delete-action], [data-partner-delete], [data-permission-preset-delete], [data-org-unit-delete],
    [data-bank-delete], [data-banner-delete], [data-banner-delete-confirm], [data-board-delete],
    [data-development-delete], [data-messenger-management-erase], [data-message-action-id], [data-password-delete],
    [data-password-clear-all], [data-calculator-history-delete], [data-quick-memo-delete], [data-favorite-remove],
    [data-bookmark-delete-accept], [data-company-delete-open], [data-warehouse-delete], [data-dispatch-return-open], [data-staff-account-toggle][data-staff-account-action="deactivate"], [data-item-list-delete],
    [data-online-product-delete], [data-transaction-statement-delete], [data-shopping-mall-delivery-delete], [data-shopping-mall-category-delete],
    [data-custom-remove], [data-dispatch-item-delete], [data-transaction-statement-remove], [data-shopping-mall-bank-delete],
    [data-approval-write-remove-expense], [data-approval-write-remove-attachment], [data-approval-write-remove-approver], .logistics-item-delete-button,
    .partner-product-delete-button, .warehouse-delete-button, .partner-product-option-delete-button, .partner-product-option-selected-delete-button,
    .quick-bookmarks-list [data-bookmark-action="delete"], .short-card-actions [data-action="delete"], [data-company-delete-form] button[type="submit"]):hover {
    border-color: transparent !important;
    background: #e53935 !important;
    color: #fff !important;
}
html:root body :is(button,a):is(
    .ddm-delete-action[data-ddm-delete-action], [data-partner-delete], [data-permission-preset-delete], [data-org-unit-delete],
    [data-bank-delete], [data-banner-delete], [data-banner-delete-confirm], [data-board-delete],
    [data-development-delete], [data-messenger-management-erase], [data-message-action-id], [data-password-delete],
    [data-password-clear-all], [data-calculator-history-delete], [data-quick-memo-delete], [data-favorite-remove],
    [data-bookmark-delete-accept], [data-company-delete-open], [data-warehouse-delete], [data-dispatch-return-open], [data-staff-account-toggle][data-staff-account-action="deactivate"], [data-item-list-delete],
    [data-online-product-delete], [data-transaction-statement-delete], [data-shopping-mall-delivery-delete], [data-shopping-mall-category-delete],
    [data-custom-remove], [data-dispatch-item-delete], [data-transaction-statement-remove], [data-shopping-mall-bank-delete],
    [data-approval-write-remove-expense], [data-approval-write-remove-attachment], [data-approval-write-remove-approver], .logistics-item-delete-button,
    .partner-product-delete-button, .warehouse-delete-button, .partner-product-option-delete-button, .partner-product-option-selected-delete-button,
    .quick-bookmarks-list [data-bookmark-action="delete"], .short-card-actions [data-action="delete"], [data-company-delete-form] button[type="submit"])[hidden] { display:none!important; }

/* Saved/staged image deletion keeps the existing transparent X geometry. QR
   logo clearing and search clearing deliberately have no semantic marker. */
html:root body button:is(
    .ddm-delete-image[data-ddm-delete-image], [data-company-image-delete], [data-profile-image-delete], [data-bank-logo-clear],
    [data-shopping-mall-design-banner-delete], [data-shopping-mall-design-logo-delete], [data-shopping-mall-design-favicon-delete], [data-shopping-mall-seo-delete-image],
    [data-online-product-image-remove], [data-partner-doc-delete], .bank-logo-clear-button, .profile-image-delete-button,
    .partner-product-thumbnail-delete, .partner-product-option-image-delete-button, .supply-image-delete, .logistics-supply-price-delete-button),
html:root body button:is(
    .ddm-delete-image[data-ddm-delete-image], [data-company-image-delete], [data-profile-image-delete], [data-bank-logo-clear],
    [data-shopping-mall-design-banner-delete], [data-shopping-mall-design-logo-delete], [data-shopping-mall-design-favicon-delete], [data-shopping-mall-seo-delete-image],
    [data-online-product-image-remove], [data-partner-doc-delete], .bank-logo-clear-button, .profile-image-delete-button,
    .partner-product-thumbnail-delete, .partner-product-option-image-delete-button, .supply-image-delete, .logistics-supply-price-delete-button):hover,
html:root body button:is(.ddm-delete-resource[data-ddm-delete-resource],.board-file-remove),
html:root body button:is(.ddm-delete-resource[data-ddm-delete-resource],.board-file-remove):hover {
    color:#e53935!important; background:transparent!important;
}
html:root body button:is(
    .ddm-delete-image[data-ddm-delete-image], [data-company-image-delete], [data-profile-image-delete], [data-bank-logo-clear],
    [data-shopping-mall-design-banner-delete], [data-shopping-mall-design-logo-delete], [data-shopping-mall-design-favicon-delete], [data-shopping-mall-seo-delete-image],
    [data-online-product-image-remove], [data-partner-doc-delete], .bank-logo-clear-button, .profile-image-delete-button,
    .partner-product-thumbnail-delete, .partner-product-option-image-delete-button, .supply-image-delete, .logistics-supply-price-delete-button)::before {
    background:#e53935!important;
    -webkit-mask:url("/assets/images/image-delete.svg?v=20261007-1") center / contain no-repeat;
    mask:url("/assets/images/image-delete.svg?v=20261007-1") center / contain no-repeat;
}
html:root body button:is(
    .ddm-delete-image[data-ddm-delete-image], [data-company-image-delete], [data-profile-image-delete], [data-bank-logo-clear],
    [data-shopping-mall-design-banner-delete], [data-shopping-mall-design-logo-delete], [data-shopping-mall-design-favicon-delete], [data-shopping-mall-seo-delete-image],
    [data-online-product-image-remove], [data-partner-doc-delete], .bank-logo-clear-button, .profile-image-delete-button,
    .partner-product-thumbnail-delete, .partner-product-option-image-delete-button, .supply-image-delete, .logistics-supply-price-delete-button) :is(span,i,svg),
html:root body button:is(.ddm-delete-resource[data-ddm-delete-resource],.board-file-remove) :is(span,i,svg) { color:inherit!important; }
html:root body :is([data-ddm-delete-image],[data-ddm-delete-resource])[hidden] { display:none!important; }
}

html:root body .topbar [data-logout] {
    border: 1px solid #e53935 !important;
    background: transparent !important;
    color: #e53935 !important;
    font-weight: 400 !important;
    box-shadow: none !important;
}
html:root body .topbar [data-logout] :is(span,i,svg) {
    color: inherit !important;
    font-weight: inherit !important;
}
html:root body .topbar [data-logout]:hover {
    border-color: transparent !important;
    background: #e53935 !important;
    color: #fff !important;
}

/* Confirmation questions share the page card heading typography. */
html:root body :is([data-admin-modal-question], [data-logout-confirm] h2, [data-idle-warning] h2,
    [data-bookmark-delete-confirm] h2, #company-delete-notice, #company-access-message,
    .dashboard-modal:not(.description-modal) .dashboard-modal-message) {
    color: var(--ui-title-color) !important;
    font-family: var(--app-font-family) !important;
    font-size: var(--ui-title-size) !important;
    font-weight: 500 !important;
    font-style: normal;
    letter-spacing: -.025em !important;
    line-height: 1.4 !important;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Dialog actions share the company form's close/save controls. */
html:root body :is(dialog,[role='dialog'],.modal,.dashboard-workspace-password-modal-dialog)
    :is(.button,.btn,.icon-text-button,.dashboard-modal-confirm,.dashboard-modal-cancel,footer > button,.admin-session-actions > button):not(:where(.icon-button,.btn-close,.row-action,.dashboard-workspace-tool-icon-button,[data-admin-password-toggle],[hidden])) {
    box-sizing: border-box; display: inline-flex; flex: 0 0 auto; width: auto;
    min-width: 0 !important; height: var(--ui-control-height) !important;
    min-height: var(--ui-control-height) !important; max-height: var(--ui-control-height) !important;
    align-items: center; justify-content: center; gap: 7px !important;
    padding: 0 13px !important; border: 1px solid var(--ui-control-border);
    border-radius: var(--ui-control-radius) !important; aspect-ratio: auto;
    background: var(--ui-control-background); color: var(--ui-text-color);
    font-family: var(--app-font-family) !important; font-size: var(--ui-text-size) !important;
    font-weight: 400 !important; line-height: 1.5 !important; letter-spacing: normal !important;
    text-decoration: none !important; box-shadow: none !important; transform: none !important;
}
html:root body :is(dialog,[role='dialog'],.modal,.dashboard-workspace-password-modal-dialog)
    :is(.button,.btn,.icon-text-button,.dashboard-modal-confirm,.dashboard-modal-cancel,footer > button,.admin-session-actions > button):not(:where(.icon-button,.btn-close,.row-action,.dashboard-workspace-tool-icon-button,[data-admin-password-toggle],[hidden])) > :is(span,strong) {
    font-family: inherit !important; font-size: inherit !important; font-weight: 400 !important; color: inherit !important;
}
html:root body :is(dialog,[role='dialog'],.modal,.dashboard-workspace-password-modal-dialog)
    :is(.button-primary,.btn-primary,.dashboard-primary-button,.dashboard-modal-confirm,footer > button.is-primary):not(.ddm-delete-action):not(:where([data-partner-delete],[data-permission-preset-delete],[data-org-unit-delete],[data-bank-delete],[data-banner-delete],[data-banner-delete-confirm],[data-board-delete],[data-development-delete],[data-messenger-management-erase],[data-message-action-id],[data-password-delete],[data-password-clear-all],[data-calculator-history-delete],[data-quick-memo-delete],[data-favorite-remove],[data-bookmark-delete-accept],[data-company-delete-open],[data-warehouse-delete], [data-dispatch-return-open], [data-staff-account-toggle][data-staff-account-action="deactivate"],[data-item-list-delete],[data-online-product-delete],[data-transaction-statement-delete],[data-shopping-mall-delivery-delete],[data-shopping-mall-category-delete],[data-custom-remove],[data-dispatch-item-delete],[data-transaction-statement-remove],[data-shopping-mall-bank-delete],[data-approval-write-remove-expense],[data-approval-write-remove-attachment],[data-approval-write-remove-approver],[data-company-image-delete],[data-profile-image-delete],[data-bank-logo-clear],[data-shopping-mall-design-banner-delete],[data-shopping-mall-design-logo-delete],[data-shopping-mall-design-favicon-delete],[data-shopping-mall-seo-delete-image],[data-online-product-image-remove],[data-partner-doc-delete],.logistics-item-delete-button,.partner-product-delete-button,.warehouse-delete-button,.partner-product-option-delete-button,.partner-product-option-selected-delete-button,.bank-logo-clear-button,.profile-image-delete-button,.partner-product-thumbnail-delete,.partner-product-option-image-delete-button,.supply-image-delete,.logistics-supply-price-delete-button,.board-file-remove,.quick-bookmarks-list [data-bookmark-action="delete"],.short-card-actions [data-action="delete"],[data-company-delete-form] button[type="submit"])) {
    border-color: var(--accent) !important; background: var(--accent) !important; color: #fff !important;
}
html:root body :is(dialog,[role='dialog'],.modal,.dashboard-workspace-password-modal-dialog)
    :is(.button-secondary,.btn-secondary,.dashboard-cancel-button,.dashboard-modal-cancel,footer > button:not(:is(.is-primary,.button-primary,.btn-primary,.dashboard-primary-button,.dashboard-modal-confirm))):not(.ddm-delete-action):not(:where([data-partner-delete],[data-permission-preset-delete],[data-org-unit-delete],[data-bank-delete],[data-banner-delete],[data-banner-delete-confirm],[data-board-delete],[data-development-delete],[data-messenger-management-erase],[data-message-action-id],[data-password-delete],[data-password-clear-all],[data-calculator-history-delete],[data-quick-memo-delete],[data-favorite-remove],[data-bookmark-delete-accept],[data-company-delete-open],[data-warehouse-delete], [data-dispatch-return-open], [data-staff-account-toggle][data-staff-account-action="deactivate"],[data-item-list-delete],[data-online-product-delete],[data-transaction-statement-delete],[data-shopping-mall-delivery-delete],[data-shopping-mall-category-delete],[data-custom-remove],[data-dispatch-item-delete],[data-transaction-statement-remove],[data-shopping-mall-bank-delete],[data-approval-write-remove-expense],[data-approval-write-remove-attachment],[data-approval-write-remove-approver],[data-company-image-delete],[data-profile-image-delete],[data-bank-logo-clear],[data-shopping-mall-design-banner-delete],[data-shopping-mall-design-logo-delete],[data-shopping-mall-design-favicon-delete],[data-shopping-mall-seo-delete-image],[data-online-product-image-remove],[data-partner-doc-delete],.logistics-item-delete-button,.partner-product-delete-button,.warehouse-delete-button,.partner-product-option-delete-button,.partner-product-option-selected-delete-button,.bank-logo-clear-button,.profile-image-delete-button,.partner-product-thumbnail-delete,.partner-product-option-image-delete-button,.supply-image-delete,.logistics-supply-price-delete-button,.board-file-remove,.quick-bookmarks-list [data-bookmark-action="delete"],.short-card-actions [data-action="delete"],[data-company-delete-form] button[type="submit"])) {
    border-color: var(--ui-control-border) !important; background: var(--ui-control-background) !important; color: var(--ui-text-color) !important;
}
html:root body :is(dialog,[role='dialog'],.modal,.dashboard-workspace-password-modal-dialog)
    :is(.button,.btn,.icon-text-button,.dashboard-modal-confirm,.dashboard-modal-cancel,footer > button,.admin-session-actions > button):not(:where(.icon-button,.btn-close,.row-action,.dashboard-workspace-tool-icon-button,[data-admin-password-toggle],[hidden])) > :is(i,svg) {
    width: 15px !important; height: 15px !important; font-size: 15px !important; line-height: 1; color: inherit !important;
}
html:root body :is(dialog,[role='dialog'],.modal,.dashboard-workspace-password-modal-dialog)
    :is(.button,.btn,.icon-text-button,.dashboard-modal-confirm,.dashboard-modal-cancel,footer > button,.admin-session-actions > button):not(:where(.icon-button,.btn-close,.row-action,.dashboard-workspace-tool-icon-button,[data-admin-password-toggle],[hidden])):hover {
    filter: brightness(.97); text-decoration: none !important;
}
html:root body .admin-session-actions { flex-wrap: wrap; gap: 8px; }
/* Numeric fields retain their constraints without displaying spinner controls during startup. */
input[type="number"] { appearance:textfield; -moz-appearance:textfield; }
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }

/* Field captions follow the company information form's vertical spacing. */
html:root body :is(.page-content, dialog, .utility-quick-app, #quick-tools-panel, .dashboard-workspace-password-modal) :is(
    .company-profile-field, .design-field, .form-group, .ut-field, .calc-field, .ex-field,
    .layout-color-field, .layout-size-field,
    label:has(> :is(input:not([type=checkbox],[type=radio],[type=file],[type=hidden],[type=button],[type=submit],[type=reset]),select,textarea,.company-input-group,.design-input-group))
):not(:is(.inline-checkbox,.company-tax-choice,.switch,.layout-menu-switch,.quick-theme-switch,
    .dashboard-workspace-qr-switch,.dashboard-workspace-qr-caption-input,.dashboard-workspace-picker-input-group,
    .dashboard-workspace-qr-file,.sr-only,.visually-hidden)):not(:where(.ck *, .CodeMirror *, .cm-editor *, [contenteditable], [contenteditable] *, [data-user-content], [data-user-content] *, [translate="no"], .notranslate)) {
    row-gap:3px!important;
}
/* The marker is part of the original caption, never a second flex item. */
html:root body .ddm-required-label > :is([data-required-caption],[data-ui-field-label]) {
    display:inline!important; gap:0!important;
}
html:root body .ddm-required-label > :is([data-required-caption],[data-ui-field-label])::before {
    margin-inline-end:7px;
}
html:root body .ddm-required-marker {
    display:inline!important; margin-inline-start:3px!important;
    color:#dc3545!important; font:inherit!important; white-space:nowrap;
}

/* File-image removal is a bare X, including when the button palette is customized.
   Keep the existing action contracts and focus outline; row deletion is separate. */
@layer ddm-admin-button-styles {
html:root body button:is(
    .ddm-delete-image[data-ddm-delete-image], [data-company-image-delete], [data-profile-image-delete], [data-staff-profile-image-delete], [data-partner-doc-delete], [data-bank-logo-clear], [data-shopping-mall-design-banner-delete], [data-shopping-mall-design-logo-delete], [data-shopping-mall-design-favicon-delete], [data-shopping-mall-seo-delete-image], [data-online-product-image-remove], [data-login-background-delete], [data-login-background-video-clear], [data-logo-clear], [data-sms-attachment-remove], [data-option-image-remove], [data-full-image-remove], .bank-logo-clear-button, .profile-image-delete-button, .partner-product-thumbnail-delete, .partner-product-option-image-delete-button):not(.supply-image-delete,.logistics-supply-price-delete-button),
html:root body button[data-admin-button-kind]:is(
    .ddm-delete-image[data-ddm-delete-image], [data-company-image-delete], [data-profile-image-delete], [data-staff-profile-image-delete], [data-partner-doc-delete], [data-bank-logo-clear], [data-shopping-mall-design-banner-delete], [data-shopping-mall-design-logo-delete], [data-shopping-mall-design-favicon-delete], [data-shopping-mall-seo-delete-image], [data-online-product-image-remove], [data-login-background-delete], [data-login-background-video-clear], [data-logo-clear], [data-sms-attachment-remove], [data-option-image-remove], [data-full-image-remove], .bank-logo-clear-button, .profile-image-delete-button, .partner-product-thumbnail-delete, .partner-product-option-image-delete-button):not(.supply-image-delete,.logistics-supply-price-delete-button):is(:hover,:active,:focus-visible,:disabled,[aria-disabled=true]) {
    border:0!important; border-radius:0!important; background:transparent!important;
    box-shadow:none!important; color:#e53935!important; filter:none!important;
}
html:root body button:is(
    .ddm-delete-image[data-ddm-delete-image], [data-company-image-delete], [data-profile-image-delete], [data-staff-profile-image-delete], [data-partner-doc-delete], [data-bank-logo-clear], [data-shopping-mall-design-banner-delete], [data-shopping-mall-design-logo-delete], [data-shopping-mall-design-favicon-delete], [data-shopping-mall-seo-delete-image], [data-online-product-image-remove], [data-login-background-delete], [data-login-background-video-clear], [data-logo-clear], [data-sms-attachment-remove], [data-option-image-remove], [data-full-image-remove], .bank-logo-clear-button, .profile-image-delete-button, .partner-product-thumbnail-delete, .partner-product-option-image-delete-button):not(.supply-image-delete,.logistics-supply-price-delete-button)::before {
    content:''!important; display:inline-block!important; position:static!important;
    width:14.4px!important; height:14.4px!important; flex:0 0 14.4px!important;
    margin:0!important; padding:0!important; border:0!important; box-shadow:none!important;
    opacity:1!important; background:#e53935!important; pointer-events:none;
    -webkit-mask:url('/assets/images/image-delete.svg?v=20261007-1') center / contain no-repeat!important;
    mask:url('/assets/images/image-delete.svg?v=20261007-1') center / contain no-repeat!important;
}
html:root body button:is(
    .ddm-delete-image[data-ddm-delete-image], [data-company-image-delete], [data-profile-image-delete], [data-staff-profile-image-delete], [data-partner-doc-delete], [data-bank-logo-clear], [data-shopping-mall-design-banner-delete], [data-shopping-mall-design-logo-delete], [data-shopping-mall-design-favicon-delete], [data-shopping-mall-seo-delete-image], [data-online-product-image-remove], [data-login-background-delete], [data-login-background-video-clear], [data-logo-clear], [data-sms-attachment-remove], [data-option-image-remove], [data-full-image-remove], .bank-logo-clear-button, .profile-image-delete-button, .partner-product-thumbnail-delete, .partner-product-option-image-delete-button):not(.supply-image-delete,.logistics-supply-price-delete-button) > :is(svg,i,span):not(.sr-only,.visually-hidden) { display:none!important; }
html:root body button:is(
    .ddm-delete-image[data-ddm-delete-image], [data-company-image-delete], [data-profile-image-delete], [data-staff-profile-image-delete], [data-partner-doc-delete], [data-bank-logo-clear], [data-shopping-mall-design-banner-delete], [data-shopping-mall-design-logo-delete], [data-shopping-mall-design-favicon-delete], [data-shopping-mall-seo-delete-image], [data-online-product-image-remove], [data-login-background-delete], [data-login-background-video-clear], [data-logo-clear], [data-sms-attachment-remove], [data-option-image-remove], [data-full-image-remove], .bank-logo-clear-button, .profile-image-delete-button, .partner-product-thumbnail-delete, .partner-product-option-image-delete-button):not(.supply-image-delete,.logistics-supply-price-delete-button)::after { content:none!important; display:none!important; }
}