/* Forge3D screens: home, plans, create workspace + task feed, asset viewer page, library, showcase. */

/* Segmented control */
.mz-seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: var(--mz-radius-control); background: var(--mz-surface-sunken); border: 1px solid var(--mz-border-subtle); max-width: 100%; }
.mz-seg__btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--mz-space-2); min-height: var(--mz-size-tap); min-width: var(--mz-size-tap); padding: 0 var(--mz-space-3); border-radius: 6px; color: var(--mz-text-secondary); font-size: var(--mz-font-size-sm); font-weight: var(--mz-font-weight-medium); flex: 1 1 auto; white-space: nowrap; }
.mz-seg__btn[aria-pressed="true"] { background: var(--mz-surface-elevated); color: var(--mz-color-text-primary); box-shadow: 0 1px 0 var(--mz-border-default); }
.mz-seg__btn[aria-pressed="true"] { color: var(--mz-color-accent-cta); }
.mz-seg__btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.mz-seg--block { display: flex; width: 100%; }

/* Progress ring */
.mz-ring { position: relative; display: inline-grid; place-items: center; }
.mz-ring svg { transform: rotate(-90deg); }
.mz-ring__bg { fill: none; stroke: var(--mz-border-default); stroke-width: 3; }
.mz-ring__fg { fill: none; stroke: var(--mz-color-accent-cta); stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray var(--mz-motion-base) var(--mz-ease-out); }
.mz-ring__pct { position: absolute; font-size: var(--mz-font-size-xs); font-variant-numeric: tabular-nums; color: var(--mz-text-secondary); }
.mz-bar { height: 6px; border-radius: var(--mz-radius-pill); background: var(--mz-border-default); overflow: hidden; }
.mz-bar__fill { height: 100%; background: var(--mz-color-accent-cta); width: 0; transition: width var(--mz-motion-base) var(--mz-ease-out); }

/* Tiles (library / showcase / feed grids) */
.mz-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
@media (max-width: 480px) { .mz-gallery { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } }
.mz-tile { display: flex; flex-direction: column; }
.mz-tile__link { display: block; text-decoration: none; color: inherit; }
.mz-tile__media { position: relative; aspect-ratio: 1 / 1; background: var(--mz-color-bg-canvas); display: grid; place-items: center; overflow: hidden; }
.mz-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.mz-tile__ph { color: var(--mz-text-muted); display: grid; place-items: center; width: 100%; height: 100%; }
.mz-tile__badges { position: absolute; left: var(--mz-space-2); top: var(--mz-space-2); display: flex; gap: var(--mz-space-1); }
.mz-tile__meta { display: flex; align-items: center; gap: var(--mz-space-1); padding: var(--mz-space-1) var(--mz-space-1) var(--mz-space-1) var(--mz-space-3); min-height: 52px; }
.mz-tile__text { flex: 1 1 auto; min-width: 0; }
.mz-tile__title { font-size: var(--mz-font-size-sm); font-weight: var(--mz-font-weight-medium); }
.mz-tile__sub { font-size: var(--mz-font-size-xs); color: var(--mz-text-muted); }
.mz-sentinel { height: 1px; }
.mz-load-more { display: flex; justify-content: center; padding: var(--mz-space-4) 0; }

/* Home */
.mz-hero { display: grid; gap: var(--mz-space-4); padding-top: var(--mz-space-2); }
.mz-hero__text { display: flex; flex-direction: column; gap: var(--mz-space-3); min-width: 0; }
.mz-hero__lede { color: var(--mz-text-secondary); font-size: var(--mz-font-size-md); max-width: 52ch; }
.mz-hero__viewer { height: min(52dvh, 420px); min-height: 280px; }
.mz-hero__viewer [data-clone-viewer] { height: 100%; min-height: 280px; }
.mz-hero__cta { display: flex; flex-wrap: wrap; gap: var(--mz-space-2); }
.mz-features { display: grid; gap: var(--mz-space-3); grid-template-columns: 1fr; margin-top: var(--mz-space-8); }
.mz-feature { padding: var(--mz-space-4); display: flex; flex-direction: column; gap: var(--mz-space-2); }
.mz-feature__icon { width: 40px; height: 40px; border-radius: var(--mz-radius-control); display: grid; place-items: center; background: var(--mz-color-accent-soft); color: var(--mz-color-accent-primary); }
.mz-feature p { color: var(--mz-text-secondary); font-size: var(--mz-font-size-sm); }
.mz-note { margin-top: var(--mz-space-6); padding: var(--mz-space-4); border-radius: var(--mz-radius-panel); border: 1px dashed var(--mz-border-default); color: var(--mz-text-secondary); font-size: var(--mz-font-size-sm); display: flex; gap: var(--mz-space-3); align-items: flex-start; }
@media (min-width: 769px) {
  .mz-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .mz-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: var(--mz-space-8); padding-top: var(--mz-space-8); }
  .mz-hero__viewer { height: 480px; }
}

