/* ==========================================================================
   new_preuploader.css — /workspace (upload + process page)
   Loaded AFTER single.css. Every rule is scoped under body.new_preuploader so
   the original pages are untouched and specificity beats single.css.
   Light theme: the blue gradient used on '/' and '/profile'.
   Dark theme (body.theme-dark).
   CSP: style-src 'self' — keep all styles in this file, no inline styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
body.new_preuploader {
    /* light (default) — same values as single.css :root */
    --np-page-bg: linear-gradient(#2c72ff, #99c2bc);
    /* データセット行・キャンバス・ヘッダーのバッジ類に共通の下地。ライトは
       画面背景に白を薄く重ねる (アルファ 0.06 はユーザー指定) */
    --np-row-bg: rgba(255, 255, 255, 0.06);
    /* パネル/行の枠色。ダーク対応の各ページ (manual_pipeline / profile /
       viewer / notation_for_law) もこの色を参照する */
    --np-border-color: #95b1df3b;
    /* 幅は vh ではなく px 固定 (スマホは URL バーの出没で vh が変わり、
       高 DPI では線が消えるため)。PC の 0.4vh ≒ 3.6px 相当 */
    --np-row-border: 3px outset var(--np-border-color);
    /* ライトは outset のままなので明暗 4 辺とも同色 (ダークで上書き) */
    --np-bevel-colors: var(--np-border-color);
    --np-bevel-colors-inset: var(--np-border-color);
    --np-control-border: 1px solid #95b1df80;
    --np-text: #ffffff;
    --np-text-soft: #e8eefb;
    --np-text-dim: #c6d4ee;
    --np-title: #093088;
    --np-accent: #1764ff;
    --np-accent-contrast: #ffffff;
    --np-dialog-bg: #f4f8ff;
    --np-dialog-text: #1c2f55;
    --np-dialog-dim: #5c6f96;
    --np-dialog-border: 3px outset #95b1df3b;
    /* ツールチップの ? の丸と ? の色。テーマごとに、どのページ・ダイアログでも同じ色にする
       (2026-10-24 ユーザー指示)。値はページの --np-dialog-dim / --np-dialog-bg と同じだが、
       ダイアログの中で上書きする --np-dialog-dim とは切り離す */
    --np-qmark-bg: #5c6f96;
    --np-qmark-fg: #f4f8ff;
    --np-badge-bg: #ff5252;
    --np-thumb-bg: rgba(0, 0, 0, 0.22);
    --np-connector: rgba(255, 255, 255, 0.65);
    --np-disabled-opacity: 0.35;
    --np-radius: 10px;
    /* 実行中の行の進捗バー (.np_progress_*)。/manual_pipeline の進捗バー
       (manual_pipeline.css の --mp-progress-fill / track) と同じ色 */
    --np-progress-fill: var(--np-accent);
    --np-progress-track: rgba(2, 18, 53, 0.14);
    /* 文字に使うアクセント色。ライトは --np-accent だと青の画面背景に沈むので、より濃い青
       (/manual_pipeline の価格 manual_pipeline.css の --mp-price と同じ色)。使う所は
       実行中・完了のチップの文言 (.np_status_running / _done。チップの枠は --np-accent
       のまま)、/manual_pipeline の実行中スロットの工程名と Running... (ライトだけ)、
       /conversion の残りの保存期間の日数 (2026-10-23・24 ユーザー指示) */
    --np-accent-text: #173cff;
    /* 一覧の読み込み中のローディングサークル (.np_list_loading) の弧と下地の輪の色。
       ライトは青のページ背景に沈まない濃い青 (背景とのコントラスト比 3:1)、ダークは水色 */
    --np-loading-ring: #093088;
    --np-loading-ring-track: rgba(9, 48, 136, 0.2);
    /* ヘッダーの料金グラフ (price_chart.js の canvas が描くときに読む。変えたらダイアログを開き直すか
       写真/動画を切り替えると描き直す): 床と奥の面・目盛の線・点の印 */
    --np-chart-pane: #07070700;
    --np-chart-grid: #2c2c2ebb;
    --np-chart-mark: #e8622c;
    /* ダイアログの地 (ライト)。ヘッダーの料金グラフ以外は全部 /workspace のフル run のダイアログと同じ
       明るいグラデーション --np-bright-dialog-bg (2026-11-05 ユーザー指示。/3d_viewer と、/manual_pipeline の
       オプションダイアログ (manual_pipeline.css の --mp-option-dialog-bg) も。登録ページのダイアログ (auth.css)
       も同じ色を直に書いている)。10/23〜11/04 は元のオプションダイアログの色 (#4782f9→#aac2c7) のダイアログと
       混在していた。料金グラフは下端を #96c6d1 にした --np-chart-dialog-bg のまま (Price chart dialog の節) */
    --np-chart-dialog-bg: linear-gradient(#4782f9, #96c6d1);
    --np-bright-dialog-bg: linear-gradient(#538cff, #81caff);
    /* 面の金額の帯の色 (下から。等高線 $1・$5・$10・$50・$100・$150・$200 で区切る。どちらのテーマでも
       同じ色。CSS の色ならどの書き方でもよい。透明度は使わず、面全体の不透明度は --np-chart-band-alpha) */
    --np-chart-band-1: #2474ff; /* $1 以下 */
    --np-chart-band-2: #22d3ee; /* $5 まで */
    --np-chart-band-3: #00c75b; /* $10 まで */
    --np-chart-band-4: #f5f227; /* $50 まで */
    --np-chart-band-5: #f5b11f; /* $100 まで */
    --np-chart-band-6: #e0403a; /* $150 まで */
    --np-chart-band-7: #8b4fd0; /* $200 まで */
    --np-chart-band-8: #ffffff; /* $200 より上 */
    --np-chart-band-alpha: 1.0;
}
body.new_preuploader.theme-dark {
    /* dark */
    /* ライトと同じく下側がわずかに明るくなる縦グラデーション。
       終端は不透明色にする (半透明だと下に重なる層次第で色が変わり、
       background-attachment: fixed が効かない Android Chrome で PC と
       見え方が変わる。#1e3559 は旧 #213a61a3 の PC での合成結果) */
    --np-page-bg: linear-gradient(#0b1220, #1e3559);
    --np-row-bg: #131c2e;
    /* ライトと同じ立体縁 (outset 相当) だが、outset の暗い側の色は
       ブラウザが自動生成する (Blink は暗色をほぼ黒に落とす) ので、
       solid + 4 辺の明暗を明示色で描き、環境差を出さない */
    --np-border-color: #273b58;
    --np-border-shade: #0b1220;
    --np-row-border: 3px solid var(--np-border-color);
    --np-bevel-colors: var(--np-border-color) var(--np-border-shade)
                       var(--np-border-shade) var(--np-border-color);
    --np-bevel-colors-inset: var(--np-border-shade) var(--np-border-color)
                             var(--np-border-color) var(--np-border-shade);
    --np-control-border: 1px solid rgba(148, 163, 184, 0.30);
    --np-text: #e2e8f0;
    --np-text-soft: #9fb0c8;
    --np-text-dim: #64748b;
    --np-title: #e2e8f0;
    --np-accent: #22d3ee;
    --np-accent-contrast: #062a33;
    --np-dialog-bg: #131c2e;
    --np-dialog-text: #e2e8f0;
    --np-dialog-dim: #9fb0c8;
    --np-dialog-border: 1px solid rgba(148, 163, 184, 0.30);
    --np-qmark-bg: #9fb0c8;
    --np-qmark-fg: #131c2e;
    --np-badge-bg: #f43f5e;
    --np-thumb-bg: rgba(0, 0, 0, 0.45);
    --np-connector: rgba(148, 163, 184, 0.55);
    --np-progress-track: rgba(255, 255, 255, 0.12);
    --np-accent-text: var(--np-accent);
    --np-loading-ring: #38bdf8;
    --np-loading-ring-track: rgba(56, 189, 248, 0.18);
    --np-chart-pane: #182338;
    --np-chart-grid: #2a3a55;
    --np-chart-mark: #f08a4b;
    --np-chart-dialog-bg: var(--np-dialog-bg);
    /* 暗い下地に透かすと黄・オレンジが濁る (オリーブ・茶色に見える) ので、ライトより不透明に */
    --np-chart-band-alpha: 0.75;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
/* Chrome (Android) の自動ダーク化の対象外にするため、ルート要素にも
   color-scheme を宣言する (テンプレートの起動スクリプトと useTheme が
   html にも theme-dark を付ける) */
html.theme-dark {
    color-scheme: dark;
}
/* 単色の下地 (グラデーションは ::before の固定レイヤーが描く)。
   ライトはグラデーション上端色、ダークはページ背景色 */
body.new_preuploader {
    background-image: none;
    background-color: #2c72ff;
    color: var(--np-text);
}
body.new_preuploader.theme-dark {
    background-color: #0b1220;
    color-scheme: dark;
    accent-color: var(--np-accent);
}
/* ページ背景のグラデーション。background-attachment: fixed は Android
   Chrome では無視され (文書全体に引き伸ばされる)、PC と見え方が変わる
   ため、position: fixed の擬似要素でビューポート固定を再現する。
   各ページのルート要素 (#new_preuploader_root / #sfm_root など) は
   background-image: none にしてこのレイヤーを透過させる */
body.new_preuploader::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: var(--np-page-bg);
    pointer-events: none;
}
body.new_preuploader #new_preuploader_root {
    width: 100%;
    min-height: 100vh;
    background-image: none;
}

/* --------------------------------------------------------------------------
   Header — navigation_wrapper + title + theme toggle + user name
   -------------------------------------------------------------------------- */
body.new_preuploader header {
    height: auto;
}
body.new_preuploader .np_header {
    display: flex;
    align-items: center;
    padding: 1rem 1rem 2.5rem;
}
/* ページ名。上にサイト名を置いた 2 段の下の段 (下の .np_brand)。2026-11-14 ユーザー指示「ページ名を
   一回り小さく」で 1.7rem → 1.45rem (縦長表示は 1.5rem → 1.3rem) */
body.new_preuploader .np_header #site_title {
    color: var(--np-title);
    font-size: 1.45rem;
    line-height: 1.15;
    /* 2 行に折り返したときもサイト名と左端をそろえる */
    text-align: left;
    padding-left: 0;
    padding-bottom: 0;
    margin: 0;
}
/* サイトのロゴと名前 (site_brand.js の SiteBrandTitle。2026-11-14 ユーザー指示、案 B)。メニューの右に
   ロゴ、その右に 2 段 (上に小さくサイト名、下にページ名)。ロゴの高さは 2 段の高さにそろえる。
   ロゴと名前は紹介ページへのリンク */
/* 1 行に収まらない幅 (操作の多い /manual_pipeline の 881〜920px ほど) では縮み、ページ名が 2 行に
   折り返す (ロゴを入れる前のページ名と同じ) */
body.new_preuploader .np_brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex: 0 1 auto;
    margin-left: 1.1rem;
}
body.new_preuploader .np_brand_logo_link {
    display: block;
    flex: 0 0 auto;
}
/* 背景は透明。ライト・ダークとも地にそのまま置く (紹介ページのヘッダーと同じ) */
body.new_preuploader .np_brand_logo {
    display: block;
    width: 2.6rem;
    height: 2.6rem;
}
body.new_preuploader .np_brand_text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
/* 紹介ページのヘッダーの名前と同じ書き方 (最初の語を太字。landing.css の .ld-brand-name) */
body.new_preuploader .np_brand_name {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.82rem;
    font-weight: 450;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--np-title);
    opacity: 0.85;
    text-decoration: none;
    white-space: nowrap;
}
body.new_preuploader .np_brand_name:hover {
    opacity: 1;
    text-decoration: underline;
}
body.new_preuploader .np_brand_name_first {
    font-weight: 800;
}
body.new_preuploader.theme-dark #user_name {
    color: var(--np-text);
}
body.new_preuploader.theme-dark #login_link {
    color: var(--np-accent);
}

/* theme toggle: pill with sun + moon, the active side is highlighted.
   Two auto margins (here and #user_login's margin-left:auto from single.css)
   place the pill midway between the title and the user name. */
body.new_preuploader .np_theme_toggle {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: auto;
    padding: 0.25rem;
    background: var(--np-row-bg);
    border: var(--np-control-border);
    border-radius: 999px;
    cursor: pointer;
}
/* 操作群 (支払い額 / 使い方 / User Log / テーマ) のラッパーと、その中の
   2 グループ (課金表示 = 保存データ総量 + 支払い額 / トグル群 = 使い方 +
   User Log + テーマ)。広幅では箱を作らず子をヘッダー flex に直接並べる
   (auto マージンや sibling セレクタは従来通り)。グループは縦長表示で
   1 行に収まらないときの折り返し単位 (<= 880px のブロック) */
body.new_preuploader .np_header_top,
body.new_preuploader .np_header_controls,
body.new_preuploader .np_header_billing,
body.new_preuploader .np_header_toggles {
    display: contents;
}
/* DOM 上はタイトル行ラッパー内 (操作群より前) にあるユーザー名を、広幅では
   従来通り末尾 (テーマトグルの右) に並べる */
body.new_preuploader .np_header #user_login {
    order: 1;
}
/* 操作群の先頭要素がタイトルとの間の空きを取る。/workspace では支払い額
   バッジ (margin-left:auto) がその役だが、バッジを出さないページ
   (/3d_viewer など) では使い方ボタンが先頭になるため共通化する。
   操作群の直下は display:contents のグループなので、先頭グループの先頭要素 */
body.new_preuploader .np_header_controls > :first-child > :first-child {
    margin-left: auto;
}
/* 課金対象の保存データ総量 (支払い額の左)。支払い額と同じピル型のボタン (np_storage_usage) と、
   その直下に出す内訳パネル (.np_storage_tip) の枠 (np_storage_usage_wrap)。枠が操作群の先頭要素として
   auto マージンでタイトルとの間の空きを取る。クリックしても /profile へは移らず、内訳を固定するだけ
   (2026-11-06 ユーザー指示) */
