/* Cover safe zone — daylight review desk */
body.zmt-cover-safe-zone-page { background: #f3f6f4; }
body.zmt-cover-safe-zone-page main.container,
body.zmt-cover-safe-zone-page .content-wrap,
body.zmt-cover-safe-zone-page .content-layout { width: 100%; max-width: none; padding: 0; }
body.zmt-cover-safe-zone-page article.page-article,
body.zmt-cover-safe-zone-page article.page-article > .wp-posts-content { padding: 0; background: transparent; box-shadow: none; }

.zmt-csz {
  --csz-page: #f3f6f4;
  --csz-surface: #ffffff;
  --csz-surface-soft: #f8faf9;
  --csz-surface-tint: #edf7f1;
  --csz-ink: #18231e;
  --csz-muted: #68756f;
  --csz-subtle: #8a9690;
  --csz-line: rgba(24, 35, 30, .09);
  --csz-line-strong: rgba(24, 35, 30, .15);
  --csz-primary: #187a53;
  --csz-primary-hover: #126744;
  --csz-primary-soft: #eaf6f0;
  --csz-safe: #159b59;
  --csz-crop: #d28a00;
  --csz-ui: #d64b5e;
  --csz-preview: #252b29;
  --csz-preview-soft: #303735;
  --csz-shadow-card: 0 0 0 1px rgba(20, 35, 28, .055), 0 1px 2px -1px rgba(20, 35, 28, .055), 0 12px 32px rgba(20, 35, 28, .055);
  --csz-shadow-card-hover: 0 0 0 1px rgba(20, 35, 28, .085), 0 2px 5px -2px rgba(20, 35, 28, .08), 0 17px 38px rgba(20, 35, 28, .075);
  width: min(1480px, calc(100% - 48px)); margin: 30px auto 60px; color: var(--csz-ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.zmt-csz *, .zmt-csz *::before, .zmt-csz *::after { box-sizing: border-box; }
.zmt-csz button, .zmt-csz input { font: inherit; }.zmt-csz button { cursor: pointer; }
.zmt-csz button:focus-visible, .zmt-csz input:focus-visible, .zmt-csz [tabindex]:focus-visible { outline: 3px solid rgba(24, 122, 83, .36); outline-offset: 3px; }

/* Header */
.zmt-csz-head { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 27px 30px; border-radius: 24px; background: linear-gradient(135deg, #ffffff 0%, #fbfdfc 61%, #edf8f2 100%); box-shadow: var(--csz-shadow-card); }
.zmt-csz-eyebrow, .zmt-csz-gallery header > div:first-child > span { display: flex; align-items: center; gap: 7px; color: var(--csz-primary); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.zmt-csz-eyebrow i { width: 10px; height: 10px; border: 2px solid currentColor; border-radius: 3px; box-shadow: 5px -5px 0 -3px #fff, 5px -5px 0 -1px currentColor; }
.zmt-csz-head h1 { max-width: 660px; margin: 8px 0 0; color: var(--csz-ink); font-size: clamp(28px, 3vw, 42px); font-weight: 760; letter-spacing: -.045em; line-height: 1.12; text-wrap: balance; }
.zmt-csz-head p { max-width: 700px; margin: 11px 0 0; color: var(--csz-muted); font-size: 14px; line-height: 1.7; text-wrap: pretty; }
.zmt-csz-head-meta { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; max-width: 300px; font-size: 12px; font-weight: 700; }
.zmt-csz-head-meta span, .zmt-csz-head-meta small { display: inline-flex; align-items: center; min-height: 34px; padding: 0 11px; border-radius: 999px; color: #466055; background: rgba(255, 255, 255, .78); box-shadow: 0 0 0 1px rgba(24, 35, 30, .07); white-space: nowrap; }
.zmt-csz-head-meta b { margin-right: 4px; color: var(--csz-primary); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-variant-numeric: tabular-nums; }.zmt-csz-head-meta small { color: var(--csz-subtle); font-size: 11px; font-weight: 650; }

/* Login */
.zmt-csz-login { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 16px; padding: 17px 20px; border-radius: 16px; color: var(--csz-ink); background: var(--csz-surface); box-shadow: var(--csz-shadow-card); }.zmt-csz-login b, .zmt-csz-login span { display: block; }.zmt-csz-login b { font-size: 15px; }.zmt-csz-login span { margin-top: 3px; color: var(--csz-muted); font-size: 13px; text-wrap: pretty; }.zmt-csz-login a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px 0 18px; border-radius: 11px; color: #fff; background: var(--csz-primary); box-shadow: 0 4px 12px rgba(24, 122, 83, .19); font-size: 14px; font-weight: 800; text-decoration: none; transition-property: background-color, box-shadow, scale; transition-duration: 150ms; transition-timing-function: ease-out; }.zmt-csz-login a:hover { background: var(--csz-primary-hover); box-shadow: 0 6px 16px rgba(24, 122, 83, .25); }.zmt-csz-login a:active { scale: .96; }

/* Three-column desk */
.zmt-csz-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr) 300px; align-items: start; gap: 20px; margin-top: 20px; }.zmt-csz-source, .zmt-csz-controls, .zmt-csz-main { min-width: 0; border-radius: 20px; background: var(--csz-surface); box-shadow: var(--csz-shadow-card); }.zmt-csz-source, .zmt-csz-controls { padding: 20px; }.zmt-csz-main { padding: 20px; }.zmt-csz-controls { position: sticky; top: 24px; }.zmt-csz-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 17px; }.zmt-csz-panel-head > span { display: grid; flex: 0 0 28px; width: 28px; height: 28px; place-items: center; border-radius: 9px; color: var(--csz-primary); background: var(--csz-primary-soft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 900; font-variant-numeric: tabular-nums; }.zmt-csz-panel-head b, .zmt-csz-panel-head small { display: block; }.zmt-csz-panel-head b { color: var(--csz-ink); font-size: 14px; }.zmt-csz-panel-head small { margin-top: 2px; color: var(--csz-subtle); font-size: 11px; }

/* Upload and platform list */
.zmt-csz-dropzone { display: grid; min-height: 170px; place-content: center; gap: 9px; padding: 16px; border: 1.5px dashed #c6d3cc; border-radius: 16px; color: var(--csz-ink); background: var(--csz-surface-soft); text-align: center; transition-property: background-color, border-color, box-shadow, transform; transition-duration: 180ms; transition-timing-function: cubic-bezier(.2, 0, 0, 1); }.zmt-csz-dropzone:hover, .zmt-csz-dropzone.is-dragging { border-color: #36916b; background: #edf8f2; box-shadow: 0 0 0 4px rgba(24, 122, 83, .09); }.zmt-csz-dropzone.is-dragging { transform: translateY(-2px); }.zmt-csz-dropzone.is-disabled { border-color: #d3dcd7; color: var(--csz-muted); background: #fafbfb; }.zmt-csz-dropzone svg { width: 35px; height: 35px; margin: 0 auto 3px; padding: 8px; border-radius: 11px; color: var(--csz-primary); background: var(--csz-primary-soft); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }.zmt-csz-dropzone b { font-size: 13px; line-height: 1.4; }.zmt-csz-dropzone small { color: var(--csz-muted); font-size: 11px; line-height: 1.55; text-wrap: pretty; }.zmt-csz-dropzone.is-disabled small { color: var(--csz-subtle); }
.zmt-csz-reset, .zmt-csz-main-head button { min-height: 44px; border: 0; border-radius: 11px; color: #547065; background: var(--csz-surface-soft); font-size: 12px; font-weight: 800; transition-property: color, background-color, box-shadow, scale; transition-duration: 150ms; transition-timing-function: ease-out; }.zmt-csz-reset { width: 100%; margin-top: 10px; }.zmt-csz-main-head button { padding: 0 13px; }.zmt-csz-reset:hover, .zmt-csz-main-head button:hover { color: var(--csz-primary); background: var(--csz-primary-soft); }.zmt-csz-reset:active, .zmt-csz-main-head button:active, .zmt-csz-scenes button:active, .zmt-csz-thumb:active, .zmt-csz-gallery-actions button:active { scale: .96; }.zmt-csz-file-meta { min-height: 42px; padding: 10px 3px 0; color: var(--csz-subtle); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }.zmt-csz-file-meta.is-ready { color: var(--csz-primary); }.zmt-csz-file-meta.is-error { color: #bc3348; }
.zmt-csz-platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 14px; }.zmt-csz-platforms button { position: relative; display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 9px; border: 0; border-radius: 10px; color: #63716b; background: #f7f9f8; font-size: 12px; font-weight: 750; text-align: left; transition-property: color, background-color, box-shadow, scale; transition-duration: 150ms; transition-timing-function: ease-out; }.zmt-csz-platforms button i { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--csz-platform); box-shadow: 0 0 0 3px color-mix(in srgb, var(--csz-platform) 13%, transparent); }.zmt-csz-platforms button:hover { color: var(--csz-ink); background: #eff5f1; }.zmt-csz-platforms button.is-active { color: var(--csz-primary); background: var(--csz-primary-soft); box-shadow: inset 3px 0 0 var(--csz-platform), 0 0 0 1px color-mix(in srgb, var(--csz-platform) 18%, transparent); }

/* Main preview */
.zmt-csz-main-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 15px; }.zmt-csz-main-head span { display: block; color: var(--csz-active-platform, var(--csz-primary)); font-size: 12px; font-weight: 800; }.zmt-csz-main-head h2 { margin: 3px 0 0; color: var(--csz-ink); font-size: 20px; font-weight: 750; line-height: 1.2; text-wrap: balance; }.zmt-csz-preview-wrap { display: grid; min-height: 560px; place-items: center; overflow: hidden; padding: 24px; border-radius: 16px; background-color: var(--csz-preview); background-image: linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px), radial-gradient(circle at 50% 13%, #38423f 0, #252b29 58%); background-size: 18px 18px, 18px 18px, auto; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }.zmt-csz-preview { position: relative; width: min(100%, 560px); max-height: 560px; overflow: hidden; isolation: isolate; background: #151a18; box-shadow: 0 0 0 1px rgba(255,255,255,.11), 0 18px 38px rgba(0,0,0,.3); touch-action: none; user-select: none; }.zmt-csz-preview.is-dragging { cursor: grabbing; }.zmt-csz-preview:not(.is-dragging) { cursor: grab; }.zmt-csz-preview img, .zmt-csz-thumb-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; outline: 1px solid rgba(255,255,255,.1); outline-offset: -1px; transform-origin: center; transition-property: transform, object-position; transition-duration: 90ms; transition-timing-function: linear; }.zmt-csz-empty { position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; padding: 28px; color: #cbd4d0; text-align: center; }.zmt-csz-empty svg { width: 44px; height: 44px; margin: 0 auto 3px; padding: 9px; border-radius: 13px; color: #cbe6d7; background: rgba(255,255,255,.08); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }.zmt-csz-empty b { color: #f1f5f3; font-size: 15px; }.zmt-csz-empty span { max-width: 260px; color: #b5c2bc; font-size: 12px; line-height: 1.65; text-wrap: pretty; }
.zmt-csz-overlays, .zmt-csz-chrome, .zmt-csz-thumb-overlays, .zmt-csz-thumb-chrome { position: absolute; inset: 0; pointer-events: none; }.zmt-csz-region, .zmt-csz-occlusion { position: absolute; display: block; }.zmt-csz-region { border: 2px solid; }.zmt-csz-region b { position: absolute; top: -26px; left: -2px; padding: 5px 7px; border-radius: 7px 7px 7px 0; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.17); font-size: 10px; font-weight: 900; line-height: 1; white-space: nowrap; }.zmt-csz-region.is-safe { border-color: var(--csz-safe); background: rgba(21,155,89,.07); }.zmt-csz-region.is-safe b { color: #08733c; }.zmt-csz-region.is-crop { border-color: var(--csz-crop); border-style: dashed; background: rgba(210,138,0,.035); }.zmt-csz-region.is-crop b { color: #9a6300; }.zmt-csz-occlusion { overflow: hidden; color: var(--csz-ui); background: rgba(214,75,94,.15); box-shadow: inset 0 0 0 1px rgba(255,190,198,.72); }.zmt-csz-occlusion i { position: absolute; inset: 0; opacity: .58; background: repeating-linear-gradient(-45deg, transparent 0 7px, rgba(255,255,255,.38) 7px 9px); }.zmt-csz-occlusion b { position: absolute; left: 6px; bottom: 5px; color: #fff; font-size: 9px; font-weight: 800; line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,.72); }
.zmt-csz-focus { position: absolute; z-index: 3; width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.92); border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.42); pointer-events: none; transform: translate(-50%, -50%); }.zmt-csz-focus::before, .zmt-csz-focus::after { position: absolute; top: 50%; left: 50%; content: ""; background: rgba(255,255,255,.9); transform: translate(-50%, -50%); }.zmt-csz-focus::before { width: 38px; height: 1px; }.zmt-csz-focus::after { width: 1px; height: 38px; }.zmt-csz-focus i { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--csz-primary); box-shadow: 0 0 0 2px #fff; transform: translate(-50%, -50%); }.zmt-csz-preview-tip { margin: 12px 0 0; color: var(--csz-muted); font-size: 12px; line-height: 1.5; text-align: center; text-wrap: pretty; }

/* Settings */
.zmt-csz-control-group { margin-top: 15px; padding: 14px; border-radius: 16px; background: var(--csz-surface-soft); }.zmt-csz-scene-group { margin-top: 0; }.zmt-csz-group-label { display: block; margin-bottom: 9px; color: var(--csz-subtle); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }.zmt-csz-scenes { display: grid; gap: 7px; }.zmt-csz-scenes button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 46px; padding: 0 11px; border: 1px solid rgba(24,35,30,.06); border-radius: 10px; color: #5f6f68; background: #fff; text-align: left; transition-property: border-color, background-color, color, box-shadow, scale; transition-duration: 150ms; transition-timing-function: ease-out; }.zmt-csz-scenes button:hover { color: var(--csz-ink); border-color: rgba(24,122,83,.2); box-shadow: 0 2px 8px rgba(24,35,30,.05); }.zmt-csz-scenes button.is-active { color: var(--csz-primary); border-color: color-mix(in srgb, var(--csz-active-platform, var(--csz-primary)) 46%, transparent); background: #eff9f3; box-shadow: inset 3px 0 0 var(--csz-active-platform, var(--csz-primary)); }.zmt-csz-scenes span { font-size: 12px; font-weight: 760; }.zmt-csz-scenes small { color: var(--csz-subtle); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-variant-numeric: tabular-nums; }
.zmt-csz-switches { display: grid; gap: 2px; border: 0; }.zmt-csz-switches legend { margin-bottom: 5px; padding: 0; color: var(--csz-subtle); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }.zmt-csz-switches label { display: flex; align-items: center; gap: 9px; min-height: 42px; color: #53625b; font-size: 12px; font-weight: 700; }.zmt-csz-switches label > span { display: flex; align-items: center; gap: 7px; }.zmt-csz-switches label > span i, .zmt-csz-legend i { width: 9px; height: 9px; border-radius: 3px; }.zmt-csz-switches input { width: 16px; height: 16px; accent-color: var(--csz-primary); }.zmt-csz-switches .is-safe, .zmt-csz-legend .is-safe { background: var(--csz-safe); }.zmt-csz-switches .is-crop, .zmt-csz-legend .is-crop { background: repeating-linear-gradient(135deg, var(--csz-crop) 0 3px, #ffe4a6 3px 6px); }.zmt-csz-switches .is-ui, .zmt-csz-legend .is-ui { background: repeating-linear-gradient(135deg, var(--csz-ui) 0 3px, #ffc9d1 3px 6px); }
.zmt-csz-adjustments { padding-bottom: 15px; }.zmt-csz-range { display: block; }.zmt-csz-range + .zmt-csz-range { margin-top: 14px; }.zmt-csz-range > span { display: flex; justify-content: space-between; color: #53625b; font-size: 12px; font-weight: 700; }.zmt-csz-range output { color: var(--csz-primary); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-variant-numeric: tabular-nums; }.zmt-csz-range input { width: 100%; min-height: 32px; margin: 5px 0 0; accent-color: var(--csz-primary); }.zmt-csz-legend { display: grid; gap: 7px; margin: 16px 2px 0; color: var(--csz-muted); font-size: 11px; }.zmt-csz-legend span { display: flex; align-items: center; gap: 7px; }.zmt-csz-spec { margin-top: 16px; padding: 13px; border-radius: 14px; background: #f6f9f7; box-shadow: inset 0 0 0 1px rgba(24,35,30,.055); }.zmt-csz-spec b, .zmt-csz-spec span { display: inline-block; font-size: 10px; font-weight: 800; }.zmt-csz-spec b { color: var(--csz-primary); }.zmt-csz-spec span { margin-left: 7px; color: var(--csz-subtle); font-variant-numeric: tabular-nums; }.zmt-csz-spec p { margin: 6px 0 0; color: var(--csz-muted); font-size: 11px; line-height: 1.55; text-wrap: pretty; }

/* Gallery */
.zmt-csz-gallery { margin-top: 20px; padding: 25px; border-radius: 20px; color: var(--csz-ink); background: var(--csz-surface); box-shadow: var(--csz-shadow-card); }.zmt-csz-gallery header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 24px; align-items: end; margin-bottom: 20px; }.zmt-csz-gallery h2 { margin: 5px 0 0; color: var(--csz-ink); font-size: 20px; font-weight: 750; line-height: 1.25; text-wrap: balance; }.zmt-csz-gallery header > p { grid-column: 1 / -1; max-width: 620px; margin: 0; color: var(--csz-muted); font-size: 12px; line-height: 1.65; text-wrap: pretty; }.zmt-csz-gallery-actions { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border-radius: 12px; background: #f2f6f3; }.zmt-csz-gallery-actions button { min-height: 38px; padding: 0 11px; border: 0; border-radius: 9px; color: var(--csz-muted); background: transparent; font-size: 12px; font-weight: 750; transition-property: background-color, color, box-shadow, scale; transition-duration: 150ms; transition-timing-function: ease-out; }.zmt-csz-gallery-actions button.is-active { color: var(--csz-primary); background: #fff; box-shadow: 0 1px 4px rgba(24,35,30,.1); }.zmt-csz-gallery-grid { display: grid; gap: 20px; }.zmt-csz-gallery-platform { padding-top: 2px; }.zmt-csz-gallery-platform + .zmt-csz-gallery-platform { padding-top: 20px; border-top: 1px solid var(--csz-line); }.zmt-csz-gallery-platform-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: #4e5d56; font-size: 12px; font-weight: 800; }.zmt-csz-gallery-platform-head i { width: 9px; height: 9px; border-radius: 50%; background: var(--csz-platform); box-shadow: 0 0 0 3px color-mix(in srgb, var(--csz-platform) 13%, transparent); }.zmt-csz-gallery-platform-head small { color: var(--csz-subtle); font-size: 11px; font-weight: 650; }.zmt-csz-gallery-platform-scenes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }.zmt-csz-thumb { min-width: 0; padding: 7px; border: 0; border-radius: 14px; color: var(--csz-muted); background: #f8faf9; box-shadow: 0 0 0 1px rgba(24,35,30,.065); text-align: left; transition-property: background-color, box-shadow, transform, scale; transition-duration: 150ms; transition-timing-function: ease-out; }.zmt-csz-thumb:hover { background: #fff; box-shadow: var(--csz-shadow-card-hover); transform: translateY(-2px); }.zmt-csz-thumb.is-active { background: #f4fbf7; box-shadow: 0 0 0 2px var(--csz-active-platform, var(--csz-primary)), 0 7px 18px rgba(24,122,83,.1); }.zmt-csz-thumb-top { display: flex; align-items: center; gap: 5px; height: 22px; overflow: hidden; color: var(--csz-subtle); font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }.zmt-csz-thumb-top i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; }.zmt-csz-thumb-stage { position: relative; display: block; overflow: hidden; border-radius: 8px; background: #e8eeea; outline: 1px solid rgba(0,0,0,.1); outline-offset: -1px; }.zmt-csz-thumb-empty { position: absolute; inset: 0; background: linear-gradient(135deg, #e2ebe5, #f7faf8); }.zmt-csz-thumb .zmt-csz-region { border-width: 1px; }.zmt-csz-thumb .zmt-csz-occlusion { box-shadow: none; }.zmt-csz-thumb-label { display: block; overflow: hidden; margin-top: 7px; color: #4f5f57; font-size: 10px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }.zmt-csz-note { margin: 14px 5px 0; color: var(--csz-subtle); font-size: 11px; line-height: 1.6; text-align: center; text-wrap: pretty; }.zmt-csz-note b { color: #527062; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }

@media (max-width: 1230px) { .zmt-csz-shell { grid-template-columns: 230px minmax(0, 1fr); }.zmt-csz-controls { position: static; grid-column: 1 / -1; display: grid; grid-template-columns: 190px minmax(250px, 1fr) minmax(230px, 1fr); gap: 14px; }.zmt-csz-controls .zmt-csz-panel-head { margin: 0; }.zmt-csz-control-group { margin: 0; }.zmt-csz-scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); }.zmt-csz-switches { align-content: start; }.zmt-csz-adjustments { display: grid; align-content: start; }.zmt-csz-legend, .zmt-csz-spec { display: none; } }
@media (max-width: 760px) { body.zmt-cover-safe-zone-page main.container, body.zmt-cover-safe-zone-page .content-wrap, body.zmt-cover-safe-zone-page .content-layout { overflow: hidden; }.zmt-csz { width: min(100% - 24px, 1480px); margin: 12px auto 34px; }.zmt-csz-head { display: block; padding: 22px 20px; border-radius: 20px; }.zmt-csz-head h1 { font-size: 29px; }.zmt-csz-head p { font-size: 13px; }.zmt-csz-head-meta { justify-content: flex-start; max-width: none; margin-top: 16px; }.zmt-csz-login { align-items: flex-start; padding: 15px; }.zmt-csz-login a { flex: 0 0 auto; }.zmt-csz-login span { font-size: 12px; }.zmt-csz-shell { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }.zmt-csz-source, .zmt-csz-controls, .zmt-csz-main { width: 100%; padding: 17px; border-radius: 16px; }.zmt-csz-source { order: 1; }.zmt-csz-main { order: 2; }.zmt-csz-controls { display: block; order: 3; }.zmt-csz-dropzone { min-height: 132px; }.zmt-csz-platforms { display: flex; gap: 7px; overflow-x: auto; margin: 13px -4px 0; padding: 2px 4px 6px; scrollbar-width: thin; }.zmt-csz-platforms button { flex: 0 0 auto; padding: 0 11px; }.zmt-csz-preview-wrap { min-height: 390px; padding: 16px; }.zmt-csz-preview { max-height: 470px; }.zmt-csz-control-group { margin-top: 14px; }.zmt-csz-controls .zmt-csz-panel-head { margin-bottom: 14px; }.zmt-csz-scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); }.zmt-csz-legend, .zmt-csz-spec { display: grid; }.zmt-csz-spec { display: block; }.zmt-csz-gallery { margin-top: 12px; padding: 18px 14px; border-radius: 16px; }.zmt-csz-gallery header { grid-template-columns: 1fr; align-items: start; }.zmt-csz-gallery-actions { justify-self: start; }.zmt-csz-gallery header > p { margin-top: 1px; }.zmt-csz-gallery-grid { gap: 18px; }.zmt-csz-gallery-platform + .zmt-csz-gallery-platform { padding-top: 18px; }.zmt-csz-gallery-platform-scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.zmt-csz-thumb { border-radius: 11px; }.zmt-csz-thumb-top { font-size: 9px; }.zmt-csz-thumb-label { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .zmt-csz *, .zmt-csz *::before, .zmt-csz *::after { scroll-behavior: auto !important; transition-duration: 0ms !important; animation-duration: 0ms !important; } }

/* V2 realistic scene renderer */
.zmt-csz { --csz-safe: #00c853; --csz-crop: #ffb000; --csz-ui: #ff2d55; --csz-focus-blue: #1677ff; --csz-selected: #0f766e; }
.zmt-csz-panel-head b { font-size: 17px; line-height: 1.4; }.zmt-csz-panel-head small { margin-top: 3px; font-size: 13px; line-height: 1.55; }
.zmt-csz-platforms button { padding: 0 11px; font-size: 14px; }.zmt-csz-platforms button small { margin-left: auto; color: var(--csz-subtle); font-size: 12px; font-variant-numeric: tabular-nums; }
.zmt-csz-scenes button { min-height: 50px; }.zmt-csz-scenes span { font-size: 14px; line-height: 1.45; }.zmt-csz-scenes small { font-size: 12px; }
.zmt-csz-scenes button.is-active { color: var(--csz-selected); border-color: rgba(15,118,110,.38); background: #eef9f6; box-shadow: inset 3px 0 0 var(--csz-selected); }
.zmt-csz-switches label, .zmt-csz-range > span { font-size: 14px; }.zmt-csz-switches label { min-height: 44px; }.zmt-csz-switches label > span i, .zmt-csz-legend i { width: 14px; height: 14px; border-radius: 4px; }.zmt-csz-switches .is-chrome, .zmt-csz-legend .is-chrome { background: #1677ff; }
.zmt-csz-range output { font-size: 13px; }.zmt-csz-legend { gap: 9px; font-size: 13px; }.zmt-csz-spec b, .zmt-csz-spec span { font-size: 12px; }.zmt-csz-spec p { font-size: 13px; line-height: 1.62; }.zmt-csz-spec small { display: block; margin-top: 7px; color: var(--csz-subtle); font-size: 12px; }
.zmt-csz-file-meta, .zmt-csz-dropzone small { font-size: 13px; }.zmt-csz-dropzone b { font-size: 15px; }.zmt-csz-preview-tip { font-size: 14px; line-height: 1.65; }

.zmt-csz-main-head { align-items: flex-start; }.zmt-csz-main-head span { font-size: 14px; }.zmt-csz-main-head h2 { font-size: 24px; }.zmt-csz-main-actions { display: flex; align-items: center; gap: 9px; }.zmt-csz-view-switch { display: inline-flex; gap: 3px; padding: 3px; border-radius: 12px; background: #eef3f0; }.zmt-csz-view-switch button { min-height: 40px; padding: 0 12px; border: 0; border-radius: 9px; color: var(--csz-muted); background: transparent; font-size: 13px; font-weight: 760; transition-property: color, background-color, box-shadow, scale; transition-duration: 150ms; transition-timing-function: ease-out; }.zmt-csz-view-switch button.is-active { color: var(--csz-selected); background: #fff; box-shadow: 0 1px 5px rgba(24,35,30,.12); }.zmt-csz-view-switch button:active { scale: .96; }.zmt-csz-reset-view { min-height: 46px !important; font-size: 13px !important; }
.zmt-csz-preview-wrap { min-height: 690px; padding: 28px; background-color: #eef2ef; background-image: radial-gradient(circle at 50% 9%, rgba(255,255,255,.9), rgba(255,255,255,0) 45%), linear-gradient(rgba(24,35,30,.027) 1px, transparent 1px), linear-gradient(90deg, rgba(24,35,30,.027) 1px, transparent 1px); background-size: auto, 20px 20px, 20px 20px; box-shadow: inset 0 0 0 1px rgba(24,35,30,.06); }.zmt-csz-preview { display: grid; width: 100%; max-height: none; min-height: 630px; place-items: center; overflow: visible; background: transparent; box-shadow: none; }.zmt-csz-preview.is-dragging { cursor: grabbing; }.zmt-csz-preview:not(.is-dragging) { cursor: grab; }

.zmt-csz-device { position: relative; display: block; width: min(310px, 82%); aspect-ratio: 9 / 19.5; color: #161b18; container-type: inline-size; filter: drop-shadow(0 24px 24px rgba(21,31,26,.14)); transition-property: filter, transform; transition-duration: 180ms; transition-timing-function: cubic-bezier(.2,0,0,1); }.zmt-csz-device-bezel { position: absolute; inset: 0; display: block; padding: 7px; border-radius: 32px; background: linear-gradient(150deg, #3e4541, #171b19 45%, #080a09); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 -2px 5px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.15); }.zmt-csz-screen { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 25px; color: #17201b; background: #f7f8f7; box-shadow: inset 0 0 0 1px rgba(255,255,255,.42); }.zmt-csz-device.is-dark .zmt-csz-screen { color: #fff; background: #090b0c; }.zmt-csz-device.is-detail { width: min(100%, 590px); aspect-ratio: var(--csz-detail-ratio); filter: drop-shadow(0 18px 20px rgba(21,31,26,.14)); }.zmt-csz-device.is-detail .zmt-csz-device-bezel { padding: 6px; border-radius: 22px; }.zmt-csz-device.is-detail .zmt-csz-screen { border-radius: 16px; }
.zmt-csz-real-chrome { position: absolute; z-index: 4; inset: 0; display: block; pointer-events: none; }.zmt-csz-ui-status { position: absolute; z-index: 8; top: 1.9%; left: 6.5%; right: 6.5%; display: flex; align-items: center; justify-content: space-between; height: 3.2%; font-size: clamp(8px, 3.2cqi, 11px); font-weight: 780; }.zmt-csz-ui-status span { display: flex; align-items: flex-end; gap: 2px; }.zmt-csz-ui-status i { display: block; width: 3px; height: 6px; border-radius: 1px; background: currentColor; }.zmt-csz-ui-status i:nth-child(2) { height: 8px; }.zmt-csz-ui-status i:nth-child(3) { width: 12px; height: 6px; border: 1px solid currentColor; background: linear-gradient(90deg,currentColor 65%,transparent 65%); }.zmt-csz-ui-island { position: absolute; z-index: 9; top: 1.8%; left: 50%; width: 28%; height: 2.4%; border-radius: 999px; background: #080909; transform: translateX(-50%); }.zmt-csz-device.is-dark .zmt-csz-ui-status { text-shadow: 0 1px 3px rgba(0,0,0,.55); }
.zmt-csz-ui-appbar { position: absolute; top: 5.7%; left: 0; right: 0; display: flex; align-items: center; height: 7.2%; padding: 0 5%; color: #17201b; background: rgba(255,255,255,.97); box-shadow: 0 1px 0 rgba(0,0,0,.055); }.zmt-csz-ui-appbar > b { margin-left: 3%; font-size: clamp(10px, 4.6cqi, 16px); font-weight: 780; }.zmt-csz-ui-appbar > i { display: grid; width: 11%; aspect-ratio: 1; place-items: center; font-size: clamp(11px,5cqi,18px); font-style: normal; }.zmt-csz-ui-appbar .is-avatar { border-radius: 50%; color: #fff; background: linear-gradient(145deg,var(--csz-platform),#27473a); }.zmt-csz-ui-appbar .is-back { justify-content: start; font-size: clamp(21px,8cqi,29px); }.zmt-csz-ui-app-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }.zmt-csz-ui-app-actions i { font-size: clamp(11px,4.5cqi,16px); font-style: normal; }.zmt-csz-ui-tabs { position: absolute; top: 13%; left: 0; right: 0; display: flex; align-items: center; gap: 8%; height: 5%; padding: 0 5%; color: #77827c; background: #fff; font-size: clamp(8px,3.7cqi,13px); }.zmt-csz-ui-tabs b { position: relative; color: #17201b; }.zmt-csz-ui-tabs b::after { position: absolute; right: 12%; bottom: -7px; left: 12%; height: 2px; border-radius: 2px; background: var(--csz-platform); content: ""; }.zmt-csz-ui-tabs i { font-style: normal; }.zmt-csz-ui-nav { position: absolute; z-index: 7; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: space-around; height: 7.6%; padding: 0 3%; color: #758078; background: rgba(255,255,255,.97); box-shadow: 0 -1px 0 rgba(0,0,0,.06); font-size: clamp(7px,3.1cqi,11px); }.zmt-csz-device.is-dark .zmt-csz-ui-nav { color: #d8ddda; background: rgba(4,5,5,.84); box-shadow: 0 -1px 0 rgba(255,255,255,.09); }.zmt-csz-ui-nav i { font-style: normal; }.zmt-csz-ui-nav .is-active { color: var(--csz-platform); font-weight: 800; }.zmt-csz-ui-nav .is-plus { display: grid; width: 15%; height: 48%; place-items: center; border-radius: 6px; color: #fff; background: var(--csz-platform); font-size: clamp(11px,5cqi,18px); }

.zmt-csz-media { position: absolute; z-index: 2; display: block; overflow: hidden; background: #dce6e0; outline: 1px solid rgba(0,0,0,.1); outline-offset: -1px; }.zmt-csz-media > img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; outline: 1px solid rgba(0,0,0,.1); outline-offset: -1px; transform-origin: center; transition-property: transform, object-position; transition-duration: 90ms; transition-timing-function: linear; }.zmt-csz-device.is-dark .zmt-csz-media > img { outline-color: rgba(255,255,255,.1); }.zmt-csz-media-placeholder { position: absolute; z-index: 1; inset: 0; display: grid; place-content: center; gap: 5px; color: #375a4a; background: radial-gradient(circle at 25% 22%,rgba(255,255,255,.8),transparent 35%), linear-gradient(145deg,#dfe9e3,#c8d7cf); text-align: center; }.zmt-csz-media-placeholder::before, .zmt-csz-media-placeholder::after { position: absolute; content: ""; opacity: .25; }.zmt-csz-media-placeholder::before { right: 8%; bottom: 9%; width: 45%; height: 43%; border-radius: 50% 50% 12% 12%; background: #7e9d8d; }.zmt-csz-media-placeholder::after { bottom: 0; left: 0; width: 58%; height: 44%; background: linear-gradient(145deg,transparent 48%,#6b8d7c 49% 75%,transparent 76%); }.zmt-csz-media-placeholder i { z-index: 2; width: 25px; height: 21px; margin: 0 auto 2px; border: 2px solid currentColor; border-radius: 5px; }.zmt-csz-media-placeholder b, .zmt-csz-media-placeholder small { z-index: 2; text-shadow: 0 1px rgba(255,255,255,.75); }.zmt-csz-media-placeholder b { font-size: clamp(8px,4.1cqi,14px); }.zmt-csz-media-placeholder small { font-size: clamp(6px,3.1cqi,10px); }
.zmt-csz-analysis { position: absolute; z-index: 5; inset: 0; display: block; pointer-events: none; }.zmt-csz-region, .zmt-csz-occlusion { position: absolute; display: block; background: transparent; }.zmt-csz-region::before, .zmt-csz-occlusion::before { position: absolute; inset: 0; content: ""; opacity: var(--csz-fill-opacity); }.zmt-csz-region { z-index: 2; }.zmt-csz-region.is-safe { border: 3px solid var(--csz-safe); box-shadow: 0 0 0 1px rgba(255,255,255,.92), 0 0 0 4px rgba(0,200,83,.12); }.zmt-csz-region.is-safe::before { background: var(--csz-safe); }.zmt-csz-region.is-crop { border: 2px dashed var(--csz-crop); box-shadow: 0 0 0 1px rgba(30,20,0,.18); }.zmt-csz-region.is-crop::before { background: var(--csz-crop); }.zmt-csz-region b { position: absolute; z-index: 4; top: 5px; left: 5px; padding: 5px 7px; border-radius: 7px; color: #17201b; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.2); font-size: clamp(9px,3.8cqi,13px); font-weight: 850; line-height: 1; white-space: nowrap; }.zmt-csz-region.is-safe b { color: #006c2d; }.zmt-csz-region.is-crop b { color: #825700; }.zmt-csz-occlusion { z-index: 3; border: 2px solid var(--csz-ui); box-shadow: 0 0 0 1px rgba(255,255,255,.75); }.zmt-csz-occlusion::before { background: var(--csz-ui); }.zmt-csz-occlusion i { position: absolute; z-index: 2; inset: 0; opacity: .64; background: repeating-linear-gradient(-45deg,transparent 0 7px,rgba(255,255,255,.68) 7px 9px); }.zmt-csz-occlusion b { position: absolute; z-index: 4; bottom: 5px; left: 5px; padding: 4px 6px; border-radius: 6px; color: #b5002e; background: rgba(255,255,255,.95); box-shadow: 0 2px 7px rgba(0,0,0,.18); font-size: clamp(8px,3.4cqi,12px); font-weight: 850; line-height: 1.15; white-space: nowrap; }.zmt-csz-focus { position: absolute; z-index: 8; width: 30px; height: 30px; border: 2px solid #fff; border-radius: 50%; background: rgba(22,119,255,.13); box-shadow: 0 0 0 2px var(--csz-focus-blue),0 3px 9px rgba(0,0,0,.35); pointer-events: none; transform: translate(-50%,-50%); }.zmt-csz-focus::before, .zmt-csz-focus::after { position: absolute; top: 50%; left: 50%; content: ""; background: #fff; box-shadow: 0 0 0 1px var(--csz-focus-blue); transform: translate(-50%,-50%); }.zmt-csz-focus::before { width: 42px; height: 1px; }.zmt-csz-focus::after { width: 1px; height: 42px; }.zmt-csz-focus i { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--csz-focus-blue); box-shadow: 0 0 0 2px #fff; transform: translate(-50%,-50%); }

/* Realistic scene chrome */
.zmt-csz-ui-video-tabs { position: absolute; z-index: 7; top: 6%; left: 22%; right: 12%; display: flex; justify-content: space-around; font-size: clamp(8px,3.8cqi,13px); text-shadow: 0 1px 3px rgba(0,0,0,.72); }.zmt-csz-ui-video-tabs i { opacity: .72; font-style: normal; }.zmt-csz-ui-video-tabs b { border-bottom: 2px solid #fff; }.zmt-csz-ui-action-rail { position: absolute; z-index: 7; right: 3.8%; bottom: 15%; display: grid; gap: 13px; width: 13%; text-align: center; text-shadow: 0 1px 4px rgba(0,0,0,.8); }.zmt-csz-ui-action-rail > i { display: grid; place-items: center; min-height: 28px; color: #fff; font-size: clamp(13px,6.5cqi,22px); font-style: normal; font-weight: 700; }.zmt-csz-ui-action-rail > i em { margin-top: 1px; font-size: clamp(5px,2.6cqi,9px); font-style: normal; }.zmt-csz-ui-action-rail .is-avatar { aspect-ratio: 1; border: 2px solid #fff; border-radius: 50%; background: linear-gradient(145deg,var(--csz-platform),#263c33); }.zmt-csz-ui-video-copy { position: absolute; z-index: 7; bottom: 9%; left: 4.5%; display: grid; gap: 5px; width: 72%; color: #fff; font-size: clamp(7px,3.3cqi,12px); line-height: 1.4; text-shadow: 0 1px 4px rgba(0,0,0,.9); }.zmt-csz-ui-video-copy b { font-size: clamp(8px,3.8cqi,13px); }.zmt-csz-ui-video-copy small { opacity: .82; font-size: clamp(6px,2.8cqi,10px); }
.zmt-csz-ui-ghost-card { position: absolute; top: 18%; left: 51%; width: 44%; height: 37%; border-radius: 2px; background: #e3e8e5; box-shadow: 0 0 0 1px rgba(0,0,0,.05); }.zmt-csz-ui-ghost-card > i { display: block; height: 72%; background: linear-gradient(145deg,#d1dbd5,#b9c9c0); }.zmt-csz-ui-ghost-card b, .zmt-csz-ui-media-caption b { display: block; padding: 5% 4% 0; font-size: clamp(6px,3cqi,10px); line-height: 1.25; }.zmt-csz-ui-ghost-card small, .zmt-csz-ui-media-caption small { display: block; padding: 3% 4%; color: #7a857f; font-size: clamp(5px,2.4cqi,8px); }.zmt-csz-ui-media-caption { position: absolute; top: 55.5%; left: 4.5%; width: 44.5%; height: 10%; background: #fff; }.zmt-csz-ui-feed-copy { position: absolute; top: 51%; left: 5%; display: grid; gap: 5px; width: 90%; }.zmt-csz-ui-feed-copy b, .zmt-csz-ui-search-copy b, .zmt-csz-ui-space-copy b, .zmt-csz-ui-video-card-copy b { font-size: clamp(8px,3.8cqi,13px); line-height: 1.35; }.zmt-csz-ui-feed-copy span, .zmt-csz-ui-search-copy span, .zmt-csz-ui-space-copy span, .zmt-csz-ui-video-card-copy span { color: #65716a; font-size: clamp(6px,3cqi,10px); }.zmt-csz-ui-feed-copy small, .zmt-csz-ui-search-copy small, .zmt-csz-ui-space-copy small, .zmt-csz-ui-video-card-copy small { color: #8c9691; font-size: clamp(5px,2.7cqi,9px); }.zmt-csz-ui-feed-next, .zmt-csz-ui-space-next, .zmt-csz-ui-knowledge-next { position: absolute; top: 66%; left: 5%; width: 90%; height: 15%; border-radius: 4px; background: linear-gradient(90deg,#dfe6e2 35%,#edf1ef 35%); }
.zmt-csz-ui-searchbar { position: absolute; top: 6.5%; left: 0; right: 0; display: flex; align-items: center; gap: 4%; height: 7%; padding: 0 5%; background: #fff; }.zmt-csz-ui-searchbar i { color: #27322c; font-size: clamp(18px,7cqi,25px); font-style: normal; }.zmt-csz-ui-searchbar b { flex: 1; padding: 7px 10px; border-radius: 999px; color: #77817c; background: #f1f3f2; font-size: clamp(7px,3.4cqi,12px); font-weight: 550; }.zmt-csz-ui-searchbar em { color: var(--csz-platform); font-size: clamp(7px,3.4cqi,12px); font-style: normal; font-weight: 750; }.zmt-csz-ui-search-copy { position: absolute; top: 23%; left: 51.5%; display: grid; gap: 5px; width: 43%; }.zmt-csz-ui-search-next { position: absolute; top: 53%; left: 5%; display: grid; grid-template-columns: 34% 1fr; grid-template-rows: auto auto; gap: 5px 8px; width: 90%; height: 17%; padding: 2%; border-top: 1px solid rgba(0,0,0,.06); }.zmt-csz-ui-search-next i { grid-row: 1 / 3; border-radius: 3px; background: #dce4e0; }.zmt-csz-ui-search-next b { align-self: end; font-size: clamp(7px,3.2cqi,11px); }.zmt-csz-ui-search-next small { color: #87908b; font-size: clamp(5px,2.7cqi,9px); }
.zmt-csz-ui-profile { position: absolute; top: 13.5%; left: 5%; display: grid; grid-template-columns: 24% 1fr; gap: 3px 7%; width: 90%; height: 20%; }.zmt-csz-ui-profile .is-avatar { grid-row: 1 / 5; width: 100%; aspect-ratio: 1; border-radius: 50%; color: #fff; background: linear-gradient(145deg,var(--csz-platform),#275341); display: grid; place-items: center; font-size: clamp(13px,7cqi,24px); font-style: normal; }.zmt-csz-ui-profile b { align-self: end; font-size: clamp(9px,4.4cqi,15px); }.zmt-csz-ui-profile span, .zmt-csz-ui-profile small { font-size: clamp(6px,2.8cqi,10px); }.zmt-csz-ui-profile small { color: #75817b; }.zmt-csz-ui-profile-tabs { position: absolute; top: 34.7%; left: 0; right: 0; display: flex; justify-content: space-around; height: 5%; border-bottom: 1px solid rgba(0,0,0,.07); color: #7a857f; font-size: clamp(7px,3.2cqi,11px); }.zmt-csz-ui-profile-tabs b { color: #17201b; border-bottom: 2px solid var(--csz-platform); }.zmt-csz-ui-profile-tabs i { font-style: normal; }.zmt-csz-ui-grid-ghost { position: absolute; width: 29.2%; height: 20.5%; background: linear-gradient(145deg,#dce4df,#c8d5ce); }.zmt-csz-ui-grid-ghost.is-2 { top: 40.5%; left: 35.4%; }.zmt-csz-ui-grid-ghost.is-3 { top: 40.5%; left: 66.3%; }.zmt-csz-ui-grid-ghost.is-4 { top: 62%; left: 4.5%; }.zmt-csz-ui-grid-ghost.is-5 { top: 62%; left: 35.4%; }.zmt-csz-ui-grid-ghost.is-6 { top: 62%; left: 66.3%; }
.zmt-csz-ui-detail-author { position: absolute; z-index: 7; top: 7%; left: 5%; display: flex; align-items: center; gap: 5%; width: 90%; color: inherit; }.zmt-csz-ui-detail-author i, .zmt-csz-ui-account i, .zmt-csz-ui-dynamic-author i { display: grid; width: 12%; aspect-ratio: 1; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg,var(--csz-platform),#315346); font-size: clamp(8px,3.5cqi,12px); font-style: normal; }.zmt-csz-ui-detail-author b { font-size: clamp(7px,3.4cqi,12px); }.zmt-csz-ui-detail-author em { margin-left: auto; padding: 4px 8px; border-radius: 999px; color: #fff; background: var(--csz-platform); font-size: clamp(6px,2.7cqi,9px); font-style: normal; }.zmt-csz-ui-detail-copy { position: absolute; top: 68%; left: 5%; display: grid; gap: 5px; width: 90%; }.zmt-csz-ui-detail-copy b { font-size: clamp(8px,4cqi,14px); }.zmt-csz-ui-detail-copy span { color: #68746e; font-size: clamp(6px,3cqi,10px); }.zmt-csz-ui-detail-actions { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: center; gap: 5%; height: 8%; padding: 0 5%; background: rgba(255,255,255,.97); box-shadow: 0 -1px 0 rgba(0,0,0,.06); font-size: clamp(6px,2.8cqi,10px); }.zmt-csz-ui-detail-actions i { flex: 1; padding: 6px 9px; border-radius: 999px; color: #89928e; background: #f0f2f1; font-style: normal; }.zmt-csz-ui-detail-actions b { font-weight: 650; }
.zmt-csz-ui-chat-time { position: absolute; top: 15%; left: 0; width: 100%; color: #919a95; font-size: clamp(6px,2.7cqi,9px); text-align: center; }.zmt-csz-ui-chat-bubble { position: absolute; top: 20%; right: 7%; max-width: 58%; padding: 3% 4%; border-radius: 6px 2px 6px 6px; background: #9eea6a; font-size: clamp(6px,3cqi,10px); }.zmt-csz-ui-share-copy { position: absolute; top: 51.5%; left: 13.5%; display: grid; gap: 4px; width: 73%; padding: 3%; border-radius: 0 0 5px 5px; background: #fff; }.zmt-csz-ui-share-copy b { font-size: clamp(7px,3.4cqi,12px); }.zmt-csz-ui-share-copy span { color: #818b86; font-size: clamp(5px,2.6cqi,9px); }.zmt-csz-ui-chat-input { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: center; gap: 5%; height: 8%; padding: 0 4%; background: #f7f7f7; }.zmt-csz-ui-chat-input b { flex: 1; height: 62%; border-radius: 5px; background: #fff; }.zmt-csz-ui-chat-input i { font-style: normal; }
.zmt-csz-ui-account { position: absolute; top: 14%; left: 5%; display: grid; grid-template-columns: 14% 1fr; gap: 1px 4%; width: 90%; }.zmt-csz-ui-account i { grid-row: 1 / 3; width: 100%; }.zmt-csz-ui-account b { align-self: end; font-size: clamp(8px,3.8cqi,13px); }.zmt-csz-ui-account small { color: #8b9590; font-size: clamp(5px,2.7cqi,9px); }.zmt-csz-ui-article-copy { position: absolute; top: 48%; left: 5%; display: grid; gap: 4px; width: 90%; }.zmt-csz-ui-article-copy b { font-size: clamp(8px,3.8cqi,13px); }.zmt-csz-ui-article-copy span { color: #77817c; font-size: clamp(6px,2.8cqi,10px); }.zmt-csz-ui-article-row { position: absolute; top: 58%; left: 5%; display: flex; align-items: center; justify-content: space-between; width: 90%; height: 12%; border-top: 1px solid rgba(0,0,0,.07); }.zmt-csz-ui-article-row.is-second { top: 70%; }.zmt-csz-ui-article-row b { width: 65%; font-size: clamp(7px,3.3cqi,11px); }.zmt-csz-ui-article-row i { width: 24%; height: 75%; border-radius: 3px; background: #dce4df; }
.zmt-csz-ui-dynamic-author { position: absolute; top: 15%; left: 9%; display: grid; grid-template-columns: 15% 1fr; gap: 2px 5%; width: 82%; }.zmt-csz-ui-dynamic-author i { grid-row: 1 / 3; width: 100%; }.zmt-csz-ui-dynamic-author b { align-self: end; font-size: clamp(8px,3.7cqi,13px); }.zmt-csz-ui-dynamic-author small { color: #86908b; font-size: clamp(5px,2.6cqi,9px); }.zmt-csz-ui-dynamic-copy { position: absolute; top: 24%; left: 10%; width: 80%; font-size: clamp(7px,3.2cqi,11px); line-height: 1.5; }.zmt-csz-ui-dynamic-actions { position: absolute; top: 55%; left: 10%; display: flex; justify-content: space-between; width: 80%; color: #6d7772; font-size: clamp(5px,2.7cqi,9px); }.zmt-csz-ui-dynamic-actions i { font-style: normal; }
.zmt-csz-ui-space-copy { position: absolute; top: 42%; left: 6%; display: grid; gap: 4px; width: 88%; }.zmt-csz-ui-profile.is-wide { top: 14%; }.zmt-csz-ui-knowledge-copy { position: absolute; top: 18.5%; left: 5%; display: grid; gap: 5px; width: 90%; }.zmt-csz-ui-knowledge-copy b { font-size: clamp(9px,4.2cqi,14px); }.zmt-csz-ui-knowledge-copy span { font-size: clamp(6px,3cqi,10px); line-height: 1.5; }.zmt-csz-ui-knowledge-copy small { color: #78837d; font-size: clamp(5px,2.7cqi,9px); }.zmt-csz-ui-knowledge-next { top: 54%; }.zmt-csz-ui-article-heading { position: absolute; top: 14%; left: 5%; display: grid; gap: 6px; width: 90%; }.zmt-csz-ui-article-heading b { font-size: clamp(10px,4.7cqi,16px); line-height: 1.35; }.zmt-csz-ui-article-heading span, .zmt-csz-ui-article-heading small { color: #6e7973; font-size: clamp(6px,2.8cqi,10px); }.zmt-csz-ui-article-body { position: absolute; top: 57%; left: 5%; width: 90%; color: #59655f; font-size: clamp(6px,3cqi,10px); line-height: 1.65; }.zmt-csz-ui-video-card-copy { position: absolute; top: 56%; left: 5%; display: grid; gap: 5px; width: 90%; }.zmt-csz-ui-play { position: absolute; z-index: 8; top: 36%; left: 50%; display: grid; width: 15%; aspect-ratio: 1; place-items: center; border-radius: 50%; color: #fff; background: rgba(0,0,0,.58); font-size: clamp(12px,6cqi,21px); transform: translate(-50%,-50%); }

/* Equal-height realistic gallery */
.zmt-csz-gallery h2 { font-size: 24px; }.zmt-csz-gallery header > p { max-width: 760px; font-size: 14px; }.zmt-csz-gallery-actions button { min-height: 42px; font-size: 14px; }.zmt-csz-gallery .zmt-csz-gallery-platform-head { display: flex; grid-template-columns: none; align-items: center; justify-content: flex-start; gap: 9px; margin: 0 0 14px; font-size: 17px; }.zmt-csz-gallery-platform-head i { width: 12px; height: 12px; }.zmt-csz-gallery-platform-head small { margin-left: 2px; color: var(--csz-subtle); font-size: 13px; font-weight: 650; }.zmt-csz-gallery-platform-scenes { align-items: stretch; gap: 14px; }.zmt-csz-thumb { display: flex; flex-direction: column; padding: 12px; border-radius: 18px; background: #f8faf9; box-shadow: 0 0 0 1px rgba(24,35,30,.07),0 8px 22px rgba(24,35,30,.04); }.zmt-csz-thumb:hover { transform: translateY(-2px); }.zmt-csz-thumb.is-active { background: #f3fbf8; box-shadow: 0 0 0 2px var(--csz-selected),0 13px 28px rgba(15,118,110,.13); }.zmt-csz-thumb-top { justify-content: space-between; height: auto; min-height: 43px; padding: 1px 2px 9px; color: #304039; font-size: 15px; line-height: 1.35; white-space: normal; }.zmt-csz-thumb-top > span { overflow: hidden; max-width: 76%; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }.zmt-csz-thumb-top small { color: #738079; font-size: 13px; font-variant-numeric: tabular-nums; }.zmt-csz-thumb-stage { display: grid; flex: 1; height: 480px; min-height: 480px; place-items: center; overflow: hidden; border-radius: 12px; background: radial-gradient(circle at 50% 8%,#fff,#e9efeb 68%); outline: 1px solid rgba(0,0,0,.1); outline-offset: -1px; }.zmt-csz-thumb-stage .zmt-csz-device { width: auto; height: 438px; max-width: 90%; filter: drop-shadow(0 15px 13px rgba(21,31,26,.15)); }.zmt-csz-thumb-stage .zmt-csz-device-bezel { padding: 5px; border-radius: 25px; }.zmt-csz-thumb-stage .zmt-csz-screen { border-radius: 20px; }.zmt-csz-device.is-compact .zmt-csz-region { border-width: 2px; }.zmt-csz-device.is-compact .zmt-csz-region.is-crop { border-width: 1.5px; }.zmt-csz-device.is-compact .zmt-csz-region b { top: 3px; left: 3px; padding: 4px 5px; font-size: clamp(7px,3cqi,10px); }.zmt-csz-device.is-compact .zmt-csz-occlusion { border-width: 1.5px; }.zmt-csz-thumb-label { display: flex; align-items: center; min-height: 42px; margin-top: 8px; color: #526159; font-size: 14px; }.zmt-csz-thumb-label i { width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: var(--csz-selected); box-shadow: 0 0 0 3px rgba(15,118,110,.12); }.zmt-csz-thumb-label b { font-weight: 700; }.zmt-csz-thumb-label small { margin-left: auto; color: var(--csz-subtle); font-size: 13px; }.zmt-csz-note { margin-top: 18px; font-size: 13px; line-height: 1.65; }

@media (max-width: 1230px) {
  .zmt-csz-main-actions { align-items: flex-end; flex-direction: column; }.zmt-csz-preview-wrap { min-height: 650px; }.zmt-csz-preview { min-height: 590px; }.zmt-csz-thumb-stage { height: 430px; min-height: 430px; }.zmt-csz-thumb-stage .zmt-csz-device { height: 390px; }
}
@media (max-width: 760px) {
  .zmt-csz-panel-head b { font-size: 17px; }.zmt-csz-panel-head small, .zmt-csz-file-meta, .zmt-csz-dropzone small { font-size: 13px; }.zmt-csz-platforms button, .zmt-csz-scenes span, .zmt-csz-switches label, .zmt-csz-range > span { font-size: 14px; }.zmt-csz-main-head { display: block; }.zmt-csz-main-head h2 { font-size: 22px; }.zmt-csz-main-actions { align-items: stretch; flex-direction: row; justify-content: space-between; margin-top: 13px; }.zmt-csz-view-switch { flex: 1; }.zmt-csz-view-switch button { flex: 1; padding: 0 7px; font-size: 12px; }.zmt-csz-reset-view { padding: 0 10px !important; }.zmt-csz-preview-wrap { min-height: 600px; padding: 18px 10px; }.zmt-csz-preview { min-height: 560px; }.zmt-csz-device { width: min(282px,88%); }.zmt-csz-device.is-detail { width: min(100%,520px); }.zmt-csz-gallery h2 { font-size: 22px; }.zmt-csz-gallery header > p { font-size: 14px; }.zmt-csz-gallery-platform-head { font-size: 16px; }.zmt-csz-gallery-platform-head small { font-size: 13px; }.zmt-csz-gallery-platform-scenes { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }.zmt-csz-thumb { padding: 9px; border-radius: 15px; }.zmt-csz-thumb-top { min-height: 48px; font-size: 14px; }.zmt-csz-thumb-top small { font-size: 12px; }.zmt-csz-thumb-stage { height: 330px; min-height: 330px; }.zmt-csz-thumb-stage .zmt-csz-device { height: 298px; max-width: 94%; }.zmt-csz-thumb-stage .zmt-csz-device-bezel { padding: 4px; border-radius: 20px; }.zmt-csz-thumb-stage .zmt-csz-screen { border-radius: 16px; }.zmt-csz-thumb-label { min-height: 45px; font-size: 13px; }.zmt-csz-thumb-label small { font-size: 12px; }
}

/* V2.0.1 — optically balanced mainstream phone proportions */
.zmt-csz-device:not(.is-detail) { aspect-ratio: 10 / 19.5; }
.zmt-csz-preview > .zmt-csz-device:not(.is-detail) { width: min(332px, 86%); }
.zmt-csz-device:not(.is-detail) .zmt-csz-device-bezel { border-radius: 33px; }
.zmt-csz-device:not(.is-detail) .zmt-csz-screen { border-radius: 26px; }
.zmt-csz-device:not(.is-detail) .zmt-csz-device-bezel::before,
.zmt-csz-device:not(.is-detail) .zmt-csz-device-bezel::after { position: absolute; right: -2px; width: 3px; border-radius: 0 2px 2px 0; background: #1a1f1c; content: ""; }
.zmt-csz-device:not(.is-detail) .zmt-csz-device-bezel::before { top: 21%; height: 9%; }
.zmt-csz-device:not(.is-detail) .zmt-csz-device-bezel::after { top: 34%; height: 15%; }
.zmt-csz-thumb-stage .zmt-csz-device:not(.is-detail) .zmt-csz-device-bezel { border-radius: 26px; }
.zmt-csz-thumb-stage .zmt-csz-device:not(.is-detail) .zmt-csz-screen { border-radius: 21px; }

@media (max-width: 760px) {
  .zmt-csz-preview > .zmt-csz-device:not(.is-detail) { width: min(296px, 90%); }
  .zmt-csz-device:not(.is-detail) .zmt-csz-device-bezel { border-radius: 29px; }
  .zmt-csz-device:not(.is-detail) .zmt-csz-screen { border-radius: 23px; }
  .zmt-csz-thumb-stage .zmt-csz-device:not(.is-detail) .zmt-csz-device-bezel { border-radius: 21px; }
  .zmt-csz-thumb-stage .zmt-csz-device:not(.is-detail) .zmt-csz-screen { border-radius: 17px; }
}

/* V2.0.1 — stronger image adjustment controls */
.zmt-csz input[hidden] { display: none !important; }
.zmt-csz-adjustments { padding: 16px; border-radius: 18px; background: linear-gradient(145deg, #f3faf6, #eef5f1); box-shadow: inset 0 0 0 1px rgba(15,118,83,.1), 0 8px 20px rgba(24,35,30,.045); }
.zmt-csz-adjustments-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.zmt-csz-adjustments-head .zmt-csz-group-label { margin: 0; color: #315849; font-size: 12px; }
.zmt-csz-adjustments-head small { color: #71827a; font-size: 11px; font-weight: 650; text-align: right; }
.zmt-csz-adjustments .zmt-csz-range { padding: 13px 14px 11px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(24,35,30,.07), 0 4px 12px rgba(24,35,30,.045); }
.zmt-csz-adjustments .zmt-csz-range + .zmt-csz-range { margin-top: 10px; }
.zmt-csz-adjustments .zmt-csz-range > span { align-items: center; gap: 10px; }
.zmt-csz-range-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.zmt-csz-range-title > i { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 10px; color: #087a4c; background: #e7f7ee; font-size: 18px; font-style: normal; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(0,146,82,.1); }
.zmt-csz-range-title > span { display: grid; gap: 2px; }
.zmt-csz-range-title b { color: #263b32; font-size: 14px; font-weight: 780; line-height: 1.25; }
.zmt-csz-range-title small { color: #7b8882; font-size: 11px; font-weight: 600; line-height: 1.25; }
.zmt-csz-adjustments .zmt-csz-range output { min-width: 60px; padding: 7px 9px; border-radius: 999px; color: #067747; background: #e9f8f0; font-size: 13px; font-weight: 850; line-height: 1; text-align: center; box-shadow: inset 0 0 0 1px rgba(0,146,82,.12); }
.zmt-csz-adjustments .zmt-csz-range input[type="range"] { width: 100%; height: 28px; min-height: 28px; margin: 9px 0 0; padding: 0; appearance: none; -webkit-appearance: none; cursor: pointer; background: transparent; }
.zmt-csz-adjustments .zmt-csz-range input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, #0a9a5b 0 var(--csz-range-progress, 0%), #dce7e1 var(--csz-range-progress, 0%) 100%); box-shadow: inset 0 1px 2px rgba(24,35,30,.12); }
.zmt-csz-adjustments .zmt-csz-range input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -8px; border: 4px solid #fff; border-radius: 50%; appearance: none; -webkit-appearance: none; background: #07814d; box-shadow: 0 0 0 1px rgba(5,103,62,.2), 0 4px 9px rgba(5,103,62,.25); transition-property: box-shadow, scale; transition-duration: 150ms; transition-timing-function: ease-out; }
.zmt-csz-adjustments .zmt-csz-range input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: #dce7e1; box-shadow: inset 0 1px 2px rgba(24,35,30,.12); }
.zmt-csz-adjustments .zmt-csz-range input[type="range"]::-moz-range-progress { height: 8px; border-radius: 999px; background: #0a9a5b; }
.zmt-csz-adjustments .zmt-csz-range input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 4px solid #fff; border-radius: 50%; background: #07814d; box-shadow: 0 0 0 1px rgba(5,103,62,.2), 0 4px 9px rgba(5,103,62,.25); }
.zmt-csz-adjustments .zmt-csz-range input[type="range"]:focus-visible { outline: 3px solid rgba(22,119,255,.3); outline-offset: 3px; border-radius: 999px; }
.zmt-csz-adjustments .zmt-csz-range input[type="range"]:active::-webkit-slider-thumb { scale: .96; box-shadow: 0 0 0 5px rgba(10,154,91,.14), 0 3px 7px rgba(5,103,62,.25); }

@media (max-width: 760px) {
  .zmt-csz-adjustments { padding: 14px; }
  .zmt-csz-adjustments-head { align-items: flex-start; }
  .zmt-csz-adjustments .zmt-csz-range { padding: 12px; }
  .zmt-csz-range-title small { font-size: 10px; }
}

/* V2.1 — premium upload, official platform branding and inspection controls */
.zmt-csz-shell { grid-template-columns: 300px minmax(0, 1fr) 340px; }
.zmt-csz-source, .zmt-csz-controls { padding: 22px; }
.zmt-csz-source-head, .zmt-csz-controls-head { position: relative; align-items: center; }
.zmt-csz-source-head > em, .zmt-csz-controls-head > em { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; margin-left: auto; padding: 0 9px; border-radius: 999px; color: #18724e; background: #ebf8f1; box-shadow: inset 0 0 0 1px rgba(24,122,83,.1); font-size: 10px; font-style: normal; font-weight: 780; white-space: nowrap; }
.zmt-csz-controls-head > em i { width: 6px; height: 6px; border-radius: 50%; background: #00a85a; box-shadow: 0 0 0 3px rgba(0,168,90,.11); }

/* Upload surface */
.zmt-csz-dropzone { position: relative; display: flex; min-height: 306px; align-items: center; justify-content: center; flex-direction: column; gap: 9px; overflow: hidden; padding: 24px 17px 20px; border: 0; border-radius: 20px; color: var(--csz-ink); background: radial-gradient(circle at 50% 8%, rgba(255,255,255,.98), rgba(255,255,255,.1) 38%), linear-gradient(145deg,#f5fbf8,#edf7f2); box-shadow: inset 0 0 0 1px rgba(24,122,83,.13), inset 0 0 0 5px rgba(255,255,255,.58), 0 12px 28px rgba(24,74,52,.07); text-align: center; }
.zmt-csz-dropzone::before { position: absolute; inset: 0; opacity: .36; background-image: radial-gradient(circle, rgba(24,122,83,.22) 1px, transparent 1.3px); background-size: 17px 17px; mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 73%, transparent); content: ""; pointer-events: none; }
.zmt-csz-dropzone > * { position: relative; z-index: 1; }
.zmt-csz-dropzone:hover, .zmt-csz-dropzone.is-dragging { border-color: transparent; background: radial-gradient(circle at 50% 4%,#fff 0,rgba(255,255,255,.4) 38%), linear-gradient(145deg,#effbf5,#e2f6eb); box-shadow: inset 0 0 0 2px #159464, inset 0 0 0 7px rgba(255,255,255,.65), 0 18px 34px rgba(18,111,72,.13); transform: translateY(-2px); }
.zmt-csz-dropzone.is-processing { cursor: wait; }
.zmt-csz-dropzone.is-processing .zmt-csz-upload-icon { animation: zmt-csz-pulse 900ms ease-in-out infinite alternate; }
.zmt-csz-dropzone.is-disabled { border-color: transparent; background: linear-gradient(145deg,#f8faf9,#f1f5f3); box-shadow: inset 0 0 0 1px rgba(24,35,30,.08); }
.zmt-csz-upload-icon { display: grid; width: 58px; height: 58px; place-items: center; margin-bottom: 5px; border-radius: 18px; color: #087a4d; background: linear-gradient(145deg,#effcf5,#dff5e9); box-shadow: inset 0 0 0 1px rgba(0,142,78,.11), 0 9px 18px rgba(24,122,83,.13); transition-property: transform, box-shadow; transition-duration: 180ms; transition-timing-function: cubic-bezier(.2,0,0,1); }
.zmt-csz-dropzone:hover .zmt-csz-upload-icon, .zmt-csz-dropzone.is-dragging .zmt-csz-upload-icon { box-shadow: inset 0 0 0 1px rgba(0,142,78,.16), 0 13px 22px rgba(24,122,83,.18); transform: translateY(-3px); }
.zmt-csz-dropzone .zmt-csz-upload-icon svg { width: 29px; height: 29px; margin: 0; padding: 0; border-radius: 0; color: currentColor; background: transparent; }
.zmt-csz-dropzone b { font-size: 17px; font-weight: 790; letter-spacing: -.02em; }
.zmt-csz-dropzone small { color: #6d7d75; font-size: 12px; }
.zmt-csz-upload-action { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; margin-top: 5px; padding: 0 18px; border-radius: 12px; color: #fff; background: linear-gradient(180deg,#1a9063,#11744e); box-shadow: inset 0 1px rgba(255,255,255,.2), 0 8px 16px rgba(17,116,78,.2); font-size: 13px; font-weight: 800; transition-property: box-shadow, scale; transition-duration: 150ms; transition-timing-function: ease-out; }
.zmt-csz-dropzone:active .zmt-csz-upload-action { scale: .96; }
.zmt-csz-upload-formats { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.zmt-csz-upload-formats i { padding: 4px 7px; border-radius: 7px; color: #687970; background: rgba(255,255,255,.76); box-shadow: inset 0 0 0 1px rgba(24,35,30,.07); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 9px; font-style: normal; font-weight: 750; }
.zmt-csz-file-meta { display: none; min-height: 0; margin: 9px 0 0; padding: 10px 12px; border-radius: 11px; font-size: 12px; }
.zmt-csz-file-meta.is-error { display: block; color: #a51d39; background: #fff1f4; box-shadow: inset 0 0 0 1px rgba(203,36,72,.12); }
.zmt-csz-file-summary { display: grid; grid-template-columns: 62px minmax(0,1fr) auto; gap: 11px; align-items: center; padding: 11px; border-radius: 17px; background: #f5faf7; box-shadow: inset 0 0 0 1px rgba(24,122,83,.11),0 8px 18px rgba(24,70,49,.06); }
.zmt-csz-file-summary[hidden] { display: none !important; }
.zmt-csz-file-summary img { width: 62px; height: 62px; grid-row: 1 / 3; border-radius: 11px; object-fit: cover; outline: 1px solid rgba(0,0,0,.1); outline-offset: -1px; }
.zmt-csz-file-summary > div { min-width: 0; }
.zmt-csz-file-summary b, .zmt-csz-file-summary span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zmt-csz-file-summary b { color: #263a31; font-size: 13px; }
.zmt-csz-file-summary span { margin-top: 4px; color: #7b8982; font-size: 10px; font-variant-numeric: tabular-nums; }
.zmt-csz-file-replace, .zmt-csz-file-summary .zmt-csz-reset { display: inline-flex; width: auto; min-height: 36px; align-items: center; justify-content: center; margin: 0; padding: 0 10px; border-radius: 9px; font-size: 11px; font-weight: 780; }
.zmt-csz-file-replace { color: #11764f; background: #e7f7ee; cursor: pointer; }
.zmt-csz-file-summary .zmt-csz-reset { grid-column: 3; color: #a2384e; background: #fff0f3; }
.zmt-csz-privacy { display: flex; align-items: center; gap: 9px; margin: 12px 1px 0; padding: 10px 11px; border-radius: 13px; color: #36584a; background: #f3f8f5; box-shadow: inset 0 0 0 1px rgba(24,35,30,.055); }
.zmt-csz-privacy svg { width: 24px; height: 24px; flex: 0 0 24px; fill: none; stroke: #16815a; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.zmt-csz-privacy b, .zmt-csz-privacy small { display: block; }
.zmt-csz-privacy b { font-size: 11px; }
.zmt-csz-privacy small { margin-top: 2px; color: #7c8a83; font-size: 9px; }

/* Official platform cards */
.zmt-csz-platform-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 22px; }
.zmt-csz-platform-heading b, .zmt-csz-platform-heading small { display: block; }
.zmt-csz-platform-heading b { color: #263a31; font-size: 14px; }
.zmt-csz-platform-heading small { margin-top: 3px; color: #87938d; font-size: 10px; }
.zmt-csz-platform-heading > span { padding: 5px 8px; border-radius: 999px; color: #557166; background: #f0f5f2; font-size: 9px; font-weight: 750; white-space: nowrap; }
.zmt-csz-platforms { gap: 9px; margin-top: 11px; }
.zmt-csz-platforms button { position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 9px; min-height: 78px; align-items: center; padding: 10px; overflow: hidden; border-radius: 15px; color: #5f7068; background: #f8faf9; box-shadow: 0 0 0 1px rgba(24,35,30,.055),0 4px 12px rgba(24,35,30,.035); transition-property: color, background-color, box-shadow, transform, scale; }
.zmt-csz-platforms button::before { position: absolute; inset: auto -22px -30px auto; width: 72px; height: 72px; border-radius: 50%; opacity: 0; background: color-mix(in srgb,var(--csz-platform) 15%,transparent); content: ""; transition-property: opacity, transform; transition-duration: 180ms; transition-timing-function: ease-out; transform: scale(.8); }
.zmt-csz-platforms button:hover { color: #263a31; background: #fff; box-shadow: 0 0 0 1px rgba(24,35,30,.08),0 10px 20px rgba(24,35,30,.07); transform: translateY(-1px); }
.zmt-csz-platforms button.is-active { color: #18362a; background: color-mix(in srgb,var(--csz-platform) 5%,#fff); box-shadow: 0 0 0 2px color-mix(in srgb,var(--csz-platform) 74%,#fff),0 11px 24px color-mix(in srgb,var(--csz-platform) 15%,transparent); }
.zmt-csz-platforms button.is-active::before { opacity: 1; transform: scale(1); }
.zmt-csz-platform-logo, .zmt-csz-main-platform-logo, .zmt-csz-gallery-platform-logo { position: relative; display: grid; place-items: center; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08),0 4px 9px rgba(0,0,0,.08); }
.zmt-csz-platform-logo { width: 42px; height: 42px; border-radius: 12px; }
.zmt-csz-platform-logo img { display: block; width: 100%; height: 100%; padding: 4px; object-fit: contain; outline: 0; }
.zmt-csz-platforms button[data-csz-platform="douyin"] .zmt-csz-platform-logo img,
.zmt-csz-platforms button[data-csz-platform="xiaohongshu"] .zmt-csz-platform-logo img,
.zmt-csz-platforms button[data-csz-platform="wechat-mp"] .zmt-csz-platform-logo img { padding: 0; }
.zmt-csz-platforms button[data-csz-platform="bilibili"] .zmt-csz-platform-logo img { padding: 9px 4px; }
.zmt-csz-platform-copy, .zmt-csz-platform-copy b, .zmt-csz-platform-copy small { position: relative; z-index: 1; display: block; min-width: 0; }
.zmt-csz-platform-copy b { overflow: hidden; color: inherit; font-size: 14px; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
.zmt-csz-platform-copy small { margin: 4px 0 0 !important; color: #89958f !important; font-size: 9px !important; font-weight: 650; }
.zmt-csz-platform-check { position: absolute; z-index: 2; top: 7px; right: 7px; display: grid !important; width: 17px; height: 17px; place-items: center; border-radius: 50%; opacity: 0; color: #fff !important; background: var(--csz-platform); box-shadow: 0 2px 6px color-mix(in srgb,var(--csz-platform) 34%,transparent); font-size: 10px !important; transform: scale(.25); filter: blur(4px); transition-property: opacity,scale,filter; transition-duration: 240ms; transition-timing-function: cubic-bezier(.2,0,0,1); }
.zmt-csz-platforms button.is-active .zmt-csz-platform-check { opacity: 1; scale: 1; filter: blur(0); }
.zmt-csz-logo-fallback { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: #fff; background: var(--csz-platform); }
.zmt-csz-main-platform { display: inline-flex !important; align-items: center; gap: 8px; }
.zmt-csz-main-head .zmt-csz-main-platform-logo { display: grid; width: 25px; height: 25px; border-radius: 8px; }
.zmt-csz-main-platform-logo img { width: 100%; height: 100%; padding: 2px; object-fit: contain; outline: 0; }
.zmt-csz-main-platform > b { font-size: 14px; }
.zmt-csz-gallery-platform-logo { width: 32px; height: 32px; border-radius: 9px; }
.zmt-csz-gallery-platform-logo img { width: 100%; height: 100%; padding: 3px; object-fit: contain; outline: 0; }

/* Inspection console */
.zmt-csz-controls { background: linear-gradient(180deg,#fff,#fbfcfb); }
.zmt-csz-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 11px; }
.zmt-csz-group-head .zmt-csz-group-label { margin: 0; color: #38594b; font-size: 11px; }
.zmt-csz-group-head small { color: #8b9791; font-size: 10px; }
.zmt-csz-scene-group { padding: 16px; border-radius: 19px; background: linear-gradient(145deg,#f6faf8,#f1f6f3); box-shadow: inset 0 0 0 1px rgba(24,35,30,.055); }
.zmt-csz-scenes { gap: 9px; }
.zmt-csz-scenes button { position: relative; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 10px; min-height: 68px; align-items: center; padding: 10px 12px; overflow: hidden; border: 0; border-radius: 14px; color: #586961; background: #fff; box-shadow: 0 0 0 1px rgba(24,35,30,.06),0 4px 11px rgba(24,35,30,.035); }
.zmt-csz-scenes button:hover { color: #25382f; border-color: transparent; box-shadow: 0 0 0 1px rgba(24,122,83,.16),0 8px 17px rgba(24,64,46,.075); transform: translateY(-1px); }
.zmt-csz-scenes button.is-active { color: #173e30; border-color: transparent; background: linear-gradient(135deg,#f5fffa,#eaf8f1); box-shadow: 0 0 0 2px rgba(15,118,83,.48),0 10px 22px rgba(15,118,83,.12); }
.zmt-csz-scene-ratio { display: grid !important; width: 36px; height: 42px; place-items: center; border-radius: 10px; background: #edf4f0; }
.zmt-csz-scene-ratio i { display: block; width: min(22px,calc(25px * var(--csz-media-ratio))); max-height: 28px; aspect-ratio: var(--csz-media-ratio); border: 2px solid #658477; border-radius: 3px; background: #fff; box-shadow: 0 2px 5px rgba(24,35,30,.08); }
.zmt-csz-scenes button.is-active .zmt-csz-scene-ratio { background: #dff4e9; }
.zmt-csz-scenes button.is-active .zmt-csz-scene-ratio i { border-color: #0f7954; }
.zmt-csz-scene-copy, .zmt-csz-scene-copy b, .zmt-csz-scene-copy small { display: block !important; min-width: 0; }
.zmt-csz-scene-copy b { color: inherit; font-size: 13px; font-weight: 780; line-height: 1.35; text-wrap: pretty; }
.zmt-csz-scene-copy small { margin-top: 3px; color: #919b96; font-size: 9px; font-weight: 600; }
.zmt-csz-scenes button > em { padding: 5px 7px; border-radius: 8px; color: #718078; background: #f3f6f4; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 10px; font-style: normal; font-variant-numeric: tabular-nums; }
.zmt-csz-scenes button.is-active > em { color: #0c7650; background: #ddf3e7; }
.zmt-csz-scenes .zmt-csz-scene-check { position: absolute; top: 5px; right: 5px; display: grid !important; width: 16px; height: 16px; place-items: center; border-radius: 50%; opacity: 0; color: #fff; background: #0f7954; font-size: 9px !important; scale: .25; filter: blur(4px); transition-property: opacity,scale,filter; transition-duration: 240ms; transition-timing-function: cubic-bezier(.2,0,0,1); }
.zmt-csz-scenes button.is-active .zmt-csz-scene-check { opacity: 1; scale: 1; filter: blur(0); }

.zmt-csz-switches { display: grid; gap: 9px; padding: 16px; border-radius: 19px; background: #f5f8f6; box-shadow: inset 0 0 0 1px rgba(24,35,30,.055); }
.zmt-csz-switches legend { width: 100%; margin: 0 0 11px; padding: 0; color: inherit; letter-spacing: normal; text-transform: none; }
.zmt-csz-switches legend span, .zmt-csz-switches legend small { display: block; }
.zmt-csz-switches legend span { color: #38594b; font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.zmt-csz-switches legend small { margin-top: 4px; color: #8b9791; font-size: 10px; font-weight: 600; }
.zmt-csz-switches label, .zmt-csz-switches label.is-safe, .zmt-csz-switches label.is-crop, .zmt-csz-switches label.is-ui, .zmt-csz-switches label.is-chrome { --csz-layer-color: #1677ff; position: relative; display: grid; grid-template-columns: 15px minmax(0,1fr) 42px; gap: 10px; min-height: 66px; align-items: center; padding: 10px 11px; border-radius: 14px; color: #4f6158; background: #fff; box-shadow: 0 0 0 1px rgba(24,35,30,.055),0 4px 11px rgba(24,35,30,.03); cursor: pointer; transition-property: box-shadow,transform,background-color; transition-duration: 150ms; transition-timing-function: ease-out; }
.zmt-csz-switches label.is-safe { --csz-layer-color: var(--csz-safe); }
.zmt-csz-switches label.is-crop { --csz-layer-color: var(--csz-crop); }
.zmt-csz-switches label.is-ui { --csz-layer-color: var(--csz-ui); }
.zmt-csz-switches label.is-chrome { --csz-layer-color: #1677ff; margin-top: 7px; }
.zmt-csz-switches label.is-chrome::before { position: absolute; top: -8px; right: 0; left: 0; height: 1px; background: rgba(24,35,30,.08); content: ""; }
.zmt-csz-switches label:hover { box-shadow: 0 0 0 1px color-mix(in srgb,var(--csz-layer-color) 28%,transparent),0 8px 17px rgba(24,35,30,.07); transform: translateY(-1px); }
.zmt-csz-switches label:has(input:focus-visible) { outline: 3px solid rgba(22,119,255,.28); outline-offset: 2px; }
.zmt-csz-switches input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.zmt-csz-layer-swatch { width: 15px; height: 15px; border-radius: 5px; background: var(--csz-layer-color); box-shadow: 0 0 0 4px color-mix(in srgb,var(--csz-layer-color) 12%,transparent); }
.zmt-csz-switches label.is-crop .zmt-csz-layer-swatch { background: repeating-linear-gradient(135deg,var(--csz-crop) 0 4px,#fff0bd 4px 7px); }
.zmt-csz-switches label.is-ui .zmt-csz-layer-swatch { background: repeating-linear-gradient(135deg,var(--csz-ui) 0 4px,#ffd0d9 4px 7px); }
.zmt-csz-layer-copy, .zmt-csz-layer-copy b, .zmt-csz-layer-copy small { display: block !important; min-width: 0; }
.zmt-csz-layer-copy b { color: #30443a; font-size: 13px; font-weight: 780; }
.zmt-csz-layer-copy small { margin-top: 3px; color: #89958f; font-size: 9px; font-weight: 600; line-height: 1.35; text-wrap: pretty; }
.zmt-csz-switches label > .zmt-csz-toggle-control { position: relative; display: block; width: 42px; height: 24px; border-radius: 999px; background: #dce4e0; box-shadow: inset 0 1px 2px rgba(24,35,30,.15); transition-property: background-color,box-shadow; transition-duration: 180ms; transition-timing-function: cubic-bezier(.2,0,0,1); }
.zmt-csz-switches label > .zmt-csz-toggle-control > i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(24,35,30,.22); transition-property: transform; transition-duration: 180ms; transition-timing-function: cubic-bezier(.2,0,0,1); }
.zmt-csz-switches input:checked ~ .zmt-csz-toggle-control { background: var(--csz-layer-color); box-shadow: inset 0 1px 2px rgba(0,0,0,.12),0 0 0 3px color-mix(in srgb,var(--csz-layer-color) 10%,transparent); }
.zmt-csz-switches input:checked ~ .zmt-csz-toggle-control > i { transform: translateX(18px); }

.zmt-csz-gallery .zmt-csz-gallery-platform-head { min-height: 38px; }
.zmt-csz-gallery-platform-head > i { display: none; }

@keyframes zmt-csz-pulse { from { opacity: .72; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

@media (max-width: 1230px) {
  .zmt-csz-shell { grid-template-columns: 280px minmax(0,1fr); }
  .zmt-csz-controls { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .zmt-csz-controls-head { grid-column: 1 / -1; }
  .zmt-csz-adjustments { grid-column: 1 / -1; }
  .zmt-csz-scenes { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .zmt-csz-source, .zmt-csz-controls { padding: 17px; }
  .zmt-csz-dropzone { min-height: 280px; }
  .zmt-csz-platform-heading { margin-top: 19px; }
  .zmt-csz-platforms { display: flex; gap: 9px; margin: 11px -4px 0; padding: 3px 4px 8px; scroll-snap-type: x proximity; }
  .zmt-csz-platforms button { min-width: 150px; scroll-snap-align: start; }
  .zmt-csz-controls { display: block; }
  .zmt-csz-scene-group, .zmt-csz-switches { padding: 14px; }
  .zmt-csz-scenes { grid-template-columns: 1fr; }
  .zmt-csz-scenes button { min-height: 66px; }
  .zmt-csz-switches label, .zmt-csz-switches label.is-safe, .zmt-csz-switches label.is-crop, .zmt-csz-switches label.is-ui, .zmt-csz-switches label.is-chrome { min-height: 64px; }
}

/* V2.1.1 — theme-proof layer controls */
.zmt-csz-switches label,
.zmt-csz-switches label.is-safe,
.zmt-csz-switches label.is-crop,
.zmt-csz-switches label.is-ui,
.zmt-csz-switches label.is-chrome { position: relative; display: block !important; width: 100%; min-height: 72px; padding: 13px 64px 13px 43px; }
.zmt-csz-switches .zmt-csz-layer-swatch { position: absolute; top: 50%; left: 15px; margin: 0; transform: translateY(-50%); }
.zmt-csz-switches .zmt-csz-layer-copy { display: block !important; width: 100%; margin: 0; }
.zmt-csz-switches .zmt-csz-layer-copy b { display: block !important; white-space: nowrap; }
.zmt-csz-switches .zmt-csz-layer-copy small { display: -webkit-box !important; overflow: hidden; margin-top: 4px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.zmt-csz-switches label > .zmt-csz-toggle-control { position: absolute; top: 50%; right: 12px; margin: 0; transform: translateY(-50%); }
.zmt-csz-switches label.is-chrome { margin-top: 8px; }
.zmt-csz-switches label.is-chrome::before { top: -9px; }

@media (max-width: 760px) {
  .zmt-csz-switches label,
  .zmt-csz-switches label.is-safe,
  .zmt-csz-switches label.is-crop,
  .zmt-csz-switches label.is-ui,
  .zmt-csz-switches label.is-chrome { min-height: 70px; padding-right: 62px; }
}

/* V2.1.2 — compact, theme-proof layer controls */
.zmt-csz-switches {
  gap: 6px;
  padding: 12px;
  border-radius: 17px;
}
.zmt-csz-switches legend { margin-bottom: 7px; }
.zmt-csz-switches legend small { margin-top: 2px; }
.zmt-csz-switches label,
.zmt-csz-switches label.is-safe,
.zmt-csz-switches label.is-crop,
.zmt-csz-switches label.is-ui,
.zmt-csz-switches label.is-chrome {
  box-sizing: border-box !important;
  min-height: 60px;
  padding: 8px 57px 8px 39px;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(24,35,30,.05), 0 2px 7px rgba(24,35,30,.025);
}
.zmt-csz-switches label:hover {
  box-shadow: 0 0 0 1px color-mix(in srgb,var(--csz-layer-color) 24%,transparent), 0 5px 11px rgba(24,35,30,.055);
}
.zmt-csz-switches .zmt-csz-layer-swatch {
  left: 13px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  box-shadow: 0 0 0 4px color-mix(in srgb,var(--csz-layer-color) 10%,transparent);
}
.zmt-csz-switches .zmt-csz-layer-copy b { font-size: 12px; line-height: 1.25; }
.zmt-csz-switches .zmt-csz-layer-copy small {
  margin-top: 3px;
  font-size: 9px;
  line-height: 1.25;
  white-space: nowrap;
}
.zmt-csz-switches label > .zmt-csz-toggle-control {
  right: 11px;
  width: 38px;
  height: 22px;
}
.zmt-csz-switches label > .zmt-csz-toggle-control > i {
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
}
.zmt-csz-switches input:checked ~ .zmt-csz-toggle-control > i { transform: translateX(16px); }
.zmt-csz-switches label.is-chrome { margin-top: 6px; }
.zmt-csz-switches label.is-chrome::before { top: -7px; }

@media (max-width: 760px) {
  .zmt-csz-switches { gap: 6px; padding: 11px; }
  .zmt-csz-switches label,
  .zmt-csz-switches label.is-safe,
  .zmt-csz-switches label.is-crop,
  .zmt-csz-switches label.is-ui,
  .zmt-csz-switches label.is-chrome {
    min-height: 58px;
    padding: 7px 56px 7px 38px;
  }
}

/* V2.1.3 — optical alignment and denser layer rows */
.zmt-csz-switches {
  gap: 4px;
  padding: 10px;
  border-radius: 15px;
}
.zmt-csz-switches legend { margin-bottom: 5px; }
.zmt-csz-switches label,
.zmt-csz-switches label.is-safe,
.zmt-csz-switches label.is-crop,
.zmt-csz-switches label.is-ui,
.zmt-csz-switches label.is-chrome {
  height: 54px !important;
  min-height: 54px;
  padding: 0;
  border-radius: 11px;
}
.zmt-csz-switches .zmt-csz-layer-swatch {
  top: 50%;
  left: 12px;
  width: 13px;
  height: 13px;
  transform: translateY(-50%);
}
.zmt-csz-switches .zmt-csz-layer-copy {
  position: absolute;
  top: 50%;
  right: 53px;
  left: 37px;
  width: auto;
  transform: translateY(-50%);
}
.zmt-csz-switches .zmt-csz-layer-copy b {
  margin: 0;
  font-size: 12px;
  line-height: 1.2;
}
.zmt-csz-switches .zmt-csz-layer-copy small {
  margin: 2px 0 0;
  font-size: 9px;
  line-height: 1.2;
}
.zmt-csz-switches label > .zmt-csz-toggle-control {
  top: 50%;
  right: 10px;
  width: 36px;
  height: 20px;
  transform: translateY(-50%);
}
.zmt-csz-switches label > .zmt-csz-toggle-control > i {
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
}
.zmt-csz-switches input:checked ~ .zmt-csz-toggle-control > i { transform: translateX(16px); }
.zmt-csz-switches label.is-chrome { margin-top: 4px; }
.zmt-csz-switches label.is-chrome::before { top: -5px; }

@media (max-width: 760px) {
  .zmt-csz-switches { gap: 4px; padding: 10px; }
  .zmt-csz-switches label,
  .zmt-csz-switches label.is-safe,
  .zmt-csz-switches label.is-crop,
  .zmt-csz-switches label.is-ui,
  .zmt-csz-switches label.is-chrome {
    height: 54px !important;
    min-height: 54px;
    padding: 0;
  }
}

/* V2.1.4 — keep gallery devices centered across theme overrides */
.zmt-csz-gallery-platform-scenes .zmt-csz-thumb {
  align-items: stretch !important;
}
.zmt-csz-gallery-platform-scenes .zmt-csz-thumb-stage {
  box-sizing: border-box;
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  align-self: stretch !important;
  place-items: center !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.zmt-csz-gallery-platform-scenes .zmt-csz-thumb-stage > .zmt-csz-device {
  right: auto !important;
  left: auto !important;
  justify-self: center !important;
  margin-right: auto !important;
  margin-left: auto !important;
}
