/* ==========================================================================
   manual_pipeline.css — /manual_pipeline (dataset mode)
   Loaded AFTER new_preuploader.css; the page shares the /workspace header and
   theme tokens by putting both classes on body
   (class="new_preuploader manual_pipeline"). Every rule here is scoped under
   body.new_preuploader.manual_pipeline so specificity beats both single.css
   and the shared file regardless of load order.
   Light theme: no visual change from the single.css look.
   Dark theme (body.theme-dark): the --np tokens from new_preuploader.css.
   CSP: style-src 'self' — keep all styles in this file, no inline styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page tokens. new_preuploader.css sets body color to --np-text (#fff in
   light) which would turn this page's default black text white, so the body
   colour is re-pinned here and switched only in dark.
   -------------------------------------------------------------------------- */
body.new_preuploader.manual_pipeline {
    --mp-text: #000000;
    --mp-text-soft: #021235;
    --mp-panel-border: #95b1df3b;
    --mp-button-bg: #22222211;
    --mp-button-active-bg: #ffffff30;
    --mp-error: red;
    /* 価格の金額 (ライトは --np-accent #1764ff より少し濃い青で視認性を上げる) */
    --mp-price: #173cff;
    /* High Quality 表示 (青系統。金額の青とは色相をずらす) */
    --mp-quality-high: #0400cf;
    /* 画質スイッチのオン時トラック: --mp-quality-high を背景に混ぜる割合 */
    --mp-quality-switch-on-mix: 55%;
    /* 画質スイッチのノブ (ライトは実行ボタン common_button と同じ色合い。
       半透明の白でトラックの色を透かす) */
    --mp-quality-knob-bg: #ffffff8f;
    --mp-quality-knob-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    /* 実行中スロットの進捗表示 (点灯色は --np-accent: light #1764ff / dark #22d3ee) */
    --mp-progress-fill: var(--np-accent);
    --mp-progress-track: rgba(2, 18, 53, 0.14);
    --mp-progress-spinner-track: rgba(2, 18, 53, 0.18);
    /* 上段の工程名と Running... の文字色。ライトは実行中のチップの文言と同じ濃い青
       (new_preuploader.css の --np-accent-text、2026-10-24 ユーザー指示)。ダークは本文色のまま */
    --mp-progress-step-text: var(--np-accent-text);
    --mp-progress-running-text: var(--np-accent-text);
    color: var(--mp-text);
}
body.new_preuploader.manual_pipeline.theme-dark {
    --mp-text: var(--np-text);
    --mp-text-soft: var(--np-text-soft);
    --mp-panel-border: var(--np-border-color);
    --mp-button-bg: rgba(255, 255, 255, 0.06);
    --mp-button-active-bg: rgba(255, 255, 255, 0.14);
    --mp-error: #ff6b6b;
    --mp-price: var(--np-accent);
    --mp-quality-high: #00c75b;
    --mp-quality-switch-on-mix: 75%;
    /* ダークは実行ボタンと同じ色 (白 6%) だと暗いトラックにも暗い画面背景にも
       埋もれてノブの位置が読めないので、明るい色 (アルファ 0.8) にする */
    --mp-quality-knob-bg: color-mix(in srgb, var(--np-text) 80%, transparent);
    --mp-quality-knob-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
    --mp-progress-track: rgba(255, 255, 255, 0.12);
    --mp-progress-spinner-track: rgba(255, 255, 255, 0.18);
    --mp-progress-step-text: var(--mp-text);
    --mp-progress-running-text: var(--mp-text-soft);
}

/* ルート要素の背景 (single.css の --main-background を np トークンに置換。
   new_preuploader.css は #new_preuploader_root にのみ効く) */
body.new_preuploader.manual_pipeline #sfm_root {
    /* 背景は new_preuploader.css の body::before (固定レイヤー) が描く */
    background-image: none;
}
/* single.css は縦持ちスマホでグラデーションの上端色を #1764ff に変える。
   ライトの見た目を現状維持するため同じ切替を再現する (ダークは共通) */
