/* TaskId: znt88-sample-rd-workbench-ui-20261019
   PREVIEW ONLY: intentionally not linked from a production asset or template.
   Screen presentation only. Right output descendants and print remain frozen.
   Native sample_rd Shell, not the ordinary Universal renderer.
   No variables/fonts/colors on ancestors shared with the output. */
@media screen {
    html body #agent-page.is-sample-rd-mode #agent-work-main {
        width: 100%;
        max-width: none;
        padding: 0 24px 22px;
        gap: 0;
        container-type: inline-size;
        container-name: rd-workbench;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace.sample-rd-native-mounted {
        gap: 16px;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace > .agent-univ-header .agent-univ-title {
        font-size: 28px;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: -0.4px;
    }

    /* Only the native input column is eligible for the visual refinement. */
    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col > .univ-input-card {
        padding: 24px;
        border: 1px solid #EBEBEB !important;
        border-radius: 14px !important;
        background: #FFFFFF !important;
        box-shadow: none;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace [data-shell-input-heading] .panel-heading h2 {
        font-size: 20px;
        font-weight: 700;
        line-height: 1.4;
        color: #111111 !important;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace [data-shell-input-heading] > .muted {
        font-size: 12px;
        font-weight: 400;
        line-height: 1.75;
        color: #999999 !important;
        margin: 10px 0 20px;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace [data-shell-input] {
        padding-right: 10px;
        padding-bottom: 8px;
        margin-bottom: 20px;
        scrollbar-gutter: stable;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col #input-form {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col .pair {
        gap: 16px;
        margin-bottom: 24px;
        padding-bottom: 24px;
        border-bottom: 1px solid #EBEBEB !important;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col label {
        color: #111111 !important;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.75;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col .univ-field {
        margin-bottom: 24px;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col .univ-field.is-required::before {
        content: "*";
        margin-right: 6px;
        color: #FF5A5F;
        font-weight: 600;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col :is(input:not([type=file]), select, textarea) {
        color: #111111 !important;
        background: #FFFFFF;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.75;
        padding: 10px 12px;
        margin-top: 8px;
        border: 1px solid #EBEBEB !important;
        border-radius: 8px;
        box-shadow: none;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col .univ-field textarea {
        min-height: 112px;
        height: 112px;
        padding: 12px 14px;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col #notes {
        min-height: 96px;
        height: 96px;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col :is(input, select, textarea):focus-visible {
        outline: none;
        border-color: #FF5A5F !important;
        box-shadow: 0 0 0 3px rgba(255,90,95,0.12);
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col :is(textarea, input)::placeholder {
        color: #999999;
        font-weight: 400;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col .asset {
        margin: 0 0 24px;
        padding-top: 24px;
        border-top: 1px solid #EBEBEB;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col .asset-label {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 4px 8px;
        margin: 0 0 10px;
        color: #111111 !important;
        font-size: 18px;
        font-weight: 600;
        line-height: 1.5;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col :is(.muted,.small,.asset-count) {
        font-size: 12px;
        font-weight: 400;
        line-height: 1.75;
        color: #999999 !important;
    }

    /* Native file labels: default + hover + focus-within use §8.5.2 tokens.
       No drag/drop event is introduced; existing file-input behavior is kept. */
    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col .univ-upload-zone {
        margin: 0;
        padding: 16px;
        min-height: 112px;
        border: 1px dashed #D0D0D0 !important;
        border-radius: 12px;
        background: #F7F8FA !important;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col .upload-copy strong {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: #555555 !important;
        line-height: 1.75;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col .upload-copy > span {
        display: block;
        margin-top: 6px;
        font-size: 12px;
        color: #999999 !important;
        line-height: 1.75;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col .univ-upload-zone:is(:hover,:focus-within) {
        border-color: #FF5A5F !important;
        background: rgba(255,90,95,0.04) !important;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col .univ-upload-zone:focus-within {
        box-shadow: 0 0 0 3px rgba(255,90,95,0.12);
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col .asset-preview {
        gap: 10px;
        margin-top: 10px;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col .asset-tile {
        padding: 8px;
        border: 1px solid #EBEBEB;
        border-radius: 8px;
        background: #FFFFFF;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col .asset-tile img {
        height: 104px;
        border-radius: 6px;
        background: #F7F8FA;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col .asset-tile p {
        font-size: 12px;
        line-height: 1.75;
        color: #555555 !important;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col .asset-tile button {
        border: 1px solid #EBEBEB;
        border-radius: 8px;
        background: #FFFFFF;
        color: #555555 !important;
        font-size: 12px;
        font-weight: 500;
        padding: 4px 10px;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col .asset-tile button:hover {
        color: #FF5A5F !important;
        border-color: #FF5A5F;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace [data-shell-actions] {
        padding-top: 16px;
        border-top: 1px solid #EBEBEB;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace [data-shell-actions] p {
        margin: 0 0 6px;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace [data-shell-actions] #p1-price {
        color: #555555 !important;
        font-size: 14px;
        font-weight: 600;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col #plan-button {
        min-height: 44px;
        margin-top: 12px;
        padding: 10px 22px;
        border-radius: 8px;
        background: #FF5A5F !important;
        color: #FFFFFF !important;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.75;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col #plan-button:hover:not(:disabled) {
        background: #CC3A3F !important;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col button:focus-visible {
        outline: 2px solid #FF5A5F;
        outline-offset: 3px;
    }

    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col #input-error:not(:empty),
    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col #generate-lock-hint:not([hidden]) {
        padding: 10px 12px;
        border: 1px solid #EBEBEB;
        border-left: 3px solid #FF5A5F;
        border-radius: 8px;
        background: #F7F8FA;
        color: #CC3A3F !important;
        font-size: 12px;
        line-height: 1.75;
    }
}

@media screen and (min-width: 1033px) {
    html body #agent-page.is-sample-rd-mode #agent-work-main {
        height: calc(100dvh - 16px) !important;
    }
}

@media screen {
    @container rd-workbench (min-width: 981px) {
        html body #agent-page.is-sample-rd-mode #sample-rd-workspace > .agent-workspace-grid {
            display: grid !important;
            grid-template-columns: minmax(255px,1fr) minmax(0,3fr) !important;
            grid-template-rows: minmax(0,1fr);
            gap: 16px;
            max-width: none;
            flex: 1 1 0;
            min-height: 420px;
            align-items: stretch;
        }
    }
}

/* Narrow-screen compatibility touches only the outer shell / panel columns.
   Existing native mobile output rules still own every output descendant. */
@media screen and (max-width: 1032px) {
    html body #agent-page.is-sample-rd-mode #sample-rd-workspace > .agent-univ-header .agent-univ-header-row {
        flex-wrap: wrap;
    }
    html body #agent-page.is-sample-rd-mode #sample-rd-workspace > .agent-univ-header .agent-univ-title {
        flex: 0 0 auto;
        font-size: 24px;
    }
    html body #agent-page.is-sample-rd-mode #sample-rd-workspace > .agent-univ-header .agent-univ-header-desc {
        flex-basis: 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    html body #agent-page.is-sample-rd-mode #agent-work-main {
        height: auto !important;
        overflow: visible;
        padding: 0 12px 20px;
    }
    html body #agent-page.is-sample-rd-mode #sample-rd-workspace.sample-rd-native-mounted,
    html body #agent-page.is-sample-rd-mode #sample-rd-workspace :is(.univ-input-col,.univ-output-col) {
        height: auto !important;
        max-height: none !important;
        overflow: visible;
    }
    html body #agent-page.is-sample-rd-mode #sample-rd-workspace > .agent-workspace-grid {
        display: flex !important;
        flex-direction: column;
        gap: 20px;
    }
    html body #agent-page.is-sample-rd-mode #sample-rd-workspace .univ-input-col > .univ-input-card {
        height: auto !important;
        max-height: none !important;
        overflow: visible;
    }
}