#dqc-mockup-open[hidden], .dqc-mockup[hidden] { display: none !important; }
.dqc-mockup { margin: 28px 0; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); }
.dqc-mockup-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dqc-mockup-head > div { display: flex; align-items: center; gap: 10px; }
.dqc-mockup h3 { margin: 0; color: var(--text) !important; font-size: 20px !important; }
#dqc-mockup-close { border: 0; padding: 0 4px; background: transparent; color: var(--text2); font-size: 28px; line-height: 1; cursor: pointer; }
.dqc-mockup-intro, .dqc-mockup-status { color: var(--text2) !important; }
.dqc-mockup-scenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.dqc-mockup-scene { appearance: none; border: 1px solid var(--border2); border-radius: 4px; padding: 7px; background: var(--surface2); color: var(--text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.dqc-mockup-scene span { display: block; width: 100%; aspect-ratio: 3 / 2; margin-bottom: 7px; border-radius: 2px; background: var(--bg) center / cover no-repeat; }
.dqc-mockup-scene.is-active { border-color: var(--accent); background: var(--accent-dim); color: var(--text); }
.dqc-mockup-stage { width: 100%; overflow: hidden; border-radius: 4px; background: var(--surface2); }
.dqc-mockup-stage canvas { display: block; width: 100%; height: 100%; }
.dqc-mockup-status { min-height: 22px; margin: 10px 0 16px; font-size: 14px; }
@media (max-width: 600px) { .dqc-mockup { padding: 16px; } .dqc-mockup-scenes { gap: 6px; } .dqc-mockup-scene { padding: 5px; font-size: 11px; } }