@media (max-width: 680px) and (orientation: portrait) {
    body.new_preuploader.manual_pipeline:not(.theme-dark) {
        --np-page-bg: linear-gradient(#1764ff, #99c2bc);
    }
}

/* ヘッダー直下の 使い方 / User Log 領域。両方非表示のときは高さ 0 で
   本文位置を変えない */
body.new_preuploader.manual_pipeline .np_main.mp_top {
    padding-bottom: 0;
}
body.new_preuploader.manual_pipeline .np_page_explanation {
    margin-bottom: 1.4rem;
}

/* --------------------------------------------------------------------------
   Corner radius — /workspace と同じ使い分け (両テーマ共通)。
   パネル / キャンバス / ダイアログ = --np-radius (np_row, np_dialog と同じ)、
   テキストボタン = 7px (np_dialog_button と同じ)、select = 7px
   -------------------------------------------------------------------------- */
body.new_preuploader.manual_pipeline .execute_button_layout,
body.new_preuploader.manual_pipeline .progress_area,
body.new_preuploader.manual_pipeline .empty_three_canvas,
body.new_preuploader.manual_pipeline #three_canvas,
body.new_preuploader.manual_pipeline .advanced_option_area,
body.new_preuploader.manual_pipeline dialog.option_dialog,
body.new_preuploader.manual_pipeline dialog.mesh_option_dialog {
    border-radius: var(--np-radius);
}
body.new_preuploader.manual_pipeline .common_button,
body.new_preuploader.manual_pipeline .option_close_button,
body.new_preuploader.manual_pipeline .model_load_button,
body.new_preuploader.manual_pipeline .reset_button_layout,
body.new_preuploader.manual_pipeline .preuploaded_select,
body.new_preuploader.manual_pipeline .dataset_stage_option_row select {
    border-radius: 7px;
}

/* --------------------------------------------------------------------------
   Dark theme — body text / notices
   -------------------------------------------------------------------------- */
body.new_preuploader.manual_pipeline.theme-dark .page_explanation {
    color: var(--mp-text-soft);
}
body.new_preuploader.manual_pipeline.theme-dark .page_explanation a,
body.new_preuploader.manual_pipeline.theme-dark .dataset_sfm_notice a {
    color: var(--np-accent);
}
body.new_preuploader.manual_pipeline.theme-dark .credit_number {
    color: var(--np-accent);
}
body.new_preuploader.manual_pipeline.theme-dark .pipeline_branch_switch {
    color: var(--np-accent);
}
body.new_preuploader.manual_pipeline.theme-dark .dataset_slot_rerun_toggle {
    color: var(--np-accent);
}
body.new_preuploader.manual_pipeline.theme-dark .inner_load_circle {
    border-top-color: var(--np-accent);
}
body.new_preuploader.manual_pipeline.theme-dark summary,
body.new_preuploader.manual_pipeline.theme-dark .expand_summary {
    color: var(--mp-text);
}

/* --------------------------------------------------------------------------
   Dark theme — controls (right panel)
   -------------------------------------------------------------------------- */
body.new_preuploader.manual_pipeline.theme-dark .common_button {
    color: var(--mp-text);
    background-color: var(--mp-button-bg);
    border-color: var(--mp-panel-border);
}
body.new_preuploader.manual_pipeline.theme-dark .common_button:active {
    background: var(--mp-button-active-bg);
}
body.new_preuploader.manual_pipeline.theme-dark .common_button:disabled {
    opacity: var(--np-disabled-opacity);
}
body.new_preuploader.manual_pipeline.theme-dark .execute_button_layout,
body.new_preuploader.manual_pipeline.theme-dark .progress_area {
    border-color: var(--mp-panel-border);
}
body.new_preuploader.manual_pipeline.theme-dark .preuploaded_select {
    background-color: var(--np-row-bg);
    border-color: var(--mp-panel-border);
    color: var(--mp-text);
}
body.new_preuploader.manual_pipeline.theme-dark .dataset_stage_option_row select {
    background: transparent;
    border: var(--np-control-border);
    color: var(--mp-text);
}
/* 3D プレビューのキャンバス枠。色合いは変換行 (np_row) と同じ半透明の下地 +
   細い bevel 縁 (single.css の 0.4vh outset #95b1df3b の出っ張りはやめた)。
   ライト / ダークとも同じトークンで揃う */
body.new_preuploader.manual_pipeline .empty_three_canvas,
body.new_preuploader.manual_pipeline #three_canvas {
    background: var(--np-row-bg);
    border: var(--np-row-border);
    border-color: var(--np-bevel-colors);
}
/* 実行ボタンを囲む窪んだ枠 (single.css の 3px inset)。ライトは下地が無く
   画面背景がそのまま透けて枠だけが浮くので、ごく薄い黒を敷いて窪みを出す
   (ダークは画面背景が暗く、敷いても差が出ないので足さない) */
body.new_preuploader.manual_pipeline:not(.theme-dark) .execute_button_layout {
    background-color: rgba(0, 0, 0, 0.03);
}

/* --------------------------------------------------------------------------
   完了スロットのダウンロードボタン。寸法・SVG は /workspace の np_icon_button
   を使い、形は四角。色合いは変換行 (np_row) と同じ半透明の下地 + 細い bevel 縁
   (盛り上がった outset の質感はやめた)。グリフ色は本ページの文字色
   (np_icon_button の --np-text はライトで白 = 本ページの黒文字と揃わない)
   -------------------------------------------------------------------------- */
body.new_preuploader.manual_pipeline .mp_download_button,
body.new_preuploader.manual_pipeline .mp_download_button:hover:enabled {
    flex: 0 0 auto;
    /* 丸 (np_icon_button 既定) ではなく四角。角は本ページのボタンと同じ 7px */
    border-radius: 7px;
    color: var(--mp-text);
    background: var(--np-row-bg);
    border: var(--np-row-border);
    border-color: var(--np-bevel-colors);
}
body.new_preuploader.manual_pipeline .mp_download_button:hover:enabled {
    background: var(--mp-button-active-bg);
}
body.new_preuploader.manual_pipeline .mp_download_button:active:enabled {
    border-color: var(--np-bevel-colors-inset);
}
/* ダウンロードボタンの左の 2 つ (mp_download_lead。左から実行時オプションの
   インフォツールチップと /3d_viewer へのビューアボタン)。i の見た目は
   new_preuploader.css の np_run_options_* (/workspace のインフォダイアログと共用)。
   ボタンを包む mp_download_main を基準に左へ絶対配置し、行の中央ライン
   (ダウンロードボタン) を動かさない。間隔は右側の操作と同じ 0.6rem */
