/* R10: final overrides. Keep this after all workspace stylesheets. */
body,
body[data-vz-accent="teal"] {
  --r10-accent:#0f766e;
  --r10-action:#0f766e;
  --r10-action-hover:#115e59;
  --r10-accent-soft:#e4f3ef;
  --vz-blue:var(--r10-accent);
  --vz-blue2:var(--r10-action-hover);
  --vz-soft:var(--r10-accent-soft);
  --vz-panel:var(--vz-paper);
  --vz-card:var(--vz-paper);
  --vz-muted:var(--vz-sub);
  --vz-border:var(--vz-line);
}
body[data-vz-accent="blue"] {--r10-accent:#2563eb;--r10-action:#2563eb;--r10-action-hover:#1d4ed8;--r10-accent-soft:#eaf1ff;--vz-blue:var(--r10-accent);--vz-blue2:var(--r10-action-hover);--vz-soft:var(--r10-accent-soft)}
body[data-vz-accent="violet"] {--r10-accent:#6d28d9;--r10-action:#6d28d9;--r10-action-hover:#5b21b6;--r10-accent-soft:#f1ebff;--vz-blue:var(--r10-accent);--vz-blue2:var(--r10-action-hover);--vz-soft:var(--r10-accent-soft)}
body[data-vz-theme="dark"] {--r10-accent:#5eead4;--r10-accent-soft:#123732;--vz-blue:var(--r10-accent);--vz-blue2:var(--r10-action-hover);--vz-soft:var(--r10-accent-soft);--vz-panel:var(--vz-paper);--vz-card:var(--vz-paper);--vz-muted:var(--vz-sub);--vz-border:var(--vz-line)}
body[data-vz-theme="dark"][data-vz-accent="blue"] {--r10-accent:#93bbff;--r10-accent-soft:#172c50}
body[data-vz-theme="dark"][data-vz-accent="violet"] {--r10-accent:#c4b5fd;--r10-accent-soft:#2e2247}

/* Separate readable accents from the solid button fill in the dark theme. */
.vz-app .vz-btn.primary,
.vz-app .vw-generate,
.vz-app .vw-primary,
.vz-app .ws-btn.primary,
.vl-destination-actions>.vl-button:first-child {
  background:var(--r10-action);
  border-color:var(--r10-action);
  color:#fff;
  box-shadow:0 4px 14px color-mix(in srgb,var(--r10-action) 18%,transparent);
}
.vz-app .vz-btn.primary:hover:not(:disabled),
.vz-app .vw-generate:hover:not(:disabled),
.vz-app .vw-primary:hover:not(:disabled),
.vz-app .ws-btn.primary:hover:not(:disabled),
.vl-destination-actions>.vl-button:first-child:hover {
  background:var(--r10-action-hover);
  border-color:var(--r10-action-hover);
  box-shadow:0 5px 18px color-mix(in srgb,var(--r10-action) 24%,transparent);
}
.vz-app .vz-nav-indicator {
  background:linear-gradient(100deg,color-mix(in srgb,var(--r10-accent) 15%,transparent),color-mix(in srgb,var(--r10-accent) 4%,transparent));
  border-color:color-mix(in srgb,var(--r10-accent) 23%,transparent);
  box-shadow:inset 3px 0 var(--r10-accent);
}
.vz-app .vz-nav button:hover {transform:none;background:color-mix(in srgb,var(--r10-accent) 7%,transparent)}
.vz-app :is(.vz-control,input,select,textarea):focus {border-color:var(--r10-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--r10-accent) 12%,transparent)}
.vz-app :is(button,a):focus-visible,.vl-overlay :is(button,input):focus-visible,.vz-task-tracker button:focus-visible {outline-color:var(--r10-accent)}
.vz-app .vz-layer-opacity input,.vz-app input[type="range"],.vl-overlay input[type="range"] {accent-color:var(--r10-accent)}
.vz-app .vz-switch.on,.vw-toggle>input:checked+i {background:var(--r10-action)}
.vz-app .vz-prompt-box {border-color:color-mix(in srgb,var(--r10-accent) 25%,var(--vz-line));box-shadow:0 3px 22px color-mix(in srgb,var(--r10-accent) 5%,transparent)}
.vz-app .vz-prompt-box:focus-within {box-shadow:0 0 0 1px color-mix(in srgb,var(--r10-accent) 25%,transparent),0 5px 28px color-mix(in srgb,var(--r10-accent) 7%,transparent)}
.vz-app .vz-source-empty>span {background:var(--vz-soft);border-color:color-mix(in srgb,var(--r10-accent) 22%,transparent)}
.vz-app .vz-source-empty>span svg {color:var(--r10-accent)}
.vz-app .vz-compare-handle:hover {box-shadow:0 0 0 6px color-mix(in srgb,var(--r10-accent) 12%,transparent)}
.vz-task-tracker {--vz-blue:var(--r10-accent);--vz-card:var(--vz-paper);--vz-border:var(--vz-line);--vz-muted:var(--vz-sub)}
body[data-vz-theme="dark"] .vz-task-tracker {--vz-card:var(--vz-paper);--vz-border:var(--vz-line);--vz-muted:var(--vz-sub)}
.vz-task-panel>header {background:linear-gradient(100deg,color-mix(in srgb,var(--r10-accent) 8%,transparent),transparent)}
.vz-task-launcher:hover {border-color:var(--r10-accent)!important}
.vz-task-count {background:var(--vz-soft)}
.vz-task-dot.active {background:var(--r10-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--r10-accent) 10%,transparent)}
.vz-task-meter i {background:var(--r10-accent)}
.vz-task-meter.phase-only i {background:linear-gradient(90deg,color-mix(in srgb,var(--r10-accent) 18%,transparent),color-mix(in srgb,var(--r10-accent) 55%,transparent),color-mix(in srgb,var(--r10-accent) 18%,transparent))}

/* A small contrast increase on labels, without making whole paragraphs bold. */
.vz-app :is(.iw-field>span,.iw-task-card strong,.iw-source-card>strong,.iw-assistant-group>summary),
.vl-card-caption strong {font-weight:650}
.vz-app :is(.iw-drop-note,.iw-source-card>small,.iw-task-card small),
.vl-card-caption>span,.vl-count {font-weight:500;color:var(--vz-sub)}
.vz-app :is(.iw-task-card small,.iw-source-card>small) {font-size:11px;line-height:1.55}

/* The host measures the actual canvas centre; account controls stay independent. */
.vz-app .vz-top {position:relative;min-width:0;gap:16px}
.vz-app .vz-top[data-canvas-aligned="true"] .vz-section-switch {position:absolute;left:var(--vz-canvas-center,50%);right:auto;top:0;bottom:0;margin:0;transform:translateX(-50%);z-index:1}
.vz-app .vz-top .vz-section-switch button {padding-inline:20px;font-size:13px}
.vz-app .vz-top :is(.vz-top-actions,.vz-video-account) {margin-left:auto;gap:10px;min-width:0;flex-shrink:0}
.vz-app .vz-top .vz-generate-top {min-width:120px;padding-inline:12px;font-size:12px}
.vz-app .vz-top .vz-saved {display:none}
.vz-app .vz-top .vz-crumbs {min-width:0;max-width:260px;font-size:12px}
.vz-app .vz-top .vz-crumbs>span:first-child {min-width:0;max-width:170px;overflow:hidden;text-overflow:ellipsis}
.vz-app .vz-top .vz-coin-balance {font-size:12px;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vz-app .vz-top .vz-upgrade {font-size:12px;padding-inline:11px;min-height:36px}
.vz-app .vz-top .vz-avatar {display:inline-flex;flex-shrink:0;align-items:center;justify-content:center}
.vz-app .vz-top[data-compact="true"] :is(.vz-crumbs,.vz-saved,.vz-generate-top,.vz-video-label) {display:none}
.vz-app .vz-top[data-compact="true"] [data-screen="export"] {font-size:0;gap:0;min-width:36px;width:36px;min-height:36px;padding:0}
.vz-app .vz-top[data-compact="true"] .vz-coin-balance {max-width:155px;font-size:11px}
.vz-app .vz-top[data-compact="true"] .vz-section-switch button {padding-inline:16px;font-size:12px}

/* Flexible 1920 / 1400 / 1080 layouts: no legacy 650 px minimum column. */
.vz-app :is(.vz-generate-layout,.vz-enhance-layout,.vz-export-layout,.vz-history-layout) {min-width:0;grid-template-columns:minmax(0,1fr) clamp(280px,24vw,350px)}
.vz-app :is(.vz-generate-main,.vz-enhance-main,.vz-export-main,.vz-history-main),
.vz-app :is(.iw-assistant,.iw-enhance-settings,.vz-export-layout>.vz-settings,.vz-history-detail-safe) {min-width:0;min-height:0;overflow-wrap:anywhere}
.vz-app .iw-workspace .vz-generate-main {padding:28px 24px 24px;gap:20px}
.vz-app .iw-generate .iw-image-stage {
  height:auto;
  aspect-ratio:16/9;
  min-height:280px;
  max-height:min(690px,calc(100dvh - 290px));
  margin-top:4px;
}
.vz-app .iw-workspace .vz-enhance-main {padding:20px 24px 20px;gap:14px}
.vz-app .iw-enhance .iw-image-stage {
  height:auto;
  aspect-ratio:16/9;
  min-height:260px;
  max-height:min(780px,calc(100dvh - 205px));
  margin-top:0;
}
.vz-app .iw-enhance .iw-image-stage>img,.vz-app .iw-enhance .vz-enhance-plane>img {object-fit:contain;object-position:center}
.vz-app .iw-enhance-footer {gap:10px;flex-wrap:wrap;font-size:11px}
.vz-app .iw-enhance-settings {padding:20px}
.vz-app .iw-enhance-settings>.iw-field {margin:12px 0}
.vz-app .iw-enhance-sliders {margin:20px 0 12px}
.vz-app .iw-enhance-settings .iw-enhance-range {margin-bottom:18px}

.vz-app .vz-export-main {padding:18px 22px 22px;overflow:auto;scrollbar-gutter:stable}
.vz-app .vz-export-stage {display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:14px;min-width:0}
.vz-app .vz-export-image {display:block;width:100%;height:auto;max-height:calc(100dvh - 235px);min-height:0;object-fit:contain;object-position:center;background:var(--vz-paper2)}
.vz-app .vz-export-summary {position:static;width:auto;max-width:none;margin:0;padding:13px 16px;box-shadow:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 18px}
.vz-export-summary>h3 {grid-column:1/-1;margin:0;font-size:13px}
.vz-export-summary>hr {display:none}
.vz-export-summary>.vz-between {margin:0;min-width:0;align-items:flex-start;flex-direction:column;gap:3px;font-size:11px}
.vz-export-summary>.vz-muted {grid-column:1/-1;font-size:11px;margin:0}
.vz-app .vz-export-meta {padding:12px 0;gap:8px 16px;flex-wrap:wrap;justify-content:flex-start;font-size:11px}
.vz-app .vz-export-layout>.vz-settings {padding:20px;overflow:auto;align-self:start;max-height:100%;height:auto}
.vz-export-layout>.vz-settings h2 {margin:0 0 15px;font-size:21px}
.vz-export-layout>.vz-settings h3 {margin:14px 0 8px}
.vz-export-layout>.vz-settings>.vz-segment {display:flex;min-width:0}
.vz-export-layout>.vz-settings>.vz-segment>button {flex:1;min-width:0;padding:7px 5px;font-size:11px;word-break:normal;overflow-wrap:normal}
.vz-export-layout>.vz-settings .vz-row>label {min-width:0;flex:1;font-size:12px}
.vz-export-layout>.vz-settings .vz-row>label>input {width:100%;min-width:0}
.vz-export-layout>.vz-settings :is(p,.vz-field,.vz-between) {font-size:12px}
.vz-app .vz-export-row {grid-template-columns:76px minmax(0,1fr) auto auto 24px;gap:8px;height:auto;min-height:70px;padding:8px;font-size:11px}
.vz-export-row>img {width:76px;height:52px}
.vz-export-row>div {min-width:0;overflow-wrap:anywhere}
.vz-export-row>button {font-size:11px;padding:5px 6px;min-width:0}
.vz-export-history>b {font-size:11px;font-weight:650;letter-spacing:.05em}

/* Library cards scale with available content width; viewer keeps both panes. */
.vl-library {min-width:0;scrollbar-gutter:stable}
.vl-page {width:100%;max-width:1680px;padding:32px clamp(20px,2.5vw,40px) 32px;box-sizing:border-box}
.vl-toolbar {min-width:0}
.vl-search {min-width:0;flex:1;max-width:480px}
.vl-grid {grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:16px}
.vl-thumbnail {height:auto;aspect-ratio:4/3}
.vl-overlay {padding:clamp(10px,2vw,28px)}
.vl-dialog {width:min(1840px,100%);height:calc(100dvh - clamp(20px,4vw,56px));max-height:1100px;min-width:0;grid-template-columns:minmax(0,1fr) clamp(270px,23vw,330px);gap:10px;padding:10px}
.vl-preview {min-width:0;min-height:0}
.vl-preview-header {min-width:0}
.vl-preview-header>span {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vl-details {min-width:0;min-height:0;padding:14px}
.vl-details-scroll {overscroll-behavior:contain;scrollbar-width:thin;padding:18px 0 14px}
.vl-viewer-actions {gap:6px;padding:12px 0}
.vl-viewer-actions .vl-button {min-width:0;gap:5px;padding:7px 9px}
.vl-preview-footer {gap:10px;padding-left:8px}
.vl-preview-help {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vl-zoom {flex-shrink:0}

/* The native pixel badge sits below the brush settings, never on top of them. */
.vz-app .vz-native-badge {top:58px;left:20px;z-index:4;max-width:calc(100% - 40px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;font-size:10px;padding:5px 8px}
.vz-history-preview-unavailable {display:flex;align-items:center;justify-content:center;min-height:65px;padding:10px;border:1px dashed var(--vz-line);border-radius:8px;background:var(--vz-paper2);color:var(--vz-sub);font-size:11px;text-align:center}
.vz-history-item>.vz-history-preview-unavailable {width:100%;max-width:100px}

@media(max-width:1400px) {
  .vz-app :is(.vz-generate-layout,.vz-enhance-layout,.vz-export-layout,.vz-history-layout) {grid-template-columns:minmax(0,1fr) 310px}
  .vz-app .iw-workspace :is(.vz-generate-main,.vz-enhance-main) {padding-inline:20px}
  .vl-preview-help {display:none}
}
@media(max-width:1100px) {
  .vz-app :is(.vz-generate-layout,.vz-enhance-layout,.vz-export-layout,.vz-history-layout) {grid-template-columns:minmax(0,1fr) 285px}
  .vz-app .iw-workspace .vz-generate-main {padding:22px 18px;gap:17px}
  .vz-app .iw-workspace .vz-enhance-main {padding:18px;gap:12px}
  .vz-app .iw-workspace :is(.iw-assistant,.iw-enhance-settings),.vz-app .vz-export-layout>.vz-settings {padding:18px 15px}
  .vz-app .vz-export-main {padding-inline:18px}
  .vl-dialog {grid-template-columns:minmax(0,1fr) 280px}
}
@media(max-height:720px) and (min-width:761px) {
  .vl-details-scroll {padding:12px 0}
  .vl-prompt,.vl-settings {margin-top:18px}
  .vl-destination-actions {padding-top:10px;gap:4px}
  .vl-destination-actions .vl-button {min-height:30px;padding:5px 9px}
  .vz-app .iw-generate .iw-image-stage {min-height:230px;max-height:390px}
  .vz-app .iw-enhance .iw-image-stage {min-height:235px;max-height:440px}
}
@media(max-width:920px) {
  .vz-app :is(.vz-generate-layout,.vz-enhance-layout,.vz-export-layout,.vz-history-layout) {grid-template-columns:minmax(0,1fr);overflow:auto}
  .vz-app :is(.vz-generate-main,.vz-enhance-main,.vz-export-main,.vz-history-main) {overflow:visible}
  .vz-app :is(.iw-assistant,.iw-enhance-settings,.vz-export-layout>.vz-settings,.vz-history-detail-safe) {border-left:0;border-top:1px solid var(--vz-line);overflow:visible;max-height:none}
  .vz-app .iw-generate .iw-image-stage {min-height:240px;max-height:550px}
  .vz-app .iw-enhance .iw-image-stage {min-height:240px;max-height:600px}
  .vz-app .vz-export-image {max-height:65dvh}
  .vz-app .vz-export-summary {gap:8px 12px}
}
@media(max-width:760px) {
  .vz-app .vz-top {padding-inline:12px;gap:10px}
  .vz-app .vz-top .vz-brand {font-size:19px}
  .vz-app .vz-top :is(.vz-divider,.vz-coin-balance,.vz-top-icon,.vz-generate-top) {display:none}
  .vz-app .vz-top .vz-upgrade {font-size:0;gap:0;padding:0;width:34px;min-height:34px}
  .vz-app .vz-top .vz-section-switch button {padding-inline:10px;font-size:11px}
  .vl-page {padding:24px 16px}
  .vl-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .vl-search {flex-basis:100%;max-width:none}
  .vl-overlay {padding:8px}
  .vl-dialog {height:calc(100dvh - 16px);grid-template-columns:minmax(0,1fr);padding:8px;gap:0}
  .vl-preview-header>span {max-width:55%}
  .vl-details {width:min(320px,calc(100% - 16px));top:52px;bottom:54px;right:8px}
  .vl-zoom {justify-content:center;width:100%}
  .vl-thumbnail {aspect-ratio:4/3}
  .vz-app .vz-export-main {padding:16px}
  .vz-app .vz-export-row {grid-template-columns:60px minmax(0,1fr) 24px}
  .vz-export-row>img {width:60px;height:48px;grid-row:1/3}
  .vz-export-row>button:nth-of-type(1),.vz-export-row>button:nth-of-type(2) {grid-row:2}
  .vz-export-row>button:nth-of-type(1) {grid-column:2;justify-self:start}
  .vz-export-row>button:nth-of-type(2) {grid-column:2;justify-self:end}
  .vz-export-row>button:nth-of-type(3) {grid-column:3;grid-row:1}
}
@media(max-width:420px) {.vl-grid {grid-template-columns:minmax(0,1fr)}.vz-app .vz-export-summary {grid-template-columns:minmax(0,1fr)}.vz-export-summary>.vz-between {flex-direction:row}}

/* Ordinary actions keep their mounted screen. Selective disclosure motion is
 * owned by the corresponding component, not by the page wrapper. */
.vz-app .vz-content,
.vz-app .vz-content>:is(.vz-scroll,.vz-generate-layout,.vz-enhance-layout,.vz-export-layout),
.vz-app .vw-content[data-vw-enter] {animation:none!important}
@media(prefers-reduced-motion:reduce) {
  .vz-app *, .vl-overlay *, .vz-task-tracker * {animation:none!important;transition:none!important;scroll-behavior:auto!important}
}