/* Image Studio: photo first, with a contextual inspector. */
#image-viewer {
    --studio-bg: #181819;
    --studio-panel: #222224;
    --studio-line: rgba(255,255,255,.09);
    --studio-muted: #a6a6ad;
    --studio-accent: #8b86ff;
    --text-main: #f5f5f7;
    --text-muted: #a6a6ad;
    padding: 12px;
    background: #111112;
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color-scheme: dark;
}
#image-viewer .universal-viewer-shell {
    width: 100%; height: 100%; max-width: none; max-height: none;
    grid-template-rows: 64px minmax(0,1fr);
    border-radius: 18px; background: var(--studio-bg); box-shadow: none;
}
#image-viewer .universal-viewer-header {
    display: grid; grid-template-columns: 1fr auto 1fr;
    padding: 0 20px; gap: 16px; background: var(--studio-panel);
    border-color: var(--studio-line); backdrop-filter: none;
}
#image-viewer .universal-viewer-heading h2 { font-size: 17px; letter-spacing: -.5px; font-weight: 650; }
#image-viewer .universal-viewer-heading { grid-column: 1; grid-row: 1; }
#image-viewer .universal-viewer-meta { font-size: 11px; color: var(--studio-muted); margin-top: 2px; }
#image-viewer .universal-viewer-header-actions { grid-column: 3; grid-row: 1; justify-content: flex-end; gap: 10px; }
#image-viewer .universal-viewer-status[data-state="ready"] { display: none; }
#image-viewer .universal-viewer-status { position: absolute; top: 76px; left: 28px; z-index: 40; }
#image-viewer .universal-viewer-icon-button {
    width: auto; min-width: 40px; height: 40px; padding: 0 11px;
    display: inline-flex; flex-direction: row; align-items: center; justify-content: center;
    gap: 7px; border: 0; border-radius: 9px; background: transparent;
    font-size: 12px; font-weight: 600; color: #f5f5f7;
}
#image-viewer .universal-viewer-icon-button:hover { background: #333336; }
#image-viewer #viewer-actions {
    grid-area: auto; grid-column: 2; grid-row: 1;
    position: static; inset: auto; transform: none; display: flex; flex-direction: row;
    width: auto; height: auto; overflow: visible; gap: 3px; padding: 4px;
    background: #161617; border: 1px solid var(--studio-line); border-radius: 11px;
}
#image-viewer .viewer-tool-button {
    display: flex; flex-direction: row; min-height: 36px; min-width: 68px;
    padding: 7px 12px; gap: 7px; border: 0; border-radius: 7px;
    font-size: 12px; font-weight: 550; color: #b6b6bd; background: transparent; box-shadow: none;
}
#image-viewer .viewer-tool-button svg { width: 16px; height: 16px; }
#image-viewer .viewer-tool-button::before { display: none; }
#image-viewer .viewer-tool-button.active { color: #fff; background: #39393d; box-shadow: 0 1px 4px #0003; }
#image-viewer .viewer-tool-button:hover:not(:disabled):not(.active) { background: #27272a; color: white; }
#image-viewer .universal-viewer-body { grid-template-columns: minmax(0,1fr) 320px; grid-template-rows: minmax(0,1fr); grid-template-areas: 'canvas inspector'; }
#image-viewer[data-tool="view"] .universal-viewer-body { grid-template-columns: minmax(0,1fr); grid-template-areas: 'canvas'; }
#image-viewer #viewer-inspector-home { display: none !important; }
#image-viewer .universal-viewer-canvas { background: var(--studio-bg); }
#image-viewer #viewer-img {
    background: repeating-conic-gradient(#202022 0% 25%, #19191b 0% 50%) 0 / 20px 20px;
}
#image-viewer #viewer-transform-wrapper { filter: none; }
#image-viewer:not([data-tool="faces"]) #viewer-face-overlay,
#image-viewer[data-preview="original"] #viewer-face-overlay,
#image-viewer[data-preview="original"] #viewer-edit-comment-composer { visibility: hidden !important; }
#image-viewer .universal-viewer-canvas-hint { display: none; }
#image-viewer .universal-viewer-inspector {
    align-self: stretch; position: relative; inset: auto; height: 100%; max-height: none; border-radius: 0;
    background: var(--studio-panel); color: #f5f5f7; border-color: var(--studio-line);
    box-shadow: none; backdrop-filter: none; width: auto; min-width: 0;
}
#image-viewer .universal-viewer-panel-header,
#image-viewer .viewer-layer-editor-header,
#image-viewer .ffp-header { padding: 24px 22px 18px; background: transparent; border: 0; min-height: auto; }
#image-viewer .universal-viewer-panel-header h3,
#image-viewer .viewer-layer-editor-header strong,
#image-viewer .ffp-title { font-size: 23px; font-weight: 650; letter-spacing: -.7px; line-height: 1.2; color: #f5f5f7; }
#image-viewer .universal-viewer-panel-header p,
#image-viewer .viewer-layer-editor-header small { color: var(--studio-muted); font-size: 12px; line-height: 1.6; margin-top: 8px; }
#image-viewer .universal-viewer-panel-back,
#image-viewer .viewer-layer-done,
#image-viewer .ffp-help-btn,
#image-viewer .ffp-header-left > svg,
#image-viewer .ffp-steps,
#image-viewer .ffp-method-grid,
#image-viewer .ffp-scope-icon,
#image-viewer .ffp-scope-btn small,
#image-viewer .ffp-filter-select,
#image-viewer .ffp-face-badge,
#image-viewer #popover-step-1 > .ffp-section-title,
#image-viewer #popover-step-1 > .ffp-section-sub,
#image-viewer #popover-step-3-section > .ffp-section-sub,
#image-viewer .viewer-layer-select-field,
#image-viewer .viewer-layer-nudges { display: none; }
#image-viewer .universal-viewer-panel-body { padding: 0 22px 22px; gap: 24px; display: flex; flex-direction: column; }
#image-viewer .universal-viewer-field { gap: 8px; }
#image-viewer .universal-viewer-panel-body > * { flex-shrink: 0; }
#image-viewer .universal-viewer-comment-list-section { flex: 0 0 auto; min-height: auto; }
#image-viewer .universal-viewer-comment-list { max-height: 240px; }
#image-viewer .universal-viewer-field > span,
#image-viewer .ffp-method-heading,
#image-viewer .viewer-layer-field > span { font-size: 12px; color: var(--studio-muted); font-weight: 500; }
#image-viewer select,
#image-viewer .universal-viewer-field textarea,
#image-viewer .ffp-search-input {
    min-height: 42px; width: 100%; border: 1px solid #454549; border-radius: 9px;
    padding: 10px 12px; background: #2c2c2f; color: #f5f5f7; font: inherit; font-size: 13px;
    box-shadow: none; color-scheme: dark;
}
#image-viewer textarea::placeholder { color: #95959e; }
#image-viewer .universal-viewer-field textarea { min-height: 104px; line-height: 1.6; resize: vertical; }
#image-viewer .universal-viewer-comment-list-header { font-size: 13px; }
#image-viewer .universal-viewer-comment-list-item { box-shadow: none; border-radius: 9px; background: #2a2a2d; border-color: transparent; }
#image-viewer .universal-viewer-comment-list-item.active { border-color: var(--studio-accent); background: #302f40; }
#image-viewer .universal-viewer-comment-list p { font-size: 12px; line-height: 1.6; color: var(--studio-muted); }
#image-viewer .universal-viewer-panel-footer,
#image-viewer .ffp-footer { margin-top: auto; padding: 16px 22px; border-top: 1px solid var(--studio-line); background: var(--studio-panel); box-shadow: none; }
#image-viewer #viewer-edit-submit,
#image-viewer #popover-restore-btn {
    opacity: 1;
    width: 100%; min-height: 46px; border: 0; border-radius: 10px; box-shadow: none;
    background: #d9d7ff; color: #242137; font-size: 13px; font-weight: 650;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