body.new_preuploader .np_storage_usage_wrap {
    position: relative;
    display: flex;
    margin-left: auto;
    margin-right: 0.6rem;
}
body.new_preuploader .np_storage_usage {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    box-sizing: content-box;
    min-height: 1.9rem;
    margin: 0;
    padding: 0.25rem 0.85rem 0.25rem 0.6rem;
    background: var(--np-row-bg);
    border: var(--np-control-border);
    border-radius: 999px;
    color: var(--np-title);
    /* 文字はボタンの既定 (normalize.css・single.css の button の指定) ではなく、リンクだったときと
       同じく周りから受け継ぐ */
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
}
body.new_preuploader .np_storage_usage:hover .np_storage_usage_icon {
    color: var(--np-title);
}
body.new_preuploader .np_storage_usage_icon {
    display: flex;
    align-items: center;
    color: var(--np-text-dim);
}
body.new_preuploader .np_storage_usage_icon svg {
    width: 1.45rem;
    height: 1.45rem;
    fill: currentColor;
}
body.new_preuploader .np_storage_usage_amount {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;
}
/* 内訳パネル: 1 日あたりの課金額 / ソース / 途中保存 / 出力 の 4 行と、その下の保管料の説明。
   バッジの右端に揃えて直下に出す (右寄せ操作群なので画面外にはみ出さない) */
body.new_preuploader .np_storage_tip {
    position: absolute;
    /* バッジ (リンク) の中に置いていたとき (バッジの枠線 1px の内側が基準) と同じ位置 */
    top: calc(100% + 0.45rem - 1px);
    right: 1px;
    z-index: 20;
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.3rem 1rem;
    padding: 0.6rem 0.85rem;
    /* 下の本文が透けないよう不透明なダイアログ色を使う (行の半透明色は不可) */
    background: var(--np-dialog-bg);
    border: 1px solid var(--np-border-color);
    border-radius: 0.6rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    color: var(--np-dialog-text);
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}
/* 開き方・閉じ方は全ツールチップ共通 (tooltip_toggle.js。バッジが丸の役): ホバー (ホバーできる端末
   だけ。バッジで閉じた直後は離れるまで出さない)・キーボードのフォーカス・バッジのクリック・タップ
   (np_tip_pinned) で出す。固定中・フォーカス中はクリックを受け止め、後ろへ通さない */
@media (hover: hover) {
    body.new_preuploader .np_storage_usage_wrap:not(.np_tip_dismissed):hover .np_storage_tip {
        visibility: visible;
        opacity: 1;
    }
}
body.new_preuploader .np_storage_usage:focus-visible + .np_storage_tip,
body.new_preuploader .np_storage_usage_wrap.np_tip_pinned .np_storage_tip {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
body.new_preuploader .np_storage_tip_row {
    display: contents;
}
body.new_preuploader .np_storage_tip_label {
    color: var(--np-dialog-dim);
}
body.new_preuploader .np_storage_tip_value {
    text-align: right;
    font-weight: 600;
}
/* Output data の下の保管料の説明。行より少し小さい文字の 1 行 (2026-11-05 ユーザー指示) */
body.new_preuploader .np_storage_tip_note {
    grid-column: 1 / -1;
    color: var(--np-dialog-dim);
    font-size: 0.8rem;
}
/* 今月の支払い額 (保存データ総量の右、使い方ボタンの左)。隣のトグルと同じ
   高さ・同じピル型で、当月分であることは文字ではなく月番号入りカレンダー
   アイコンで示す。タイトルとの間の auto マージンは先頭の保存データ総量が担う */
body.new_preuploader .np_month_charge {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    box-sizing: content-box;
    min-height: 1.9rem;
    margin-left: 0;
    margin-right: 1.1rem;
    padding: 0.25rem 0.85rem 0.25rem 0.6rem;
    background: var(--np-row-bg);
    border: var(--np-control-border);
    border-radius: 999px;
    color: var(--np-title);
    text-decoration: none;
    white-space: nowrap;
}
body.new_preuploader .np_month_charge:hover .np_month_charge_icon {
    color: var(--np-title);
}
body.new_preuploader .np_month_charge_icon {
    display: flex;
    align-items: center;
    color: var(--np-text-dim);
}
body.new_preuploader .np_month_charge_icon svg {
    width: 1.45rem;
    height: 1.45rem;
    fill: currentColor;
}
body.new_preuploader .np_month_charge_amount {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;
}
/* 料金グラフ / 使い方 / User Log の表示切替 (テーマトグルの左隣、同じピル型)。
   並び順は 支払い額 → 料金グラフ → 使い方 → User Log → テーマ */
body.new_preuploader .np_price_chart_toggle,
body.new_preuploader .np_howto_toggle,
body.new_preuploader .np_userlog_toggle {
    display: flex;
    align-items: center;
    margin-left: 0;
    padding: 0.25rem;
    background: var(--np-row-bg);
    border: var(--np-control-border);
    border-radius: 999px;
    cursor: pointer;
}
/* 先頭要素 (np_month_charge、無ければ使い方ボタン) が auto マージンを担うため、
   後続のトグルは固定間隔。User Log ボタンの無いページ (/3d_viewer) では
   使い方 → テーマの隣接になる */
body.new_preuploader .np_header .np_howto_toggle + .np_userlog_toggle,
body.new_preuploader .np_header .np_userlog_toggle + .np_theme_toggle,
body.new_preuploader .np_header .np_howto_toggle + .np_theme_toggle {
    margin-left: 0.6rem;
}
/* 料金グラフのボタンは、右隣が何 (使い方 / User Log / テーマ) でも同じ間隔になるよう
   sibling セレクタでなく自分の右マージンで取る */
body.new_preuploader .np_header .np_price_chart_toggle {
    margin-right: 0.6rem;
}
body.new_preuploader .np_price_chart_toggle .np_toggle_icon,
body.new_preuploader .np_howto_toggle .np_toggle_icon,
body.new_preuploader .np_userlog_toggle .np_toggle_icon,
body.new_preuploader .np_theme_toggle .np_toggle_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    color: var(--np-text-dim);
}
body.new_preuploader .np_price_chart_toggle .np_toggle_icon.np_active,
body.new_preuploader .np_howto_toggle .np_toggle_icon.np_active,
body.new_preuploader .np_userlog_toggle .np_toggle_icon.np_active,
body.new_preuploader .np_theme_toggle .np_toggle_icon.np_active {
    background: var(--np-accent);
    color: var(--np-accent-contrast);
}
body.new_preuploader .np_price_chart_toggle svg,
body.new_preuploader .np_howto_toggle svg,
body.new_preuploader .np_userlog_toggle svg,
body.new_preuploader .np_theme_toggle svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: currentColor;
}
/* 料金グラフのアイコンは円で囲んだ $ と棒グラフの組み合わせで細かいため、少し大きく
   (ボタンの大きさは他のトグルと同じ) */
body.new_preuploader .np_price_chart_toggle svg {
    width: 1.3rem;
    height: 1.3rem;
}

/* --------------------------------------------------------------------------
   User Log panel (Dataset リストの上側。ヘッダーのアイコンで表示切替)
   -------------------------------------------------------------------------- */
body.new_preuploader .np_userlog_panel {
    margin-bottom: 1.2rem;
    padding: 0.8rem 1rem;
    background: var(--np-row-bg);
    border: var(--np-row-border);
    border-color: var(--np-bevel-colors);
    border-radius: var(--np-radius);
}
body.new_preuploader .np_userlog_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}
body.new_preuploader .np_userlog_title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}
body.new_preuploader .np_userlog_reload {
    padding: 0.15rem 0.9rem;
    background: transparent;
    border: var(--np-control-border);
    border-radius: 999px;
    color: var(--np-text);
    cursor: pointer;
}
body.new_preuploader .np_userlog_reload:hover:enabled {
    background: var(--np-accent);
    border-color: var(--np-accent);
    color: var(--np-accent-contrast);
}
body.new_preuploader .np_userlog_reload:disabled {
    opacity: var(--np-disabled-opacity);
    cursor: not-allowed;
}
body.new_preuploader .np_userlog_admin_row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}
body.new_preuploader .np_userlog_admin_input {
    flex: 1 1 14rem;
    max-width: 24rem;
    padding: 0.15rem 0.5rem;
    background: transparent;
    border: var(--np-control-border);
    border-radius: 7px;
    color: var(--np-text);
}
body.new_preuploader .np_userlog_error {
    margin: 0 0 0.4rem;
    color: var(--np-badge-bg);
    font-size: 0.85rem;
}
body.new_preuploader .np_userlog_box {
    margin: 0;
    max-height: 16em;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    padding: 0.5rem 0.7rem;
    background: var(--np-thumb-bg);
    border-radius: 7px;
    color: var(--np-text-soft);
    font-size: 0.78rem;
    line-height: 1.5;
}
/* 未ログインの人の User Log (行が無いのでログインを促す) */
body.new_preuploader .np_userlog_login a {
    color: var(--np-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Main column — rows are centered when there is spare width
   -------------------------------------------------------------------------- */
body.new_preuploader .np_main {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 1rem 5rem;
}
body.new_preuploader .np_page_explanation {
    color: var(--np-text-soft);
    font-size: 0.95rem;
    text-align: center;
    margin: 0 0 2.2rem;
}
body.new_preuploader .np_list {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

/* --------------------------------------------------------------------------
   Entry row
   -------------------------------------------------------------------------- */
body.new_preuploader .np_row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 0.7rem 1rem;
    background: var(--np-row-bg);
    border: var(--np-row-border);
    border-color: var(--np-bevel-colors);
    border-radius: var(--np-radius);
}
body.new_preuploader .np_thumb {
    width: 84px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    background: var(--np-thumb-bg);
}
body.new_preuploader .np_thumb_placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 60px;
    border-radius: 6px;
    background: var(--np-thumb-bg);
    color: var(--np-text-dim);
    font-size: 0.7rem;
}
/* --------------------------------------------------------------------------
   Derived-row connector: curved arrow drawn from the source row above.
   Occupies the thumbnail cell. The curve extends upward past the row border
   and list gap (~1.6rem + border) so the line visually starts at the
   source row; the pass line continues down to the next derived sibling.
   -------------------------------------------------------------------------- */
body.new_preuploader .np_connector {
    position: relative;
    width: 84px;
    min-height: 60px;
    align-self: stretch;
}
body.new_preuploader .np_connector_curve {
    position: absolute;
    left: 32px;
    top: calc(-1.6rem - 4px);
    width: 34px;
    height: calc(50% + 1.6rem + 4px);
    border-left: 2px solid var(--np-connector);
    border-bottom: 2px solid var(--np-connector);
    border-bottom-left-radius: 16px;
}
body.new_preuploader .np_connector_pass {
    position: absolute;
    left: 32px;
    top: calc(-1.6rem - 4px);
    width: 2px;
    height: calc(100% + 2.3rem + 8px);
    background: var(--np-connector);
}
body.new_preuploader .np_connector_arrow {
    position: absolute;
    left: 66px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid var(--np-connector);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

body.new_preuploader .np_meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.15rem;
}
body.new_preuploader .np_meta_date {
    font-size: 0.85rem;
    color: var(--np-text-dim);
    margin: 0;
}
/* 日付・ファイル数 (動画は長さ)・解像度の各項目。狭い画面で折り返すときは
   項目の間 (・ の後) で折り、"4000 × 3000" などを途中で切らない */
body.new_preuploader .np_meta_part {
    white-space: nowrap;
}
body.new_preuploader .np_meta_name {
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    font-size: 1.05rem;
    color: var(--np-text);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
body.new_preuploader .np_meta_name:hover {
    text-decoration: underline dotted;
    color: var(--np-accent);
}
body.new_preuploader .np_row_actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

/* status chip: idle / running stage / done */
body.new_preuploader .np_status {
    font-size: 0.78rem;
    color: var(--np-text-dim);
    border: var(--np-control-border);
    border-radius: 999px;
    padding: 0.18rem 0.7rem;
    white-space: nowrap;
}
body.new_preuploader .np_status.np_status_running {
    color: var(--np-accent-text);
    border-color: var(--np-accent);
}
body.new_preuploader .np_status.np_status_done {
    color: var(--np-accent-text);
}
body.new_preuploader .np_status.np_status_error {
    color: #e5484d;
    border-color: #e5484d;
}
/* フル run を SfM の失敗疑いで止めた行 (Warning: Process stopped)。丸の警告色と同じ */
body.new_preuploader .np_status.np_status_warn {
    color: #f0b429;
    border-color: #f0b429;
}

/* status column: chip text above, state circle below.
   ラベル長でボタン列がズレないよう固定幅 (最長 "Textured Mesh Ready" が収まる幅) */
body.new_preuploader .np_status_col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    width: 10.5rem;
    flex-shrink: 0;
}
/* state circle: stopped = filled disc, running = spinning ring.
   停止円はレイアウトボックスを保ったまま scale で半分に縮めて色も半透過にする
   (実行中スピナーとの切替時に上下がズレないようにするため) */
body.new_preuploader .np_status_circle {
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    flex-shrink: 0;
    transform: scale(0.5);
}
body.new_preuploader .np_status_circle.np_circle_idle {
    background: rgba(71, 85, 105, 0.5);
}
body.new_preuploader .np_status_circle.np_circle_done {
    background: rgba(23, 225, 168, 0.65);
}
body.new_preuploader .np_status_circle.np_circle_error {
    background: rgba(229, 72, 77, 0.65);
}
body.new_preuploader .np_status_circle.np_circle_running {
    background: transparent;
    border: 3px solid rgba(5, 150, 105, 0.25);
    border-top-color: #29f5b69e;
    transform: none;
    animation: np_spin 0.9s linear infinite;
}
body.new_preuploader .np_status_circle.np_circle_running.np_circle_error {
    border-color: rgba(229, 72, 77, 0.3);
    border-top-color: #e5484d;
}
@keyframes np_spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    body.new_preuploader .np_status_circle.np_circle_running {
        animation: none;
    }
}

/* run の実行中のチップ: 文言の先頭で回る小さなローディングサークル
   (new_preuploader.js EntryRow)。色は上の実行中の丸と同じ緑。カメラ位置推定の途中の
   チェックで警告の出た run は、その位置に黄色の ! (np_status_warning_tip)。
   チップの高さは文言の行のまま変えない */
body.new_preuploader .np_status.np_status_with_spinner {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}
body.new_preuploader .np_status_spinner {
    flex-shrink: 0;
    width: 0.8em;
    height: 0.8em;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid rgba(5, 150, 105, 0.25);
    border-top-color: #29f5b69e;
    animation: np_spin 0.9s linear infinite;
}
/* チップの中の ! はローディングサークルより一回り大きいだけにして、ステータス列 (10.5rem) に
   収める */
body.new_preuploader .np_status_warning_tip .np_run_options_icon {
    width: 14px;
    height: 14px;
    font-size: 10px;
}
@media (prefers-reduced-motion: reduce) {
    body.new_preuploader .np_status_spinner {
        animation: none;
    }
}

