.image-studio { --studio-accent: #087f73; --studio-border: #dce3e1; color: #303b38; font-size: 14px; line-height: 1.5; }
.image-studio *, .image-studio *::before, .image-studio *::after { box-sizing: border-box; }
.image-studio [hidden] { display: none !important; }
.studio-upload { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 18px; }
.studio-upload > span { flex: 1; min-width: 0; overflow-wrap: anywhere; color: #5b6662; }
.image-studio .studio-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 8px 14px; border: 1px solid var(--studio-border); border-radius: 0; background: #fff; color: #303b38; font: inherit; cursor: pointer; }
.image-studio .studio-button:hover { border-color: var(--studio-accent); color: var(--studio-accent); }
.image-studio .studio-primary { background: var(--studio-accent); border-color: var(--studio-accent); color: #fff; }
.image-studio .studio-primary:hover { background: #09695f; color: #fff; }
.studio-upload .studio-button { position: relative; overflow: hidden; }
.studio-upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.studio-layout { display: grid; grid-template-columns: minmax(0, 1fr) 218px; gap: 24px; }
.studio-workspace { min-width: 0; }
.studio-stage { height: 480px; padding: 18px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--studio-border); background-color: #fff; background-image: conic-gradient(#ebedee 25%, transparent 0 50%, #ebedee 0 75%, transparent 0); background-size: 20px 20px; }
.studio-stage canvas { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; touch-action: none; cursor: move; }
.studio-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; color: #57645f; background: #fff; }
.studio-empty .fa { font-size: 38px; color: #73958b; }
.studio-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; margin-top: 8px; font-size: 12px; color: #5b6662; flex-wrap: wrap; }
.studio-meta label { display: inline-flex; align-items: center; gap: 6px; }
.studio-settings { display: flex; flex-direction: column; gap: 15px; min-width: 0; }
.studio-settings label { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-weight: 400; }
.studio-settings select, .studio-settings input[type="number"] { width: 100%; height: 40px; padding: 0 8px; border: 1px solid #b7c4bf; border-radius: 0; font: inherit; background: #fff; color: inherit; }
.studio-settings input[type="range"] { width: 100%; min-width: 0; accent-color: var(--studio-accent); height: 20px; padding: 0; }
.studio-settings output { margin-left: auto; color: #65726c; }
.studio-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.studio-background { padding: 0; border: 0; }
.studio-background legend { font: inherit; margin-bottom: 8px; }
.studio-swatches { display: flex; gap: 10px; }
.studio-swatches button, .studio-swatches label { width: 40px; height: 40px; border: 1px solid #a8b8b1; background: var(--swatch); border-radius: 0; cursor: pointer; padding: 4px; }
.studio-swatches button[aria-pressed="true"] { outline: 2px solid var(--studio-accent); outline-offset: 2px; }
.studio-swatches input { width: 100%; height: 100%; border: 0; padding: 0; background: none; cursor: pointer; }
.studio-result-info { display: flex; flex-direction: column; gap: 6px; border-block: 1px solid var(--studio-border); padding: 16px 0; }
.studio-result-info span { color: #65726c; }
.studio-status { min-height: 42px; margin-top: 12px; display: flex; align-items: center; gap: 12px; }
.studio-status span { flex: 1; }
.studio-status .is-error { color: #b32e30; }
.studio-status .is-busy::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 8px; border: 2px solid #dce3e1; border-top-color: var(--studio-accent); border-radius: 50%; vertical-align: middle; animation: studio-spin .8s linear infinite; }
.image-studio button:disabled { opacity: .5; cursor: not-allowed; }
.image-studio :focus-visible, .studio-upload label:focus-within { outline: 2px solid var(--studio-accent); outline-offset: 3px; }
@keyframes studio-spin { to { transform: rotate(360deg); } }
@media (max-width: 767.98px) { .studio-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; } .studio-stage { height: 370px; } .studio-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 16px; } .studio-settings > .studio-pair { grid-column: 1 / -1; } }
@media (max-width: 479.98px) { .studio-stage { height: 320px; padding: 10px; } .studio-settings { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .studio-status .is-busy::before { animation: none; } }