#image-viewer #viewer-edit-submit:disabled,
#image-viewer #popover-restore-btn:disabled { background: #38383d; color: #8b8b96; opacity: 1; cursor: not-allowed; }
#image-viewer #viewer-edit-cost { color: inherit; font-size: inherit; }
#image-viewer .universal-viewer-canvas-controls,
#image-viewer .universal-viewer-compare-btn {
    position: relative; grid-area: canvas; align-self: end; z-index: 35; inset: auto;
    transform: none; margin: 0 20px 18px; height: 42px; min-height: 42px;
    border: 1px solid #ffffff1a; border-radius: 10px; color: #e7e7ec;
    background: #29292cee; box-shadow: 0 3px 12px #0002; backdrop-filter: blur(12px);
    font-size: 12px; font-weight: 550;
}
#image-viewer .universal-viewer-canvas-controls { justify-self: end; padding: 2px 6px; gap: 1px; }
#image-viewer .universal-viewer-canvas-controls button { min-height: 34px; padding: 0 9px; font-size: 12px; }
#image-viewer .universal-viewer-zoom-value { color: #e7e7ec; font-size: 12px; min-width: 40px; }
#image-viewer .universal-viewer-compare-btn { justify-self: start; display: inline-flex; align-items: center; padding: 0 14px; touch-action: none; }
#image-viewer .universal-viewer-compare-btn:disabled { color: #9999a1; cursor: help; }
#image-viewer .universal-viewer-compare-btn.active { background: #d9d7ff; color: #242137; border-color: #d9d7ff; }
#image-viewer .universal-viewer-edit-composer {
    grid-area: canvas; justify-self: center; align-self: end; position: relative; inset: auto;
    transform: none; margin: 0 20px 76px; width: min(480px, calc(100% - 40px));
    background: #303033f5; border: 1px solid #ffffff26; border-radius: 14px; padding: 10px 12px;
    box-shadow: 0 8px 24px #0003; backdrop-filter: blur(16px);
}
#image-viewer .universal-viewer-edit-composer textarea { color: #fff; font-size: 13px; max-height: 100px; }
#image-viewer .universal-viewer-edit-point { background: #d9d7ff; color: #242137; border: 2px solid white; box-shadow: 0 2px 6px #0004; }
#image-viewer .universal-viewer-edit-point.active { background: #fff; outline: 3px solid #8b86ff80; }
#image-viewer .viewer-layer-list { display: flex; flex-direction: column; gap: 6px; padding: 0 22px; max-height: 35vh; overflow: auto; }
#image-viewer .viewer-layer-item { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #d6d6dd; text-align: left; font: inherit; font-size: 12px; cursor: pointer; }
#image-viewer .viewer-layer-item[aria-pressed="true"] { background: #34333e; border-color: #8b86ff80; color: #fff; }
#image-viewer .viewer-layer-item img { width: 44px; height: 44px; object-fit: contain; background: #171719; border-radius: 6px; }
#image-viewer .viewer-layer-scale-field { margin: 24px 22px; }
#image-viewer .viewer-scale-number { display: inline-flex; gap: 3px; align-items: center; font-size: 12px; color: #aaaab2; }
#image-viewer #viewer-layer-scale-value { width: 60px; border: 1px solid #49494e; border-radius: 7px; padding: 6px; background: #303034; color: #fff; font: inherit; font-size: 13px; }
#image-viewer #viewer-layer-scale { accent-color: var(--studio-accent); height: 24px; }
#image-viewer .viewer-layer-editor-footer { padding: 0 22px; margin: 0; display: block; }
#image-viewer .viewer-layer-reset { width: 100%; min-height: 40px; background: transparent; border: 1px solid #48484d; border-radius: 9px; color: #dddde5; font-size: 12px; }
#image-viewer .viewer-layer-save-status { padding: 12px 22px; color: var(--studio-muted); font-size: 12px; }
#image-viewer #viewer-layer-editor { padding: 0; gap: 0; background: var(--studio-panel); box-shadow: none; }
#image-viewer #viewer-layer-editor .viewer-layer-editor-header { border: 0; padding: 24px 22px 18px; }
#image-viewer #viewer-layer-editor .viewer-layer-editor-header strong { font-size: 23px; font-weight: 650; }
#image-viewer #viewer-layer-editor .viewer-layer-save-status { margin: 16px 22px; padding: 0; background: transparent; border: 0; }
#image-viewer #viewer-layer-editor .viewer-layer-save-status[data-state="ready"] { display: none; }
#image-viewer[data-tool="faces"] .face-detection-box { opacity: 1 !important; border-color: #b7b3ff80; }
#image-viewer[data-tool="faces"] .face-detection-box:focus-within { border-color: #d9d7ff; }
#image-viewer[data-tool="faces"] .face-detection-box.selected { outline: 2px solid #d9d7ff; }
#image-viewer .ffp-body { padding: 0 22px 20px; }
#image-viewer #face-fix-popover { background: var(--studio-panel); box-shadow: none; border-radius: 0; }
#image-viewer #face-fix-popover .ffp-header { background: transparent; border: 0; padding: 24px 22px 18px; }
#image-viewer #face-fix-popover .ffp-footer { background: var(--studio-panel); }
#image-viewer #face-fix-popover .ffp-selected-face-card { background: transparent; border: 0; }
#image-viewer #face-fix-popover .ffp-scope-btn { background: transparent; border: 0; box-shadow: none; }
#image-viewer #face-fix-popover .ffp-scope-btn.active { background: #3a3a40; border: 0; box-shadow: none; }
#image-viewer .ffp-section { padding: 0 0 20px; margin-bottom: 20px; border-bottom: 1px solid var(--studio-line); }
#image-viewer .ffp-section-title { font-size: 13px; margin-bottom: 12px; color: #ededf2; }
#image-viewer #popover-step-1 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#image-viewer .ffp-selected-face-card { padding: 0; margin: 0; background: transparent; border: 0; box-shadow: none; }
#image-viewer .ffp-selected-face-row { flex-direction: column; align-items: flex-start; gap: 7px; }
#image-viewer .ffp-face-preview, #image-viewer #viewer-replacement-image { width: 68px; height: 68px; object-fit: cover; border-radius: 10px; border: 0; }
#image-viewer .ffp-selected-face-label, #image-viewer .viewer-replacement-preview > span:first-child { display: block; font-size: 11px; color: var(--studio-muted); margin-bottom: 8px; font-weight: 500; }
#image-viewer .ffp-face-name { font-size: 11px; color: #bdbdc7; }
#image-viewer #viewer-replacement-empty { display: block; font-size: 12px; color: #a6a6ad; line-height: 1.6; }
#image-viewer #viewer-replacement-empty[hidden], #image-viewer #viewer-replacement-image[hidden] { display: none; }
#image-viewer .ffp-action-row { grid-column: 1 / -1; margin: 0; }
#image-viewer .ffp-tabs, #image-viewer .ffp-scope-toggle { padding: 3px; gap: 3px; border-radius: 9px; background: #171719; border: 1px solid var(--studio-line); }
#image-viewer .ffp-tab, #image-viewer .ffp-scope-btn { padding: 10px; min-height: 40px; background: transparent; border: 0; border-radius: 6px; color: #aaaab3; box-shadow: none; font-size: 12px; justify-content: center; }
#image-viewer .ffp-tab.active, #image-viewer .ffp-scope-btn.active { background: #3a3a40; color: #fff; box-shadow: none; }
#image-viewer .ffp-scope-help { font-size: 11px; line-height: 1.6; color: var(--studio-muted); margin: 9px 0 18px; }
#image-viewer .ffp-method-heading { margin-bottom: 8px; }
#image-viewer .ffp-advanced { margin-top: 18px; background: transparent; border: 0; }
#image-viewer .ffp-advanced-summary { padding: 10px 0; color: #c6c6ce; font-size: 12px; }
#image-viewer .ffp-advanced-body { padding: 8px 0; }
#image-viewer .ffp-generate-btn > svg { display: none; }
#image-viewer .ffp-person-grid { gap: 8px; max-height: 180px; overflow-y: auto; padding: 4px 0; }
#image-viewer #face-fix-popover .ffp-tab.active { color: #fff; border: 0; }
#image-viewer .universal-viewer-face-orbit { display: none; }
#image-viewer .universal-viewer-face-guide { padding: 24px; background: transparent; border: 1px dashed #45454c; border-radius: 12px; }
#image-viewer .universal-viewer-face-guide strong { font-size: 14px; }
#image-viewer .universal-viewer-face-guide p { font-size: 12px; color: var(--studio-muted); }
#image-viewer .universal-viewer-face-start-content { padding: 0 22px 22px; }
#image-viewer button:focus-visible, #image-viewer input:focus-visible, #image-viewer textarea:focus-visible, #image-viewer select:focus-visible { outline: 2px solid #b7b3ff; outline-offset: 3px; }
@media (max-width: 1000px) {
    #image-viewer .universal-viewer-header { gap: 8px; padding: 0 12px; }
    #image-viewer .viewer-tool-button { padding: 7px 9px; min-width: 56px; }
    #image-viewer .viewer-tool-button svg { display: none; }
    #image-viewer .universal-viewer-header-actions .universal-viewer-icon-button > span { display: none; }
    #image-viewer .universal-viewer-body { grid-template-columns: minmax(0,1fr) 290px; }
    #image-viewer .universal-viewer-canvas-controls { margin-right: 12px; }
    #image-viewer .universal-viewer-compare-btn { margin-left: 12px; padding: 0 9px; font-size: 11px; }
}
@media (max-width: 700px) {
    #image-viewer { padding: 0; }
    #image-viewer .universal-viewer-shell { border: 0; border-radius: 0; height: 100dvh; grid-template-rows: 108px minmax(0,1fr); }
    #image-viewer .universal-viewer-header { grid-template-columns: 1fr auto; grid-template-rows: 52px 56px; gap: 0; padding: 0 14px; }
    #image-viewer .universal-viewer-heading h2 { font-size: 16px; }
    #image-viewer #viewer-actions { grid-column: 1 / -1; grid-row: 2; align-self: start; justify-self: stretch; }
    #image-viewer .viewer-tool-button { flex: 1; min-height: 38px; justify-content: center; font-size: 12px; }
    #image-viewer .universal-viewer-header-actions { grid-row: 1; grid-column: 2; }
    #image-viewer .universal-viewer-body { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(180px,1fr) minmax(180px,43%); grid-template-areas: 'canvas' 'inspector'; }
    #image-viewer[data-tool="view"] .universal-viewer-body { grid-template-rows: minmax(0,1fr); }
    #image-viewer .universal-viewer-inspector { border: 0; border-top: 1px solid #414145; border-radius: 18px 18px 0 0; max-height: none; height: 100%; padding-bottom: env(safe-area-inset-bottom); }
    #image-viewer #face-fix-popover, #image-viewer #viewer-layer-editor { border-radius: 18px 18px 0 0; }
    #image-viewer #face-fix-popover .ffp-header, #image-viewer #viewer-layer-editor .viewer-layer-editor-header { padding: 16px 20px 12px; }
    #image-viewer #viewer-layer-editor .viewer-layer-editor-header strong { font-size: 20px; }
    #image-viewer .universal-viewer-panel-header, #image-viewer .ffp-header, #image-viewer .viewer-layer-editor-header { padding: 16px 20px 12px; }
    #image-viewer .universal-viewer-panel-header h3, #image-viewer .ffp-title, #image-viewer .viewer-layer-editor-header strong { font-size: 20px; }
    #image-viewer .universal-viewer-panel-header p, #image-viewer .viewer-layer-editor-header small { display: none; }
    #image-viewer .universal-viewer-panel-body { padding: 0 20px 16px; gap: 18px; }
    #image-viewer .universal-viewer-field textarea { min-height: 72px; }
    #image-viewer .universal-viewer-panel-footer, #image-viewer .ffp-footer { padding: 10px 20px; }
    #image-viewer .universal-viewer-canvas-controls { margin: 0 10px 10px; height: 38px; min-height: 38px; }
    #image-viewer .universal-viewer-canvas-controls button { min-height: 32px; padding: 0 6px; font-size: 11px; }
    #image-viewer .universal-viewer-controls-divider { margin: 0; }
    #image-viewer .universal-viewer-zoom-value { min-width: 32px; font-size: 11px; }
    #image-viewer .universal-viewer-compare-btn { margin: 0 10px 10px; height: 38px; min-height: 38px; max-width: calc(100% - 210px); font-size: 10px; text-align: center; line-height: 1.2; }
    #image-viewer .universal-viewer-edit-composer { margin-bottom: 58px; padding: 8px 10px; width: calc(100% - 24px); }
    #image-viewer .viewer-layer-list { flex-direction: row; flex-shrink: 0; max-height: 90px; }
    #image-viewer .viewer-layer-item { min-width: 125px; }
    #image-viewer .viewer-layer-scale-field { margin: 14px 20px; }
    #image-viewer .universal-viewer-status { top: 114px; left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    #image-viewer *, #image-viewer *::before { animation: none !important; transition: none !important; }
}