/* フル run の実行中はチップ・全体の進捗・工程の進捗の 3 段 (EntryRunProgress)。段の間を詰めて、
   実行中と停止中で行の高さを変えない (サムネイルの 60px に収める)。左の余白はステータス列の左に
   はみ出すバーの名前 (np_run_progress_label) の分。行の gap / padding (1rem) と合わせて、名前を
   左の列に重ねず、行の枠の外にも出さない */
body.new_preuploader .np_status_col.np_status_col_two_bars {
    gap: 0.2rem;
    margin-left: 1rem;
}
body.new_preuploader .np_run_progress_bars {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* デモ run の実行中に進捗バーの左に出す本物の run の所要時間 (new_preuploader.js EntryRow。
   2026-11-13 ユーザー指示)。上の行 = 説明、下の行 = 時間。行の高さをバー (0.95rem) と同じにし、
   ステータス列の下端にそろえて Total・Step の 2 本と同じ高さに並べる。右の余白はステータス列の
   左にはみ出すバーの名前 (np_run_progress_label) の分。
   置き方は幅で 3 通り: 900px 以上 = 流れの外で名前の行の右の空きに重ねる、681〜899px = その行
   だけ 2 段にして 2 段目のステータス列の左、680px 以下 = 2 段目のステータス列の左 (流れの中。
   収まらなければ折り返して上の段) */
body.new_preuploader .np_demo_real_time {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    align-self: flex-end;
    margin: 0 0.6rem 0 0;
    font-size: 0.78rem;
    line-height: 0.95rem;
    text-align: right;
    white-space: nowrap;
    color: var(--np-text-dim);
}
body.new_preuploader .np_demo_real_time_value {
    color: var(--np-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* 900px 以上 (行が最大幅 = np_main の 860px): 行の列の幅を変えない (実行の始めと終わりで日付の
   行が折り返し直さない)。ステータス列は操作の列の最初の要素で左の余白が 1rem なので、2 行の
   右端は流れの中と同じ位置 (列の左 − 2.15rem)。名前の行は右を空けて、長い名前を 2 行の下に
   潜らせない (2 行の幅 約 6.2rem + 列の間) */
@media (min-width: 900px) {
    body.new_preuploader .np_row_demo_real_time .np_row_actions {
        position: relative;
    }
    body.new_preuploader .np_row_demo_real_time .np_demo_real_time {
        position: absolute;
        right: calc(100% + 1.15rem);
        bottom: 0;
        margin: 0;
    }
    body.new_preuploader .np_row_demo_real_time .np_meta_name_row {
        padding-right: 7.5rem;
    }
}
/* 681〜899px: 名前の列に空きが無いので、その行だけ 680px 以下と同じ 2 段にする */
@media (min-width: 681px) and (max-width: 899px) {
    body.new_preuploader .np_row.np_row_demo_real_time {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "thumb meta"
            "actions actions";
        row-gap: 0.6rem;
    }
    body.new_preuploader .np_row_demo_real_time .np_thumb_button {
        grid-area: thumb;
    }
    body.new_preuploader .np_row_demo_real_time .np_meta {
        grid-area: meta;
    }
    body.new_preuploader .np_row_demo_real_time .np_row_actions {
        grid-area: actions;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
}

/* run の実行中の進捗 (new_preuploader.js EntryRunProgress): 状態の丸の位置に
   数値の % と、縦長の細いセグメントを並べたバー (/manual_pipeline の進捗バーと
   同じ寸法 2px + 1px gap)。ステータス列 (10.5rem) に収めるため 40 個 (119px)。
   高さは状態の丸と同じ箱 (0.95rem) にして、実行中と停止中で行の高さを変えない */
body.new_preuploader .np_run_progress {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    height: 0.95rem;
}
/* フル run のバーの名前 (Total / Step)。チップ・%・バーを他の行と同じ位置に保つため、流れの外で
   % の箱の左に置く。/manual_pipeline と同じく 2 本の名前の左端をそろえる */
body.new_preuploader .np_run_progress_label {
    position: absolute;
    right: 100%;
    min-width: 1.95rem;
    margin-right: 0.1rem;
    white-space: nowrap;
    font-size: 0.78rem;
    line-height: 1;
    color: var(--np-text);
}
body.new_preuploader .np_run_progress_percent {
    min-width: 2.6em;
    text-align: right;
    white-space: nowrap;
    font-size: 0.78rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--np-text);
}
body.new_preuploader .np_progress_bar {
    display: flex;
    align-items: stretch;
    gap: 1px;
    width: fit-content;
    height: 12px;
}
body.new_preuploader .np_progress_segment {
    flex: 0 0 auto;
    width: 2px;
    border-radius: 1px;
    background: var(--np-progress-track);
    transition: background-color 200ms linear;
}
body.new_preuploader .np_progress_segment_filled {
    background: var(--np-progress-fill);
}

/* icon buttons (play / view / download / delete) */
body.new_preuploader .np_icon_button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: var(--np-control-border);
    background: transparent;
    color: var(--np-text);
    cursor: pointer;
    padding: 0;
}
body.new_preuploader .np_icon_button svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}
/* 書類2枚のアイコンはディテールが多いため少し大きく表示する */
body.new_preuploader .np_icon_button svg.np_duplicate_icon {
    width: 1.5rem;
    height: 1.5rem;
}
/* 3点付きアイコンは viewBox が 30 単位に広がる分、少し大きく表示して
   本体グリフの見かけサイズを他アイコンと揃える (1.5rem でも円の内側に収まる) */
body.new_preuploader .np_icon_button svg.np_dots_icon {
    width: 1.5rem;
    height: 1.5rem;
}
body.new_preuploader .np_icon_button:hover:enabled,
body.new_preuploader a.np_icon_button:hover {
    color: var(--np-accent-contrast);
    background: var(--np-accent);
    border-color: var(--np-accent);
}
body.new_preuploader .np_icon_button:disabled {
    opacity: var(--np-disabled-opacity);
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Placeholder row (always at the end of the list)
   -------------------------------------------------------------------------- */
body.new_preuploader .np_row_placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 76px;
    padding: 0.7rem 1rem;
    background: transparent;
    border: 2px dashed;
    border-color: #95b1df80;
    border-radius: var(--np-radius);
}
body.new_preuploader.theme-dark .np_row_placeholder {
    border-color: rgba(148, 163, 184, 0.30);
}
body.new_preuploader .np_upload_open_button {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: none;
    border: var(--np-control-border);
    border-radius: 999px;
    padding: 0.5rem 1.4rem;
    font-size: 1rem;
    color: var(--np-text);
    cursor: pointer;
}
body.new_preuploader .np_upload_open_button svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: currentColor;
}
body.new_preuploader .np_upload_open_button:hover {
    color: var(--np-accent-contrast);
    background: var(--np-accent);
    border-color: var(--np-accent);
}
/* Upload ボタン右隣の入力データ上限ツールチップ。アイコンは選択肢の
   np_choice_tip_icon を共用し、パネルは np_choice_tip と同じくプレースホルダ行を
   基準にした absolute で行の真上に行幅で出す (アイコン基準の中央寄せは狭い
   画面で右にはみ出して横スクロールが出る) */
body.new_preuploader .np_row_placeholder {
    position: relative;
}
/* 未登録の人のアップロードの行の、規約とプライバシーポリシーへの同意の一文 (run_requirement.js
   GuestAgreementNote)。Upload ボタンの下に 1 行 */
body.new_preuploader .np_row_placeholder {
    flex-wrap: wrap;
}
body.new_preuploader .np_row_placeholder .np_guest_agreement {
    flex-basis: 100%;
    margin: 0.45rem 0 0;
    color: var(--np-text);
    font-size: 0.8rem;
    line-height: 1.4;
    text-align: center;
}
body.new_preuploader .np_row_placeholder .np_guest_agreement a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
body.new_preuploader .np_upload_limits_wrap {
    display: inline-flex;
    align-items: center;
    margin-left: 0.7rem;
    cursor: help;
    outline: none;
}
body.new_preuploader .np_upload_limits_wrap:focus-visible .np_choice_tip_icon {
    box-shadow: 0 0 0 2px var(--np-dialog-dim);
}
body.new_preuploader .np_upload_limits_tip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 0.3rem);
    z-index: 20;
    padding: 0.55rem 0.75rem;
    background: var(--np-dialog-bg);
    border: 1px solid var(--np-border-color);
    border-radius: 0.6rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    color: var(--np-dialog-text);
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}
/* 開き方・閉じ方は全ツールチップ共通 (tooltip_toggle.js。料金の ? の np_price_tip と同じ): ホバー
   (ホバーできる端末だけ。? で閉じた直後は離れるまで出さない)・キーボードのフォーカス・? のクリック
   (np_tip_pinned) で出す。固定中・フォーカス中はクリックを受け止め、真上の行 (サムネイル・ボタン) へ
   通さない */
@media (hover: hover) {
    body.new_preuploader .np_upload_limits_wrap:not(.np_tip_dismissed):hover .np_upload_limits_tip {
        visibility: visible;
        opacity: 1;
    }
}
body.new_preuploader .np_upload_limits_wrap:focus-visible .np_upload_limits_tip,
body.new_preuploader .np_upload_limits_wrap.np_tip_pinned .np_upload_limits_tip {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
/* ツールチップの文字はドラッグで選択できる (全ツールチップ共通。2026-11-02 ユーザー指示。祖先の
   user-select: none も受けない)。クリックを受けるのは固定中・フォーカス中だけ。枠の cursor: help は
   丸に残す。共通 Tooltip の .tooltip-text は single.css */
body.new_preuploader .np_upload_limits_tip,
body.new_preuploader .np_choice_tip,
body.new_preuploader .np_run_options_tip,
body.new_preuploader .np_price_tip,
body.new_preuploader .np_storage_tip {
    -webkit-user-select: text;
    user-select: text;
    cursor: text;
}
body.new_preuploader .np_upload_limits_title {
    display: block;
    font-weight: 600;
    margin-bottom: 0.3rem;
}
body.new_preuploader .np_upload_limits_row {
    display: block;
    margin-top: 0.25rem;
}
body.new_preuploader .np_upload_limits_label {
    font-weight: 600;
}
/* 末尾の、登録・カード登録の無い人のアップロードが決まった時間で消えることの説明
   (new_preuploader.js UploadLimitsTip。その人にだけ出す) */
body.new_preuploader .np_upload_limits_note {
    display: block;
    margin-top: 0.45rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--np-border-color);
}

/* --------------------------------------------------------------------------
   Loading: 一覧 (/get_datasets) の応答待ちの間、アップロード行の代わりに画面中央に
   出すローディングサークル (new_preuploader.js ListLoadingIndicator)
   -------------------------------------------------------------------------- */
body.new_preuploader .np_list_loading {
    /* 画面 (ビューポート) の中央に固定する。大きさの決まった fixed 要素は
       inset: 0 + margin: auto で中央に置ける (回転の transform と干渉しない)。
       下に開いている User Log などのクリックは妨げない */
    position: fixed;
    inset: 0;
    margin: auto;
    width: 48px;
    height: 48px;
    box-sizing: border-box;
    pointer-events: none;
    /* 薄い輪の上を 1/4 周の弧が回る (行の実行中の丸と同じ描き方) */
    border-radius: 50%;
    border: 4px solid var(--np-loading-ring-track);
    border-top-color: var(--np-loading-ring);
    animation: np_spin 0.9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    body.new_preuploader .np_list_loading {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   Dialogs (native <dialog>)
   -------------------------------------------------------------------------- */
body.new_preuploader dialog.np_dialog {
    /* UA の既定と同じ inset 0 + margin auto で中央に置く (高さは UA の fit-content)。translate の
       中央寄せはしない: transform を持つ要素は position: fixed の子孫の基準になり、子孫はその
       overflow (dialog:modal は auto) で切れるため、ダイアログの中のツールチップ (InfoTip の
       floating・エラー・警告・説明のツールチップ、utils.js の Tooltip) が枠の外へ出せなくなる
       (2026-10-26。以前はインフォ・実行・工程の実行の確認のダイアログだけがこの形だった) */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: var(--np-dialog-bg);
    color: var(--np-dialog-text);
    border: var(--np-dialog-border);
    border-radius: var(--np-radius);
    padding: 1.2rem 1.6rem 1.4rem;
    max-width: 560px;
    width: 90%;
}
/* ライトのダイアログは /manual_pipeline の Mesh などのオプションダイアログと同じ見た目
   (2026-10-23 ユーザー指示。料金グラフ (np_price_chart_dialog) は先に同じにしていた):
   地はグラデーション、縁は透明にして地を透かし (グラデーションは縁まで伸ばす)、文字は黒、
   控えめな文字は黒 68%、入力欄・ボタンの線は濃い青。ダークはそのまま。
   地は /workspace のフル run のダイアログと同じ明るいグラデーション (2026-11-05 ユーザー指示。それまでは
   フル run・インフォ・ダウンロード・変換・複製などだけで、ほかは元のオプションダイアログの色、/3d_viewer は
   白だった)。ヘッダーの料金グラフは専用の地のまま (Price chart dialog の節) */
body.new_preuploader:not(.theme-dark) dialog.np_dialog:not(.np_price_chart_dialog) {
    background: var(--np-bright-dialog-bg);
    border-color: transparent;
    background-origin: border-box;
    --np-dialog-text: #000000;
    --np-dialog-dim: rgba(0, 0, 0, 0.68);
    --np-control-border: 1px solid rgba(2, 18, 53, 0.5);
}
/* 青い地では accent の青 (#1764ff) の金額・リンクが沈むので、オプションダイアログの金額
   (manual_pipeline.css の .option_dialog_run_footer .np_run_price_value) と同じ濃紺に。
   赤の注意は料金グラフの注意 (--np-pc-alert) と同じ濃い赤に */
body.new_preuploader:not(.theme-dark) dialog.np_dialog
    :is(.np_run_price_value, .np_run_manual_link, .np_run_requirement a, .np_purchase_terms a) {
    color: #08205c;
}
body.new_preuploader:not(.theme-dark) dialog.np_dialog
    :is(.np_dialog_error, .np_run_price_error, .np_run_limit_error) {
    color: #a11b1b;
}
/* ラジオボタン・チェックボックスもオプションダイアログ (manual_pipeline.css) と同じく、
   既定の白をやめて地より少し暗い青に白い印。素の input は appearance: none で描き直す
   (行は flex の上下中央揃えなので基線のずれは出ない) */
body.new_preuploader:not(.theme-dark) {
    --np-option-control-bg: rgba(0, 24, 130, 0.32);
    --np-option-control-border: rgba(2, 18, 53, 0.5);
    --np-option-control-mark: #ffffff;
}
body.new_preuploader:not(.theme-dark) dialog.np_dialog
    :is(input[type="radio"], input[type="checkbox"]) {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--np-option-control-border);
    background: var(--np-option-control-bg);
    cursor: pointer;
}
body.new_preuploader:not(.theme-dark) dialog.np_dialog input[type="radio"] {
    border-radius: 50%;
}
body.new_preuploader:not(.theme-dark) dialog.np_dialog input[type="radio"]:checked {
    background-image: radial-gradient(circle closest-side,
        var(--np-option-control-mark) 0 44%, transparent 50%);
}
body.new_preuploader:not(.theme-dark) dialog.np_dialog input[type="checkbox"] {
    border-radius: 3px;
}
body.new_preuploader:not(.theme-dark) dialog.np_dialog
    input[type="checkbox"]:checked::before {
    content: "";
    position: absolute;
    left: 0.3rem;
    top: 0.06rem;
    width: 0.28rem;
    height: 0.56rem;
    border: solid var(--np-option-control-mark);
    border-width: 0 0.16rem 0.16rem 0;
    transform: rotate(45deg);
}
body.new_preuploader:not(.theme-dark) dialog.np_dialog
    :is(input[type="radio"], input[type="checkbox"]):disabled {
    opacity: 0.5;
    cursor: default;
}
body.new_preuploader:not(.theme-dark) dialog.np_dialog
    :is(input[type="radio"], input[type="checkbox"]):focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 1px;
}
body.new_preuploader dialog.np_dialog::backdrop {
    background: rgba(0, 0, 0, 0.55);
}
body.new_preuploader .np_dialog_title {
    font-size: 1.15rem;
    margin: 0 0 1rem;
    text-align: center;
}
body.new_preuploader .np_dialog_buttons,
body.new_preuploader .np_run_dialog_ruler_buttons {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 1.2rem;
}
/* 実行の確認の日本以外の Confirm purchase はスマホ幅で隣のボタンと横に並ばない。文言が折り返すと
   ‹ Back の山形も別の行に落ちるので、文言は 1 行のまま、並ばない幅ではボタンを縦に並べる */
