/* [2026-09-18] 目的：完整編輯器與簡易編輯器共用同一套點選局部去背視窗樣式。 */
.ds-white-removal-dialog {
    position: fixed;
    inset: 0;
    z-index: 10030;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, .72);
    backdrop-filter: blur(3px);
}
.ds-white-removal-dialog.is-visible { display: flex; }
.ds-white-removal-panel {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    width: min(1080px, 94vw);
    height: min(860px, 92vh);
    overflow: hidden;
    border: 1px solid #d8e0ec;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .3);
}
.ds-white-removal-head,
.ds-white-removal-toolbar,
.ds-white-removal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #e5eaf1;
}
.ds-white-removal-head > div { display: grid; gap: 3px; }
.ds-white-removal-head strong { color: #0f172a; font-size: 17px; }
.ds-white-removal-head span,
.ds-white-removal-foot > span { color: #64748b; font-size: 12px; }
.ds-white-removal-head button {
    width: 34px;
    height: 34px;
    color: #475569;
    border: 1px solid #d8e0ec;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 22px;
}
/* [2026-09-21] 目的：復原、重做與重設同組排列，工具列空間不足時換行，避免按鈕文字被擠壓。 */
.ds-white-removal-toolbar { justify-content: flex-start; flex-wrap: wrap; background: #f8fafc; }
.ds-white-removal-history { display: inline-flex; gap: 6px; margin-left: auto; }
.ds-white-removal-toolbar button { white-space: nowrap; }
.ds-white-removal-toolbar label { display: flex; align-items: center; gap: 9px; color: #334155; font-size: 12px; }
.ds-white-removal-toolbar input { width: 180px; accent-color: #0f9da5; }
.ds-white-removal-color { display: inline-flex; align-items: center; gap: 6px; color: #64748b; font-size: 12px; }
.ds-white-removal-color i { display: inline-block; width: 24px; height: 24px; border: 2px solid #fff; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px #94a3b8; }
.ds-white-removal-color button.is-active { color: #fff; border-color: #d97706; background: #d97706; }
.ds-white-removal-zoom { display: inline-grid; grid-template-columns: 34px 58px 34px; align-items: center; }
.ds-white-removal-zoom strong { color: #334155; text-align: center; font-size: 12px; }
.ds-white-removal-backgrounds { display: inline-flex; align-items: center; gap: 4px; }
.ds-white-removal-backgrounds > span { margin-right: 3px; color: #64748b; font-size: 12px; }
.ds-white-removal-backgrounds button { min-width: 38px; padding: 0 8px; }
.ds-white-removal-backgrounds button.is-active { color: #fff; border-color: #0f929a; background: #0f929a; }
.ds-white-removal-toolbar button,
.ds-removal-view-tools button,
.ds-white-removal-foot button {
    min-height: 34px;
    padding: 0 14px;
    color: #334155;
    border: 1px solid #cfd8e5;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}
.ds-white-removal-toolbar button:disabled,
.ds-removal-view-tools button:disabled { cursor: default; opacity: .45; }
.ds-white-removal-stage {
    min-height: 0;
    padding: 20px;
    overflow: auto;
    background-color: #dfe5ed;
    background-image: linear-gradient(45deg, #cbd3df 25%, transparent 25%), linear-gradient(-45deg, #cbd3df 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #cbd3df 75%), linear-gradient(-45deg, transparent 75%, #cbd3df 75%);
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
    text-align: center;
    /* [2026-09-18] 目的：手機局部去背由共用程式接管單指拖曳與雙指縮放，避免瀏覽器改為縮放整個頁面。 */
    touch-action: none;
}
.ds-white-removal-stage[data-preview-background="black"] { background: #111827; }
.ds-white-removal-stage[data-preview-background="white"] { background: #fff; }
.ds-white-removal-canvas-space {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100%;
    min-height: 100%;
}
.ds-white-removal-stage canvas {
    display: block;
    flex: 0 0 auto;
    /* [2026-09-21] 目的：顏色去背以手指表示可點選背景，筆刷模式另保留圓形範圍提示。 */
    cursor: pointer;
    box-shadow: 0 4px 24px rgba(15, 23, 42, .18);
}
.ds-white-removal-foot { border-top: 1px solid #e5eaf1; border-bottom: 0; }
.ds-white-removal-foot > div { display: flex; gap: 8px; }
.ds-white-removal-foot button.is-primary { color: #fff; border-color: #0f929a; background: #0f929a; }
.ds-white-removal-foot button:disabled { cursor: default; opacity: .45; }

/* [2026-09-21] 目的：改為左側緊湊工具欄與右側畫布，共用設定集中，筆刷設定隨模式顯示，保留畫布高度。 */
.ds-white-removal-head { grid-column: 1 / -1; grid-row: 1; }
.ds-white-removal-toolbar { grid-column: 1; grid-row: 2 / 4; display: block; min-height: 0; overflow-y: auto; padding: 16px 14px; border-bottom: 0; border-right: 1px solid #e5eaf1; background: #fff; }
/* [2026-09-21] 目的：三個去背工具改為獨立直列按鈕，以間距與邊框區分，避免共用底色造成黏連。 */
.ds-removal-mode-switch { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ds-removal-mode-switch button { min-height: 36px; padding: 0 12px; border-color: #d8e0ec; background: #fff; text-align: left; }
.ds-removal-mode-switch button:not(.is-active):hover { border-color: #8bbec1; background: #f2fbfa; }
.ds-removal-mode-switch button.is-active { color: #fff; border-color: #0f929a; background: #0f929a; }
.ds-removal-mode-help { margin: 10px 0 16px; color: #64748b; font-size: 12px; line-height: 1.6; }
.ds-removal-shared { display: grid; gap: 16px; padding: 16px 0; border-top: 1px solid #e5eaf1; }
.ds-removal-shared-heading { display: grid; gap: 4px; color: #334155; font-size: 12px; font-weight: 700; }
.ds-removal-shared-heading small { color: #64748b; font-size: 11px; font-weight: 400; }
.ds-white-removal-color { display: flex; gap: 10px; }
.ds-white-removal-color i { width: 26px; height: 26px; flex: 0 0 26px; box-sizing: border-box; }
.ds-white-removal-color button { margin-left: auto; padding: 0 10px; }
.ds-white-removal-toolbar .ds-removal-range { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.ds-removal-range strong { grid-column: 2; grid-row: 1; text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; }
.ds-white-removal-toolbar .ds-removal-range input { grid-column: 1 / -1; grid-row: 2; width: 100%; min-width: 0; margin: 0; }
.ds-removal-brush-settings:not([hidden]) { display: grid; gap: 14px; padding: 16px 0; border-top: 1px solid #e5eaf1; }
.ds-removal-brush-settings > strong { color: #334155; font-size: 12px; }
.ds-white-removal-toolbar .ds-removal-edge-option { gap: 6px; }
.ds-white-removal-toolbar .ds-removal-edge-option input { width: 14px; height: 14px; margin: 0; }
.ds-removal-brush-settings > small { margin-top: -8px; color: #64748b; font-size: 11px; line-height: 1.6; }
.ds-removal-help { padding-top: 14px; border-top: 1px solid #e5eaf1; color: #64748b; font-size: 11px; line-height: 1.8; }
.ds-removal-help summary { cursor: pointer; color: #475569; font-size: 12px; }
.ds-removal-help p { margin: 8px 0 0; }
.ds-removal-view-tools { grid-column: 2; grid-row: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; border-bottom: 1px solid #e5eaf1; }
.ds-removal-view-tools button { min-height: 30px; padding: 0 8px; white-space: nowrap; }
.ds-white-removal-zoom { grid-template-columns: 30px 48px 30px; }
.ds-white-removal-stage { grid-column: 2; grid-row: 3; min-width: 0; }
.ds-white-removal-foot { grid-column: 1 / -1; grid-row: 4; }
.ds-white-removal-stage canvas.is-brushing { cursor: none; }
#dsRemovalBrushCursor { display: none; position: fixed; transform: translate(-50%, -50%); border: 1px solid #fff; box-shadow: 0 0 0 1px #17212e; border-radius: 50%; pointer-events: none; z-index: 1; box-sizing: border-box; }
.ds-white-removal-toolbar button:focus-visible,
.ds-removal-view-tools button:focus-visible { outline: 2px solid #0f929a; outline-offset: 3px; }
/* [2026-09-21] 目的：窄螢幕改為可捲動的頂部工具區，避免側欄壓縮圖片與控制項。 */
@media (max-width: 720px) {
    .ds-white-removal-dialog { padding: 8px; }
    .ds-white-removal-panel { width: 100%; height: 96vh; border-radius: 12px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
    .ds-white-removal-toolbar { grid-column: 1; grid-row: 2; max-height: 26vh; padding: 10px 12px; border-right: 0; border-bottom: 1px solid #e5eaf1; }
    .ds-removal-mode-help { margin: 6px 0 10px; }
    .ds-removal-shared { gap: 10px; padding: 10px 0; }
    .ds-removal-shared-heading { display: flex; gap: 8px; align-items: baseline; }
    .ds-removal-brush-settings:not([hidden]) { padding: 10px 0; gap: 10px; }
    .ds-removal-view-tools { grid-column: 1; grid-row: 3; gap: 6px; padding: 8px 12px; }
    .ds-white-removal-history { margin-left: auto; }
    .ds-white-removal-backgrounds > span { display: none; }
    .ds-white-removal-stage { grid-column: 1; grid-row: 4; padding: 10px; }
    .ds-white-removal-foot { grid-column: 1; grid-row: 5; padding: 10px 12px; align-items: flex-start; flex-direction: column; }
    .ds-white-removal-foot > div { width: 100%; }
    .ds-white-removal-foot button { flex: 1; }
}