/* Plans */
.mz-plans { display: grid; gap: var(--mz-space-4); grid-template-columns: 1fr; }
.mz-plan { padding: var(--mz-space-6); display: flex; flex-direction: column; gap: var(--mz-space-3); }
.mz-plan--hero { border-color: var(--mz-color-accent-primary); }
.mz-plan__price { font-size: var(--mz-font-size-3xl); font-weight: var(--mz-font-weight-semibold); }
.mz-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--mz-space-2); }
.mz-checklist li { display: flex; gap: var(--mz-space-2); align-items: flex-start; color: var(--mz-text-secondary); font-size: var(--mz-font-size-sm); }
.mz-checklist .mz-icon { color: var(--mz-color-accent-cta); margin-top: 2px; }
.mz-faq { display: grid; gap: var(--mz-space-2); }
.mz-faq details { background: var(--mz-color-surface-panel); border: 1px solid var(--mz-border-subtle); border-radius: var(--mz-radius-control); padding: 0 var(--mz-space-4); }
.mz-faq summary { min-height: var(--mz-size-tap); display: flex; align-items: center; cursor: pointer; font-weight: var(--mz-font-weight-medium); list-style: none; }
.mz-faq summary::-webkit-details-marker { display: none; }
.mz-faq details p { padding-bottom: var(--mz-space-4); color: var(--mz-text-secondary); font-size: var(--mz-font-size-sm); }
@media (min-width: 769px) { .mz-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Create workspace */
.mz-create { display: grid; gap: var(--mz-space-4); }
.mz-genbox { padding: var(--mz-space-4); display: flex; flex-direction: column; gap: var(--mz-space-4); min-width: 0; }
.mz-genbox__head { display: flex; align-items: center; gap: var(--mz-space-3); flex-wrap: wrap; }
.mz-genbox__head .mz-seg { flex: 1 1 260px; }
.mz-form-grid { display: grid; gap: var(--mz-space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mz-drop {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--mz-space-2);
  min-height: 168px; padding: var(--mz-space-4); text-align: center;
  border: 1.5px dashed var(--mz-border-strong); border-radius: var(--mz-radius-panel); background: var(--mz-surface-sunken); color: var(--mz-text-secondary);
}
.mz-drop.is-over { border-color: var(--mz-color-accent-primary); background: var(--mz-color-accent-soft); }
.mz-drop__preview { width: 120px; height: 120px; border-radius: var(--mz-radius-control); object-fit: cover; background: var(--mz-color-bg-canvas); }
.mz-file-hidden { display: none; }
.mz-counter { font-size: var(--mz-font-size-xs); color: var(--mz-text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.mz-counter.is-over { color: var(--mz-color-danger); }
/* Prompt enhancer (text-to-3d): Enhance button + counter row, then a status row with badge + Undo */
.mz-prompt-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--mz-space-2); flex-wrap: wrap; min-width: 0; }
.mz-prompt-tools .mz-counter { margin-left: auto; }
.mz-enhance__btn { padding: 0 var(--mz-space-3); }
.mz-enhance { display: flex; flex-direction: column; gap: var(--mz-space-1); min-width: 0; }
.mz-enhance__row { display: flex; align-items: center; gap: var(--mz-space-2); flex-wrap: wrap; min-width: 0; font-size: var(--mz-font-size-sm); color: var(--mz-text-secondary); }
.mz-enhance__text { min-width: 0; overflow-wrap: anywhere; }
.mz-enhance__msg { display: inline-flex; align-items: flex-start; gap: var(--mz-space-1); min-width: 0; flex: 1 1 200px; color: var(--mz-color-danger); overflow-wrap: anywhere; }
.mz-enhance__msg .mz-icon { margin-top: 2px; }
.mz-enhance__undo { padding: 0 var(--mz-space-3); }
.mz-enhance__notes { margin: 0; font-size: var(--mz-font-size-xs); color: var(--mz-text-muted); overflow-wrap: anywhere; }
.mz-hint-box { display: flex; gap: var(--mz-space-2); align-items: flex-start; padding: var(--mz-space-3); border-radius: var(--mz-radius-control); background: var(--mz-color-warning-soft); color: var(--mz-color-warning); font-size: var(--mz-font-size-sm); }
.mz-hint-box--info { background: var(--mz-color-accent-soft); color: var(--mz-color-accent-primary); }
.mz-hint-box--err { background: var(--mz-color-danger-soft); color: var(--mz-color-danger); }
.mz-genbox__foot { display: flex; align-items: center; gap: var(--mz-space-3); flex-wrap: wrap; }
.mz-genbox__foot .mz-btn--cta { flex: 1 1 200px; }
.mz-quota { font-size: var(--mz-font-size-xs); color: var(--mz-text-muted); }
.mz-advanced summary { min-height: var(--mz-size-tap); display: inline-flex; align-items: center; gap: var(--mz-space-2); cursor: pointer; color: var(--mz-text-secondary); font-size: var(--mz-font-size-sm); list-style: none; min-width: var(--mz-size-tap); }
.mz-advanced summary::-webkit-details-marker { display: none; }
.mz-advanced[open] summary .mz-icon { transform: rotate(180deg); }
.mz-advanced__body { display: grid; gap: var(--mz-space-3); padding-top: var(--mz-space-2); }
.mz-check { display: flex; align-items: center; gap: var(--mz-space-1); font-size: var(--mz-font-size-sm); color: var(--mz-text-secondary); }
/* Multi-image to 3D: main image + extra view slots (one row each, they stack; 44 px targets) */
.mz-main-image { display: flex; flex-direction: column; gap: var(--mz-space-1); min-width: 0; }
.mz-views { display: flex; flex-direction: column; gap: var(--mz-space-2); min-width: 0; }
.mz-views__head { display: flex; align-items: baseline; gap: var(--mz-space-2); flex-wrap: wrap; }
.mz-views__grid { display: grid; gap: var(--mz-space-2); grid-template-columns: minmax(0, 1fr); }
.mz-vslot {
  display: flex; align-items: center; gap: var(--mz-space-2); flex-wrap: wrap; min-width: 0; padding: var(--mz-space-2);
  border: 1.5px dashed var(--mz-border-strong); border-radius: var(--mz-radius-control); background: var(--mz-surface-sunken); color: var(--mz-text-secondary);
}
.mz-vslot.has-file { border-style: solid; }
.mz-vslot.is-over { border-color: var(--mz-color-accent-primary); background: var(--mz-color-accent-soft); }
.mz-vslot.is-disabled { opacity: 0.55; }
.mz-vslot__media { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: var(--mz-radius-control); background: var(--mz-color-bg-canvas); overflow: hidden; color: var(--mz-text-muted); }
.mz-vslot__thumb { width: 100%; height: 100%; object-fit: contain; }
.mz-vslot__head { display: flex; flex-direction: column; gap: 2px; flex: 1 1 120px; min-width: 0; }
.mz-vslot__label { font-size: var(--mz-font-size-sm); font-weight: var(--mz-font-weight-medium); color: var(--mz-color-text-primary); }
.mz-vslot__sub { font-size: var(--mz-font-size-xs); color: var(--mz-text-muted); overflow-wrap: anywhere; }
.mz-vslot__actions { display: flex; align-items: center; gap: var(--mz-space-1); flex: none; }
.mz-vslot__pick { min-height: var(--mz-size-tap); min-width: var(--mz-size-tap); padding: 0 var(--mz-space-3); }
.mz-vslot__toggle { flex: 1 1 100%; }
.mz-vslot__toggle .mz-seg__btn { min-height: var(--mz-size-tap); }
.mz-runs { font-size: var(--mz-font-size-sm); color: var(--mz-text-secondary); overflow-wrap: anywhere; }
.mz-task__warn { font-size: var(--mz-font-size-xs); color: var(--mz-color-warning); overflow-wrap: anywhere; }
.mz-views-box { display: flex; flex-direction: column; gap: var(--mz-space-2); min-width: 0; }
.mz-views-box__row { display: flex; gap: var(--mz-space-2); flex-wrap: wrap; }
.mz-views-box__item { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 72px; font-size: var(--mz-font-size-xs); color: var(--mz-text-muted); text-align: center; }
.mz-views-box__item img { width: 72px; height: 72px; object-fit: contain; border-radius: var(--mz-radius-control); background: var(--mz-color-bg-canvas); }
/* Automatic views toggle (WP4.2): one 44 px row; the note wraps instead of widening the page */
.mz-autoviews { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mz-autoviews__label { min-height: var(--mz-size-tap); overflow-wrap: anywhere; color: var(--mz-color-text-primary); font-weight: var(--mz-font-weight-medium); }
.mz-autoviews__note { font-size: var(--mz-font-size-xs); color: var(--mz-text-muted); overflow-wrap: anywhere; padding-left: calc(var(--mz-size-tap) + var(--mz-space-1)); }
.mz-autoviews.is-disabled .mz-autoviews__label { opacity: 0.55; }
.mz-views-box__item.is-generated img { outline: 1.5px dashed var(--mz-color-accent-primary); outline-offset: -1.5px; }

/* Task feed */
.mz-feed { display: flex; flex-direction: column; gap: var(--mz-space-3); min-width: 0; }
.mz-feed__head { display: flex; align-items: center; gap: var(--mz-space-2); justify-content: space-between; flex-wrap: wrap; }
.mz-tasklist { display: grid; gap: var(--mz-space-2); grid-template-columns: 1fr; }
.mz-task { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--mz-space-3); align-items: center; padding: var(--mz-space-2); }
.mz-task__thumb { width: 64px; height: 64px; border-radius: var(--mz-radius-control); background: var(--mz-color-bg-canvas); display: grid; place-items: center; overflow: hidden; color: var(--mz-text-muted); }
.mz-task__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mz-task__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mz-task__title { font-size: var(--mz-font-size-sm); font-weight: var(--mz-font-weight-medium); display: block; min-height: var(--mz-size-tap); line-height: var(--mz-size-tap); text-decoration: none; }
.mz-task__meta { display: flex; gap: var(--mz-space-2); align-items: center; flex-wrap: wrap; font-size: var(--mz-font-size-xs); color: var(--mz-text-muted); }
.mz-task__err { font-size: var(--mz-font-size-xs); color: var(--mz-color-danger); overflow-wrap: anywhere; }
.mz-task__actions { display: flex; gap: var(--mz-space-1); }
.mz-task.is-selected { border-color: var(--mz-color-accent-cta); }
.mz-preview { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.mz-preview__head { padding: var(--mz-space-3); display: grid; gap: var(--mz-space-1); }
.mz-preview__canvas { flex: 1 1 auto; min-height: 360px; position: relative; background: var(--mz-color-bg-canvas); }
.mz-preview__canvas [data-clone-viewer] { height: 100%; min-height: 360px; }
.mz-result-image { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--mz-color-bg-canvas); }
.mz-preview__waiting { height: 100%; min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--mz-space-3); padding: var(--mz-space-6); text-align: center; }
.mz-preview__waiting > .mz-icon { width: 48px; height: 48px; color: var(--mz-text-muted); }
.mz-preview__foot { display: flex; gap: var(--mz-space-2); padding: var(--mz-space-3); flex-wrap: wrap; }
@media (max-width: 1023px) { .mz-preview[data-empty="true"] { display: none; } }
@media (min-width: 1024px) {
  .mz-main:has(.mz-page--workspace) { padding-bottom: 0; }
  .mz-page--workspace { max-width: none; height: calc(100dvh - var(--mz-size-topbar)); display: flex; flex-direction: column; padding-bottom: var(--mz-space-4); }
  .mz-page--workspace > .mz-page__head { flex: none; }
  .mz-page--workspace .mz-create { flex: 1 1 auto; min-height: 0; grid-template-columns: 300px minmax(280px, 1fr) 280px; align-items: stretch; gap: var(--mz-space-3); }
  .mz-create .mz-genbox, .mz-create .mz-feed { overflow-y: auto; min-height: 0; }
  .mz-create .mz-genbox__head .mz-seg { flex-basis: 100%; }
  .mz-create .mz-genbox__foot { position: sticky; bottom: -16px; background: var(--mz-color-surface-panel); padding: var(--mz-space-3) 0; z-index: 1; }
  .mz-preview__canvas, .mz-preview__canvas [data-clone-viewer], .mz-preview__waiting { min-height: 0; }
  .mz-tasklist { grid-template-columns: 1fr; }
  .mz-task { grid-template-columns: 56px minmax(0, 1fr); gap: var(--mz-space-2); }
  .mz-task__thumb { width: 56px; height: 56px; }
  .mz-task__actions { grid-column: 2; justify-content: flex-end; }
  .mz-task__title { min-height: var(--mz-size-tap); line-height: 1.3; display: flex; align-items: center; }
  .mz-create .mz-feed .mz-tab { padding: 0 var(--mz-space-2); }
  .mz-create .mz-feed .mz-tabs { flex-wrap: wrap; }
}
@media (min-width: 1440px) { .mz-page--workspace .mz-create { grid-template-columns: 330px minmax(300px, 1fr) 300px; } }
@media (min-width: 1024px) and (max-width: 1200px) { .mz-page--workspace .mz-create { grid-template-columns: 290px minmax(260px, 1fr); } .mz-create .mz-feed { grid-column: 1 / -1; max-height: 180px; } }

/* Asset page */
/* the model page uses the full content width (no empty side gutters); the sidebar + 1fr/panel grid below does the layout */
.mz-page.mz-page--wide { max-width: none; }
.mz-asset { display: grid; gap: var(--mz-space-4); }
.mz-asset__stage { height: 60dvh; min-height: 320px; }
.mz-asset__stage [data-clone-viewer] { height: 100%; }
.mz-asset__side { display: flex; flex-direction: column; gap: var(--mz-space-4); min-width: 0; }
.mz-section { padding: var(--mz-space-4); display: flex; flex-direction: column; gap: var(--mz-space-3); min-width: 0; }
.mz-section__title { font-size: var(--mz-font-size-sm); color: var(--mz-text-secondary); font-weight: var(--mz-font-weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; }
.mz-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--mz-space-1) var(--mz-space-3); margin: 0; font-size: var(--mz-font-size-sm); }
.mz-kv dt { color: var(--mz-text-secondary); }
.mz-kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mz-export-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mz-space-2); }
.mz-progress-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--mz-space-3); height: 100%; min-height: 320px; padding: var(--mz-space-6); text-align: center; background: var(--mz-color-bg-canvas); border-radius: var(--mz-radius-panel); }
@media (min-width: 1024px) {
  .mz-asset { grid-template-columns: minmax(0, 1fr) var(--mz-size-panel); align-items: start; }
  .mz-asset__stage { height: calc(100dvh - var(--mz-size-topbar) - var(--mz-space-8)); position: sticky; top: calc(var(--mz-size-topbar) + var(--mz-space-4)); }
}

