.mobile-preview-settings-toggle { display: none; }
.preview-expand { position: absolute; right: 8px; bottom: 8px; z-index: 5; min-height: 40px; padding: 7px 12px; border: 1px solid #cbd3e3; border-radius: 8px; background: #fffffff0; color: #0f218b; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.4; cursor: pointer; }
.portrait-preview-box.empty .preview-expand { display: none; }
.result-image-wrap { position: relative; }
.large-preview-dialog { width: min(1000px, calc(100vw - 24px)); height: calc(100dvh - 24px); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: white; }
.large-preview-dialog[open] { display: flex; flex-direction: column; }
.large-preview-dialog::backdrop { background: #101828bb; }
.large-preview-dialog > header { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-shrink: 0; min-height: 56px; padding: 6px 12px; border-bottom: 1px solid #e3e7ef; }
.large-preview-dialog h2 { margin: 0; font-size: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.large-preview-dialog header > div { display: flex; flex: 0 0 auto; gap: 12px; }
#large-preview-viewport { min-height: 0; flex: 1; overflow: auto; background: #edf0f5; }
#large-preview-image { display: block; width: 100%; height: 100%; object-fit: contain; background: white; }
#large-preview-viewport.is-zoomed #large-preview-image { width: 200%; height: auto; max-width: none; object-fit: contain; }
@media (max-width: 760px) {
  .public-app:has(.public-main:is([data-stage="portrait"], [data-stage="lucky"], [data-stage="preview"], [data-stage="queue"])) .public-header { min-height: 44px; flex-basis: 44px; padding: 6px 12px; }
  .public-app .experience-stage:is(#portrait-stage, #lucky-stage, #preview-stage, #queue-stage) > .panel-heading { padding: 7px 12px; min-height: 0; }
  .public-app .experience-stage:is(#portrait-stage, #lucky-stage, #preview-stage, #queue-stage) > .panel-heading h2 { font-size: 19px; }
  .public-app #preview-stage .panel-badge, .public-app #portrait-stage .panel-badge { display: none; }
  .public-app #lucky-result:not(.hidden) { padding: 4px 6px; gap: 6px; justify-content: flex-start; }
  .public-app #lucky-result .result-image-wrap img { width: 100%; max-width: 560px; height: auto; max-height: none; }
  .public-app #lucky-result .result-copy b { font-size: 16px; }
  .public-app #lucky-stage .lucky-status { margin: 3px 12px; font-size: 12px; }
  .public-app #lucky-stage .lucky-actions { padding: 7px 12px; gap: 2px; }
  .public-app #portrait-stage .portrait-workbench { display: flex; flex-direction: column; flex: 0 0 auto; padding: 4px 6px; gap: 6px; }
  .public-app #portrait-stage .portrait-consent-state { min-height: 24px; margin: 0 12px; }
  .public-app #portrait-stage .portrait-workbench:has(.portrait-preview-box:not(.empty)) .portrait-preview-panel { order: -1; }
  .public-app .portrait-source-panel { padding: 5px 6px; }
  .public-app .portrait-source-panel .portrait-workbench-heading { display: none; }
  .public-app .portrait-source-grid { margin: 0; gap: 8px; }
  .public-app .portrait-source-card { min-height: 46px; padding: 6px 10px; grid-template-columns: 26px 1fr; gap: 8px; }
  .public-app .portrait-source-icon { width: 26px; height: 26px; border: 0; background: transparent; }
  .public-app .portrait-source-arrow { display: none; }
  .public-app .portrait-source-card > span b { font-size: 14px; }
  .public-app .portrait-file-note { display: none; }
  .public-app .portrait-preview-panel { padding: 0; border: 0; }
  .public-app .portrait-preview-panel .portrait-workbench-heading { min-height: 25px; flex-basis: 25px; padding: 0 6px; }
  .public-app .portrait-preview-panel .portrait-workbench-heading > span { display: none; }
  .public-app .portrait-preview-panel .portrait-workbench-heading > div { display: flex; width: 100%; align-items: center; gap: 8px; }
  .public-app .portrait-preview-panel .portrait-workbench-heading b { font-size: 13px; }
  .public-app .portrait-preview-panel .portrait-workbench-heading small { margin-left: auto; font-size: 11px; }
  .public-app .portrait-preview-box { min-height: 300px; height: clamp(300px, 53dvh, 560px); flex: none; margin: 0; }
  .public-app .portrait-preview-box.empty { height: 36dvh; min-height: 220px; }
  .public-app #preview-stage .trajectory-workspace { display: flex; flex-direction: column; flex: 1 0 auto; padding: 4px 6px 0; gap: 6px; overflow: visible; }
  .public-app #preview-stage .trajectory-view { flex: 0 0 auto; }
  .public-app #preview-stage .trajectory-canvas-wrap { width: 100%; height: auto; aspect-ratio: 1; min-height: 280px; flex: none; }
  .public-app #preview-stage .trajectory-view__bar { flex-basis: auto; min-height: 36px; padding: 3px 6px; gap: 2px 6px; }
  .public-app #preview-stage .trajectory-metrics { min-height: 34px; }
  .public-app #preview-stage .trajectory-metrics > div { padding: 4px 6px; }
  .public-app #preview-stage .trajectory-metrics span { font-size: 10px; }
  .public-app #preview-stage .trajectory-metrics b { font-size: 13px; }
  .public-app #preview-stage .mobile-preview-settings-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 44px; padding: 8px 12px; color: #0f218b; border: 1px solid #dce2ef; border-radius: 8px; background: #f8faff; font-size: 14px; }
  .public-app #preview-stage:not(.mobile-settings-open) .trajectory-controls { display: none; }
  .public-app #preview-stage.mobile-settings-open .trajectory-controls { display: grid; overflow: visible; padding: 8px; }
  .public-app #preview-stage.is-desktop-lucky.mobile-settings-open .trajectory-controls { display: block; }
  .public-app .experience-stage:is(#portrait-stage, #preview-stage) > .action-row { position: sticky; bottom: 0; z-index: 8; background: #fffffff5; padding: 8px 10px max(8px, env(safe-area-inset-bottom)); }
  .public-app #preview-stage .preview-action-row { flex-shrink: 0; }
  .public-app .ticket-result img { width: 100%; height: auto; max-height: 65dvh; object-fit: contain; }
  .public-app .ticket-result { flex-direction: column; align-items: stretch; }
  .public-app .public-main[data-stage="queue"] .experience-layout { display: block; overflow-y: auto; }
  .public-app .public-main[data-stage="queue"] .stage-stack { height: auto; }
  .public-app #queue-stage:not(.hidden) { height: auto; overflow: visible; }
  .public-app #queue-stage .queue-live-badge { min-height: 28px; padding: 0 8px; }
  .public-app .public-main[data-stage="queue"] .ticket-rail { margin-top: 8px; }
  .public-app .queue-focus { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; grid-template-areas: "primary" "artwork" "telemetry" "devices"; flex: 0 0 auto; min-height: 0; margin: 6px; }
  .public-app .queue-focus.is-empty-state { grid-template-rows: auto auto; grid-template-areas: "empty" "devices"; }
  .public-app .focus-status-copy > span, .public-app .focus-identity-meta, .public-app .focus-stage-track { display: none; }
  .public-app .focus-status-copy > small { max-width: none; font-size: 11px; }
  .public-app .focus-identity h3 { font-size: 14px; }
  .public-app .focus-progress-block > div > b { font-size: 12px; }
  .public-app .focus-progress-block > div > small { font-size: 11px; }
  .public-app .focus-artwork { margin: 4px 6px; }
  .public-app .focus-artwork-frame { width: 100%; aspect-ratio: 1; flex: none; }
  .public-app .focus-artwork figcaption { min-height: 0; display: block; padding: 5px 8px; }
  .public-app .focus-artwork figcaption span { display: none; }
  .public-app .focus-artwork figcaption b { font-size: 12px; }
  .public-app .focus-artwork-frame::before, .public-app .focus-artwork-frame::after { display: none; }
  .public-app .focus-artwork-frame img { filter: none; padding: 0; cursor: zoom-in; }
  .public-app .writing-specimen { display: flex; }
  .public-app .writing-specimen img { width: 100%; height: auto; max-height: 65dvh; }
  .public-app .camera-dialog { width: 100%; height: 100dvh; max-height: none; margin: 0; padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); border-radius: 0; }
  .public-app .camera-viewport { aspect-ratio: auto; height: calc(100dvh - 210px); max-height: none; min-height: 260px; }
  .large-preview-dialog { width: 100%; height: 100dvh; margin: 0; border-radius: 0; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
}