/* Clip-path dialog (#clipDlg) — mọi rule đều scope dưới #clipDlg để không ảnh hưởng style app. */
#clipDlg, #clipDlg * { box-sizing: border-box; }
dialog#clipDlg { width: min(1280px, 96vw); height: min(860px, 94vh); padding: 0; border: 1px solid #3a4050; border-radius: 10px; background: #15171c; color: #dfe3ea; overflow: hidden; }
dialog#clipDlg[open] { display: flex; }
dialog#clipDlg::backdrop { background: rgba(0,0,0,.6); }
#clipDlg aside { width: 320px; flex: none; overflow-y: auto; padding: 12px; background: #1d2027; border-right: 1px solid #2c303a; }
#clipDlg main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#clipDlg h3 { margin: 14px 0 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8a93a6; }
#clipDlg h3:first-child { margin-top: 0; }
#clipDlg .row { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
#clipDlg .row label { flex: none; width: 70px; color: #aab2c3; white-space: nowrap; }
#clipDlg .row.row--tb, #clipDlg #mediaScaleRow { margin: 0; }
#clipDlg #mediaScaleRow { width: 280px; }
#clipDlg #mediaScaleRow label { width: auto; }
#clipDlg #pathScale { margin-left: 10px; }
#clipDlg .row input[type=range] { flex: 1; min-width: 0; }
#clipDlg .row output { width: 42px; text-align: right; color: #8a93a6; font-variant-numeric: tabular-nums; }
#clipDlg button, #clipDlg select { background: #2b303b; color: #dfe3ea; border: 1px solid #3a4050; border-radius: 6px; padding: 5px 9px; cursor: pointer; font: inherit; }
#clipDlg button:hover { background: #363c4a; }
#clipDlg button.primary { background: #3b6cf6; border-color: #3b6cf6; color: #fff; }
#clipDlg button.on { background: #3b6cf6; border-color: #3b6cf6; color: #fff; }
#clipDlg .btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
#clipDlg .seg { display: flex; }
#clipDlg .seg button { flex: 1; border-radius: 0; }
#clipDlg .seg button:first-child { border-radius: 6px 0 0 6px; }
#clipDlg .seg button:last-child { border-radius: 0 6px 6px 0; }
#clipDlg #shapes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
#clipDlg #shapes button { padding: 3px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
#clipDlg #shapes canvas { width: 100%; height: 100%; }
#clipDlg #shapes button.on canvas { filter: invert(1); }
#clipDlg .chk { display: flex; align-items: center; gap: 6px; margin: 5px 0; cursor: pointer; }
#clipDlg #toolbar { display: flex; gap: 8px; align-items: center; padding: 8px 12px; background: #1d2027; border-bottom: 1px solid #2c303a; flex-wrap: nowrap; }
#clipDlg #toolbar > * { flex: none; }
#clipDlg #toolbar #status { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#clipDlg #toolbar .grow { flex: 1 1 0; min-width: 0; }
#clipDlg #stageWrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px; min-height: 0; position: relative; }
#clipDlg #stageWrap.drag::after { content: 'Thả file vào đây'; position: absolute; inset: 10px; border: 2px dashed #3b6cf6; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: rgba(59,108,246,.15); }
#clipDlg canvas#view { max-width: 100%; max-height: 100%; touch-action: none; box-shadow: 0 0 0 1px #3a4050; cursor: default; }
#clipDlg canvas#view.checker { background: repeating-conic-gradient(#3a3f4b 0% 25%, #2a2e38 0% 50%) 0 0 / 20px 20px; }
#clipDlg #videoBar { display: none; gap: 8px; align-items: center; }
#clipDlg #videoBar input { width: 140px; }
#clipDlg input[type=color] { width: 36px; height: 24px; padding: 0; border: 1px solid #3a4050; background: none; }