body.new_preuploader.manual_pipeline .mp_download_main {
    position: relative;
    display: inline-flex;
    align-items: center;
}
body.new_preuploader.manual_pipeline .mp_download_lead {
    position: absolute;
    top: 50%;
    right: calc(100% + 0.6rem);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
/* 縦長 (≤880px) は右側の操作がボタンの下の行に回り、工程列の幅はその行の幅に
   なる。二又の 2 列ではこの組が列の左へはみ出し、360px 幅の画面だと左端で i が
   切れるので、間隔を詰める (1 列の工程も同じ間隔にそろえる) */
@media (max-width: 880px) {
    body.new_preuploader.manual_pipeline .mp_download_lead {
        right: calc(100% + 0.25rem);
        gap: 0.25rem;
    }
}
/* まだダウンロードしていない成果物の NEW (2026-11-03 ユーザー指示)。横長は i の左
   (mp_download_lead の先頭)。縦長 (≤880px) は二又の列で i の左が画面の外に出るので、
   右側の操作が下の行に回って空いたダウンロードボタンの右 (mp_new_after。i の組と
   同じくボタン基準の絶対配置で、中央ラインを動かさない) */
body.new_preuploader.manual_pipeline .mp_new_after {
    display: none;
}
@media (max-width: 880px) {
    body.new_preuploader.manual_pipeline .mp_download_lead .np_new_badge {
        display: none;
    }
    body.new_preuploader.manual_pipeline .mp_new_after {
        display: block;
        position: absolute;
        top: 50%;
        left: calc(100% + 0.25rem);
        transform: translateY(-50%);
    }
}
/* ビューアボタンは /workspace のインフォダイアログのビューアボタン (new_preuploader.css の
   .np_dl_actions .np_icon_button と .np_info_row a.np_icon_button) と同じ見た目
   (2026-10-26 ユーザー指示): 丸枠 2.2rem・塗りの目のアイコン 1.1rem・文字色のグリフ。
   ライトの枠はインフォダイアログ (明るい地のダイアログ) と同じ濃い青の線で、ホバーは
   a.np_icon_button:hover のまま */
body.new_preuploader.manual_pipeline .mp_viewer_button {
    width: 2.2rem;
    height: 2.2rem;
    color: var(--mp-text);
    text-decoration: none;
}
body.new_preuploader.manual_pipeline:not(.theme-dark) .mp_viewer_button {
    --np-control-border: 1px solid rgba(2, 18, 53, 0.5);
}
body.new_preuploader.manual_pipeline .mp_viewer_button svg {
    width: 1.1rem;
    height: 1.1rem;
}
/* 横長表示ではダウンロード行を 3 セル (i アイコンとビューアボタン / ボタン /
   右側の操作) のグリッドにする。左右の 1fr は内容幅で決まるとき広い方に揃うので、
   ボタンは工程列の中心線に残ったまま、左右の操作 (右は Re-run・変換・複製) の
   幅が列幅に入る (絶対配置だと二又表示で隣の列に重なっていた)。
   縦長 (≤880px) は single.css の縦積みのまま */
@media (min-width: 881px) {
    body.new_preuploader.manual_pipeline .dataset_download_row {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
    body.new_preuploader.manual_pipeline .dataset_download_row .mp_download_main {
        display: contents;
    }
    /* セルは明示する (i アイコンとビューアボタンは 1 列目の右端) */
    body.new_preuploader.manual_pipeline .dataset_download_row .mp_download_lead {
        grid-column: 1;
        grid-row: 1;
        justify-self: end;
        position: static;
        transform: none;
        margin-right: 0.6rem;
    }
    body.new_preuploader.manual_pipeline .dataset_download_row .mp_download_button {
        grid-column: 2;
        grid-row: 1;
    }
    body.new_preuploader.manual_pipeline .dataset_download_row
        .dataset_slot_side_actions {
        grid-column: 3;
        grid-row: 1;
        justify-self: start;
        position: static;
        transform: none;
        margin-left: 0.6rem;
    }
}
/* High Quality の色は本ページの切替スイッチ (stage_price_quality_high) と同じ */
body.new_preuploader.manual_pipeline .np_run_options_quality_high {
    color: var(--mp-quality-high);
}

/* 変換ボタン (Re-run の右)。/workspace の行ボタンと同じ立体感の無い丸枠
   (np_icon_button 既定のまま) を一回り小さくしたもの。グリフ色だけ本ページの
   文字色に合わせる (--np-text はライトで白) */
body.new_preuploader.manual_pipeline .mp_convert_button {
    width: 2.2rem;
    height: 2.2rem;
    color: var(--mp-text);
}
body.new_preuploader.manual_pipeline .mp_convert_button svg {
    width: 1.05rem;
    height: 1.05rem;
    stroke-width: 1.5;
}

/* 工程スロット内の変換行 (ダウンロード行の下)。/workspace の変換行
   (np_convert_row) を種別名なしの 3 列 (マーク / 概要 / 操作) に詰める */
body.new_preuploader.manual_pipeline .mp_slot_conversions {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 100%;
    max-width: 18rem;
    margin: 0.5rem auto 0;
}
body.new_preuploader.manual_pipeline .mp_slot_conversions .np_row.np_convert_row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    margin-left: 0;
    padding: 0.3rem 0.5rem;
    gap: 0.5rem;
    text-align: left;
}
/* 文字・アイコンは本ページの文字色 (np の --np-text / --np-text-dim は
   ライトで白系 = 本ページの黒文字と揃わない) */
body.new_preuploader.manual_pipeline .mp_slot_conversions .np_convert_mark,
body.new_preuploader.manual_pipeline .mp_slot_conversions .np_convert_summary {
    color: var(--mp-text-soft);
}
body.new_preuploader.manual_pipeline .mp_slot_conversions .np_convert_summary {
    font-size: 0.8rem;
}
/* 削除して Undo を待っている変換行 (細い「Deleted · Undo」の行) も本ページの文字色 */
body.new_preuploader.manual_pipeline .mp_slot_conversions .np_row.np_deleted_row {
    color: var(--mp-text-soft);
}
body.new_preuploader.manual_pipeline .mp_slot_conversions .np_deleted_text {
    font-size: 0.8rem;
}
/* 680px 以下の np_row は操作列を 2 段目 (grid-area: actions) に落とすが、
   スロット内の変換行は 1 行のまま */
body.new_preuploader.manual_pipeline .mp_slot_conversions .np_row .np_row_actions {
    grid-area: auto;
    flex-wrap: nowrap;
    gap: 0.3rem;
}
body.new_preuploader.manual_pipeline .mp_slot_conversions .np_status {
    font-size: 0.8rem;
}
/* 変換中の % とキャンセルのチップも本ページの文字色 */
body.new_preuploader.manual_pipeline .mp_slot_conversions .np_run_progress_percent,
body.new_preuploader.manual_pipeline .mp_slot_conversions .np_status_canceled {
    color: var(--mp-text-soft);
}
body.new_preuploader.manual_pipeline .mp_slot_conversions .np_icon_button {
    width: 2rem;
    height: 2rem;
    color: var(--mp-text);
}
body.new_preuploader.manual_pipeline .mp_slot_conversions .np_icon_button svg {
    width: 1rem;
    height: 1rem;
}

/* 複製 (工程指定) の行。変換行と同じ見た目で、左から複製アイコン →
   スピナー + 「Duplicating...」→ 完了後は複製先への切り替えボタン */
body.new_preuploader.manual_pipeline .mp_slot_duplications {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 100%;
    max-width: 18rem;
    margin: 0.5rem auto 0;
}
body.new_preuploader.manual_pipeline .mp_duplication_row {
    grid-template-columns: auto minmax(0, 1fr);
    margin-left: 0;
    padding: 0.3rem 0.5rem;
    gap: 0.5rem;
    text-align: left;
}
body.new_preuploader.manual_pipeline .mp_duplication_row .np_convert_mark,
body.new_preuploader.manual_pipeline .mp_duplication_row .np_convert_summary {
    color: var(--mp-text-soft);
}
body.new_preuploader.manual_pipeline .mp_duplication_status {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    font-size: 0.8rem;
}
body.new_preuploader.manual_pipeline .mp_duplication_row .np_status {
    font-size: 0.8rem;
}
/* 切り替えボタン (ドロップダウンで選んだときと同じ挙動) */
body.new_preuploader.manual_pipeline .mp_switch_button {
    min-width: 0;
    padding: 0.2rem 0.5rem;
    border: var(--np-control-border);
    border-radius: 7px;
    background: transparent;
    color: var(--mp-text);
    font-size: 0.8rem;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
body.new_preuploader.manual_pipeline .mp_switch_button:hover {
    background-color: var(--mp-button-active-bg);
}

/* --------------------------------------------------------------------------
   Dark theme — settings dialogs (<dialog> は body 配下なのでスコープが効く)
   -------------------------------------------------------------------------- */
body.new_preuploader.manual_pipeline.theme-dark dialog.option_dialog,
body.new_preuploader.manual_pipeline.theme-dark dialog.mesh_option_dialog {
    background-color: var(--np-dialog-bg);
    color: var(--np-dialog-text);
    border: var(--np-dialog-border);
}
body.new_preuploader.manual_pipeline.theme-dark .option_close_button {
    background-color: var(--mp-button-bg);
    color: var(--np-dialog-text);
    border-color: var(--mp-panel-border);
}
body.new_preuploader.manual_pipeline.theme-dark .advanced_option_area {
    background: rgba(255, 255, 255, 0.04);
}
/* ツールチップの ? (.tooltip-icon) の色は new_preuploader.css の --np-qmark-bg / --np-qmark-fg */

/* --------------------------------------------------------------------------
   Dark theme — bevel borders. single.css の border は幅が vh 依存で、
   outset / inset の暗い側の色はブラウザが自動生成する (暗色はほぼ黒に
   落ちる)。ダークでは px 幅の solid + 明示色の 4 辺 (new_preuploader.css
   の --np-bevel-colors / --np-bevel-colors-inset) に置き換え、PC / スマホ
   で同じ見え方にする。ライトは single.css の見た目を現状維持
   -------------------------------------------------------------------------- */
body.new_preuploader.manual_pipeline.theme-dark .empty_three_canvas,
body.new_preuploader.manual_pipeline.theme-dark #three_canvas {
    border: 3px solid var(--np-border-color);   /* 0.4vh outset */
    border-color: var(--np-bevel-colors);
}
body.new_preuploader.manual_pipeline.theme-dark .common_button,
body.new_preuploader.manual_pipeline.theme-dark .option_close_button {
    border: 2px solid var(--np-border-color);   /* 0.3vh / 0.2rem outset */
    border-color: var(--np-bevel-colors);
}
body.new_preuploader.manual_pipeline.theme-dark .execute_button_layout,
body.new_preuploader.manual_pipeline.theme-dark .progress_area,
body.new_preuploader.manual_pipeline.theme-dark .preuploaded_select {
    border: 3px solid var(--np-border-color);   /* 3px / 0.4vh inset */
    border-color: var(--np-bevel-colors-inset);
}

/* --------------------------------------------------------------------------
   実行中スロットの進捗表示 (dataset_sfm.js DatasetProgressDisplay)
   上段: スピナー + 工程名 + Running...   下段: % + セグメントバー
   バーは縦長の小さな角丸セグメント (PROGRESS_SEGMENT_COUNT = 100 個) を横に
   並べたもの。幅はセグメント寸法から決まる: 100 × 2px + 99 × 1px gap = 299px
   (スマホ幅でも収まる)。1 目盛りの横幅は画面幅によらず 2px で統一
   -------------------------------------------------------------------------- */
body.new_preuploader.manual_pipeline .progress_area.mp_progress_area {
    box-sizing: border-box;
    padding: 0.5rem 0.7rem;
}
body.new_preuploader.manual_pipeline .mp_progress {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    /* 上段のサークルの箱と下段の % の箱の幅 (そろえて、工程名の左端をバーの
       左端に合わせる) */
    --mp-progress-lead: 3.2em;
}
body.new_preuploader.manual_pipeline .mp_progress_head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}
/* サークルの箱: 真下の % の箱と同じ幅で、% と同じく右寄せ。右の間隔も下段の
   gap (0.6rem) にそろえる (上段の gap 0.5rem + 0.1rem) */