/* Library / showcase toolbar */
.mz-libbar { position: sticky; top: calc(var(--mz-size-topbar) + env(safe-area-inset-top)); z-index: 5; display: flex; flex-direction: column; gap: var(--mz-space-2); padding: var(--mz-space-2) 0 var(--mz-space-3); background: var(--mz-color-bg-app); }
.mz-libbar__row { display: flex; gap: var(--mz-space-2); align-items: center; min-width: 0; }
.mz-search { position: relative; flex: 1 1 auto; min-width: 0; }
.mz-search .mz-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--mz-text-muted); pointer-events: none; }
.mz-search .mz-input { padding-left: 40px; }
.mz-upload-progress { display: flex; flex-direction: column; gap: var(--mz-space-1); font-size: var(--mz-font-size-xs); color: var(--mz-text-secondary); }
@media (min-width: 769px) { .mz-libbar { top: var(--mz-size-topbar); } }

/* Showcase detail */
.mz-detail { display: grid; gap: 0; }
.mz-detail__stage { height: 55dvh; min-height: 300px; }
.mz-detail__stage [data-clone-viewer] { height: 100%; border-radius: var(--mz-radius-panel) var(--mz-radius-panel) 0 0; }
.mz-detail__panel { background: var(--mz-color-surface-panel); border: 1px solid var(--mz-border-subtle); border-top: 0; border-radius: 0 0 var(--mz-radius-panel) var(--mz-radius-panel); padding: 0 var(--mz-space-4) var(--mz-space-4); display: flex; flex-direction: column; gap: var(--mz-space-4); min-width: 0; }
.mz-detail__grab { display: flex; justify-content: center; align-items: center; min-height: var(--mz-size-tap); }
.mz-comments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--mz-space-3); }
.mz-comment { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--mz-space-3); border-bottom: 1px solid var(--mz-border-subtle); }
.mz-comment__who { font-size: var(--mz-font-size-xs); color: var(--mz-text-muted); }
.mz-comment__text { font-size: var(--mz-font-size-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (min-width: 1024px) {
  .mz-detail { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--mz-space-4); align-items: start; }
  .mz-detail__stage { height: calc(100dvh - var(--mz-size-topbar) - var(--mz-space-8)); position: sticky; top: calc(var(--mz-size-topbar) + var(--mz-space-4)); }
  .mz-detail__stage [data-clone-viewer] { border-radius: var(--mz-radius-panel); }
  .mz-detail__panel { border-top: 1px solid var(--mz-border-subtle); border-radius: var(--mz-radius-panel); padding-top: var(--mz-space-4); }
  .mz-detail__grab { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mz-ring__fg, .mz-bar__fill { transition: none; }
}

/* Highlight what matters (POI) on an extra view: thumbnail tint + badge, the paint overlay, and result lines.
 * Painting is blocked from scrolling by an inline style on the mask canvas (see workspace.js). */
.mz-vslot__media-wrap { position: relative; }
.mz-vslot__poi-tint { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0.6; pointer-events: none; }
.mz-vslot__poi-badge { position: absolute; left: 2px; bottom: 2px; max-width: calc(100% - 4px); padding: 0 4px; border-radius: var(--mz-radius-pill); background: var(--mz-color-accent-primary); color: var(--mz-text-on-accent); font-size: 10px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.mz-vslot.has-poi .mz-vslot__media { outline: 2px solid var(--mz-color-accent-primary); outline-offset: -2px; }
.mz-vslot__poi { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--mz-space-1) var(--mz-space-2); min-width: 0; }
.mz-vslot__poi-btn, .mz-vslot__poi-clear { min-height: var(--mz-size-tap); padding: 0 var(--mz-space-3); }
.mz-vslot__poi-note { flex: 1 1 160px; min-width: 0; font-size: var(--mz-font-size-xs); color: var(--mz-text-muted); overflow-wrap: anywhere; }

.mz-poi { position: fixed; inset: 0; z-index: var(--mz-z-modal); display: flex; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: var(--mz-surface-overlay); overflow-y: auto; }
.mz-poi__panel { width: 100%; max-width: 960px; max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: var(--mz-space-3); padding: var(--mz-space-4); box-shadow: var(--mz-shadow-panel); }
.mz-poi__stage { position: relative; display: grid; justify-items: center; align-items: start; min-height: 160px; min-width: 0; background: var(--mz-color-bg-canvas); border-radius: var(--mz-radius-control); }
.mz-poi__stage > canvas { grid-area: 1 / 1; display: block; max-width: 100%; }
.mz-poi__mask { opacity: 0.55; cursor: crosshair; }
.mz-poi__stage.is-erasing .mz-poi__mask { cursor: cell; }
.mz-poi__stage.is-loading > canvas { visibility: hidden; }
.mz-poi__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mz-space-2) var(--mz-space-3); }
.mz-poi__tools .mz-seg__btn { min-height: var(--mz-size-tap); }
.mz-poi__sizefield { display: flex; align-items: center; gap: var(--mz-space-2); flex: 1 1 200px; min-width: 0; color: var(--mz-color-text-primary); }
.mz-poi__size { flex: 1 1 120px; }
.mz-poi__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--mz-space-2); }
.mz-poi__foot .mz-btn { min-height: var(--mz-size-tap); }

.mz-task__poi { font-size: var(--mz-font-size-xs); color: var(--mz-text-secondary); overflow-wrap: anywhere; }
.mz-task__poi.is-skipped { color: var(--mz-color-warning); }
.mz-views-box__item.has-poi img { outline: 2px solid var(--mz-color-accent-primary); outline-offset: -2px; }
.mz-views-box__poi { font-size: 10px; line-height: 1.2; color: var(--mz-color-accent-primary); }
.mz-views-box__poi.is-skipped { color: var(--mz-color-warning); }
.mz-views-box__poilist { margin: 0; padding-left: var(--mz-space-4); font-size: var(--mz-font-size-sm); color: var(--mz-text-secondary); overflow-wrap: anywhere; }
.mz-views-box__poilist .is-skipped { color: var(--mz-color-warning); }