:root {
  --navy:#11243a; --ink:#17283f; --muted:#66778c; --line:#dce5ef; --surface:#fff;
  --canvas:#eef3f8; --blue:#1f67ad; --blue-deep:#15538e; --blue-soft:#eaf4ff;
  --danger:#ab4f55; --shadow:0 14px 38px rgba(20,43,69,.07); --shadow-strong:0 20px 60px rgba(15,35,59,.12);
}
*,*::before,*::after { box-sizing:border-box; }
html { min-width:320px; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:"Microsoft JhengHei","Noto Sans TC",Arial,sans-serif; font-size:14px; line-height:1.55; }
button,input,select { font:inherit; }
button { cursor:pointer; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid #94c6f5; outline-offset:2px; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,p { margin-top:0; }

.app-header { display:flex; align-items:center; gap:20px; min-height:72px; padding:0 max(24px,calc((100vw - 1540px)/2)); background:linear-gradient(110deg,#102238,#183653); color:#fff; box-shadow:0 4px 18px rgba(10,28,47,.18); }
.brand { display:inline-flex; align-items:center; gap:11px; white-space:nowrap; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border:1px solid rgba(255,255,255,.18); border-radius:10px; background:linear-gradient(145deg,#2b7bc5,#15558f); font-size:14px; font-weight:900; letter-spacing:-.06em; box-shadow:inset 0 1px rgba(255,255,255,.18); }
.brand-copy { display:flex; flex-direction:column; line-height:1.2; }
.brand-copy strong { font-size:14px; letter-spacing:.02em; }
.brand-copy small { margin-top:3px; color:#91abc5; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.header-divider { width:1px; height:28px; background:rgba(255,255,255,.16); }
.header-title { color:#bfd0e1; font-size:13px; }
.header-actions { display:flex; align-items:center; gap:12px; margin-left:auto; }
.system-status { display:flex; align-items:center; gap:7px; color:#c8d8e8; font-size:12px; }
.system-status i { width:7px; height:7px; border-radius:50%; background:#4bd1a0; box-shadow:0 0 0 4px rgba(75,209,160,.12); }
.home-link { padding:8px 13px; border:1px solid rgba(255,255,255,.2); border-radius:8px; color:#e4eef8; font-size:12px; font-weight:700; }
.home-link:hover { background:rgba(255,255,255,.09); }

.workspace { max-width:1588px; margin:0 auto; padding:36px 24px 76px; }
.page-intro { display:flex; justify-content:space-between; align-items:flex-end; gap:28px; margin-bottom:24px; }
.intro-copy { max-width:780px; }
.eyebrow,.section-kicker { margin:0 0 6px; color:#3976b7; font-size:12px; font-weight:900; letter-spacing:.17em; }
h1 { margin-bottom:8px; font-size:32px; line-height:1.2; letter-spacing:-.035em; }
.intro-text { margin:0; color:var(--muted); font-size:14px; }
.intro-facts { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.intro-facts span { padding:7px 11px; border:1px solid #d5e1ec; border-radius:7px; background:rgba(255,255,255,.72); color:#617489; font-size:12px; white-space:nowrap; }
.intro-facts b { color:#294b6f; }
.workflow-rail { display:grid; grid-template-columns:auto minmax(35px,1fr) auto minmax(35px,1fr) auto; align-items:center; gap:15px; margin-bottom:22px; padding:14px 20px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.72); }
.workflow-step { display:flex; align-items:center; gap:10px; color:#7c8b9c; }
.workflow-step>span { display:grid; place-items:center; width:30px; height:30px; border:1px solid #d6e0ea; border-radius:8px; background:#fff; font-size:12px; font-weight:900; }
.workflow-step div { display:flex; flex-direction:column; line-height:1.3; }
.workflow-step strong { color:#42566d; font-size:12px; }
.workflow-step small { font-size:12px; }
.workflow-step.is-active>span { border-color:var(--blue); background:var(--blue); color:#fff; }
.workflow-step.is-active strong { color:var(--blue-deep); }
.workflow-rail>i { height:1px; background:#d8e2ec; }

.workspace-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,390px); align-items:start; gap:24px; }
.work-column { display:grid; gap:20px; min-width:0; }
.panel,.preview-panel,.tips-panel,.spec-panel { min-width:0; border:1px solid var(--line); border-radius:15px; background:var(--surface); box-shadow:var(--shadow); }
.panel { padding:27px; }
.panel-heading { display:flex; align-items:flex-start; gap:15px; margin-bottom:20px; }
.panel-heading>div { min-width:0; flex:1; }
.panel-heading h2 { margin:0 0 3px; font-size:19px; line-height:1.3; letter-spacing:-.01em; }
.panel-heading p:not(.section-kicker) { margin:0; color:var(--muted); font-size:12px; }
.step-number { display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; border-radius:9px; background:var(--blue-soft); color:var(--blue); font-size:12px; font-weight:900; }
.primary-button { display:inline-flex; justify-content:center; align-items:center; gap:9px; min-height:40px; padding:9px 16px; border:1px solid var(--blue); border-radius:8px; background:var(--blue); color:#fff; font-weight:800; white-space:nowrap; box-shadow:0 5px 12px rgba(31,103,173,.14); transition:background .15s,transform .15s,box-shadow .15s; }
.primary-button:hover { background:var(--blue-deep); transform:translateY(-1px); box-shadow:0 7px 16px rgba(31,103,173,.2); }
.upload-button { position:relative; flex:0 0 auto; margin-left:auto; font-size:13px; cursor:pointer; }
#ProductFileUP { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.format-strip { display:flex; align-items:center; gap:6px; margin:-2px 0 14px 51px; }
.format-strip span { padding:3px 7px; border-radius:4px; background:#edf3f8; color:#60758a; font-size:12px; font-weight:900; letter-spacing:.05em; }
.format-strip p { margin:0 0 0 5px; color:#91a0af; font-size:12px; }
.UploadDIV { max-height:540px; overflow:auto; border:1px dashed #afc5da; border-radius:10px; background:#f8fbfe; }
.UploadDIV:empty::before { content:"尚未加入圖稿\A選擇圖片或 PDF 後，檔案與頁面會顯示在這裡"; display:block; padding:43px 16px; color:#8192a5; text-align:center; white-space:pre-line; line-height:1.9; }
.upload-file-row { padding:16px; border-bottom:1px solid #e0e9f2; }
.upload-file-row:last-child { border-bottom:0; }
.upload-file-name { overflow-wrap:anywhere; color:#294360; font-weight:800; }
.pdf-status { margin-top:10px; color:var(--muted); }
.pdf-dpi-control { display:flex; align-items:center; gap:10px; margin:14px 0 10px; color:#3a526e; font-weight:800; }
.pdf-dpi-control select { min-width:120px; }
.pdf-color-badge { margin-left:auto; padding:4px 8px; border:1px solid #bed5e8; border-radius:999px; background:#eaf4fc; color:#2f668e; font-size:12px; font-weight:900; }
.pdf-page-actions { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
.pdf-page-actions button,.text-button { padding:7px 10px; border:1px solid #cad8e7; border-radius:7px; background:#fff; color:#24598f; font-weight:800; }
.pdf-page-actions button:hover,.text-button:hover { border-color:#91b3d5; background:#edf5fe; }
.text-button.danger { color:var(--danger); }
.pdf-page-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:11px; max-height:440px; overflow:auto; padding:2px; }
.pdf-page { position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; padding:10px; border:1px solid #d5e0eb; border-radius:9px; background:#fff; cursor:pointer; transition:border-color .15s,box-shadow .15s; }
.pdf-page:hover { border-color:#91b9e1; }
.pdf-page:has(input:checked) { border-color:#2c73bb; background:#eef6ff; box-shadow:inset 0 0 0 1px #2c73bb; }
.pdf-page input { align-self:flex-start; margin:0; accent-color:var(--blue); }
.pdf-page img { width:100%; height:140px; object-fit:contain; background:linear-gradient(45deg,#edf1f5 25%,transparent 25%),linear-gradient(-45deg,#edf1f5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#edf1f5 75%),linear-gradient(-45deg,transparent 75%,#edf1f5 75%); background-size:16px 16px; background-color:#fff; }
.pdf-page span { color:#334d69; font-size:12px; font-weight:800; text-align:center; overflow-wrap:anywhere; }

.settings-heading { align-items:center; }
.recommended-badge { flex:0 0 auto; padding:5px 9px; border:1px solid #b9d9ca; border-radius:999px; background:#eef9f4; color:#26775c; font-size:12px; font-weight:900; }
.recommended-badge.subtle { border-color:#c8dbea; background:#f0f6fb; color:#4b6d8c; }
.setting-section { padding:24px 0; border-top:1px solid #e6edf4; }
.setting-section.first-section { padding-top:21px; }
.setting-section.emphasis-section { margin:5px -12px 0; padding:24px 18px; border:1px solid #cbddeb; border-radius:12px; background:linear-gradient(145deg,#f9fcff,#f4f8fc); }
.section-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:17px; }
.section-heading h3 { margin:0 0 3px; font-size:15px; }
.section-heading p { margin:0; color:#7a8a9c; font-size:12px; }
.section-heading>span { margin-top:2px; color:#8a9aac; font-size:12px; white-space:nowrap; }
.section-heading .required-mark { color:var(--blue); font-weight:900; }
.setting-row { display:grid; grid-template-columns:118px minmax(0,1fr); gap:14px; padding:14px 0; }
.setting-row+.setting-row { border-top:1px solid #edf1f5; }
.setting-label { padding-top:9px; color:#3d5269; font-size:12px; font-weight:900; }
.setting-content { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; min-width:0; }
.segmented { display:inline-flex; flex-wrap:wrap; gap:7px; }
.btnSelect { min-height:38px; padding:7px 13px; border:1px solid #cad7e4; border-radius:8px; background:#fff; color:#3e5672; font-weight:800; text-align:left; transition:border-color .15s,background .15s,box-shadow .15s; }
.btnSelect:hover { border-color:#8eb3d6; background:#f4f9ff; }
.btnSelect.btnChoiced { border-color:#2871b7; background:#eaf4ff; color:#174f88; box-shadow:inset 0 0 0 1px #2871b7; }
.btnSelect strong,.btnSelect small { display:block; }
.btnSelect small { margin-top:2px; color:#8493a4; font-size:12px; font-weight:500; }
.btnSelect.btnChoiced small { color:#5b7e9e; }
.wide-segmented { flex:1 1 520px; }
.wide-segmented .btnSelect { flex:1 1 150px; }
.output-segmented { flex:1 1 390px; }
.output-segmented .btnSelect { flex:1 1 160px; }
.strength-control { display:flex; align-items:center; gap:9px; padding:9px 11px; border-left:3px solid #8bb5de; background:#f5f9fd; color:#455d78; font-size:12px; font-weight:800; }
.field-help { width:100%; margin:0; color:#8090a2; font-size:12px; line-height:1.65; }
.read-only-group { display:flex; align-items:center; gap:7px; }
.read-only-label { color:#8291a2; font-size:12px; font-weight:800; }
.read-only-value { padding:7px 10px; border:1px solid #dbe6f0; border-radius:7px; background:#f3f7fb; color:#3b5878; font-size:12px; font-weight:800; }
input[type=number],select { min-height:38px; padding:7px 10px; border:1px solid #c8d6e4; border-radius:7px; background:#fff; color:var(--ink); transition:border-color .15s,box-shadow .15s; }
input[type=number]:focus,select:focus { border-color:#5595d0; box-shadow:0 0 0 3px rgba(71,139,203,.1); }
input:disabled,select:disabled { cursor:not-allowed; background:#edf1f5; color:#93a0ad; }
.input-with-unit { display:flex; align-items:center; gap:7px; }
.input-with-unit input { min-width:0; width:100%; }
.input-with-unit>span { color:#76889a; font-weight:500; white-space:nowrap; }
.compact-unit input { width:72px; text-align:center; }
.field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.field-grid label,.limit-grid label { display:flex; flex-direction:column; gap:6px; color:#3e556d; font-size:12px; font-weight:900; }
.field-grid label>small { min-height:17px; color:#8494a5; font-size:12px; font-weight:500; line-height:1.5; }
.field-grid .full-field { grid-column:1/-1; }
.shrink-fields select,.shrink-fields input { width:100%; }
.process-note { display:flex; align-items:flex-start; gap:10px; margin-top:17px; padding:12px 14px; border:1px solid #cfe7da; border-radius:9px; background:#f1faf6; }
.process-note>span { display:grid; place-items:center; flex:0 0 22px; width:22px; height:22px; border-radius:50%; background:#38a57c; color:#fff; font-size:12px; font-weight:900; }
.process-note p { margin:0; color:#4e6b61; font-size:12px; }
.process-note strong { color:#266b53; }
.threshold-row { display:grid; grid-template-columns:85px minmax(140px,1fr); align-items:center; gap:8px 17px; margin-bottom:18px; color:#50647b; font-size:12px; font-weight:800; }
#LightDarkSlider { height:7px; margin:10px 13px; border:0; border-radius:20px; background:#e2eaf2; }
#LightDarkSlider .ui-slider-range { background:#76a9da; }
#LightDarkSlider .ui-slider-handle { width:17px; height:17px; top:-5px; border:2px solid #3478ba; border-radius:50%; background:#fff; }
.threshold-values { grid-column:2; color:#7f90a4; font-weight:500; }
.limit-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.limit-grid input { width:100%; }
.field-callout { margin-top:10px; padding-left:10px; border-left:2px solid #d5e0eb; }

.advanced-panel { margin-top:4px; border-top:1px solid #e6edf4; }
.advanced-panel summary { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 0 14px; cursor:pointer; list-style:none; }
.advanced-panel summary::-webkit-details-marker { display:none; }
.advanced-panel summary>span { display:flex; align-items:baseline; gap:10px; }
.advanced-panel summary strong { font-size:14px; }
.advanced-panel summary small { color:#8999aa; font-size:12px; font-weight:500; }
.advanced-panel summary em { color:#6b8299; font-size:12px; font-style:normal; }
.advanced-content { padding:0 0 22px; }
.canvas-warning { display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; padding:10px 12px; border:1px solid #ead8b8; border-radius:8px; background:#fffaf0; color:#806334; font-size:12px; }
.canvas-warning strong { flex:0 0 auto; color:#a46a13; }
.preset-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 0; border-top:1px solid #e6edf4; }
.preset-bar>div:first-child { display:flex; align-items:center; gap:10px; }
.preset-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:#edf4fb; color:#346c9f; font-size:12px; font-weight:900; }
.preset-bar strong { font-size:12px; }
.preset-bar p { margin:2px 0 0; color:#8998a8; font-size:12px; }
.preset-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:7px; }
.ModuleSelect { min-width:130px; max-width:190px; }
.run-bar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 -27px -27px; padding:19px 27px; border-top:1px solid #d8e4ee; border-radius:0 0 15px 15px; background:linear-gradient(90deg,#f4f8fc,#edf5fc); }
.run-bar strong { color:#294867; font-size:12px; }
.run-bar p { max-width:500px; margin:2px 0 0; color:#75889c; font-size:12px; }
.run-button { min-width:174px; min-height:44px; }
.run-button:disabled,.run-button:disabled:hover { cursor:wait; opacity:.82; background:var(--blue); transform:none; }
.loading-spinner { width:15px; height:15px; border:2px solid rgba(255,255,255,.42); border-top-color:#fff; border-radius:50%; animation:loading-spin .75s linear infinite; }
@keyframes loading-spin { to { transform:rotate(360deg); } }

.FinishBlock .panel-heading { margin-bottom:15px; }
.result-toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; color:#425a74; font-size:12px; font-weight:900; }
.result-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.result-actions .text-button { font-size:12px; }
.small-button { min-height:34px; padding:6px 12px; font-size:12px; }
.UploadedDIV { max-height:370px; overflow:auto; border:1px solid #dce6f0; border-radius:9px; background:#fafcff; }
.UploadedDIV:empty::before { content:"尚無成品\A執行白底層後，每一頁的處理結果會列在這裡"; display:block; padding:33px 15px; color:#8597aa; text-align:center; white-space:pre-line; line-height:1.8; }
.result-progress { padding:10px 13px; border-bottom:1px solid #dce8f4; background:#edf5fe; color:#315e8c; font-size:12px; font-weight:800; }
.result-row { display:flex; align-items:center; gap:10px; padding:10px 13px; border-bottom:1px solid #e7edf4; }
.result-row:last-child { border-bottom:0; }
.result-check { flex:0 0 auto; width:16px; height:16px; accent-color:var(--blue); }
.result-button { flex:1 1 auto; min-width:0; padding:5px 0; border:0; background:transparent; color:#315b87; font-weight:800; text-align:left; overflow-wrap:anywhere; }
.result-button:hover { text-decoration:underline; }
.result-mode { flex:0 0 auto; padding:3px 7px; border:1px solid #cadbea; border-radius:999px; background:#edf5fc; color:#35688f; font-size:12px; font-weight:900; }
.result-time { flex:0 0 auto; color:#60758b; font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.result-single-download { flex:0 0 auto; padding:6px 10px; border:1px solid #b2cae3; border-radius:7px; background:#fff; color:#235d97; font-size:12px; font-weight:800; }
.result-single-download:hover { background:#edf6ff; }
.result-error { padding:9px 13px; border-bottom:1px solid #f3d8d8; color:#a34b4b; font-size:12px; }

.preview-column { position:sticky; top:22px; display:grid; gap:15px; min-width:0; }
.preview-panel { padding:21px; box-shadow:var(--shadow-strong); }
.preview-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
.preview-kicker { color:#5f8fbe; font-size:12px; font-weight:900; letter-spacing:.17em; }
.preview-heading h2 { margin:2px 0 0; font-size:18px; }
.preview-badge { padding:5px 8px; border:1px solid #e1e9f0; border-radius:999px; background:#f4f7fa; color:#71869a; font-size:12px; white-space:nowrap; }
.ThumbBlock { position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:410px; overflow:hidden; border:1px solid #cbd8e5; border-radius:9px; background-color:#eef2f6; background-image:linear-gradient(45deg,#e2e8ee 25%,transparent 25%),linear-gradient(-45deg,#e2e8ee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e2e8ee 75%),linear-gradient(-45deg,transparent 75%,#e2e8ee 75%); background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0; }
.ThumbBlock.white-preview { border-color:#33465b; background-color:#202b37; background-image:linear-gradient(45deg,#2b3948 25%,transparent 25%),linear-gradient(-45deg,#2b3948 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#2b3948 75%),linear-gradient(-45deg,transparent 75%,#2b3948 75%); }
.ThumbBlock.white-preview::after { content:"白色＝有白墨"; position:absolute; right:9px; bottom:9px; padding:4px 7px; border:1px solid rgba(255,255,255,.18); border-radius:5px; background:rgba(9,17,26,.72); color:#dfeaf5; font-size:12px; line-height:1; pointer-events:none; }
.white-coverage-warning { position:absolute; z-index:2; top:10px; left:50%; width:max-content; max-width:calc(100% - 20px); transform:translateX(-50%); padding:7px 10px; border:1px solid #efb366; border-radius:6px; background:rgba(73,43,10,.92); color:#fff4df; font-size:12px; font-weight:800; text-align:center; pointer-events:none; }
.ThumbBlock:empty::before { content:"尚無預覽\A完成處理後可在此檢查彩圖與白底"; white-space:pre-line; color:#6f8195; text-align:center; line-height:2; }
.ThumbBlock .ShowImg { display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
.ShowFuncBlock { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:13px; }
.ShowFuncBlock label { padding:8px 12px; border:1px solid #d0deeb; border-radius:7px; color:#3b5673; font-size:12px; font-weight:800; text-align:center; cursor:pointer; }
.ShowFuncBlock label:has(input:checked) { border-color:#5e95ce; background:#eaf3ff; color:#19528e; }
.ShowFuncBlock input { accent-color:var(--blue); }
.preview-help { margin:12px 0 0; color:#8494a6; font-size:12px; line-height:1.65; text-align:center; }
.tips-panel,.spec-panel { padding:18px 20px; background:#f9fbfd; box-shadow:none; }
.side-panel-title { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-bottom:10px; border-bottom:1px solid #e3eaf1; }
.side-panel-title span { color:#385774; font-size:12px; font-weight:900; }
.side-panel-title small { color:#95a3b2; font-size:12px; font-weight:900; letter-spacing:.13em; }
.spec-panel dl { margin:0; }
.spec-panel dl>div { display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid #e9eef3; font-size:12px; }
.spec-panel dl>div:last-child { border-bottom:0; }
.spec-panel dt { color:#7f8fa0; }
.spec-panel dd { margin:0; color:#3c5873; font-weight:800; text-align:right; }
.tips-panel ol { margin:10px 0 0; padding-left:18px; color:#71849a; font-size:12px; line-height:1.9; }

.app-dialog-overlay { position:fixed; z-index:10050; inset:0; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(13,27,43,.7); backdrop-filter:blur(5px); animation:dialog-fade-in .16s ease-out; }
.app-dialog-overlay[hidden] { display:none; }
.app-dialog-panel { position:relative; width:min(500px,100%); overflow:hidden; border:1px solid rgba(255,255,255,.82); border-radius:16px; background:#fff; box-shadow:0 30px 90px rgba(4,18,34,.38); animation:dialog-rise-in .2s ease-out; }
.app-dialog-topline { height:5px; background:linear-gradient(90deg,#1f67ad,#42a0bb); }
.app-dialog-header { display:flex; align-items:center; gap:14px; padding:25px 27px 0; }
.app-dialog-icon { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; border-radius:11px; background:#eaf4ff; color:#1d66a9; font-size:18px; font-weight:900; }
.app-dialog-kicker { margin:0 0 3px; color:#6d91b5; font-size:12px; font-weight:900; letter-spacing:.16em; }
.app-dialog-header h2 { margin:0; color:#172b43; font-size:20px; line-height:1.3; }
.app-dialog-message { margin:18px 27px 0; color:#53697f; font-size:13px; line-height:1.75; white-space:pre-line; overflow-wrap:anywhere; }
.app-dialog-input { display:block; margin:18px 27px 0; color:#3e556d; font-size:12px; font-weight:900; }
.app-dialog-input[hidden] { display:none; }
.app-dialog-input span { display:block; margin-bottom:6px; }
.app-dialog-input input { width:100%; min-height:42px; padding:9px 11px; border:1px solid #bdcede; border-radius:8px; color:#17283f; }
.app-dialog-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:24px; padding:17px 27px; border-top:1px solid #e5edf4; background:#f6f9fc; }
.dialog-secondary-button,.dialog-primary-button { min-width:92px; min-height:39px; padding:8px 15px; border-radius:8px; font-weight:900; }
.dialog-secondary-button { border:1px solid #c7d5e3; background:#fff; color:#526b84; }
.dialog-secondary-button:hover { border-color:#91aec9; background:#f1f6fb; }
.dialog-primary-button { border:1px solid var(--blue); background:var(--blue); color:#fff; box-shadow:0 5px 12px rgba(31,103,173,.17); }
.dialog-primary-button:hover { background:var(--blue-deep); }
.app-dialog-overlay.is-warning .app-dialog-topline { background:linear-gradient(90deg,#b06d17,#e3a341); }
.app-dialog-overlay.is-warning .app-dialog-icon { background:#fff3dd; color:#a36514; }
.app-dialog-overlay.is-danger .app-dialog-topline { background:linear-gradient(90deg,#a8454e,#dc6971); }
.app-dialog-overlay.is-danger .app-dialog-icon { background:#fff0f1; color:#a9444d; }
.app-dialog-overlay.is-danger .dialog-primary-button { border-color:#a94b53; background:#a94b53; box-shadow:0 5px 12px rgba(169,75,83,.18); }
@keyframes dialog-fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes dialog-rise-in { from { opacity:0; transform:translateY(10px) scale(.985); } to { opacity:1; transform:none; } }

.processing-overlay { position:fixed; z-index:9999; inset:0; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(13,27,43,.68); backdrop-filter:blur(3px); }
.processing-overlay[hidden] { display:none; }
.processing-dialog { width:min(490px,100%); padding:28px; border:1px solid rgba(255,255,255,.7); border-radius:16px; background:#fff; box-shadow:0 28px 85px rgba(5,20,38,.34); }
.processing-dialog-heading { display:flex; align-items:center; gap:15px; }
.processing-dialog-heading h2 { margin:2px 0 0; font-size:21px; }
.processing-spinner { flex:0 0 auto; width:38px; height:38px; border:4px solid #dceafb; border-top-color:var(--blue); border-radius:50%; animation:loading-spin .8s linear infinite; }
.processing-kicker { margin:0; color:#5a86b5; font-size:12px; font-weight:900; letter-spacing:.15em; }
.processing-detail { min-height:44px; margin:19px 0 13px; color:#526a83; line-height:1.65; overflow-wrap:anywhere; }
.processing-progress { height:9px; overflow:hidden; border-radius:999px; background:#e5edf6; }
.processing-progress span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#2369ad,#4b9cbf); transition:width .2s ease; }
.processing-progress.is-indeterminate span { width:34%; animation:processing-progress 1.25s ease-in-out infinite; }
@keyframes processing-progress { 0% { transform:translateX(-110%); } 100% { transform:translateX(310%); } }
.processing-meta { display:flex; justify-content:space-between; gap:12px; margin-top:9px; color:#698097; font-size:12px; font-variant-numeric:tabular-nums; }
.processing-note { margin:18px 0 0; padding-top:14px; border-top:1px solid #e7edf4; color:#8a99a9; font-size:12px; }
body.is-processing { overflow:hidden; }

@media (max-width:1120px) {
  .workspace-grid { grid-template-columns:minmax(0,1fr) 320px; }
  .preset-bar { align-items:flex-start; flex-direction:column; }
  .preset-controls { justify-content:flex-start; }
  .limit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:850px) {
  .workspace { padding:25px 16px 50px; }
  .workspace-grid { grid-template-columns:1fr; }
  .preview-column { position:static; grid-row:1; grid-template-columns:minmax(0,1fr) minmax(220px,.6fr); }
  .preview-panel { grid-row:span 2; }
  .ThumbBlock { height:310px; }
  .workflow-step small { display:none; }
}
@media (max-width:650px) {
  .app-header { gap:10px; padding:0 14px; }
  .header-divider,.header-title,.system-status,.brand-copy small { display:none; }
  .workspace { padding:20px 12px 40px; }
  .page-intro { display:block; }
  h1 { font-size:27px; }
  .intro-facts { justify-content:flex-start; margin-top:14px; }
  .workflow-rail { grid-template-columns:repeat(3,1fr); gap:7px; padding:10px; }
  .workflow-rail>i { display:none; }
  .workflow-step { justify-content:center; }
  .workflow-step div { display:none; }
  .panel { padding:18px; }
  .panel-heading { flex-wrap:wrap; }
  .upload-button { margin-left:51px; }
  .format-strip { margin-left:0; flex-wrap:wrap; }
  .format-strip p { width:100%; margin-left:0; }
  .settings-heading .recommended-badge { margin-left:51px; }
  .setting-row { grid-template-columns:1fr; gap:6px; }
  .setting-label { padding-top:0; }
  .section-heading { display:block; }
  .section-heading>span { display:inline-block; margin-top:7px; }
  .field-grid,.limit-grid { grid-template-columns:1fr; }
  .field-grid .full-field { grid-column:auto; }
  .threshold-row { grid-template-columns:1fr; }
  .threshold-values { grid-column:1; }
  .advanced-panel summary>span { align-items:flex-start; flex-direction:column; gap:2px; }
  .run-bar { align-items:stretch; flex-direction:column; margin:0 -18px -18px; padding:17px 18px; }
  .result-toolbar { align-items:flex-start; flex-direction:column; }
  .result-actions { justify-content:flex-start; }
  .result-row { flex-wrap:wrap; }
  .result-single-download { margin-left:25px; }
  .preview-column { grid-template-columns:1fr; }
  .preview-panel { grid-row:auto; }
  .ThumbBlock { height:280px; }
}