body.new_preuploader .np_run_dialog .np_dialog_buttons,
body.new_preuploader .stage_run_confirm_dialog .np_dialog_buttons {
    flex-wrap: wrap;
    white-space: nowrap;
}
body.new_preuploader .np_dialog_button {
    border: var(--np-control-border);
    border-radius: 7px;
    background: transparent;
    color: var(--np-dialog-text);
    padding: 0.45rem 1.3rem;
    font-size: 0.95rem;
    cursor: pointer;
}
body.new_preuploader .np_dialog_button:hover {
    background: var(--np-accent);
    border-color: var(--np-accent);
    color: var(--np-accent-contrast);
}
body.new_preuploader .np_dialog_button.np_dialog_primary {
    background: var(--np-accent);
    border-color: var(--np-accent);
    color: var(--np-accent-contrast);
}
/* 新実行ダイアログの Next は 3 択完了 + 価格取得まで無効 */
body.new_preuploader .np_dialog_button:disabled,
body.new_preuploader .np_dialog_button.np_dialog_primary:disabled {
    opacity: var(--np-disabled-opacity);
    cursor: default;
}
body.new_preuploader .np_dialog_button:disabled:hover {
    background: transparent;
    border: var(--np-control-border);
    color: var(--np-dialog-text);
}
body.new_preuploader .np_dialog_button.np_dialog_primary:disabled:hover {
    background: var(--np-accent);
    border-color: var(--np-accent);
    color: var(--np-accent-contrast);
}
body.new_preuploader .np_dialog_button.np_dialog_primary svg {
    width: 0.95rem;
    height: 0.95rem;
    fill: currentColor;
    margin-right: 0.4rem;
    vertical-align: -0.1rem;
}
body.new_preuploader .np_dialog_note {
    font-size: 0.85rem;
    color: var(--np-dialog-dim);
    text-align: center;
    margin: 0 0 0.4rem;
}
/* 実行の確認の「To run, please sign up / register a credit card.」(run_requirement.js)。
   済むまで Run は押せない。/manual_pipeline の工程の実行の確認と共用 */
body.new_preuploader .np_dialog_note.np_run_requirement {
    color: var(--np-dialog-text);
    margin-top: 0.6rem;
}
body.new_preuploader .np_run_requirement a {
    color: var(--np-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* 実行・有料の変換の確認の、支払いの時期と方法の文。日本からのアクセスには利用規約・特定商取引法に
   基づく表記へのリンクも出す (特定商取引法の最終確認画面の表示。run_requirement.js PurchaseTermsNote) */
body.new_preuploader .np_dialog_note.np_purchase_terms {
    margin-top: 0.4rem;
}
/* run の確認はリンクが 1 行ずつ並ぶので、下線が次の行に付かず押し分けられる行の間隔にする */
body.new_preuploader .np_dialog_note.np_purchase_terms_run {
    line-height: 1.5;
}
body.new_preuploader .np_purchase_terms a {
    color: var(--np-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* 未登録の人の無料の変換の、規約とプライバシーポリシーへの同意の一文 (run_requirement.js
   GuestAgreementNote。/converter の変換ダイアログ) */
body.new_preuploader .np_dialog_note.np_guest_agreement {
    margin-top: 0.4rem;
    line-height: 1.4;
}
body.new_preuploader .np_dialog_note.np_guest_agreement a {
    color: var(--np-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* 案内の右の ? (登録・カード登録をしないとアップロードが消えること。/manual_pipeline の
   工程の実行の確認だけ。run_requirement.js RunRequirementNote の deletionTip) */
body.new_preuploader .np_run_requirement_tip {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 0.35rem;
}
/* 削除の確認の「Delete “名前”?」。長いファイル名は途中で折り返す */
body.new_preuploader .np_dialog_note.np_delete_target {
    color: var(--np-dialog-text);
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}
body.new_preuploader .np_dialog_error {
    color: #d43f3f;
    font-size: 0.85rem;
    text-align: center;
    margin: 0.6rem 0 0;
}

/* upload method dialog */
body.new_preuploader .np_upload_options {
    display: flex;
    justify-content: center;
    gap: 0.9rem;
}
body.new_preuploader .np_upload_option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 9.5rem;
    padding: 1rem 0.5rem;
    border: var(--np-control-border);
    border-radius: var(--np-radius);
    cursor: pointer;
    text-align: center;
}
body.new_preuploader .np_upload_option:hover {
    border-color: var(--np-accent);
    color: var(--np-accent);
}
body.new_preuploader .np_upload_option input[type="file"] {
    display: none;
}
body.new_preuploader .np_upload_option svg {
    width: 1.7rem;
    height: 1.7rem;
    fill: currentColor;
}
body.new_preuploader .np_upload_option_label {
    font-size: 0.95rem;
    margin: 0;
}
body.new_preuploader .np_upload_option_hint {
    font-size: 0.75rem;
    color: var(--np-dialog-dim);
    margin: 0;
}

/* rename dialog */
body.new_preuploader .np_rename_input {
    width: 100%;
    box-sizing: border-box;
    font-size: 1rem;
    padding: 0.45rem 0.6rem;
    border: var(--np-control-border);
    border-radius: 7px;
    background: transparent;
    color: var(--np-dialog-text);
}

/* ダイアログ内 select の展開リスト。select 本体は transparent +
   --np-dialog-text だが、リスト側の背景は UA 既定 (白) が使われるため
   ダークテーマで白地に白文字になる。ダイアログ配色で明示する */
body.new_preuploader select option {
    background: var(--np-dialog-bg);
    color: var(--np-dialog-text);
}
/* top layer の dialog 配下でも UA の select ポップアップがダークで
   描画されるよう、select 自身にも color-scheme を持たせる */
body.new_preuploader.theme-dark select {
    color-scheme: dark;
}

/* run options dialog */
body.new_preuploader .np_option_row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0;
    font-size: 1rem;
    cursor: pointer;
}
/* Gaussian Splatting のモード選択 (staff 限定、GS チェック ON で表示) */
body.new_preuploader .np_gaussian_mode_row {
    padding-left: 1.6rem;
}
body.new_preuploader .np_gaussian_mode_row select {
    border: var(--np-control-border);
    border-radius: 7px;
    background: transparent;
    color: var(--np-dialog-text);
    padding: 0.15rem 0.4rem;
}
/* HQ サーバー組み合わせ指定 (staff/dev 限定、High Quality ON で表示) */
body.new_preuploader .np_hq_server {
    margin: 0.3rem 0 0.5rem;
    padding: 0.5rem 0.8rem;
    border: var(--np-control-border);
    border-radius: 7px;
}
body.new_preuploader .np_hq_server_title {
    margin: 0 0 0.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.75;
}
body.new_preuploader .np_hq_stage_list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.3rem;
}
body.new_preuploader .np_hq_stage_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.92rem;
}
body.new_preuploader .np_hq_stage_row select {
    border: var(--np-control-border);
    border-radius: 6px;
    background: transparent;
    color: var(--np-dialog-text);
    padding: 0.15rem 0.4rem;
    font-size: 0.92rem;
}
/* 操作ダイアログ共通の幅。/manual_pipeline の工程実行の確認と /workspace・/manual_pipeline
   のダウンロード・変換・複製ダイアログはこの幅で揃える (ユーザー指示。中身の量で幅が変わると
   並べて開いたときにばらついて見える)。/workspace の実行ダイアログ (np_run_dialog) は
   10/21 から中身に合わせた幅 (下) */
body.new_preuploader dialog.np_dialog.np_dialog_narrow {
    max-width: 360px;
}
/* /workspace の実行ダイアログ (3 択と実行の確認) の幅は画面幅ではなく中身に合わせ、左右に
   程よい余白 (--np-run-dialog-pad) を足す (ユーザー指示 10/21)。中身の幅は見えない定規
   (RunDialogRuler) で決まり、段が増えても実行の確認へ切り替えても変わらない。狭い画面では
   左右を 1rem ずつ空けて収める (max-width は中身の幅なので、左右の余白と枠 (3px) も引く) */
body.new_preuploader dialog.np_dialog.np_run_dialog {
    --np-run-dialog-pad: 2rem;
    width: fit-content;
    max-width: calc(100% - 2rem - 2 * var(--np-run-dialog-pad) - 6px);
    padding-left: var(--np-run-dialog-pad);
    padding-right: var(--np-run-dialog-pad);
}
body.new_preuploader .np_run_dialog_ruler {
    height: 0;
    overflow: hidden;
    visibility: hidden;
}
/* 長い文 (トリムの注記・Gaussian の入力上限・料金の取得の失敗など) は中身の幅を広げずに
   その幅で折り返す */
body.new_preuploader .np_run_dialog .np_run_trim_note,
body.new_preuploader .np_run_dialog .np_run_limit_error,
body.new_preuploader .np_run_dialog .np_run_price_row {
    contain: inline-size;
}
/* 定規の Cancellation fee cap の行 (RunDialogRuler) は、名前・?・値を 1 行に並べた幅を中身の幅に入れる */
body.new_preuploader .np_run_dialog_ruler .np_run_price_row.np_run_usage_cap {
    contain: none;
    flex-wrap: nowrap;
}
/* 実行ダイアログ (3 択) は選ぶたびに下へ 1 段ずつ広がる (RunChoiceReveal) ので上端を
   固定する。中央寄せのままだと広がる分の半分だけ上へずれ、選んだ行がカーソルの下から
   動く。上端は広がり切ったとき (3 択 + 料金 + ボタン、約 26rem) にほぼ中央に来る位置。
   画面に収まらないときはダイアログの中でスクロールする。max-height は中身の高さなので、
   上端・下の余白 1rem に加えて padding (上下 2.6rem) と枠 (上下 3px) も引く */
body.new_preuploader dialog.np_dialog.np_run_dialog.np_run_choice_dialog {
    top: max(1rem, calc(50% - 13rem));
    bottom: auto;
    margin: 0 auto;
    max-height: calc(100% - max(1rem, calc(50% - 13rem)) - 3.6rem - 6px);
}
/* 1 段ずつ足す区画: 畳んだ高さ (0fr) で一度描いてから開いた高さ (1fr) へ、高さ +
   フェードで広げる。中身を切り抜くのは広げる間 (collapsed / opening) だけ */
body.new_preuploader .np_run_reveal {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.3s ease;
}
body.new_preuploader .np_run_reveal_collapsed {
    grid-template-rows: 0fr;
}
body.new_preuploader .np_run_reveal_inner {
    min-height: 0;
    transition: opacity 0.3s ease;
}
body.new_preuploader .np_run_reveal_collapsed > .np_run_reveal_inner,
body.new_preuploader .np_run_reveal_opening > .np_run_reveal_inner {
    overflow: hidden;
}
body.new_preuploader .np_run_reveal_collapsed > .np_run_reveal_inner {
    opacity: 0;
}
/* 最後の段の Next は、最初からある Cancel の左へ横に広げて足す (np_run_reveal_x)。
   畳んでいる間は flex の gap (0.8rem) を負の margin で打ち消して Cancel を中央に置き、
   幅と一緒に戻して Cancel を右へ滑らせる。広げる間に Next の文字が折り返さないよう nowrap */
body.new_preuploader .np_run_reveal.np_run_reveal_x {
    grid-template-rows: none;
    grid-template-columns: 1fr;
    transition: grid-template-columns 0.3s ease, margin-right 0.3s ease;
}
body.new_preuploader .np_run_reveal_x.np_run_reveal_collapsed {
    grid-template-rows: none;
    grid-template-columns: 0fr;
    margin-right: -0.8rem;
}
body.new_preuploader .np_run_reveal_x > .np_run_reveal_inner {
    min-width: 0;
    white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
    body.new_preuploader .np_run_reveal,
    body.new_preuploader .np_run_reveal.np_run_reveal_x,
    body.new_preuploader .np_run_reveal_inner {
        transition: none;
    }
}
body.new_preuploader .np_run_switch_row {
    display: flex;
    justify-content: flex-end;
    margin: -0.3rem 0 0.2rem;
}
body.new_preuploader .np_run_switch_button {
    border: var(--np-control-border);
    border-radius: 6px;
    background: transparent;
    color: var(--np-dialog-dim);
    padding: 0.2rem 0.7rem;
    font-size: 0.8rem;
    cursor: pointer;
}
body.new_preuploader .np_run_switch_button:hover {
    background: var(--np-accent);
    border-color: var(--np-accent);
    color: var(--np-accent-contrast);
}
body.new_preuploader .np_run_choice_group {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}
/* 選択肢の補足ツールチップ (撮影方法 General / Aerial top-down)。single.css
   の .tooltip-text は position: fixed で、transform 付きの <dialog> 内では
   基準がダイアログになり位置がずれる (横スクロールも出る) ため、行を基準に
   した absolute で行の真上に出す。ダイアログ幅に収まるよう左右は行に揃える */
body.new_preuploader .np_run_choice_group .np_option_row {
    position: relative;
}
/* 実行ダイアログ (3 択) の中央の列 (RunChoiceColumn)。6 つのラジオの左端をそろえたまま中央に
   置く。真ん中の列の幅は見えない定規 (6 つの選択肢の行。高さ 0) の幅で、左右の余白を等分する。
   選択肢の行は ? のツールチップを行の幅いっぱいに出すため端から端まで取り、中身
   (np_option_row_body) だけを subgrid で真ん中の列に置く */
body.new_preuploader .np_run_choice_column {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr);
}
body.new_preuploader .np_run_choice_ruler {
    grid-row: 1;
    grid-column: 2;
    display: flex;
    flex-direction: column;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}
body.new_preuploader .np_run_choice_ruler_row,
body.new_preuploader .np_option_row_body {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
/* 料金の行 (1.05rem) の定規も選択肢の行と同じ大きさで測る */
body.new_preuploader .np_run_choice_ruler_row {
    font-size: 1rem;
    white-space: nowrap;
}
/* 定規の文字は data-label から描く (同じ文字を DOM に重ねない) */
body.new_preuploader .np_run_choice_ruler [data-label]::before,
body.new_preuploader .np_run_dialog_ruler [data-label]::before {
    content: attr(data-label);
}
body.new_preuploader .np_run_choice_column > .np_option_row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    gap: 0;
}
body.new_preuploader .np_option_row_body {
    grid-column: 2 / -1;
}
/* ラジオの左端を列の左端 (料金の行の Price の左端) に合わせる (UA の margin-left を外す) */
body.new_preuploader .np_option_row_body > input[type='radio'],
body.new_preuploader .np_run_choice_ruler_row > input[type='radio'] {
    margin-left: 0;
}
/* Gaussian が使えないサーバーの注記は名前の下の行に回し、中身の幅を広げない */
body.new_preuploader .np_option_row_disabled > .np_option_row_body {
    flex-wrap: wrap;
    row-gap: 0;
}
body.new_preuploader .np_option_row_body > .np_run_price_hint {
    flex-basis: 100%;
    contain: inline-size;
}
/* 方式の選択肢の ? ツールチップ (InfoTip の icon='?')。作る成果物と Manual Pipeline での実行の 2 段落 */
body.new_preuploader .np_run_choice_info {
    display: inline-flex;
    align-items: center;
}
body.new_preuploader .np_run_choice_info_line {
    display: block;
}
body.new_preuploader .np_run_choice_info_line + .np_run_choice_info_line {
    margin-top: 0.35rem;
}
/* 方式の下の Manual Pipeline へのリンク (その dataset を開く)。ラジオの左端に揃え、
   ダイアログの幅は広げずに列の中で折り返す */
body.new_preuploader .np_run_manual_link_row {
    grid-column: 2 / -1;
    margin: 0.1rem 0 0.35rem;
    font-size: 0.85rem;
    contain: inline-size;
}
body.new_preuploader .np_run_manual_link {
    color: var(--np-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* フル run が一度終わった行の再実行の 2 択 (RerunChoiceDialog)。名前と補足の選択肢の
   ボタン (枠とホバーはアップロード方法の選択肢と同じ) を上下に並べる。幅は実行ダイアログの
   定規で決まり、補足はその幅で折り返す (中身の幅を広げない) */
body.new_preuploader .np_rerun_options {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    contain: inline-size;
}
body.new_preuploader .np_rerun_option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.75rem 1rem;
    border: var(--np-control-border);
    border-radius: var(--np-radius);
    background: transparent;
    color: var(--np-dialog-text);
    font: inherit;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
body.new_preuploader .np_rerun_option:hover {
    border-color: var(--np-accent);
    color: var(--np-accent);
}
body.new_preuploader .np_rerun_option_label {
    font-size: 1rem;
}
body.new_preuploader .np_rerun_option_hint {
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--np-dialog-dim);
}
body.new_preuploader .np_choice_tip_wrap {
    display: inline-flex;
    align-items: center;
    cursor: help;
    outline: none;
}
body.new_preuploader .np_choice_tip_icon,
body.new_preuploader .np_run_choice_ruler_icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--np-qmark-bg);
    color: var(--np-qmark-fg);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
/* 共通 Tooltip (utils.js。/manual_pipeline のオプションダイアログ・/profile など) の ? も、テーマの
   ページでは同じ色 (single.css の灰色の半透明を上書き) */
body.new_preuploader .tooltip-icon {
    background-color: var(--np-qmark-bg);
    color: var(--np-qmark-fg);
}
body.new_preuploader .np_choice_tip_wrap:focus-visible .np_choice_tip_icon {
    box-shadow: 0 0 0 2px var(--np-dialog-dim);
}
body.new_preuploader .np_choice_tip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 0.3rem);
    z-index: 20;
    padding: 0.5rem 0.7rem;
    background: var(--np-dialog-bg);
    border: 1px solid var(--np-border-color);
    border-radius: 0.6rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    color: var(--np-dialog-text);
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}
/* 開き方・閉じ方は全ツールチップ共通 (tooltip_toggle.js。料金の ? の np_price_tip と同じ)。固定中・
   フォーカス中はクリックを受け止め、真上の行の選択肢へ通さない (ツールチップのクリックは ? と同じく
   ラジオを切り替えない) */