body.new_preuploader.manual_pipeline .mp_progress_spinner_box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-shrink: 0;
    width: var(--mp-progress-lead);
    margin-right: 0.1rem;
}
body.new_preuploader.manual_pipeline .mp_progress_spinner {
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid var(--mp-progress-spinner-track);
    border-top-color: var(--mp-progress-fill);
    animation: mp_spin 0.9s linear infinite;
}
@keyframes mp_spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    body.new_preuploader.manual_pipeline .mp_progress_spinner {
        animation: none;
    }
}
body.new_preuploader.manual_pipeline .mp_progress_step {
    font-weight: 600;
    color: var(--mp-progress-step-text);
}
body.new_preuploader.manual_pipeline .mp_progress_running {
    color: var(--mp-progress-running-text);
    font-size: 0.9em;
}
/* 実行時オプションの i アイコン (RunOptionsInfo) は Running... の行の右端。
   ツールチップは右端揃え (np_run_options_wrap_right) で進捗の箱の内側へ
   左に伸びる。カメラ位置推定の途中のチェックの警告 (黄色の !) は i の左に並べる */
body.new_preuploader.manual_pipeline .mp_progress_head > .np_run_options_wrap,
body.new_preuploader.manual_pipeline .mp_progress_head > .mp_progress_warning_tip {
    margin-left: auto;
    padding-left: 0.3rem;
}
body.new_preuploader.manual_pipeline .mp_progress_head > .mp_progress_warning_tip
    + .np_run_options_wrap {
    margin-left: 0;
}
body.new_preuploader.manual_pipeline .mp_progress_body {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
body.new_preuploader.manual_pipeline .mp_progress_percent {
    min-width: var(--mp-progress-lead);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--mp-text);
}
/* フル run は % の左にバーの名前 (Total / Step)。% の箱は 100% が収まる幅まで詰め、上段の
   サークルの箱を名前の分だけ広げて、工程名の左端をバーの左端に合わせたままにする */
