/* ==========================================================================
   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): the palette from new_design_2.css.
   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);
    --np-row-bg: rgba(255, 255, 255, 0.10);
    /* パネル/行の枠色。ダーク対応の各ページ (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;
    --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;
}
body.new_preuploader.theme-dark {
    /* dark — tokens ported from new_design_2.css */
    /* ライトと同じく下側がわずかに明るくなる縦グラデーション。
       終端は不透明色にする (半透明だと下に重なる層次第で色が変わり、
       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-badge-bg: #f43f5e;
    --np-thumb-bg: rgba(0, 0, 0, 0.45);
    --np-connector: rgba(148, 163, 184, 0.55);
}

/* --------------------------------------------------------------------------
   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;
}
body.new_preuploader .np_header #site_title {
    color: var(--np-title);
    font-size: 1.7rem;
    padding-left: 1.1rem;
    padding-bottom: 0;
    margin: 0;
}
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;
}
/* 広幅 (1 行レイアウト) ではハンバーガー画像 (menu.png) の線がボタン箱内でやや
   上寄りに描かれるため、箱同士を中央揃えしてもタイトル文字より約 4px 高く見える。
   画素計測で 2 段レイアウト時と同じ見え方になるよう線だけを下げる (レイアウト不変) */
@media (min-width: 881px) {
    body.new_preuploader .np_header .navigation_menu {
        transform: translateY(4px);
    }
}
/* 操作群 (支払い額 / 使い方 / User Log / テーマ) のラッパー。広幅では箱を作らず
   子をヘッダー flex に直接並べる (auto マージンや sibling セレクタは従来通り) */
body.new_preuploader .np_header_top,
body.new_preuploader .np_header_controls {
    display: contents;
}
/* DOM 上はタイトル行ラッパー内 (操作群より前) にあるユーザー名を、広幅では
   従来通り末尾 (テーマトグルの右) に並べる */
body.new_preuploader .np_header #user_login {
    order: 1;
}
/* 操作群の先頭要素がタイトルとの間の空きを取る。/workspace では支払い額
   バッジ (margin-left:auto) がその役だが、バッジを出さないページ
   (/3d_viewer など) では使い方ボタンが先頭になるため共通化する */
body.new_preuploader .np_header_controls > :first-child {
    margin-left: auto;
}
/* 課金対象の保存データ総量 (支払い額の左)。支払い額と同じピル型。
   操作群の先頭要素として auto マージンでタイトルとの間の空きを取る。
   ホバー/フォーカスで内訳パネル (.np_storage_tip) をバッジ直下に出す */
body.new_preuploader .np_storage_usage {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    box-sizing: content-box;
    min-height: 1.9rem;
    margin-left: auto;
    margin-right: 0.6rem;
    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_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;
    top: calc(100% + 0.45rem);
    right: 0;
    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;
}
body.new_preuploader .np_storage_usage:hover .np_storage_tip,
body.new_preuploader .np_storage_usage:focus-visible .np_storage_tip {
    visibility: visible;
    opacity: 1;
}
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;
}
/* 今月の支払い額 (保存データ総量の右、使い方ボタンの左)。隣のトグルと同じ
   高さ・同じピル型で、当月分であることは文字ではなく月番号入りカレンダー
   アイコンで示す。タイトルとの間の 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_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;
}
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_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_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;
}

/* --------------------------------------------------------------------------
   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;
}

/* --------------------------------------------------------------------------
   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;
}
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);
    border-color: var(--np-accent);
}
body.new_preuploader .np_status.np_status_done {
    color: var(--np-accent);
}
body.new_preuploader .np_status.np_status_error {
    color: #e5484d;
    border-color: #e5484d;
}

/* 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_warn {
    background: rgba(240, 180, 41, 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_warn {
    border-color: rgba(240, 180, 41, 0.3);
    border-top-color: #f0b429;
}
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;
    }
}

/* 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);
}

/* --------------------------------------------------------------------------
   Dialogs (native <dialog>)
   -------------------------------------------------------------------------- */
body.new_preuploader dialog.np_dialog {
    /* single.css の既存ダイアログと同じ fixed + translate 中央寄せ */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    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%;
}
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 {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 1.2rem;
}
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);
}
/* 新実行ダイアログの Run は 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;
}
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;
}
/* run choice dialog (3 択 + 価格見積り) */
body.new_preuploader dialog.np_dialog.np_dialog_narrow {
    max-width: 360px;
}
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;
}
body.new_preuploader .np_choice_tip_wrap {
    display: inline-flex;
    align-items: center;
    cursor: help;
    outline: none;
}
body.new_preuploader .np_choice_tip_icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--np-dialog-dim);
    color: var(--np-dialog-bg);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
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;
}
body.new_preuploader .np_choice_tip_wrap:hover .np_choice_tip,
body.new_preuploader .np_choice_tip_wrap:focus .np_choice_tip {
    visibility: visible;
    opacity: 1;
}
body.new_preuploader .np_run_trim_note {
    text-align: left;
    margin: 0.2rem 0 0.4rem;
}
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_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;
}
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;
}
body.new_preuploader .np_new_badge {
    font-size: 0.62rem;
    font-weight: bold;
    letter-spacing: 0.04em;
    background: var(--np-badge-bg);
    color: #ffffff;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
}

/* 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;
}
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;
}

/* --------------------------------------------------------------------------
   Undo toast (fixed at the bottom after a row deletion)
   -------------------------------------------------------------------------- */
body.new_preuploader .np_undo_toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.9rem;
    max-width: calc(100% - 2rem);
    box-sizing: border-box;
    padding: 0.6rem 0.8rem 0.6rem 1.2rem;
    background: var(--np-dialog-bg);
    color: var(--np-dialog-text);
    border: var(--np-control-border);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    z-index: 50;
}
body.new_preuploader .np_undo_text {
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.new_preuploader .np_undo_button {
    border: none;
    border-radius: 999px;
    background: var(--np-accent);
    color: var(--np-accent-contrast);
    padding: 0.35rem 1.1rem;
    font-size: 0.92rem;
    cursor: pointer;
    flex-shrink: 0;
}
body.new_preuploader .np_undo_button:hover {
    filter: brightness(1.1);
}
body.new_preuploader .np_undo_close {
    border: none;
    background: none;
    color: var(--np-dialog-dim);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    flex-shrink: 0;
}
body.new_preuploader .np_undo_close:hover {
    color: var(--np-dialog-text);
}

/* --------------------------------------------------------------------------
   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;
}
/* 変換行のステータス列はラベル幅に合わせる (Dataset 行の固定幅を使わない) */
body.new_preuploader .np_convert_row .np_status_col {
    width: auto;
}

/* --------------------------------------------------------------------------
   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_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_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;
}

/* --------------------------------------------------------------------------
   <= 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 行、右寄せ) */
    body.new_preuploader .np_header_controls {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
    }
    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;
    }
    body.new_preuploader .np_header #site_title {
        flex: 0 0 auto;
        font-size: 1.5rem;
        padding-left: 0.6rem;
        align-self: center;
        text-align: left;
        white-space: nowrap;
        /* single.css の狭幅指定 (min-width:210px / width:80% / margin-left:8% /
           text-align:center) を打ち消す */
        width: auto;
        min-width: 0;
        max-width: none;
        margin: 0;
    }
    body.new_preuploader .np_storage_usage {
        margin-left: 0;
        margin-right: 0.6rem;
    }
    body.new_preuploader .np_month_charge {
        margin-left: 0;
        margin-right: 0.9rem;
    }
    /* 隣のトグルとの間隔は sibling セレクタの margin-left が担う */
    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;
    }
}