@media (hover: hover) {
    body.new_preuploader .np_choice_tip_wrap:not(.np_tip_dismissed):hover .np_choice_tip {
        visibility: visible;
        opacity: 1;
    }
}
body.new_preuploader .np_choice_tip_wrap:focus-visible .np_choice_tip,
body.new_preuploader .np_choice_tip_wrap.np_tip_pinned .np_choice_tip {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
/* 実行ダイアログは中身に合わせた幅で狭いので、ツールチップは左右の余白まで広げる
   (枠から 0.4rem 内側。ダイアログの外へ出すと overflow: auto のスクロールになる) */
body.new_preuploader .np_run_dialog .np_choice_tip {
    left: calc(0.4rem - var(--np-run-dialog-pad));
    right: calc(0.4rem - var(--np-run-dialog-pad));
}
/* 実行時オプションのインフォツールチップ (run_options.js RunOptionsInfo。
   /workspace のインフォダイアログの行末と /manual_pipeline の完了スロット)。
   変換行の i ツールチップ (new_preuploader.js ConversionInfo) も同じ部品
   (run_options.js InfoTip) で、この見た目を共用する。
   i アイコンを基準にツールチップを真上に出す (np_choice_tip と同じ見た目)。
   開き方・閉じ方は全ツールチップ共通 (tooltip_toggle.js): ホバー表示はホバーできる
   端末だけ (タッチ端末はタップ後に :hover が残って閉じられなくなるため。アイコンで
   閉じた直後は離れるまで出さない = np_run_options_dismissed)、クリックで固定
   (np_run_options_pinned) したときはツールチップがクリックを受け止める (後ろへ通さない) */
body.new_preuploader .np_run_options_wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
body.new_preuploader .np_run_options_icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background-color: #9999998a;
    color: #fff;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 12px;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    cursor: pointer;
}
body.new_preuploader .np_run_options_icon:hover,
body.new_preuploader .np_run_options_pinned .np_run_options_icon {
    background-color: #777777cc;
}
body.new_preuploader.theme-dark .np_run_options_icon {
    background-color: rgba(148, 163, 184, 0.5);
}
body.new_preuploader.theme-dark .np_run_options_icon:hover,
body.new_preuploader.theme-dark .np_run_options_pinned .np_run_options_icon {
    background-color: rgba(148, 163, 184, 0.8);
}
/* ? の形 (InfoTip の icon='?'。実行ダイアログの方式の選択肢) は、他のツールチップの ?
   (np_choice_tip_icon) と同じ大きさ・色・字体。ホバー・固定でも色は変えない */
body.new_preuploader .np_run_options_icon.np_run_options_qmark,
body.new_preuploader .np_run_options_icon.np_run_options_qmark:hover,
body.new_preuploader .np_run_options_pinned .np_run_options_icon.np_run_options_qmark {
    width: 16px;
    height: 16px;
    background-color: var(--np-qmark-bg);
    color: var(--np-qmark-fg);
    font-family: inherit;
    font-size: 11px;
    font-style: normal;
}
body.new_preuploader .np_run_options_icon:focus-visible {
    box-shadow: 0 0 0 2px var(--np-dialog-dim);
    outline: none;
}
body.new_preuploader .np_run_options_tip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.45rem);
    transform: translateX(-50%);
    z-index: 30;
    width: max-content;
    max-width: min(18rem, calc(100vw - 2rem));
    padding: 0.5rem 0.7rem;
    background: var(--np-dialog-bg);
    border: 1px solid var(--np-border-color);
    border-radius: 0.6rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    color: var(--np-dialog-text);
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}
/* ダイアログ内の行末 (右端) では中央寄せだと右にはみ出すので右端を揃える */
body.new_preuploader .np_run_options_wrap_right .np_run_options_tip {
    left: auto;
    right: 0;
    transform: none;
}
/* floating (/workspace のインフォダイアログ): ダイアログの overflow で切れない
   ようビューポート基準に置く。位置 (top / left) は表示のたびに RunOptionsInfo
   が i アイコンから求める (真上、入らなければ真下。左右は画面内) */
body.new_preuploader .np_run_options_floating .np_run_options_tip {
    position: fixed;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    transform: none;
}
body.new_preuploader .np_run_options_tip_title {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--np-dialog-dim);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
body.new_preuploader .np_run_options_list {
    margin: 0;
    padding-left: 1.1rem;
    list-style: disc;
}
body.new_preuploader .np_run_options_list li {
    margin: 0;
    padding: 0.05rem 0;
}
/* 画質行。High Quality は実行時の切替スイッチの文字 (stage_price_quality_high
   と同じ色。/workspace 側は同じ色定数) */
body.new_preuploader .np_run_options_quality {
    font-weight: 600;
}
body.new_preuploader .np_run_options_quality_high {
    color: var(--np-quality-high, #0400cf);
}
body.new_preuploader.theme-dark .np_run_options_quality_high {
    color: var(--np-quality-high, #00c75b);
}
body.new_preuploader .np_run_options_empty {
    display: block;
    margin-top: 0.25rem;
    color: var(--np-dialog-dim);
    font-size: 0.78rem;
    white-space: nowrap;
}
/* 工程の開始・終了時刻と出力ファイルのサイズ。オプション一覧の下に細い
   区切り線を挟み、ラベル (薄色) と値の 2 列で出す */
body.new_preuploader .np_run_options_times {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    column-gap: 0.6rem;
    row-gap: 0.1rem;
    margin-top: 0.4rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--np-border-color);
    font-size: 0.8rem;
    white-space: nowrap;
}
/* 2 列だけのツールチップ (変換行) は区切り線を付けない */
body.new_preuploader .np_run_options_times:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
body.new_preuploader .np_run_options_time {
    display: contents;
}
body.new_preuploader .np_run_options_time_label {
    color: var(--np-dialog-dim);
}
body.new_preuploader .np_run_options_time_value {
    font-variant-numeric: tabular-nums;
}
/* 次の工程の見積・料金を決める値 (/manual_pipeline の完了スロット。点数・面数
   など)。区切り線の下に見出しと 2 列 (数は右揃え) */
body.new_preuploader .np_run_options_basis {
    display: block;
    margin-top: 0.4rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--np-border-color);
}
body.new_preuploader .np_run_options_basis_title {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--np-dialog-dim);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
body.new_preuploader .np_run_options_basis .np_run_options_times {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
body.new_preuploader .np_run_options_basis .np_run_options_time_value {
    text-align: right;
}
@media (hover: hover) {
    body.new_preuploader .np_run_options_wrap:not(.np_run_options_dismissed):hover .np_run_options_tip {
        visibility: visible;
        opacity: 1;
    }
}
body.new_preuploader .np_run_options_pinned .np_run_options_tip {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
/* エラー・警告・説明のツールチップ (user_errors.js ErrorTip / WarningTip / NoteTip)。行の中には
   短いラベルとアイコン (エラーは赤の !、警告は黄色の !、説明は ?) だけを置き、本文は
   ツールチップに出す (文でレイアウトを崩さない。2026-10-24・26)。ツールチップの枠は InfoTip と同じ */
body.new_preuploader .np_error_tip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    vertical-align: middle;
}
body.new_preuploader .np_error_tip_label {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    color: #d43f3f;
}
body.new_preuploader.theme-dark .np_error_tip_label {
    color: #ff8a8a;
}
/* 警告のラベルは周りの文字の色 (色は黄色の ! だけ。色を付けた警告の文を出さない、ユーザー指示
   2026-10-26。青い地のダイアログ・ページでも読める)。説明 (?) のラベルは太字にもしない */
body.new_preuploader .np_error_tip_warning .np_error_tip_label,
body.new_preuploader.theme-dark .np_error_tip_warning .np_error_tip_label,
body.new_preuploader .np_error_tip_note .np_error_tip_label,
body.new_preuploader.theme-dark .np_error_tip_note .np_error_tip_label {
    color: inherit;
}
body.new_preuploader .np_error_tip_note .np_error_tip_label {
    font-weight: 400;
}
body.new_preuploader .np_run_options_icon.np_run_options_icon_error,
body.new_preuploader .np_run_options_icon.np_run_options_icon_warning {
    font-family: inherit;
    font-style: normal;
    font-weight: 800;
    font-size: 12px;
}
body.new_preuploader .np_run_options_icon.np_run_options_icon_error {
    background-color: #e5484d;
    color: #fff;
}
body.new_preuploader .np_run_options_icon.np_run_options_icon_error:hover,
body.new_preuploader .np_run_options_pinned .np_run_options_icon.np_run_options_icon_error {
    background-color: #c4363b;
}
body.new_preuploader .np_run_options_icon.np_run_options_icon_warning {
    background-color: #f0b429;
    color: #1f2937;
}
body.new_preuploader .np_run_options_icon.np_run_options_icon_warning:hover,
body.new_preuploader .np_run_options_pinned .np_run_options_icon.np_run_options_icon_warning {
    background-color: #d99a12;
}
body.new_preuploader .np_error_tip .np_run_options_tip {
    max-width: min(22rem, calc(100vw - 2rem));
    font-weight: 400;
    white-space: normal;
}
body.new_preuploader .np_error_tip_message {
    display: block;
}
/* 1 行ずつの文 (TipLines。カメラ位置推定の途中のチェックの警告など) */
body.new_preuploader .np_error_tip_line {
    display: block;
}
body.new_preuploader .np_error_tip_line + .np_error_tip_line {
    margin-top: 0.3rem;
}
/* staff だけに見せる内部の文 (ワーカー・例外の文のまま。長いので枠の中でスクロール) */
body.new_preuploader .np_error_tip_detail {
    display: block;
    max-height: 12rem;
    margin-top: 0.45rem;
    padding-top: 0.4rem;
    overflow: auto;
    border-top: 1px solid var(--np-border-color);
    color: var(--np-dialog-dim);
    font-size: 0.75rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* 行の状態の丸の位置に置く ! (失敗・中断の行。/workspace の行と /conversion のソース行)。
   丸と同じ箱の大きさにして、行の高さと位置を変えない */
body.new_preuploader .np_status_tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 0.95rem;
}
body.new_preuploader .np_status_tip .np_run_options_icon {
    width: 0.95rem;
    height: 0.95rem;
    font-size: 10px;
}
/* 登録・カード登録の無い人のアップロードを消すまでの残り時間 (new_preuploader.js
   EntryDeadline)。状態の丸の位置 (Not processed のチップの下) に、右に ? を付けて出す。
   /conversion の変換行の残日数 (conversion.css の cv_expire) と同じく、文字の大きさはチップと
   同じで、数字だけ完了のチップの文言と同じ色。残りわずか (24 時間以下) と期限切れは数字も
   含めて警告色 (警告のツールチップは出さない。ユーザー指示 2026-10-26) */
body.new_preuploader .np_status_deadline {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 0.95rem;
    font-size: 0.78rem;
    line-height: 1;
    color: var(--np-text-dim);
    white-space: nowrap;
}
body.new_preuploader .np_status_deadline:not(.np_status_deadline_warn) .np_status_deadline_value {
    color: var(--np-accent-text);
}
body.new_preuploader .np_status_deadline.np_status_deadline_warn {
    color: #f0b429;
}
/* 失敗した変換行のステータスと ! */
body.new_preuploader .np_convert_failure {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
/* 画面の描画が例外で落ちたときの表示 (placement.js ErrorFallback) */
body.new_preuploader .error_fallback {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--np-text);
}
/* インフォダイアログの行: i アイコンとビューアリンクを行末に並べる。
   ビューアリンク (a.np_icon_button) はライトのダイアログ地色 (#f4f8ff) で
   --np-text (白) だと見えないため、ダイアログの文字色にする */
body.new_preuploader .np_info_row .np_dl_actions {
    gap: 0.6rem;
}
body.new_preuploader .np_info_row a.np_icon_button {
    color: var(--np-dialog-text);
    text-decoration: none;
}
body.new_preuploader .np_info_row a.np_icon_button:hover {
    color: var(--np-accent-contrast);
}
/* インフォダイアログの見出し: データセット名とデータセットの i ツールチップ
   (DatasetInfo)。中央に並べ、長い名前は折り返す。下の余白はダイアログの見出し
   (np_dialog_title) と同じ */
body.new_preuploader .np_info_dataset {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 1rem;
}
body.new_preuploader .np_info_dataset_name {
    min-width: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}
/* データセットの i ツールチップの直近のフル run (3 択と開始・終了時刻、
   その後のステップ run の追記)。データセットの行 (データ量・ファイル数・
   解像度) の下に細い区切り線 */
body.new_preuploader .np_info_full_run {
    display: block;
    margin-top: 0.4rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--np-border-color);
}