body.new_preuploader.manual_pipeline .mp_progress_two_bars {
    --mp-progress-lead: 2.6em;
    --mp-progress-name: 2.5em;
}
body.new_preuploader.manual_pipeline .mp_progress_two_bars .mp_progress_spinner_box {
    width: calc(var(--mp-progress-name) + 0.3rem + var(--mp-progress-lead));
}
body.new_preuploader.manual_pipeline .mp_progress_name {
    flex-shrink: 0;
    width: var(--mp-progress-name);
    margin-right: -0.3rem;
    white-space: nowrap;
    color: var(--mp-text);
}
body.new_preuploader.manual_pipeline .mp_progress_bar {
    display: flex;
    align-items: stretch;
    gap: 1px;
    width: fit-content;
    height: 12px;
}
body.new_preuploader.manual_pipeline .mp_progress_segment {
    flex: 0 0 auto;
    width: 2px;
    border-radius: 1px;
    background: var(--mp-progress-track);
    transition: background-color 200ms linear;
}
body.new_preuploader.manual_pipeline .mp_progress_segment_filled {
    background: var(--mp-progress-fill);
}
/* カメラ位置推定の結果の失敗疑いの警告 (SfmResultWarning)。ダウンロード行の
   下に "Warning" と黄色の ! のツールチップ (WarningTip) を中央に並べる */
body.new_preuploader.manual_pipeline .mp_slot_warning {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.35rem 0 0;
}
@media (max-width: 880px) {
    body.new_preuploader.manual_pipeline .progress_area.mp_progress_area {
        margin: 0.8rem auto;
    }
}
/* 狭いスマホ (≤480px): % を横に置くと箱が 388px になり 390px 幅で端に
   張り付くため、% をバーの上に積む (箱 ≈ 327px) */
