#diffusionView { padding-top: 32px; }
.diff-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:26px; }
.diff-eyebrow { color:var(--muted); font-size:10px; font-weight:650; }
.diff-heading h1 { margin:6px 0 0; font-size:26px; line-height:1.4; }
.diff-layout { display:grid; grid-template-columns:292px minmax(0,1fr); align-items:start; gap:28px; }
.diff-tool { background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:21px; min-width:0; }
.diff-tool-title { display:flex; align-items:center; gap:8px; padding-bottom:20px; border-bottom:1px solid var(--border); }
.diff-tool-title>svg { width:18px; height:18px; color:var(--accent); }
.diff-tool h2,.diff-output h2,.diff-history h2,.diff-source-dialog h2 { margin:0; font-size:15px; font-weight:650; }
.diff-tool-title>span { margin-left:auto; color:var(--muted); font-size:10px; }
.diff-tool fieldset { border:0; margin:22px 0; padding:0; min-width:0; }
.diff-tool legend { padding:0; margin-bottom:12px; font-size:12px; font-weight:600; }
.diff-drop { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:11px; min-height:154px; border:1px dashed var(--border); border-radius:6px; background:var(--input); cursor:pointer; text-align:center; padding:16px 10px; }
.diff-drop:hover,.diff-drop.is-dragging { border-color:var(--accent); background:var(--accent-soft); }
.diff-drop>svg { width:25px; height:25px; color:var(--accent); }
.diff-drop>strong { font-size:12px; font-weight:600; }
.diff-drop>small { font-size:10px; line-height:1.9; color:var(--muted); max-width:200px; }
.diff-input-actions { display:flex; gap:7px; margin-top:10px; }
.diff-input-actions .outline-button { flex:1; font-size:11px; padding-inline:7px; }
.diff-input-actions .icon-button { flex:0 0 36px; }
.diff-input-status { color:var(--error); line-height:1.7; font-size:11px; overflow-wrap:anywhere; margin:10px 0 0; }
.diff-link-field { margin-top:14px; }
.diff-link-field>label { color:var(--muted); font-size:11px; }
.diff-link-field>div { display:flex; margin-top:7px; gap:5px; }
.diff-link-field input { min-width:0; width:100%; height:36px; border:1px solid var(--border); border-radius:4px; background:var(--input); padding:0 9px; font-size:11px; color:var(--text); }
.diff-selected-source { display:flex; align-items:center; gap:9px; margin-top:10px; padding:12px 0; border-block:1px solid var(--border); }
.diff-source-symbol { display:grid; place-items:center; width:36px; height:44px; flex:0 0 36px; color:var(--accent); background:var(--accent-soft); border-radius:4px; }
.diff-source-symbol svg { width:18px; }
.diff-selected-source>div:nth-child(2) { min-width:0; flex:1; }
.diff-selected-source strong { font-size:11px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
.diff-selected-source span { color:var(--muted); font-size:10px; display:block; margin-top:5px; line-height:1.6; }
.diff-selected-source .icon-button { width:26px; height:28px; padding:4px; flex:0 0 26px; }
.diff-resolutions>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.diff-resolutions label { position:relative; cursor:pointer; }
.diff-resolutions input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.diff-resolutions span { display:grid; place-items:center; height:38px; background:var(--input); border:1px solid var(--border); border-radius:5px; font-size:12px; font-weight:650; }
.diff-resolutions input:checked+span { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
.diff-resolutions input:focus-visible+span,.diff-drop:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.diff-spec { display:grid; grid-template-columns:1fr auto; row-gap:12px; font-size:11px; margin-block:25px; }
.diff-spec>span { color:var(--muted); }
.diff-spec>b { font-weight:500; }
.diff-quote { display:flex; justify-content:space-between; align-items:center; padding-block:20px; border-top:1px solid var(--border); gap:10px; }
.diff-quote>span { font-size:11px; color:var(--muted); }
.diff-quote>div { display:flex; align-items:baseline; gap:6px; white-space:nowrap; }
.diff-quote strong { font-size:24px; font-variant-numeric:tabular-nums; color:#d7b673; line-height:1; }
body:not(.dark) .diff-quote strong { color:#8a5e12; }
.diff-quote>div>span { color:var(--muted); font-size:10px; }
.diff-submit { width:100%; min-height:41px; display:flex; justify-content:center; gap:8px; }
.diff-submit svg { width:16px; height:16px; flex-shrink:0; }
.diff-submit>svg:last-child { margin-left:auto; }
.diff-submit>span { flex:1; }
.diff-submit:disabled { opacity:.5; cursor:not-allowed; }
.diff-job-status { color:var(--accent); font-size:11px; line-height:1.7; margin-top:14px; overflow-wrap:anywhere; }
.diff-job-status.is-error { color:var(--error); }
.diff-pending { display:flex; flex-direction:column; gap:9px; font-size:11px; line-height:1.7; margin-top:16px; padding-top:15px; border-top:1px solid var(--border); }
.diff-pending>span { color:var(--muted); }
.diff-output { min-width:0; }
.diff-output-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:34px; margin-bottom:12px; }
.diff-output-heading>div { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.diff-output-heading .outline-button { font-size:11px; }
.diff-demo-tag { font-size:10px; color:var(--muted); }
.diff-player { --compare-position:50%; border:1px solid var(--border); border-radius:7px; overflow:hidden; background:var(--panel); min-width:0; }
.diff-compare-stage { position:relative; height:clamp(310px,52vh,620px); width:100%; background:#080a0c; isolation:isolate; overflow:hidden; }
.diff-compare-stage>video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#080a0c; }
.diff-compare-stage>[data-compare-after] { z-index:1; }
.diff-compare-stage>[data-compare-before] { z-index:2; }
.diff-player.has-pair[data-compare-mode="wipe"] [data-compare-before] { clip-path:inset(0 calc(100% - var(--compare-position)) 0 0); }
.diff-player:not(.has-pair) [data-compare-after] { display:none; }
.diff-player:not(.has-pair):has([data-compare-after][src]) [data-compare-after] { display:block; }
.diff-player:not(.has-pair):has([data-compare-after][src]) [data-compare-before] { display:none; }
.diff-compare-label { position:absolute; z-index:4; top:14px; color:#f3f5f8; background:#13191dd9; border:1px solid #ffffff24; backdrop-filter:blur(5px); border-radius:4px; font-size:10px; padding:5px 9px; pointer-events:none; }
.diff-compare-label.before { left:14px; }
.diff-compare-label.after { right:14px; }
.diff-divider { position:absolute; z-index:3; top:0; bottom:0; left:var(--compare-position); width:1px; background:#ffffffd9; box-shadow:0 0 0 1px #00000018; pointer-events:none; }
.diff-divider>span { display:grid; place-items:center; width:36px; height:36px; border:1px solid #ffffff80; border-radius:50%; background:#20272de6; color:white; position:absolute; left:0; top:50%; transform:translate(-50%,-50%); box-shadow:0 3px 12px #0008; }
.diff-divider svg { width:20px; height:20px; }
.diff-wipe-range { appearance:none; -webkit-appearance:none; margin:0; position:absolute; inset:0; width:100%; height:100%; z-index:5; opacity:0; cursor:ew-resize; touch-action:none; }
.diff-wipe-range::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:36px; height:100%; }
.diff-wipe-range::-moz-range-thumb { width:36px; height:100%; }
.diff-compare-stage:has(.diff-wipe-range:focus-visible) .diff-divider>span { outline:3px solid #a4b0ff; outline-offset:4px; }
.diff-player:not(.has-pair) :is(.diff-wipe-range,.diff-divider),.diff-player:not([data-compare-mode="wipe"]) :is(.diff-wipe-range,.diff-divider) { display:none; }
.diff-player[data-compare-mode="side"] .diff-compare-stage { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#fff4; }
.diff-player[data-compare-mode="side"] .diff-compare-stage>video { position:relative; inset:auto; min-width:0; }
.diff-player[data-compare-mode="side"] [data-compare-before] { grid-column:1; grid-row:1; }
.diff-player[data-compare-mode="side"] [data-compare-after] { grid-column:2; grid-row:1; }
.diff-player[data-compare-mode="result"] [data-compare-before] { visibility:hidden; }
.diff-video-status { position:absolute; z-index:6; bottom:18px; left:50%; transform:translateX(-50%); max-width:calc(100% - 30px); text-align:center; padding:8px 12px; border-radius:4px; background:#111820e6; color:#e4e7ee; font-size:11px; line-height:1.6; pointer-events:none; }
.diff-player-empty { position:absolute; inset:0; display:flex; gap:14px; align-items:center; justify-content:center; flex-direction:column; color:#84909a; font-size:12px; }
.diff-player-empty>svg { width:32px; height:32px; opacity:.6; }
.diff-player.has-source .diff-player-empty { display:none; }
.diff-player-controls { display:flex; align-items:center; gap:10px; padding:11px 13px; background:var(--panel); }
.diff-player-controls .icon-button { background:transparent; border-color:transparent; width:30px; height:30px; flex:0 0 30px; }
.diff-player-controls .icon-button:hover { background:var(--subtle); }
.diff-clock { font-size:10px; color:var(--text); white-space:nowrap; font-variant-numeric:tabular-nums; min-width:76px; }
.diff-timeline { appearance:auto; accent-color:var(--accent); min-width:30px; flex:1; height:18px; cursor:pointer; padding:0; background:transparent; border:0; }
.diff-compare-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--border); padding:9px 13px; min-height:48px; }
.diff-compare-toolbar>span { font-size:10px; color:var(--muted); min-width:0; flex:1; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.diff-compare-toolbar>div:last-child { display:flex; flex:1; justify-content:flex-end; }
.diff-compare-toolbar .icon-button { width:28px; height:28px; border-color:transparent; background:transparent; }
.diff-mode-switch { display:flex; align-items:center; gap:2px; border:1px solid var(--border); border-radius:5px; padding:2px; }
.diff-mode-switch button { display:grid; place-items:center; width:33px; height:27px; background:transparent; color:var(--muted); border:0; border-radius:3px; }
.diff-mode-switch button[aria-pressed="true"] { background:var(--subtle); color:var(--text); }
.diff-mode-switch button:disabled { opacity:.4; }
.diff-mode-switch svg { width:16px; height:16px; }
.diff-player:fullscreen { width:100%; height:100%; border:0; border-radius:0; background:#080a0c; display:flex; flex-direction:column; }
.diff-player:fullscreen .diff-compare-stage { flex:1; height:auto; }
.diff-history { margin-top:34px; border-top:1px solid var(--border); padding-top:22px; }
.diff-history-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; }
.diff-history-empty { color:var(--muted); font-size:12px; padding:25px 0; text-align:center; }
.diff-history-row { display:flex; align-items:center; gap:14px; border-bottom:1px solid var(--border); min-height:68px; padding:6px 10px; }
.diff-history-row.selected { background:var(--accent-soft); }
.diff-history-open { display:flex; align-items:center; gap:13px; flex:1; min-width:0; border:0; background:transparent; color:var(--text); padding:8px 0; text-align:left; }
.diff-history-open>svg { width:18px; height:18px; color:var(--muted); flex-shrink:0; }
.diff-history-open>div { min-width:0; }
.diff-history-open strong { display:block; font-size:12px; font-weight:550; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.diff-history-open span { display:block; font-size:10px; color:var(--muted); margin-top:7px; }
.diff-state { font-size:11px; color:var(--accent); white-space:nowrap; }
.diff-state.success { color:#55cba8; }
body:not(.dark) .diff-state.success { color:#08775a; }
.diff-state.failed { color:var(--error); }
.diff-more { display:block; margin:14px auto 0; }
.diff-source-dialog { width:min(680px,calc(100vw - 32px)); max-height:80dvh; padding:22px; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text); }
.diff-picker-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:15px; }
[data-diff-picker-list] { max-height:50dvh; overflow:auto; }
.diff-picker-row { display:flex; align-items:center; gap:12px; width:100%; border:0; border-bottom:1px solid var(--border); background:transparent; color:var(--text); padding:14px 4px; text-align:left; }
.diff-picker-row:hover { background:var(--accent-soft); }
.diff-picker-row>div { flex:1; min-width:0; }
.diff-picker-row strong { display:block; font-size:12px; line-height:1.7; font-weight:550; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.diff-picker-row span { display:block; font-size:10px; line-height:1.7; color:var(--muted); margin-top:5px; }
.diff-picker-row svg { flex-shrink:0; width:18px; height:18px; color:var(--muted); }
.diff-picker-footer { display:flex; justify-content:flex-end; gap:9px; margin-top:18px; }
#diffusionView [hidden] { display:none !important; }
#diffusionView :focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media(min-width:1800px) { .diff-layout { grid-template-columns:310px minmax(0,1fr); gap:34px; } }
@media(max-width:1100px) { .diff-layout { grid-template-columns:255px minmax(0,1fr); gap:18px; } .diff-tool { padding:16px; } .diff-compare-stage { height:450px; } }
@media(min-width:761px) and (max-height:850px) {
  #diffusionView { padding-top:10px; }
  .diff-heading { margin-bottom:18px; }
  .diff-tool { padding:16px; }
  .diff-tool-title { padding-bottom:14px; }
  .diff-tool fieldset { margin:16px 0; }
  .diff-drop { min-height:112px; gap:8px; padding:12px 8px; }
  .diff-spec { margin-block:17px; row-gap:9px; }
  .diff-quote { padding-block:15px; }
  .diff-history { margin-top:24px; padding-top:16px; }
}
@media(max-width:760px) {
  #diffusionView { padding-top:18px; }
  .diff-heading { gap:10px; margin-bottom:20px; }
  .diff-heading h1 { font-size:22px; }
  .diff-heading .text-button { font-size:11px; }
  .diff-layout { grid-template-columns:minmax(0,1fr); gap:24px; }
  .diff-tool { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
  .diff-tool-title,.diff-source-fields,.diff-submit,.diff-job-status,.diff-pending { grid-column:1 / -1; }
  .diff-tool fieldset { margin:16px 0; }
  .diff-drop { min-height:126px; }
  .diff-spec { align-self:center; margin:14px 0; }
  .diff-quote { grid-column:1 / -1; padding-block:16px; }
  .diff-compare-stage { height:360px; }
  .diff-player-controls { gap:5px; padding:8px; }
  .diff-compare-toolbar { padding:8px; }
  .diff-history { margin-top:25px; }
  .diff-history-row { gap:8px; padding-inline:2px; }
  .diff-history-open { gap:8px; }
  .diff-history-open span { line-height:1.7; }
}
@media(prefers-reduced-motion:reduce) { #diffusionView * { transition:none; } }