body.new_preuploader .np_run_trim_note {
    text-align: left;
    margin: 0.2rem 0 0.4rem;
}
/* 実行の確認 (RunConfirmDialog) の選んだ項目。選択のダイアログの選択肢の行
   (.np_option_row) と同じ大きさで左に寄せて並べる */
body.new_preuploader .np_run_confirm_items {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0 0 0.2rem;
    padding: 0;
    list-style: none;
    font-size: 1rem;
}
body.new_preuploader .np_run_divider {
    border: 0;
    border-top: var(--np-control-border);
    margin: 0.5rem 0;
}
body.new_preuploader .np_option_row_disabled {
    opacity: var(--np-disabled-opacity);
    cursor: default;
}
body.new_preuploader .np_run_price_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    min-height: 2rem;
    font-size: 1.05rem;
}
body.new_preuploader .np_run_price_label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
/* 実行ダイアログ (3 択) の料金: Price と金額を 3 択の列 (np_run_choice_column) の左右の端に
   置く。見積中・取得の失敗などの文は中央に (幅が足りなければ Retry は次の行へ) */
body.new_preuploader .np_run_choice_dialog .np_run_price_row {
    flex-wrap: wrap;
    justify-content: center;
}
body.new_preuploader .np_run_price_row > .np_run_choice_column {
    flex: 1 1 auto;
    min-width: 0;
}
body.new_preuploader .np_run_price_pair {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}
/* フル run の Cancellation fee cap (Price の下の行。RunUsageCap): Price より小さく。名前・?・値は 1 行
   (2026-11-03 ユーザー指示。実行ダイアログは定規 RunDialogRuler にこの行の写しを入れて、入る幅にする)。
   入らない狭い画面 (スマホ幅) だけ値を次の行の右端へ。右の ? に工程ごとの料金とキャンセル料金の計算の説明と例 */
body.new_preuploader .np_run_usage_cap {
    flex-wrap: wrap;
    row-gap: 0;
    margin-top: 0.15rem;
    font-size: 0.9rem;
}
body.new_preuploader .np_run_price_row.np_run_usage_cap {
    min-height: 0;
}
body.new_preuploader .np_run_usage_cap_value {
    margin-left: auto;
    font-weight: 600;
}
body.new_preuploader .np_usage_cap_section {
    display: block;
    margin-top: 0.45rem;
}
/* キャンセルダイアログ (CancelRunDialog): キャンセル料金の枠 (額・計算・端数の注記) とカウントダウン。
   幅は枠と padding 込み (スマホ幅でも左右が切れない) */
body.new_preuploader dialog.np_dialog.np_cancel_run_dialog {
    box-sizing: border-box;
    width: calc(100% - 2rem);
    max-width: 28rem;
}
body.new_preuploader .np_cancel_run_dialog .np_dialog_buttons {
    flex-wrap: wrap;
}
body.new_preuploader .np_cancel_run_dialog .np_dialog_button {
    white-space: nowrap;
}
@media (max-width: 480px) {
    body.new_preuploader dialog.np_dialog.np_cancel_run_dialog {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }
    body.new_preuploader .np_cancel_run_dialog .np_dialog_button {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }
}
body.new_preuploader .np_cancel_fee {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    min-height: 4.5rem;
    justify-content: center;
    margin-top: 0.8rem;
    padding: 0.55rem 0.8rem;
    border: var(--np-control-border);
    border-radius: 7px;
}
body.new_preuploader .np_cancel_fee > .np_run_price_loading,
body.new_preuploader .np_cancel_fee > .np_error_tip {
    align-self: center;
}
body.new_preuploader .np_cancel_fee > .np_run_switch_button {
    align-self: center;
}
body.new_preuploader .np_cancel_fee .np_dialog_note {
    margin: 0;
}
/* 額の内訳 (完了した工程・処理中の工程)。名前は左、計算は右 (入らなければ折り返す) */
body.new_preuploader .np_cancel_fee_formula {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 0.6rem;
    margin: 0;
    font-size: 0.9rem;
}
body.new_preuploader .np_cancel_fee_numbers {
    margin-left: auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
body.new_preuploader .np_cancel_fee_updated {
    margin-top: 0.5rem;
    text-align: center;
}
body.new_preuploader .np_cancel_countdown {
    margin: 0.8rem 0 0.2rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
body.new_preuploader .np_cancel_error {
    margin: 0.6rem 0 0;
    text-align: center;
}
/* フル run の料金の ? (Price の ?。RunPriceChartTip): 選んだ 3 択の料金グラフ 1 枚と、データセットの素材・
   解像度・枚数・料金。ツールチップはダイアログの中に置くと上が切れるので、インフォダイアログの i
   (.np_run_options_floating) と同じく position: fixed でビューポート基準に置き、位置 (top / left) は表示の
   たびに ? の位置から求める (placeFloatingTip。実行ダイアログは np_run_dialog で transform を持たない) */
body.new_preuploader .np_price_tip_wrap {
    display: inline-flex;
    align-items: center;
    cursor: help;
    outline: none;
}
body.new_preuploader .np_price_tip_wrap:focus-visible .np_choice_tip_icon {
    box-shadow: 0 0 0 2px var(--np-dialog-dim);
}
body.new_preuploader .np_price_tip {
    position: fixed;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: min(24rem, calc(100vw - 16px));
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.6rem 0.8rem;
    background: var(--np-dialog-bg);
    border: 1px solid var(--np-border-color);
    border-radius: 0.6rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    color: var(--np-dialog-text);
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}
/* 開き方・閉じ方は全ツールチップ共通 (tooltip_toggle.js): ホバー (ホバーできる端末だけ。? で閉じた
   直後は離れるまで出さない)・キーボードのフォーカス・? のクリック・タップ (np_tip_pinned) で出す。
   固定中・フォーカス中は、ツールチップがクリックを受け止めて後ろの選択肢・ボタンへ通さない (通すと、
   ツールチップに隠れて見えていない選択肢が切り替わっていた。2026-10-26)。ホバーだけで出したときは
   ツールチップへ動いた所で閉じるので、通さない設定はいらない */
@media (hover: hover) {
    body.new_preuploader .np_price_tip_wrap:not(.np_tip_dismissed):hover .np_price_tip {
        visibility: visible;
        opacity: 1;
    }
}
body.new_preuploader .np_price_tip_wrap:focus-visible .np_price_tip,
body.new_preuploader .np_price_tip_wrap.np_tip_pinned .np_price_tip {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
/* グラフの名前 (方式 · 画質 · 撮影方法)、グラフ、その下に 素材・解像度・枚数・料金 の 2 列 */
body.new_preuploader .np_price_chart_tip_title {
    font-weight: 600;
    text-align: center;
    text-wrap: balance;
}
body.new_preuploader .np_price_chart_tip_part {
    white-space: nowrap;
}
body.new_preuploader .np_price_chart_tip_rows {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.15rem 1rem;
}
body.new_preuploader .np_price_chart_tip_row {
    display: contents;
}
body.new_preuploader .np_price_chart_tip_label {
    color: var(--np-dialog-dim);
}
body.new_preuploader .np_price_chart_tip_value {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
body.new_preuploader .np_run_price_hint {
    font-size: 0.85rem;
    color: var(--np-dialog-dim);
}
body.new_preuploader .np_run_price_value {
    font-weight: 700;
    color: var(--np-accent);
}
body.new_preuploader .np_run_price_loading {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--np-dialog-dim);
}
body.new_preuploader .np_run_price_error {
    font-size: 0.9rem;
    color: #d43f3f;
}
/* 実行ダイアログ: Gaussian Splat 選択時の入力上限超過 (行の gaussian_limit) */
body.new_preuploader .np_run_limit_error {
    margin: 0.2rem 0 0.4rem;
    font-size: 0.85rem;
    line-height: 1.35;
    text-align: left;
    color: #d43f3f;
}
body.new_preuploader .np_price_spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid rgba(128, 128, 128, 0.3);
    border-top-color: var(--np-accent);
    animation: np_spin 0.9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    body.new_preuploader .np_price_spinner {
        animation: none;
    }
}
/* download dialog */
body.new_preuploader .np_dl_list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
/* 行は div (行クリックでの DL は廃止し、行末のアイコンボタンで操作する) */
body.new_preuploader .np_dl_row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border: var(--np-control-border);
    border-radius: 7px;
    background: transparent;
    color: var(--np-dialog-text);
    padding: 0.35rem 0.9rem;
    font-size: 1rem;
    text-align: left;
}
/* 未生成の成果物 (アイコンボタン側も disabled になる) */
body.new_preuploader .np_dl_row.np_dl_disabled {
    opacity: 0.45;
}
/* 表示ダイアログの行 (生成済みは /3d_viewer へのリンク) */
body.new_preuploader a.np_view_row {
    text-decoration: none;
    cursor: pointer;
}
body.new_preuploader a.np_view_row:hover {
    border-color: var(--np-accent);
    background: var(--np-accent);
    color: var(--np-accent-contrast);
}
body.new_preuploader .np_dl_row img.np_dl_thumb {
    width: 2.2rem;
    height: 2.2rem;
    object-fit: contain;
    flex-shrink: 0;
}
body.new_preuploader .np_dl_label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.new_preuploader .np_dl_actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}
/* ダイアログ内は行ボタンより一回り小さくする */
body.new_preuploader .np_dl_actions .np_icon_button {
    width: 2.2rem;
    height: 2.2rem;
}
body.new_preuploader .np_dl_actions .np_icon_button svg {
    width: 1.1rem;
    height: 1.1rem;
}
/* 未ダウンロードの印 (NewBadge。ダウンロードダイアログ・/manual_pipeline の工程のダウンロードと変換行・
   /converter の変換行)。地は --np-accent-text (ライトは濃い青、ダークは水色。2026-11-03 ユーザー指示で
   赤から変更)、文字はその地で読める --np-accent-contrast (ライトは白、ダークは濃い青緑) */
body.new_preuploader .np_new_badge {
    flex: none;
    font-size: 0.62rem;
    font-weight: bold;
    letter-spacing: 0.04em;
    background: var(--np-accent-text);
    color: var(--np-accent-contrast);
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
}

/* --------------------------------------------------------------------------
   Samples and demo runs (「Try a sample」。new_preuploader.js SamplesDialog・DemoRunDialog・
   SampleBadge、文言は demo_run.js)
   -------------------------------------------------------------------------- */
/* アップロードの行の「Try a sample」: Upload と入力上限の ? の右。枠は Upload と同じ丸で、
   文字を少し小さく薄くして Upload より控えめにする (ホバーは Upload と同じ) */