@media (max-width: 480px) {
    body.new_preuploader.manual_pipeline .mp_progress_body {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    body.new_preuploader.manual_pipeline .mp_progress_percent {
        min-width: 0;
        text-align: left;
    }
    /* % をバーの上に積む間は、サークルも % と同じく左端に置く */
    body.new_preuploader.manual_pipeline .mp_progress_spinner_box,
    body.new_preuploader.manual_pipeline .mp_progress_two_bars .mp_progress_spinner_box {
        width: auto;
        margin-right: 0;
    }
    /* フル run の名前は % と同じ行 (バーの上)。箱の幅はバーのまま */
    body.new_preuploader.manual_pipeline .mp_progress_two_bars .mp_progress_body {
        display: grid;
        grid-template-columns: auto auto 1fr;
        align-items: center;
        gap: 0.25rem 0.3rem;
    }
    body.new_preuploader.manual_pipeline .mp_progress_name {
        margin-right: 0;
    }
    body.new_preuploader.manual_pipeline .mp_progress_two_bars .mp_progress_bar {
        grid-column: 1 / -1;
    }
}

/* --------------------------------------------------------------------------
   ステップ run の価格 (実行ボタン上の行と確認ダイアログ)。見積のある run は
   Price の下の行に Cancellation fee cap を置く (フル run の料金の表示と同じ形)
   -------------------------------------------------------------------------- */
body.new_preuploader.manual_pipeline .stage_price_row {
    flex-wrap: wrap;
    white-space: normal;
    max-width: 320px;
}
/* 確認ダイアログの価格行はタイトル・Run/Cancel と同じく中央に置く
   (実行ボタン上の行 stage_price_row は工程列の左寄せのまま)。価格欄は
   見積中 (Estimating…) の幅を下限として確保するので、確保幅の方が広くなった
   ときに中身が左に寄らないよう価格の表示と Cancellation fee cap・根拠も中央に置く */
body.new_preuploader.manual_pipeline .stage_price_dialog_row {
    flex-wrap: wrap;
    justify-content: center;
}
body.new_preuploader.manual_pipeline .stage_price_dialog_row
    .stage_price_amount {
    justify-content: center;
}
body.new_preuploader.manual_pipeline .stage_price_dialog_row
    .stage_price_staff_detail {
    justify-content: center;
}
/* Price の行とその下の Cancellation fee cap の行。幅は長い方の Price の行で決まるので、見積を取り直す間の
   Estimating… と欄 (execute_button_layout は fit-content) の幅が変わらない */
body.new_preuploader.manual_pipeline .stage_price_lines {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 0.4rem;
}
body.new_preuploader.manual_pipeline .stage_price_dialog_row .stage_price_lines {
    align-items: center;
    row-gap: 0.6rem;
}
/* Cancellation fee cap の行 (部品はフル run と同じ。new_preuploader.css の .np_run_usage_cap)。Price と同じく
   値は名前のすぐ右。工程の欄は Price の文字が小さいので、それに合わせて小さく */
body.new_preuploader.manual_pipeline .stage_price_usage_cap {
    display: flex;
    align-items: center;
    column-gap: 0.6rem;
    margin-top: 0;
}
body.new_preuploader.manual_pipeline .stage_price_row .stage_price_usage_cap {
    font-size: 0.8rem;
}
body.new_preuploader.manual_pipeline .stage_price_usage_cap .np_run_usage_cap_value {
    margin-left: 0;
}
/* 価格〜画質〜切替ボタンの 1 行目。狭い幅でも折り返さない */
body.new_preuploader.manual_pipeline .stage_price_main {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 0.6rem;
    max-width: none;
}
/* 画質の表示 (":" 区切り) と切替ボタン。High Quality は色を変えて目立たせる */
body.new_preuploader.manual_pipeline .stage_price_sep {
    color: var(--mp-text-soft);
}
/* 価格欄 (Price $x) と見積中表示 (スピナー + Estimating…) の幅を揃える。
   高さ 0 の不可視の擬似要素に Estimating… (data-sizer) を置き、スピナー
   1rem + 間隔 0.5rem 分を padding で足して、見積中と同じ幅を常に確保する */
body.new_preuploader.manual_pipeline .stage_price_amount {
    display: inline-flex;
    flex-direction: column;
    white-space: nowrap;
}
body.new_preuploader.manual_pipeline .stage_price_amount::after {
    content: attr(data-sizer);
    height: 0;
    overflow: hidden;
    visibility: hidden;
    padding-left: 1.5rem;
    font-size: 0.9rem;
}
body.new_preuploader.manual_pipeline .stage_price_amount_body {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
/* 画質名の幅は Normal / High のうち長い方に固定し、切替で周りの枠
   (execute_button_layout は fit-content) の幅が変わらないようにする。
   両方の名前を高さ 0 の不可視の擬似要素 (data-sizer-*) で並べて幅だけ確保 */
body.new_preuploader.manual_pipeline .stage_price_quality {
    display: inline-flex;
    flex-direction: column;
    font-weight: 600;
    white-space: nowrap;
}
body.new_preuploader.manual_pipeline .stage_price_quality::before,
body.new_preuploader.manual_pipeline .stage_price_quality::after {
    height: 0;
    overflow: hidden;
    visibility: hidden;
}
body.new_preuploader.manual_pipeline .stage_price_quality::before {
    content: attr(data-sizer-normal);
}
body.new_preuploader.manual_pipeline .stage_price_quality::after {
    content: attr(data-sizer-high);
}
body.new_preuploader.manual_pipeline .stage_price_quality_high {
    color: var(--mp-quality-high);
}
/* 画質の切替はオン・オフスイッチ (オン = High Quality: 右寄せノブ + 強調色の
   トラック / オフ = Normal Quality: 左寄せノブ + 薄いトラック)。
   トラックはデータセット選択 (preuploaded_select) や実行パネルと同じ窪んだ
   縁 (ライト: inset / ダーク: solid + --np-bevel-colors-inset) + 内側の影、
   ノブは --mp-quality-knob-bg: トラックをマスクでノブの形にくり抜いて下の
   画面背景を見せ、その上にトラックの外 (button 直下) のノブ要素を重ねる。
   ライトは実行ボタンと同じ半透明色で、実行ボタンも画面背景に同じ色を重ねた
   見た目なので同じ色になる。ダークは背景・トラックとも暗くノブが埋もれる
   ため、不透明の明るい色に切り替える (トークンの定義を参照)。
   くり抜きとノブの中心 x は --mp-knob-x (button = トラックの border-box 基準)
   で共有し、@property で補間してノブと一緒に動かす。マスクは button ではなく
   トラックに掛け、button のフォーカス枠とノブが消えないようにする */
@property --mp-knob-x {
    syntax: '<length>';
    inherits: true;
    initial-value: 0px;
}
body.new_preuploader.manual_pipeline .stage_price_quality_switch {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    line-height: 0;
    cursor: pointer;
    /* ノブ中心 = 縁 2px + 余白 0.1rem + 半径 0.36rem (オンは右端から同じだけ) */
    --mp-knob-x: calc(2px + 0.46rem);
    transition: --mp-knob-x 0.15s ease;
}
body.new_preuploader.manual_pipeline .stage_price_quality_switch_on {
    --mp-knob-x: calc(2rem - 2px - 0.46rem);
}
body.new_preuploader.manual_pipeline .stage_price_quality_switch_track {
    display: block;
    position: relative;
    box-sizing: border-box;
    width: 2rem;
    height: 1.1rem;
    border: 2px inset var(--np-border-color);
    border-radius: 999px;
    background: var(--mp-progress-track);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
    -webkit-mask-image: radial-gradient(circle 0.36rem at var(--mp-knob-x) 50%,
                                        transparent 0.36rem,
                                        #000 calc(0.36rem + 0.5px));
    mask-image: radial-gradient(circle 0.36rem at var(--mp-knob-x) 50%,
                                transparent 0.36rem,
                                #000 calc(0.36rem + 0.5px));
    transition: background-color 0.15s ease;
}
body.new_preuploader.manual_pipeline.theme-dark .stage_price_quality_switch_track {
    border-style: solid;
    border-color: var(--np-bevel-colors-inset);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}
/* オンのトラックは強調色を半透明にして背景を透かす
   (割合はライト 55% / ダーク 75%、--mp-quality-switch-on-mix) */
body.new_preuploader.manual_pipeline .stage_price_quality_switch_on
    .stage_price_quality_switch_track {
    background: color-mix(in srgb, var(--mp-quality-high)
                          var(--mp-quality-switch-on-mix), transparent);
}
body.new_preuploader.manual_pipeline .stage_price_quality_switch_knob {
    position: absolute;
    top: calc(50% - 0.36rem);
    /* button は枠なしなので button 基準の位置 = トラックの border-box 基準 */
    left: calc(var(--mp-knob-x) - 0.36rem);
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 50%;
    background-color: var(--mp-quality-knob-bg);
    box-shadow: var(--mp-quality-knob-shadow);
}
body.new_preuploader.manual_pipeline .stage_price_quality_switch:focus-visible {
    outline: 2px solid var(--np-accent);
    outline-offset: 2px;
}
body.new_preuploader.manual_pipeline .np_run_price_value {
    color: var(--mp-price);
}
body.new_preuploader.manual_pipeline .stage_price_quality_switch:disabled {
    opacity: 0.5;
    cursor: default;
}
/* staff 限定の見積根拠 (予測時間 / 単価 / 積)。Cancellation fee cap の下に薄く */
body.new_preuploader.manual_pipeline .stage_price_staff_detail {
    flex-basis: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.8rem;
    font-size: 0.75rem;
    color: var(--mp-text-soft);
    opacity: 0.8;
}
body.new_preuploader.manual_pipeline .stage_price_over_limit {
    color: var(--mp-error);
    font-size: 0.85rem;
    white-space: normal;
}

/* --------------------------------------------------------------------------
   オプションダイアログ下部の見積もり＋実行ボタン (StageDialogRunFooter)。
   設定を見ながらそのまま実行へ進むための行で、Next は実行確認ダイアログを開く。
   枠・ボタンの形は single.css 側。ここでは配色だけをテーマに合わせる
   -------------------------------------------------------------------------- */
body.new_preuploader.manual_pipeline .option_dialog_run_footer {
    border-top-color: rgba(0, 0, 0, 0.2);
}
/* ライトのオプションダイアログは地色が青 (#56a8ef。single.css) で、ページ上の
   価格色 (--mp-price #173cff) だと沈むため、ダイアログ内だけ濃紺に置き換える */
body.new_preuploader.manual_pipeline .option_dialog_run_footer
    .np_run_price_value {
    color: #08205c;
}
body.new_preuploader.manual_pipeline .option_dialog_run_footer
    .stage_price_quality_high {
    color: #08205c;
}
/* 工程の実行の確認などのダイアログ (np_dialog) もライトはオプションダイアログと同じ青い地
   (new_preuploader.css。金額は同じ濃紺) なので、High Resolution の名前も同じ濃紺に */
body.new_preuploader.manual_pipeline:not(.theme-dark) dialog.np_dialog
    .stage_price_quality_high {
    color: #08205c;
}
/* ダークはダイアログ地色が --np-dialog-bg なのでページ上と同じ配色で読める */
body.new_preuploader.manual_pipeline.theme-dark .option_dialog_run_footer {
    border-top: 3px solid var(--np-border-color);   /* 3px outset の置き換え */
    border-color: var(--np-bevel-colors);
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
}
body.new_preuploader.manual_pipeline.theme-dark .option_dialog_run_footer
    .np_run_price_value,
body.new_preuploader.manual_pipeline.theme-dark .option_dialog_run_footer
    .stage_price_quality_high {
    color: var(--mp-price);
}
/* 狭いスマホ (≤480px): ダイアログは画面幅の 75% で、価格〜画質名〜切替スイッチを
   1 行に並べると (画質名 Standard Resolution で約 350px) 390px 幅でも左右が
   切れる。価格の下に画質名とスイッチを積み、区切りの ":" は隠す (確認ダイアログ
   はスイッチが無く 1 行に収まるのでそのまま) */
@media (max-width: 480px) {
    body.new_preuploader.manual_pipeline .option_dialog_run_footer .stage_price_main {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 0.25rem;
    }
    body.new_preuploader.manual_pipeline .option_dialog_run_footer .stage_price_amount {
        flex-basis: 100%;
        align-items: center;
    }
    body.new_preuploader.manual_pipeline .option_dialog_run_footer .stage_price_sep {
        display: none;
    }
}

/* オプションのチェックボックス (OptionCheckbox)。ダークは枠の地色を
   ダイアログに馴染む暗色にし、チェックマークは明るめの青で読めるようにする */
body.new_preuploader.manual_pipeline.theme-dark .option_check_box {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.55);
}
/* ダークのチェックマークは枠から右上へはみ出す大きさ (2026-09-19 の指定の
   まま。ライトと旧 "/" は single.css の通常の大きさ) */
body.new_preuploader.manual_pipeline.theme-dark .option_check {
    gap: 0.7rem;   /* はみ出したチェックマークが文字に掛からない幅 */
}
body.new_preuploader.manual_pipeline.theme-dark
    .option_check_input:checked + .option_check_box::after {
    left: 0.32rem;
    top: -0.42rem;
    width: 0.42rem;
    height: 1rem;
    border-width: 0 0.2rem 0.2rem 0;
    border-radius: 0 0 2px 0;
    border-color: #60a5fa;
}

/* --------------------------------------------------------------------------
   ライトのオプションダイアログ内のラジオボタン・チェックボックス。
   既定の白い見た目をやめ、地のグラデーションより少し暗い青にする。半透明の
   濃い青を重ねるので、グラデーションのどの高さでも「その場所の背景より少し
   暗い青」になる。印 (ラジオの点・チェックマーク) は白。
   素の input は appearance: none で描き直す (色を変えられるのは accent-color の
   オン時だけで、オフ時の白地は変えられないため)。描き直すと基線がマージン
   下端になり位置がずれるので、vertical-align で元の位置 (文字の中央) に戻す。
   ダークは color-scheme: dark の既定の見た目のまま
   -------------------------------------------------------------------------- */
body.new_preuploader.manual_pipeline:not(.theme-dark) {
    /* 色は /workspace などのダイアログ (new_preuploader.css の dialog.np_dialog) と共通 */
    --mp-option-control-bg: var(--np-option-control-bg);
    --mp-option-control-border: var(--np-option-control-border);
    --mp-option-control-mark: var(--np-option-control-mark);
}
body.new_preuploader.manual_pipeline:not(.theme-dark)
    :is(dialog.option_dialog, dialog.mesh_option_dialog)
    :is(input[type="radio"], input[type="checkbox"]):not(.option_check_input) {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--mp-option-control-border);
    background: var(--mp-option-control-bg);
    cursor: pointer;
}
body.new_preuploader.manual_pipeline:not(.theme-dark)
    :is(dialog.option_dialog, dialog.mesh_option_dialog)
    input[type="radio"] {
    /* ラベル (inline-flex / flex) の中央に置く */
    align-self: center;
    margin: 0 0.3rem 0 0.3rem;
    border-radius: 50%;
}
body.new_preuploader.manual_pipeline:not(.theme-dark)
    :is(dialog.option_dialog, dialog.mesh_option_dialog)
    input[type="radio"]:checked {
    background-image: radial-gradient(circle closest-side,
        var(--mp-option-control-mark) 0 44%, transparent 50%);
}
body.new_preuploader.manual_pipeline:not(.theme-dark)
    :is(dialog.option_dialog, dialog.mesh_option_dialog)
    input[type="checkbox"]:not(.option_check_input) {
    border-radius: 3px;
    /* 既定の右マージン 3px だと、大きくなった枠に文字が近すぎる */
    margin-right: 0.4rem;
    /* 基線 = マージン下端。文字の中央に合わせて下げる */
    vertical-align: -1.5px;
}
body.new_preuploader.manual_pipeline:not(.theme-dark)
    :is(dialog.option_dialog, dialog.mesh_option_dialog)
    input[type="checkbox"].option_inline_checkbox {
    margin-right: 0.5rem;
    /* margin-bottom 0.5rem の分だけ基線が下がっているので、その分も下げる */
    vertical-align: calc(-0.5rem - 1.5px);
}
body.new_preuploader.manual_pipeline:not(.theme-dark)
    :is(dialog.option_dialog, dialog.mesh_option_dialog)
    input[type="checkbox"]:not(.option_check_input):checked::before {
    content: "";
    position: absolute;
    left: 0.3rem;
    top: 0.06rem;
    width: 0.28rem;
    height: 0.56rem;
    border: solid var(--mp-option-control-mark);
    border-width: 0 0.16rem 0.16rem 0;
    transform: rotate(45deg);
}
body.new_preuploader.manual_pipeline:not(.theme-dark)
    :is(dialog.option_dialog, dialog.mesh_option_dialog)
    :is(input[type="radio"], input[type="checkbox"]):not(.option_check_input):disabled {
    opacity: 0.5;
    cursor: default;
}
body.new_preuploader.manual_pipeline:not(.theme-dark)
    :is(dialog.option_dialog, dialog.mesh_option_dialog)
    :is(input[type="radio"], input[type="checkbox"]):focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 1px;
}
/* 上部 2 項目 (OptionCheckbox) も同じ配色 */
body.new_preuploader.manual_pipeline:not(.theme-dark) .option_check_box {
    border-color: var(--mp-option-control-border);
    background: var(--mp-option-control-bg);
}
body.new_preuploader.manual_pipeline:not(.theme-dark)
    .option_check_input:checked + .option_check_box::after {
    border-color: var(--mp-option-control-mark);
}
body.new_preuploader.manual_pipeline:not(.theme-dark)
    .option_check_input:focus-visible + .option_check_box {
    outline-color: rgba(255, 255, 255, 0.9);
}
/* オプションダイアログの地色はグラデーション。ダークは画面全体の背景と同じ
   (--np-page-bg #0b1220→#1e3559)、ライトはダイアログの中だけ画面の背景
   (#2c72ff→#99c2bc) より明るい専用の色 (#538cff→#81caff。2026-10-24 ユーザー指示で
   #4782f9→#aac2c7 から変更。/workspace のフル run などと共通の new_preuploader.css の
   --np-bright-dialog-bg)。コマンドごとの小工程の枠はごく薄い黒だけを重ねる (single.css) */
body.new_preuploader.manual_pipeline {
    --mp-option-dialog-bg: var(--np-bright-dialog-bg);
}
body.new_preuploader.manual_pipeline.theme-dark {
    --mp-option-dialog-bg: var(--np-page-bg);
}
body.new_preuploader.manual_pipeline dialog.option_dialog,
body.new_preuploader.manual_pipeline dialog.mesh_option_dialog {
    background: var(--mp-option-dialog-bg);
    /* 縁 (single.css の outset 枠) は上辺が明るく下辺が暗くなって地色から
       浮くので、地のグラデーションをそのまま透かす。グラデーションは縁を
       含めた全体に伸ばす (既定の padding-box 起点だと縁に端の色が伸びて
       上辺・下辺だけ色が変わる) */
    border-color: transparent;
    background-origin: border-box;
}
/* SfM エンジンのタブ (single.css の .option_tabs)。ダークは他の枠と同じく
   solid + 明暗 2 色で立体縁を描く */
body.new_preuploader.manual_pipeline.theme-dark .option_tabs {
    --ot-style: solid;
    --ot-style-inv: solid;
    --ot-light: var(--np-border-color);
    --ot-dark: var(--np-border-shade);
}
body.new_preuploader.manual_pipeline.theme-dark .option_step {
    border: 3px solid var(--np-border-color);   /* 3px inset の置き換え */
    border-color: var(--np-bevel-colors-inset);
}
body.new_preuploader.manual_pipeline.theme-dark .option_step_arrow {
    color: var(--mp-text-soft);
}
body.new_preuploader.manual_pipeline.theme-dark .option_divider {
    border: 3px solid var(--np-border-color);   /* 3px outset の置き換え */
    border-color: var(--np-bevel-colors);
}

/* オプションダイアログ一番上のリセット行。見た目は Close ボタンに揃える
   (角丸・ベベル・ダークの配色は .option_close_button と同じ扱い) */
body.new_preuploader.manual_pipeline .option_reset_button {
    border-radius: 7px;
}
body.new_preuploader.manual_pipeline.theme-dark .option_reset_button {
    background-color: var(--mp-button-bg);
    color: var(--np-dialog-text);
    border: 2px solid var(--np-border-color);
    border-color: var(--np-bevel-colors);
}

/* --------------------------------------------------------------------------
   サーバー指定 (staff 限定): 実行ボタン右の小さなボタン (StageServerButton)
   と、押すと開くダイアログ (StageServerDialog)。ボタンの形・配色は実行ボタン
   と同じ common_button (角 7px・ダークはベベル縁) を一回り小さくしたもの。
   タイプを指定している間はタイプ名を並べ、価格と同じ色で目立たせる
   -------------------------------------------------------------------------- */
body.new_preuploader.manual_pipeline .stage_exec_row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
body.new_preuploader.manual_pipeline .stage_server_button {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    box-sizing: border-box;
    height: 1.6rem;
    min-width: 1.6rem;
    padding: 0 0.3rem;
    font-size: 0.75rem;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}
body.new_preuploader.manual_pipeline .stage_server_button svg {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
}
body.new_preuploader.manual_pipeline .common_button.stage_server_button_set {
    color: var(--mp-price);
    font-weight: 600;
}
body.new_preuploader.manual_pipeline .stage_server_button:disabled {
    cursor: default;
}
/* ダイアログのドロップダウン。選択肢 (タイプ · メモリ · 時間単価) が長いので
   ラベルの下にダイアログ幅いっぱいで置く */
body.new_preuploader.manual_pipeline .np_convert_field.stage_server_field {
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
}
body.new_preuploader.manual_pipeline .stage_server_field .np_convert_field_label {
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.75;
}
body.new_preuploader.manual_pipeline .np_convert_field.stage_server_field select {
    width: 100%;
    min-width: 0;
}
/* 実行確認ダイアログの「Server: タイプ」(指定中だけ出る) */
body.new_preuploader.manual_pipeline .stage_server_confirm {
    margin-top: 0.4rem;
}
/* 実行確認ダイアログの、既定から変えたオプションの一覧 (StageRunOptionList。見た目は
   /workspace の実行の確認の一覧 np_run_confirm_items と同じ)。項目名が長く折り返すので、
   2 行目以降を字下げして項目の区切りを分かるようにする */
body.new_preuploader.manual_pipeline .stage_run_options li {
    padding-left: 1em;
    text-indent: -1em;
}

/* 止めると課金される run を止めるときの課金の注記 (Cancel の下)。短いラベルと
   ? のツールチップ (NoteTip) */
body.new_preuploader.manual_pipeline .dataset_cancel_charge_note {
    max-width: 26rem;
    margin: 0.4rem auto 0;
    font-size: 0.85rem;
    line-height: 1.35;
    text-align: center;
    color: var(--np-text-dim);
}