body.new_preuploader .np_sample_open_wrap {
    display: inline-flex;
    margin-left: 1.1rem;
}
body.new_preuploader .np_upload_open_button.np_sample_open_button {
    padding: 0.4rem 1.1rem;
    font-size: 0.9rem;
    color: var(--np-text-dim);
}
body.new_preuploader .np_upload_open_button.np_sample_open_button:hover {
    color: var(--np-accent-contrast);
}
/* サンプルの行の名前の並び: 名前 (長ければ省略)・Sample の印・Gaussian Splatting で止める
   サンプルの ? */
body.new_preuploader .np_meta_name_row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}
body.new_preuploader .np_meta_name_row .np_meta_name {
    flex: 0 1 auto;
    min-width: 0;
}
/* サンプルの行の印。NEW の印 (塗り) と見分けられるよう枠だけにする */
body.new_preuploader .np_sample_badge {
    flex: none;
    font-size: 0.62rem;
    font-weight: bold;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--np-accent-text);
    border: 1px solid var(--np-accent-text);
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
}
/* 「Try a sample」のダイアログ。題の右に ?、サンプルは 1 行ずつ (サムネイル・名前と元のデータと
   工程・Add) */
body.new_preuploader .np_samples_title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}
body.new_preuploader .np_sample_list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0 0 0.7rem;
    padding: 0;
    list-style: none;
}
body.new_preuploader .np_sample_item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 0.7rem;
    border: var(--np-control-border);
    border-radius: var(--np-radius);
    text-align: left;
}
body.new_preuploader .np_sample_item .np_thumb,
body.new_preuploader .np_sample_item .np_thumb_placeholder {
    flex: none;
}
body.new_preuploader .np_sample_body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
body.new_preuploader .np_sample_title {
    font-size: 1rem;
    color: var(--np-dialog-text);
}
body.new_preuploader .np_sample_line {
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--np-dialog-dim);
}
body.new_preuploader .np_sample_add {
    flex: none;
}
@media (max-width: 480px) {
    /* 狭い画面: 「Try a sample」は Upload の下の行の中央に置く (同じ行に入る幅と入らない幅で
       位置が変わらないよう、必ず折り返す) */
    body.new_preuploader .np_sample_open_wrap {
        flex-basis: 100%;
        justify-content: center;
        margin: 0.6rem 0 0;
    }
    /* サンプルの行は Add を下の段へ (名前と説明に幅を残す) */
    body.new_preuploader .np_sample_item {
        flex-wrap: wrap;
    }
    body.new_preuploader .np_sample_add {
        margin-left: auto;
    }
}

/* convert dialog */
body.new_preuploader .np_convert_section {
    margin: 0.6rem 0;
}
body.new_preuploader .np_convert_section_title {
    margin: 0 0 0.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.75;
}
body.new_preuploader .np_convert_field {
    justify-content: space-between;
    cursor: default;
}
/* 変換ダイアログの料金 (実行ダイアログの価格行 .np_run_price_row を流用) と根拠の 1 行 */
body.new_preuploader .np_convert_price_row {
    margin-top: 0.4rem;
}
body.new_preuploader .np_convert_price_note {
    margin: 0 0 0.3rem;
    font-size: 0.82rem;
    line-height: 1.35;
    text-align: right;
    color: var(--np-dialog-dim);
}
/* 形式の注記 (Gaussian Splat の .splat の説明) */
body.new_preuploader .np_convert_format_note {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--np-dialog-dim);
}
body.new_preuploader .np_convert_field select {
    border: var(--np-control-border);
    border-radius: 7px;
    background: transparent;
    color: var(--np-dialog-text);
    padding: 0.15rem 0.4rem;
    min-width: 9.5rem;
}
/* 変換アイコンはストロークで描く (np_icon_button svg の fill 指定を打ち消す) */
body.new_preuploader svg.np_convert_icon {
    fill: none;
}

/* --------------------------------------------------------------------------
   Deleted row: a thin "Deleted · Undo" row left in place until the undo
   deadline, so the rows below do not slide up under the pointer.
   枠の太さは普通の行と同じ 3px (コネクタの線の位置が合うように)、角丸も同じ
   -------------------------------------------------------------------------- */
body.new_preuploader .np_row.np_deleted_row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 1rem;
    background: transparent;
    border: 3px dashed var(--np-border-color);
    border-radius: var(--np-radius);
    color: var(--np-text-dim);
}
body.new_preuploader .np_deleted_text {
    margin: 0;
    min-width: 0;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.new_preuploader .np_deleted_sep {
    flex-shrink: 0;
}
body.new_preuploader .np_deleted_undo {
    flex-shrink: 0;
    border: none;
    border-radius: 999px;
    background: var(--np-accent);
    color: var(--np-accent-contrast);
    padding: 0.2rem 0.9rem;
    font-size: 0.85rem;
    cursor: pointer;
}
body.new_preuploader .np_deleted_undo:hover {
    filter: brightness(1.1);
}
/* 複製の位置の細い行: コネクタは行の高さに合わせて縮め、線の上端・下端を
   上下の行の枠に届かせる (普通の行の値から、上下の余白の差 0.35rem を引く) */
body.new_preuploader .np_row.np_deleted_row .np_connector {
    min-height: 0;
    flex-shrink: 0;
}
body.new_preuploader .np_row.np_deleted_row .np_connector_curve {
    top: calc(-1.25rem - 4px);
    height: calc(50% + 1.25rem + 4px);
}
body.new_preuploader .np_row.np_deleted_row .np_connector_pass {
    top: calc(-1.25rem - 4px);
    height: calc(100% + 1.6rem + 8px);
}

/* --------------------------------------------------------------------------
   Thumbnail button — opens the source gallery (photos) / trim dialog (video)
   -------------------------------------------------------------------------- */
body.new_preuploader .np_thumb_button {
    padding: 0;
    border: none;
    background: none;
    line-height: 0;
    border-radius: 6px;
    cursor: pointer;
}
body.new_preuploader .np_thumb_button:disabled {
    cursor: default;
}
body.new_preuploader .np_thumb_button:hover:not(:disabled) .np_thumb,
body.new_preuploader .np_thumb_button:hover:not(:disabled) .np_thumb_placeholder {
    outline: 2px solid var(--np-accent);
}
/* 複製行: コネクタ矢印 + 縮小サムネイルを横並びにする */
body.new_preuploader .np_derived_cell {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}
body.new_preuploader .np_derived_cell .np_thumb_button {
    align-self: center;
}
body.new_preuploader .np_thumb_button_small .np_thumb,
body.new_preuploader .np_thumb_button_small .np_thumb_placeholder {
    width: 56px;
    height: 40px;
}

/* --------------------------------------------------------------------------
   Conversion row (appears under the dataset row; smaller, indented)
   -------------------------------------------------------------------------- */
body.new_preuploader .np_row.np_convert_row {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: none;
    margin-left: 2.5rem;
    padding: 0.45rem 1rem;
    gap: 0.8rem;
}
body.new_preuploader .np_convert_mark {
    display: flex;
    align-items: center;
    color: var(--np-text-dim);
}
body.new_preuploader .np_convert_mark svg {
    width: 1.2rem;
    height: 1.2rem;
}
body.new_preuploader .np_convert_kind {
    font-size: 0.95rem;
    white-space: nowrap;
}
body.new_preuploader .np_convert_summary {
    color: var(--np-text-dim);
    font-size: 0.9rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 変換行の料金 (変換開始時に決めた額。操作列の先頭) */
body.new_preuploader .np_convert_price {
    font-size: 0.85rem;
    color: var(--np-text-dim);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* 変換行のステータス列はラベル幅に合わせる (Dataset 行の固定幅を使わない) */
body.new_preuploader .np_convert_row .np_status_col {
    width: auto;
}
/* 枠の狭いページ (/manual_pipeline の工程スロット・/3d_viewer のサイドパネル) の変換中のチップとバー、
   キャンセルのチップ。操作の段の下に全幅の段を足し、入らなければチップの下へバーを折り返す */
body.new_preuploader .np_row.np_convert_row > .np_convert_status_row {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.25rem 0.5rem;
}

/* --------------------------------------------------------------------------
   Source gallery dialog (photo datasets)
   -------------------------------------------------------------------------- */
body.new_preuploader dialog.np_dialog.np_dialog_wide {
    max-width: 860px;
}
body.new_preuploader .np_gallery_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
    max-height: 55vh;
    overflow-y: auto;
}
body.new_preuploader .np_gallery_item {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
    background: var(--np-thumb-bg);
}
body.new_preuploader .np_gallery_more {
    display: flex;
    justify-content: center;
    margin-top: 0.8rem;
}

/* --------------------------------------------------------------------------
   Video trim dialog
   -------------------------------------------------------------------------- */
body.new_preuploader .np_trim_video {
    display: block;
    width: 100%;
    max-height: 45vh;
    border-radius: 6px;
    background: #000;
}
body.new_preuploader .np_trim_bar {
    position: relative;
    height: 8px;
    margin: 0.6rem 0 0.8rem;
    border-radius: 4px;
    background: var(--np-thumb-bg);
    overflow: hidden;
}
body.new_preuploader .np_trim_bar_range {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--np-accent);
}
body.new_preuploader .np_trim_inputs {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
}
body.new_preuploader .np_trim_field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--np-dialog-dim);
}
body.new_preuploader .np_trim_field input {
    width: 6.5rem;
    padding: 0.35rem 0.5rem;
    border: var(--np-control-border);
    border-radius: 6px;
    background: transparent;
    color: var(--np-dialog-text);
    font-size: 0.95rem;
}
body.new_preuploader .np_trim_set_button {
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
}
/* 範囲の行。増えたらダイアログごと伸ばさず、この枠の中でスクロールする */
body.new_preuploader .np_trim_ranges {
    display: flex;
    flex-direction: column;
    max-height: 15rem;
    overflow-y: auto;
    scrollbar-width: thin;
}
body.new_preuploader .np_trim_range_row {
    flex: none;
    padding: 0.25rem 0.4rem;
    border-radius: 6px;
}
/* 見出し (Start / End) は先頭の行だけ */
body.new_preuploader .np_trim_range_row + .np_trim_range_row .np_trim_field_label {
    display: none;
}
body.new_preuploader .np_trim_range_row_active {
    background: rgba(255, 255, 255, 0.18);
}
body.new_preuploader .np_trim_remove_button {
    width: 1.9rem;
    padding: 0.35rem 0;
    font-size: 0.9rem;
    line-height: 1;
}
body.new_preuploader .np_trim_ranges_footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
body.new_preuploader .np_trim_add_button {
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
}
body.new_preuploader .np_trim_total {
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: var(--np-dialog-dim);
}
/* 実行ダイアログ・インフォのトリムの範囲の一覧 (ツールチップの中。多いときは固定してスクロール) */
body.new_preuploader .np_trim_range_list {
    display: block;
    max-height: 12rem;
    overflow-y: auto;
    scrollbar-width: thin;
}
body.new_preuploader .np_trim_summary_tip {
    margin-left: 0.3rem;
}

/* フィルムストリップ範囲セレクタ (動画本体を読まずに範囲指定する) */
body.new_preuploader .np_strip_wrap {
    margin: 1.8rem 0 0.8rem;
}
body.new_preuploader .np_strip {
    position: relative;
    user-select: none;
    touch-action: none;
    cursor: pointer;
}
body.new_preuploader .np_strip_tiles {
    display: flex;
    overflow: hidden;
    border-radius: 6px;
    background: var(--np-thumb-bg);
}
body.new_preuploader .np_strip_tile {
    flex: 1 1 0;
    min-width: 0;
    background-repeat: no-repeat;
}
body.new_preuploader .np_strip_shade {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
}
body.new_preuploader .np_strip_handle {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 14px;
    transform: translateX(-50%);
    border-radius: 4px;
    background: var(--np-accent);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
    cursor: ew-resize;
    outline: none;
}
body.new_preuploader .np_strip_handle:focus-visible {
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px var(--np-accent);
}
/* 選択中の範囲のハンドルと時刻のラベルを、隣の範囲のハンドルより前に出す */
body.new_preuploader .np_strip_handle_active {
    z-index: 1;
}
/* 範囲が多いときはハンドルを細くする (STRIP_DENSE_RANGES) */
body.new_preuploader .np_strip_dense .np_strip_handle {
    width: 8px;
}
body.new_preuploader .np_strip_handle_time {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 6px;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: var(--np-accent);
    color: var(--np-accent-contrast);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
}
body.new_preuploader .np_strip_axis {
    display: flex;
    justify-content: space-between;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--np-dialog-dim);
    font-variant-numeric: tabular-nums;
}
body.new_preuploader .np_trim_preview_row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0.2rem 0 0.8rem;
}
body.new_preuploader .np_trim_preview_button {
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
}
body.new_preuploader .np_trim_preview_note {
    margin: 0;
    font-size: 0.8rem;
}
body.new_preuploader .np_trim_video + .np_strip_wrap {
    margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   Price chart dialog (ヘッダーの料金グラフ。price_chart.js)
   上 = 素材 / 方式の切替と解像度・枚数のスライダー (ダイアログが縦に溢れても
   上に残り、下だけスクロールする)、下 = 2 段 × 2 列のグラフ (段 = 画質、列 = 撮影
   方法)。グラフの箱は 4:3 で、角度と大きさは固定 (canvas が箱の大きさで描く)。
   4 枚を一度に見比べられるよう、幅 800px で高さ 1,000px 前後の画面に収める
   (撮影方法の名前はグラフの上の空きに重ね、上限超えの注記は金額の行に並べる)
   -------------------------------------------------------------------------- */
body.new_preuploader dialog.np_dialog.np_price_chart_dialog {
    max-width: 800px;
    width: calc(100% - 2rem);
    box-sizing: border-box;
    padding: 1rem 1.4rem 1.1rem;
    background: var(--np-chart-dialog-bg);
}
/* 開いている間は上 (題・操作欄) を固定し、下 (グラフ) だけをスクロールする。地のグラデーションは
   ダイアログの枠に対して動かないので、操作欄に地色を塗って重ねなくてよい */
body.new_preuploader dialog.np_dialog.np_price_chart_dialog[open] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* ライトの地は料金グラフ専用のグラデーション (--np-chart-dialog-bg = 上 #4782f9・下 #96c6d1。
   2026-10-24 ユーザー指示。11/05 にほかのダイアログを全部明るいグラデーションにしたときも、これは変えない
   ユーザー指示)。ダイアログ共通のライトの規則は料金グラフを除くので、縁を透明にして地を透かす指定と、
   その青い地で読める文字と枠の色 (オプションダイアログと同じ黒い文字・濃い青の枠) もここで指定する */
body.new_preuploader:not(.theme-dark) dialog.np_dialog.np_price_chart_dialog {
    background-image: var(--np-chart-dialog-bg);
    border-color: transparent;
    background-origin: border-box;
    --np-dialog-text: #000000;
    --np-dialog-dim: rgba(0, 0, 0, 0.68);
    --np-control-border: 1px solid rgba(2, 18, 53, 0.5);
    --np-pc-alert: #a11b1b;
}
body.new_preuploader .np_pc {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
/* スクロールバーはダイアログの右端、グラフは下端まで (ダイアログの余白の分を広げる) */
body.new_preuploader .np_pc_body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: 0 -1.4rem -1.1rem;
    padding: 0 1.4rem 1.1rem;
}
body.new_preuploader .np_pc_lead {
    margin: -0.7rem 0 0.4rem;
    font-size: 0.85rem;
    color: var(--np-dialog-dim);
    text-align: center;
}
body.new_preuploader .np_pc_controls {
    display: grid;
    gap: 0.45rem;
    margin: 0 -0.2rem;
    padding: 0.5rem 0.2rem 0.6rem;
    border-bottom: var(--np-control-border);
}
body.new_preuploader .np_pc_toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}
body.new_preuploader .np_pc_seg {
    display: inline-flex;
    border: var(--np-control-border);
    border-radius: 7px;
    overflow: hidden;
}
body.new_preuploader .np_pc_seg button {
    padding: 0.35rem 0.9rem;
    border: 0;
    border-right: var(--np-control-border);
    background: transparent;
    color: var(--np-dialog-text);
    font-size: 0.9rem;
    cursor: pointer;
}
body.new_preuploader .np_pc_seg button:last-child {
    border-right: 0;
}
body.new_preuploader .np_pc_seg button[aria-pressed="true"] {
    background: var(--np-accent);
    color: var(--np-accent-contrast);
}
body.new_preuploader .np_pc_seg button:disabled {
    opacity: var(--np-disabled-opacity);
    cursor: default;
}
body.new_preuploader .np_pc_slider {
    display: grid;
    grid-template-columns: 7.2em minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.9rem;
}
body.new_preuploader .np_pc_slider input[type="range"] {
    width: 100%;
    min-width: 0;
    margin: 0;
    accent-color: var(--np-accent);
}
body.new_preuploader .np_pc_number {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
body.new_preuploader .np_pc_number input {
    width: 4.6em;
    box-sizing: border-box;
    padding: 0.25rem 0.45rem;
    border: var(--np-control-border);
    border-radius: 6px;
    background: transparent;
    color: var(--np-dialog-text);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
body.new_preuploader .np_pc_unit {
    min-width: 1.7em;
    color: var(--np-dialog-dim);
}
body.new_preuploader .np_pc_error {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    color: var(--np-pc-alert, #d43f3f);
}
body.new_preuploader .np_pc_quality_title {
    margin: 0.6rem 0 0;
    font-size: 1rem;
    font-weight: 600;
}
/* 段の名前の High Resolution は /manual_pipeline の画質の表示 (stage_price_quality_high =
   --mp-quality-high) と同じ色 (2026-10-13 ユーザー指示。/workspace 側は同じ色定数。
   np_run_options_quality_high と同じ) */
body.new_preuploader .np_pc_quality_title_high {
    color: var(--np-quality-high, #0400cf);
}
body.new_preuploader.theme-dark .np_pc_quality_title_high {
    color: var(--np-quality-high, #00c75b);
}
body.new_preuploader .np_pc_pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.2rem 1rem;
}
body.new_preuploader .np_pc_cell {
    position: relative;
    margin: 0;
    min-width: 0;
}
body.new_preuploader .np_pc_caption {
    position: absolute;
    top: 0.1rem;
    left: 0;
    right: 0;
    z-index: 1;
    font-size: 0.9rem;
    text-align: center;
    pointer-events: none;
}
body.new_preuploader .np_pc_canvas_box {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 3;
}
body.new_preuploader .np_pc_canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}
/* 上の canvas (点と十字) がクリック・マウスのドラッグを受ける */
body.new_preuploader .np_pc_pick {
    cursor: crosshair;
    touch-action: manipulation;
}
/* 金額 (上限超えのときは「Over the limit」と上限の注記) */
body.new_preuploader .np_pc_price_row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0 0.5rem;
    margin: 0;
    text-align: center;
}
body.new_preuploader .np_pc_price {
    font-size: 1.2rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
body.new_preuploader .np_pc_price_loading,
body.new_preuploader .np_pc_price_na,
body.new_preuploader .np_pc_price_error {
    color: var(--np-dialog-dim);
}
/* 上限超えの「Over the limit」は色を付けず、上限の注記は右の黄色の ! のツールチップの中 */
body.new_preuploader .np_pc_price_over {
    font-size: 1rem;
}
body.new_preuploader .np_pc_note {
    align-self: center;
    font-size: 0.8rem;
    color: var(--np-dialog-dim);
}
body.new_preuploader .np_pc_note:empty {
    display: none;
}
/* /manual_pipeline の工程別の料金グラフ (stage_price_chart.js): 工程の切替は折り返せる、グラフは 1 段に 1 枚
   (/workspace の 1 枚と同じくらいの大きさで中央)、前の工程の結果で決まる値の注釈はスライダーの下 */
body.new_preuploader .np_spc_steps .np_pc_seg {
    flex-wrap: wrap;
}
body.new_preuploader .np_spc_single,
body.new_preuploader .np_cpc_single {
    max-width: 440px;
    margin: 0 auto;
}
body.new_preuploader .np_spc .np_pc_number input {
    width: 6.6em;
}
body.new_preuploader .np_spc_annotation {
    margin: 0;
    font-size: 0.8rem;
    color: var(--np-dialog-dim);
}
/* Mesh の Point-based の縮小・外れ値除去: 1 行に並べる (名前 + 選択。狭いと折り返す) */
body.new_preuploader .np_spc_choices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.6rem;
    font-size: 0.9rem;
}
body.new_preuploader .np_spc_choice {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.8rem;
}
/* /conversion の変換の料金グラフ (conversion_price_chart.js): 種類の切替は折り返せる。グラフ 1 枚の大きさは
   上の .np_spc_single と同じ (他の料金グラフと同じ大きさ。2026-10-14 ユーザー指示) */
body.new_preuploader .np_cpc_kinds .np_pc_seg {
    flex-wrap: wrap;
}
/* 拡張子の選択: 名前と選択を File size のスライダー (.np_pc_slider) と同じ列にそろえる (狭い画面は下の
   @media でスライダーと同じく名前を上の行に) */
body.new_preuploader .np_cpc_choice {
    display: grid;
    grid-template-columns: 7.2em minmax(0, 1fr);
    align-items: center;
    gap: 0.8rem;
    font-size: 0.9rem;
}
body.new_preuploader .np_cpc_choice .np_pc_seg {
    justify-self: start;
    flex-wrap: wrap;
}
/* 工程別のグラフは Mesh 系の操作欄が高いので、低い・狭い画面では操作欄を固定せずグラフと一緒にスクロール
   する (固定するとグラフの見える所がほとんど残らない) */
@media (max-height: 800px) and (min-width: 601px) {
    body.new_preuploader .np_spc {
        overflow-y: auto;
        margin: 0 -1.4rem -1.1rem;
        padding: 0 1.4rem 1.1rem;
    }
    body.new_preuploader .np_spc .np_pc_body {
        flex: none;
        overflow: visible;
        margin: 0;
        padding: 0;
    }
}
@media (max-width: 600px) {
    body.new_preuploader .np_spc {
        overflow-y: auto;
        margin: 0 -0.9rem -1rem;
        padding: 0 0.9rem 1rem;
    }
    body.new_preuploader .np_spc .np_pc_body {
        flex: none;
        overflow: visible;
        margin: 0;
        padding: 0;
    }
}
/* 狭い画面はグラフを 1 列に積み、スライダーはラベルを上の行に出す */
@media (max-width: 600px) {
    body.new_preuploader dialog.np_dialog.np_price_chart_dialog {
        padding: 0.9rem 0.9rem 1rem;
    }
    body.new_preuploader .np_pc_body {
        margin: 0 -0.9rem -1rem;
        padding: 0 0.9rem 1rem;
    }
    /* 積んだときは金額の行と次のグラフの名前を離す */
    body.new_preuploader .np_pc_pair {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.9rem;
    }
    body.new_preuploader .np_pc_slider {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 0.1rem;
    }
    body.new_preuploader .np_pc_slider_label {
        grid-column: 1 / -1;
    }
    body.new_preuploader .np_cpc_choice {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.1rem;
    }
}

/* --------------------------------------------------------------------------
   <= 880px (縦長表示): ヘッダーを 2 段にする。
   1 行目 = メニュー + ページ名 (Workspace) + ユーザー名、
   2 行目 = 支払い額 / 使い方 / User Log / テーマ切替 (右寄せ)
   -------------------------------------------------------------------------- */
@media (max-width: 880px) {
    body.new_preuploader .np_header {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        row-gap: 0.8rem;
        padding-bottom: 1.6rem;
    }
    /* 1 行目: メニュー / ページ名 / ユーザー名。ユーザー名が長くて収まらないときは
       折り返してタイトルの一段下 (操作列の上) に右寄せで表示する */
    body.new_preuploader .np_header_top {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        row-gap: 0.6rem;
        min-width: 0;
    }
    /* 2 行目: 操作群 (1 行目の幅に縛られない独立した flex 行、右寄せ)。
       1 行に収まらない幅では 課金表示 (保存データ総量 + 支払い額) と
       トグル群 (使い方 / User Log / テーマ) の 2 行に折り返す。グループ間の
       間隔は column-gap で取り、折り返したときに行末へ余白を残さない
       (両行の右端が揃う) */
    body.new_preuploader .np_header_controls {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        column-gap: 0.9rem;
        row-gap: 0.6rem;
        min-width: 0;
    }
    body.new_preuploader .np_header_billing,
    body.new_preuploader .np_header_toggles {
        display: flex;
        align-items: center;
    }
    body.new_preuploader .np_header .navigation_wrapper {
        flex: 0 0 auto;
        align-self: center;
    }
    body.new_preuploader .np_header #user_login {
        order: 0;
        flex: 0 1 auto;
        margin-left: auto;
        width: auto;
        max-width: 100%;
        min-width: 0;
        justify-content: flex-end;
        align-self: center;
    }
    /* 画面幅を超えるほど長い名前は省略記号で切り詰める */
    body.new_preuploader .np_header #user_name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* ロゴ・サイト名・ページ名。single.css の縦長表示の .navigation_wrapper { padding-top: 1.5rem }
       と同じだけ下げて、メニューのボタンと縦の中央をそろえる。縮まず、メニューの横に収まらない長い
       ページ名 (特定商取引法に基づく表記など) では次の段に移る (ロゴを入れる前のページ名と同じ) */
    body.new_preuploader .np_header .np_brand {
        flex: 0 0 auto;
        align-self: center;
        margin-top: 1.5rem;
        margin-left: 0.6rem;
        gap: 0.55rem;
    }
    body.new_preuploader .np_brand_logo {
        width: 2.3rem;
        height: 2.3rem;
    }
    body.new_preuploader .np_brand_name {
        font-size: 0.75rem;
    }
    body.new_preuploader .np_header #site_title {
        font-size: 1.3rem;
        text-align: left;
        white-space: nowrap;
        /* single.css の狭幅指定 (min-width:210px / width:80% / margin-left:8% /
           text-align:center / padding-top:1rem) を打ち消す */
        width: auto;
        min-width: 0;
        max-width: none;
        margin: 0;
        padding: 0;
    }
    body.new_preuploader .np_storage_usage_wrap {
        margin-left: 0;
        margin-right: 0.6rem;
    }
    /* トグル群との間隔は操作群の column-gap が担う */
    body.new_preuploader .np_month_charge {
        margin-left: 0;
        margin-right: 0;
    }
    /* 隣のトグルとの間隔は sibling セレクタの margin-left (料金グラフは自分の
       margin-right) が担う */
    body.new_preuploader .np_price_chart_toggle,
    body.new_preuploader .np_howto_toggle,
    body.new_preuploader .np_userlog_toggle,
    body.new_preuploader .np_theme_toggle {
        margin-left: 0;
    }
}

/* --------------------------------------------------------------------------
   <= 680px: directory upload option is hidden, rows stack into two lines
   (ヘッダーの 2 段化は上の <= 880px ブロック)
   -------------------------------------------------------------------------- */
@media (max-width: 680px) {
    body.new_preuploader .np_upload_option_directory {
        display: none;
    }
    body.new_preuploader .np_row {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "thumb meta"
            "actions actions";
        row-gap: 0.6rem;
    }
    body.new_preuploader .np_row .np_thumb_button,
    body.new_preuploader .np_row .np_derived_cell {
        grid-area: thumb;
    }
    body.new_preuploader .np_row .np_thumb,
    body.new_preuploader .np_row .np_thumb_placeholder {
        width: 68px;
        height: 50px;
    }
    body.new_preuploader .np_row .np_thumb_button_small .np_thumb,
    body.new_preuploader .np_row .np_thumb_button_small .np_thumb_placeholder {
        width: 56px;
        height: 40px;
    }
    body.new_preuploader .np_row .np_connector {
        width: 68px;
        min-height: 50px;
    }
    body.new_preuploader .np_connector_curve,
    body.new_preuploader .np_connector_pass {
        left: 24px;
    }
    body.new_preuploader .np_connector_curve {
        width: 30px;
    }
    body.new_preuploader .np_connector_arrow {
        left: 54px;
    }
    body.new_preuploader .np_row .np_meta {
        grid-area: meta;
    }
    body.new_preuploader .np_row .np_row_actions {
        grid-area: actions;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    body.new_preuploader .np_upload_options {
        flex-direction: column;
        align-items: center;
    }
    body.new_preuploader .np_upload_option {
        width: 100%;
        max-width: 15rem;
        box-sizing: border-box;
    }
    body.new_preuploader .np_row.np_convert_row {
        margin-left: 1.2rem;
        padding: 0.45rem 0.7rem;
        gap: 0.5rem;
    }
    /* 変換行の操作列 (実行中はチップとバーを含む) は行の幅いっぱいの 2 段目に置く。変換行には actions の
       領域が無いので、上の grid-area: actions のままだと表の外の列に置かれて右にはみ出す */
    body.new_preuploader .np_row.np_convert_row > .np_row_actions {
        grid-area: auto;
        grid-column: 1 / -1;
    }
}