/* Studio-only composition; all existing tools keep their approved presentation. */
.image-studio { --image-panel-border:#225e86; --image-panel-radius:16px; --image-panel-shadow:inset 0 1px 0 #71b4ff0a,0 12px 32px #0003; }
:root[data-theme=light] .image-studio { --image-panel-border:#c0cfe3; --image-panel-shadow:0 7px 22px #34547e12,inset 0 1px 0 #fff; }
.image-studio.vc-workspace main { max-width:none; padding:28px 28px 30px; }
.image-studio.vc-workspace main>section,.image-studio.vc-workspace main>div { max-width:1400px; margin-inline:auto; width:100%; }
.image-studio .image-studio-heading { text-align:center; padding-bottom:20px; }
.image-studio .image-studio-subtitle { color:var(--muted); font-size:13px; margin:9px 0 0; }
.image-studio .image-studio-operations { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding-bottom:18px; }
.image-studio .image-studio-operations .studio-button { justify-content:flex-start; text-align:left; padding:14px 20px; gap:18px; background:linear-gradient(130deg,#14213a,#101a30); border-color:#4c478b; border-radius:11px; box-shadow:inset 0 0 15px #465bc00a,0 6px 20px #0003; }
.image-studio .image-studio-operations strong,.image-studio .image-studio-operations small { display:block; }
.image-studio .image-studio-operations small { font-weight:400; color:var(--muted); margin-top:5px; font-size:11px; }
.image-studio [data-operation-icon] svg { width:29px; height:29px; }
.image-studio [data-operation-icon="pdf"] img { display:block; width:32px; height:32px; object-fit:contain; filter:drop-shadow(0 0 5px #ff426b70); }
.image-studio.vc-workspace .studio-button[aria-pressed=true] { border-color:#2bd9ff; background:linear-gradient(120deg,#103a60,#1b2251); box-shadow:0 0 16px #27cfff38,inset 0 -2px 7px #7366ff60; }
.image-studio .image-studio-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:stretch; }
.image-studio.vc-workspace .studio-panel { max-width:none; padding:22px; background:radial-gradient(ellipse at 90% 100%,#29398122,transparent 65%),linear-gradient(130deg,#0e1c30,#0b1728); border:1px solid var(--image-panel-border); box-shadow:var(--image-panel-shadow); border-radius:var(--image-panel-radius); min-width:0; }
.image-studio h2 { font-size:19px; margin:0 0 6px; letter-spacing:-.02em; }
.image-studio h3 { font-size:15px; margin:0 0 7px; }
.image-studio .image-studio-description,.image-studio .image-studio-option p { margin:0 0 14px; color:var(--muted); font-size:12px; line-height:1.55; }
.image-studio.vc-workspace .studio-upload { border:1px dashed #2b9adb; background:radial-gradient(ellipse at 50% 0,#18355a70,transparent 80%),#0b1b30; padding:20px 12px; text-align:center; min-width:0; }
.image-studio .image-studio-cloud { color:#8992ff; margin-bottom:9px; filter:drop-shadow(0 0 8px #528cff66); }
.image-studio .studio-upload p { color:var(--muted); font-size:12px; margin:7px 0 13px; }
.image-studio .studio-upload .image-studio-limits { font-size:11px; margin-bottom:0; }
.image-studio .studio-upload.is-dragging { border-color:#97ecff; box-shadow:0 0 22px #19beff50,inset 0 0 20px #40baff25; }
.image-studio .image-studio-preview-toolbar { display:flex; gap:10px; justify-content:space-between; align-items:center; margin:15px 0 9px; }
.image-studio .image-studio-preview-toolbar>div { display:flex; gap:5px; }
.image-studio.vc-workspace .image-studio-preview-toolbar .studio-button { padding:7px 10px; min-height:36px; font-size:11px; }
.image-studio .image-studio-label { color:#93bbef; font-size:11px; font-weight:650; }
.image-studio .image-studio-preview { margin:0; padding:9px; border:1px solid #246897; border-radius:11px; background:#0a1425; }
.image-studio.vc-workspace .studio-image-surface { flex:1; min-height:180px; position:relative; background:#091525; background-image:none; }
.image-studio .image-studio-grid>.studio-panel { display:flex; flex-direction:column; }
.image-studio .image-studio-source>h2 { margin-bottom:16px; }
.image-studio .image-studio-preview { display:flex; flex-direction:column; flex:1; }
.image-studio .image-studio-settings form { display:flex; flex-direction:column; flex:1; }
.image-studio .image-studio-settings .image-studio-apply { margin-top:auto; }
.image-studio .image-studio-settings .image-studio-panel-heading { margin-bottom:8px; }
.image-studio .image-studio-source-actions { margin-top:12px; }
.image-studio .image-studio-original-meta:empty,.image-studio [data-current-meta]:empty,.image-studio [data-result-meta]:empty,.image-studio .image-studio-status:empty,.image-studio .image-studio-error:empty { margin:0; padding:0; }
.image-studio .studio-upload { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; }
.image-studio .studio-upload .image-studio-limits { flex-basis:100%; margin:0; }
.image-studio .image-studio-cloud { margin:0; width:36px; height:36px; }
.image-studio .studio-image-surface img { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.image-studio [data-preview-empty] { font-size:13px; color:var(--muted); padding:12px; }
.image-studio figcaption { padding:9px 5px 3px; display:grid; gap:4px; font-size:12px; overflow-wrap:anywhere; }
.image-studio figcaption span { color:var(--muted); font-size:11px; }
.image-studio .image-studio-original-meta { color:var(--muted); font-size:11px; line-height:1.55; overflow-wrap:anywhere; margin:10px 0; }
.image-studio .image-studio-source-actions { display:flex; flex-wrap:wrap; gap:9px; }
.image-studio .image-studio-panel-heading { display:flex; align-items:flex-start; gap:12px; justify-content:space-between; }
.image-studio.vc-workspace [data-restore] { font-size:11px; min-height:36px; padding:7px 9px; flex-shrink:0; }
.image-studio .image-studio-option { padding:14px; border:1px solid #21394f; border-radius:11px; background:linear-gradient(140deg,#0c1c2d,#101c30); margin:10px 0; }
.image-studio fieldset { padding:0; border:0; margin:0; min-width:0; }
.image-studio legend,.image-studio [data-quality-panel]>label { display:block; width:100%; color:var(--ink); font-size:13px; font-weight:650; margin-bottom:10px; }
.image-studio .image-studio-formats>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.image-studio.vc-workspace .image-studio-formats .studio-button { padding:10px 8px; }
.image-studio.vc-workspace .image-studio-option p { margin:11px 0 0; font-size:11px; }
.image-studio [data-quality-value] { float:right; color:#94dcff; }
.image-studio input[type=range] { width:100%; accent-color:#42cfff; cursor:pointer; height:25px; }
.image-studio .image-studio-dimensions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.image-studio .image-studio-lock { display:flex; align-items:center; gap:7px; font-size:12px; margin-top:14px; }
.image-studio .image-studio-lock input { accent-color:#52cfff; }
.image-studio .image-studio-presets { display:flex; flex-wrap:wrap; gap:8px; margin-top:13px; }
.image-studio.vc-workspace .image-studio-presets button { padding:8px; font-size:11px; }
.image-studio .image-studio-loss { font-size:11px; line-height:1.5; color:#c6b8f4; margin:14px 0; }
.image-studio.vc-workspace .image-studio-apply { width:100%; margin-top:10px; min-height:50px; font-size:16px; color:white; background:linear-gradient(110deg,#00a9fa,#244cff 50%,#8b2eea); border-color:#49d7ff; box-shadow:0 0 19px #268cff50,inset 0 1px 2px #c7a5ff66,0 3px 0 #11264b; }
.image-studio.vc-workspace .image-studio-apply:not(:disabled):hover { background:linear-gradient(110deg,#13b9ff,#5264ff 50%,#ae43f2); box-shadow:0 0 26px #4f6eff70,inset 0 1px 2px #fff6,0 3px 0 #11264b; }
.image-studio.vc-workspace .studio-button:not(:disabled):active { transform:translateY(2px); box-shadow:var(--studio-pressed-shadow); }
.image-studio.vc-workspace :focus-visible { outline:3px solid #bba2ff; outline-offset:3px; }
.image-studio .image-studio-status { font-size:12px; line-height:1.55; margin:14px 0 0; color:var(--muted); }
.image-studio .image-studio-error:not(:empty) { padding:11px; border:1px solid #bb5983; border-radius:8px; background:#341d34; color:#ffd0e1; font-size:12px; }
.image-studio .image-studio-result { display:grid; gap:7px; border-top:1px solid #29415c; margin-top:16px; padding-top:15px; min-width:0; overflow-wrap:anywhere; }
.image-studio .image-studio-result strong { font-size:13px; }
.image-studio [data-result-meta] { color:var(--muted); font-size:11px; }
.image-studio .image-studio-local-note { margin:15px 0 0; text-align:center; color:var(--muted); font-size:10px; line-height:1.5; }
.image-studio .image-studio-bottom { display:grid; grid-template-columns:1fr; gap:16px; margin-top:18px; align-items:start; }
.image-studio .image-studio-bottom p { font-size:12px; line-height:1.65; color:var(--muted); }
.image-studio .image-studio-faq details { background:#101f34; border:1px solid #283e5d; border-radius:8px; padding:10px 12px; margin-top:8px; font-size:12px; }
.image-studio .image-studio-faq summary { cursor:pointer; color:var(--ink); }
:root[data-theme=light] .image-studio .image-studio-operations .studio-button { background:linear-gradient(130deg,#fff,#e9eefb); border-color:#adb9dd; }
:root[data-theme=light] .image-studio .studio-button[aria-pressed=true] { background:linear-gradient(125deg,#e0f8ff,#e1e7ff); border-color:#3e93bf; box-shadow:0 0 13px #5199d526,inset 0 -2px 5px #8784e433; }
:root[data-theme=light] .image-studio .image-studio-option,:root[data-theme=light] .image-studio .image-studio-preview,:root[data-theme=light] .image-studio .image-studio-faq details { background:linear-gradient(130deg,#fff,#edf3fc); border-color:#bfd1e6; }
:root[data-theme=light] .image-studio .image-studio-label,:root[data-theme=light] .image-studio [data-quality-value] { color:#246792; }
:root[data-theme=light] .image-studio .image-studio-loss { color:#725698; }
:root[data-theme=light] .image-studio .image-studio-result { border-color:#bfd0e5; }
:root[data-theme=light] .image-studio .image-studio-apply:not(:disabled) { color:white; background:linear-gradient(110deg,#087eb8,#3c54cf 50%,#8449b9); border-color:#558cce; }
@media(max-width:1050px) { .image-studio.vc-workspace main { padding:24px 18px; } .image-studio .image-studio-grid { grid-template-columns:minmax(0,1fr); } .image-studio .image-studio-bottom { grid-template-columns:1fr; } }
@media(max-width:480px) { .image-studio.vc-workspace main { padding:22px 12px; } .image-studio.vc-workspace .studio-panel { padding:15px; } .image-studio .image-studio-operations { gap:7px; } .image-studio .image-studio-operations .studio-button { display:grid; justify-items:center; justify-content:center; text-align:center; gap:7px; padding:12px 4px; font-size:11px; } .image-studio .image-studio-operations small { display:none; } .image-studio .image-studio-panel-heading { flex-wrap:wrap; } .image-studio .image-studio-preview-toolbar { flex-wrap:wrap; } }
@media(prefers-reduced-motion:reduce) { .image-studio.vc-workspace *, .image-studio.vc-workspace *::before,.image-studio.vc-workspace *::after { animation:none!important; transition:none!important; scroll-behavior:auto; } }

/* Override inherited lead width so both subtitle lines share the centred header. */
.image-studio.vc-workspace .studio-hero .lead { max-width:none; margin:12px auto 0; }
.image-studio.vc-workspace main #studio-quality { appearance:none; height:8px; margin:10px 0; padding:0; border:0; border-radius:10px; background:linear-gradient(90deg,#8d4dea,#0089ed,#19cfff); }
.image-studio.vc-workspace main #studio-quality::-webkit-slider-runnable-track { background:transparent; height:8px; }
.image-studio.vc-workspace main #studio-quality::-webkit-slider-thumb { appearance:none; width:20px; height:20px; margin-top:-6px; border-radius:50%; border:2px solid #71e3ff; background:#257cf4; box-shadow:0 0 8px #34cfff99; }
.image-studio.vc-workspace main #studio-quality::-moz-range-track { background:transparent; height:8px; }
.image-studio.vc-workspace main #studio-quality::-moz-range-thumb { width:16px; height:16px; border-radius:50%; border:2px solid #71e3ff; background:#257cf4; }
.image-studio.vc-workspace main #studio-quality:disabled { opacity:.45; cursor:not-allowed; }
:root[data-theme=light] .image-studio.vc-workspace main .studio-image-surface { background:#eaf0f8; background-image:none; border-color:#bdcde0; }
:root[data-theme=light] .image-studio.vc-workspace main .studio-button.image-studio-apply:not(:disabled) { color:white; background:linear-gradient(110deg,#087eb8,#3c54cf 50%,#8449b9); border-color:#558cce; }
:root[data-theme=light] .image-studio.vc-workspace main .studio-button.image-studio-apply:not(:disabled):hover { color:white; background:linear-gradient(110deg,#066f9f,#3347bd 50%,#7937ae); box-shadow:0 0 20px #637bd555,inset 0 1px 0 #dce9ff55,0 3px 0 #a5b9dd; }

/* Twin main panels stretch naturally; the preview absorbs available space. */
.image-studio.vc-workspace main .studio-panel { border:1px solid var(--image-panel-border); border-radius:var(--image-panel-radius); box-shadow:var(--image-panel-shadow); }
:root[data-theme=light] .image-studio.vc-workspace main .studio-panel { border:1px solid var(--image-panel-border); box-shadow:var(--image-panel-shadow); }
.image-studio.vc-workspace main .image-studio-help { padding:0; }
.image-studio .image-studio-help>summary { display:flex; align-items:center; gap:12px; padding:17px 22px; color:var(--ink); font-weight:650; cursor:pointer; list-style:none; border-radius:var(--image-panel-radius); transition:background 160ms,box-shadow 160ms,transform 100ms; }
.image-studio .image-studio-help>summary::-webkit-details-marker { display:none; }
.image-studio .image-studio-help>summary>svg { color:#79d4ff; flex-shrink:0; }
.image-studio .image-studio-help>summary:hover { background:#28436644; box-shadow:inset 0 0 20px #45bcff18; }
.image-studio .image-studio-help>summary:active { transform:translateY(1px); box-shadow:var(--studio-pressed-shadow); }
.image-studio .image-studio-help-chevron { margin-left:auto; transition:transform 160ms; }
.image-studio .image-studio-help[open] .image-studio-help-chevron { transform:rotate(180deg); }
.image-studio .image-studio-help-content { padding:0 22px 14px; }
.image-studio .image-studio-help[open] .image-studio-help-content { animation:image-help-reveal 160ms ease-out; }
.image-studio .image-studio-help ol { margin:0; padding-left:20px; color:var(--muted); font-size:13px; line-height:1.9; }
.image-studio .image-studio-faq h2 { font-size:16px; }
:root[data-theme=light] .image-studio .image-studio-help>summary:hover { background:#dceafb; }
:root[data-theme=light] .image-studio .image-studio-help>summary>svg { color:#246792; }
@keyframes image-help-reveal { from { opacity:0; transform:translateY(-3px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:1050px) { .image-studio .image-studio-grid { align-items:start; } .image-studio .image-studio-settings .image-studio-apply { margin-top:12px; } .image-studio .studio-image-surface { flex:none; min-height:200px; } }

.image-studio.vc-workspace .image-studio-source>.studio-upload { padding:14px 12px; }
.image-studio.vc-workspace [data-studio-form]>.image-studio-apply { margin-top:auto; }
@media(max-width:1050px) { .image-studio.vc-workspace [data-studio-form]>.image-studio-apply { margin-top:12px; } }
/* Phase 2C: restore the vertical upload focal point and strengthen image framing. */
.image-studio.vc-workspace main .image-studio-source>.studio-upload { min-height:220px; padding:26px 16px 20px; flex-direction:column; flex-wrap:nowrap; gap:12px; border-color:#289de2; background:radial-gradient(ellipse at 50% 0,#1e447477,transparent 74%),linear-gradient(145deg,#0c1b30,#091526); box-shadow:inset 0 1px 0 #78caff12,0 8px 24px #0002; transition:border-color 160ms,box-shadow 160ms,transform 120ms; }
.image-studio.vc-workspace .image-studio-cloud { width:58px; height:58px; margin:0; color:#a68cff; filter:drop-shadow(0 0 12px #765dff99); }
.image-studio.vc-workspace .studio-upload [data-pick-image] { min-width:190px; border-color:#5a7fe0; background:linear-gradient(135deg,#172b4b,#202653); box-shadow:inset 0 1px 0 #d5e4ff17,0 3px 0 #071225,0 0 15px #6975ff23; }
.image-studio.vc-workspace .studio-upload [data-pick-image]:not(:disabled):hover { border-color:#54dfff; background:linear-gradient(135deg,#16416a,#35275f); box-shadow:0 0 19px #36bfff42,0 3px 0 #071225; }
.image-studio.vc-workspace .studio-upload [data-pick-image]:active { transform:translateY(2px); }
.image-studio.vc-workspace .studio-upload .image-studio-limits { flex:0 0 auto; color:#9bb4d5; }
.image-studio.vc-workspace .studio-upload.is-dragging { transform:scale(.995); }
.image-studio.vc-workspace .image-studio-preview { padding:11px; border-color:#246897; box-shadow:inset 0 1px 0 #8bd7ff12,0 0 18px #1caeff12; }
.image-studio.vc-workspace .studio-image-surface { min-height:220px; border-radius:7px; box-shadow:inset 0 0 24px #02091455; }
.image-studio.vc-workspace .image-studio-option { border-color:#29445f; background:linear-gradient(145deg,#0d2035,#111e33); box-shadow:inset 0 1px 0 #8ebeff0c,0 5px 15px #0002; }
.image-studio.vc-workspace .image-studio-formats .studio-button { min-height:42px; border-radius:9px; }
.image-studio.vc-workspace .image-studio-formats .studio-button[aria-pressed=true] { color:#eafbff; background:linear-gradient(130deg,#0d466c,#292b62); border-color:#37d5ff; box-shadow:0 0 15px #31caff38,inset 0 1px 0 #d4fbff24,0 3px 0 #081629; }
.image-studio.vc-workspace .image-studio-presets .studio-button { border-radius:8px; }
.image-studio.vc-workspace [data-download]:not(:disabled) { color:#f4fbff; background:linear-gradient(110deg,#087fb9,#3b51cf 52%,#8545b9); border-color:#65d7ff; box-shadow:0 0 17px #399ff045,inset 0 1px 0 #e4f6ff55,0 3px 0 #10254b; }
.image-studio.vc-workspace [data-download]:not(:disabled):hover { background:linear-gradient(110deg,#0796d5,#4d62ed 52%,#9c4cd2); box-shadow:0 0 24px #4ac6ff66,inset 0 1px 0 #fff8,0 3px 0 #10254b; }
.image-studio .image-studio-bottom { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.image-studio.vc-workspace main .image-studio-bottom>.image-studio-help { align-self:start; min-width:0; border:1px solid var(--image-panel-border); border-radius:12px; box-shadow:var(--image-panel-shadow); background:linear-gradient(135deg,#101f34,#0d192b); }
.image-studio .image-studio-help>summary { gap:10px; min-height:52px; padding:11px 16px; font-size:13px; }
.image-studio .image-studio-faq>summary>svg { color:#b798ff; }
.image-studio .image-studio-faq>summary:hover { background:#392b6040; box-shadow:inset 0 0 18px #a36cff18; }
.image-studio .image-studio-faq .image-studio-help-content { padding-top:1px; }
.image-studio .image-studio-faq .image-studio-help-content>h2 { margin:0 0 8px; font-size:15px; }
.image-studio .image-studio-faq details { margin-top:7px; }
:root[data-theme=light] .image-studio.vc-workspace main .image-studio-source>.studio-upload { background:radial-gradient(ellipse at 50% 0,#d8edff,transparent 76%),linear-gradient(145deg,#f8fcff,#e9f2fc); border-color:#459fcd; box-shadow:inset 0 1px 0 #fff,0 8px 22px #5274a21a; }
:root[data-theme=light] .image-studio.vc-workspace .image-studio-cloud { color:#745bdd; filter:drop-shadow(0 0 10px #8581e866); }
:root[data-theme=light] .image-studio.vc-workspace .studio-upload [data-pick-image] { color:#214776; background:linear-gradient(135deg,#effaff,#e7eafd); border-color:#7fa6d6; box-shadow:inset 0 1px 0 #fff,0 3px 0 #b8cbe1,0 0 12px #628bce24; }
:root[data-theme=light] .image-studio.vc-workspace .studio-upload .image-studio-limits { color:#536e91; }
:root[data-theme=light] .image-studio.vc-workspace .image-studio-preview { border-color:#a9c8e2; box-shadow:inset 0 1px 0 #fff,0 0 16px #4b98cb14; }
:root[data-theme=light] .image-studio.vc-workspace .studio-image-surface { box-shadow:inset 0 0 18px #23456b12; }
:root[data-theme=light] .image-studio.vc-workspace .image-studio-option { border-color:#c0d2e5; background:linear-gradient(145deg,#fff,#f1f6fc); box-shadow:inset 0 1px 0 #fff,0 5px 15px #5274a214; }
:root[data-theme=light] .image-studio.vc-workspace .image-studio-formats .studio-button[aria-pressed=true] { color:#174c75; background:linear-gradient(130deg,#d9f8ff,#e8e7ff); border-color:#54a9d2; box-shadow:0 0 13px #58b8dc2c,inset 0 1px 0 #fff,0 3px 0 #b3c6df; }
:root[data-theme=light] .image-studio.vc-workspace main .image-studio-bottom>.image-studio-help { background:linear-gradient(135deg,#fff,#edf4fd); }
:root[data-theme=light] .image-studio .image-studio-faq>summary>svg { color:#7453c5; }
:root[data-theme=light] .image-studio .image-studio-faq>summary:hover { background:#ebe4fc; }
:root[data-theme=light] .image-studio.vc-workspace [data-download]:not(:disabled) { color:#fff; background:linear-gradient(110deg,#087eb8,#3c54cf 52%,#8449b9); border-color:#558cce; }
@media(max-width:1050px) { .image-studio.vc-workspace main .image-studio-source>.studio-upload { min-height:210px; } .image-studio.vc-workspace .studio-image-surface { min-height:200px; } }
@media(max-width:480px) { .image-studio.vc-workspace main .image-studio-source>.studio-upload { min-height:205px; padding:22px 12px 17px; } .image-studio.vc-workspace .image-studio-cloud { width:52px; height:52px; } .image-studio .image-studio-bottom { grid-template-columns:minmax(0,1fr); } }
/* Phase 3B: compact compression, symmetric preview toggles and full reset. */
.image-studio .image-studio-preview-toolbar>div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:min(300px,58%); gap:7px; }
.image-studio.vc-workspace .image-studio-preview-toolbar .image-studio-compare-button { width:100%; min-width:0; min-height:38px; box-sizing:border-box; padding:8px 12px; border:1px solid #3b668a; border-radius:9px; font-size:12px; font-weight:650; text-align:center; }
.image-studio.vc-workspace .image-studio-compare-button[data-preview="original"][aria-pressed="true"] { color:#eafaff; background:linear-gradient(130deg,#10466a,#172f50); border-color:#38d8ff; box-shadow:0 0 13px #2ccfff35,inset 0 1px 0 #d9f8ff24,0 2px 0 #071225; }
.image-studio.vc-workspace .image-studio-compare-button[data-preview="current"][aria-pressed="true"] { color:#f7efff; background:linear-gradient(130deg,#392c70,#292450); border-color:#b78aff; box-shadow:0 0 13px #aa70ff38,inset 0 1px 0 #eee0ff24,0 2px 0 #101024; }
.image-studio.vc-workspace .image-studio-compare-button:disabled { opacity:.48; cursor:not-allowed; box-shadow:none; }
.image-studio .image-studio-compression-ends { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:11px; }
.image-studio .image-studio-compression-ends[hidden],.image-studio [data-compression-result][hidden] { display:none; }
.image-studio .image-studio-compression-result { color:#9be7ff; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.image-studio.vc-workspace .image-studio-reset { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:34px; padding:6px 10px; border-color:#34779e; color:#a7e7ff; background:linear-gradient(135deg,#14273f,#112039); box-shadow:inset 0 1px 0 #d9f8ff12,0 2px 0 #071225; }
.image-studio.vc-workspace .image-studio-reset:hover { border-color:#61dfff; box-shadow:0 0 13px #31bfff35,0 2px 0 #071225; }
.image-studio.vc-workspace .image-studio-reset:active { transform:translateY(1px); }
.image-studio.vc-workspace .image-studio-reset:focus-visible,.image-studio.vc-workspace .image-studio-compare-button:focus-visible { outline:3px solid #8ceaff; outline-offset:2px; }
:root[data-theme=light] .image-studio.vc-workspace .image-studio-compare-button[data-preview="original"][aria-pressed="true"] { color:#164e71; background:linear-gradient(130deg,#ddf8ff,#e8f4ff); border-color:#49a8cf; box-shadow:0 0 12px #57badd24,inset 0 1px 0 #fff,0 2px 0 #bbcee2; }
:root[data-theme=light] .image-studio.vc-workspace .image-studio-compare-button[data-preview="current"][aria-pressed="true"] { color:#513d88; background:linear-gradient(130deg,#f0e8ff,#e8edff); border-color:#aa85df; box-shadow:0 0 12px #9e75da24,inset 0 1px 0 #fff,0 2px 0 #c4cce0; }
:root[data-theme=light] .image-studio.vc-workspace .image-studio-compare-button:disabled { color:#536e91; }
:root[data-theme=light] .image-studio .image-studio-compression-result { color:#246792; }
:root[data-theme=light] .image-studio.vc-workspace .image-studio-reset { color:#245a7b; background:linear-gradient(135deg,#f3fbff,#e7f1fc); border-color:#9cbcd4; box-shadow:inset 0 1px 0 #fff,0 2px 0 #c2d3e5; }
.image-studio.vc-workspace .image-studio-grid>.image-studio-source { min-height:0; }
@media(max-width:480px) { .image-studio .image-studio-preview-toolbar>div { width:min(220px,62%); } .image-studio.vc-workspace .image-studio-preview-toolbar .image-studio-compare-button { padding-inline:7px; font-size:11px; } }

/* Phase 4: PDF composition uses the same paired workspace panels. */
.image-studio .image-studio-operations { grid-template-columns:repeat(4,minmax(0,1fr)); }
.image-studio .image-studio-operations [data-operation="pdf"] { border-color:#67509a; }
.image-studio .image-studio-pdf-grid[hidden] { display:none!important; }
.image-studio .image-studio-pdf-drop { min-height:132px; flex-direction:column; gap:6px; border:1px dashed #3b9fd4; border-radius:12px; background:radial-gradient(ellipse at 50% 0,#173d6570,transparent 80%),#0b1b30; color:var(--ink); cursor:pointer; text-align:center; }
.image-studio .image-studio-pdf-cloud { width:40px; height:40px; margin:0; color:#ad83ff; filter:drop-shadow(0 0 9px #895cff80); }
.image-studio .image-studio-pdf-drop [data-pdf-select] { min-height:34px; padding:7px 14px; }
.image-studio .image-studio-pdf-drop span { color:var(--muted); font-size:12px; }
.image-studio .image-studio-pdf-drop:focus-visible { outline:3px solid #8ceaff; outline-offset:3px; }
.image-studio .image-studio-pdf-drop.is-dragging { border-color:#36dcff; box-shadow:0 0 20px #27cfff45; }
.image-studio .image-studio-pdf-list { display:grid; gap:8px; padding:0; margin:12px 0 0; list-style:none; }
.image-studio .image-studio-pdf-item { display:grid; grid-template-columns:56px minmax(0,1fr) auto; align-items:center; gap:10px; min-width:0; padding:8px; border:1px solid #285273; border-radius:10px; background:linear-gradient(130deg,#10213a,#0d1a2c); }
.image-studio .image-studio-pdf-item img { width:56px; height:48px; object-fit:cover; border-radius:6px; background:#091525; }
.image-studio .image-studio-pdf-name { min-width:0; overflow-wrap:anywhere; color:var(--ink); font-size:12px; }
.image-studio .image-studio-pdf-reorder { display:flex; gap:5px; }
.image-studio .image-studio-pdf-reorder .studio-button { min-width:34px; min-height:34px; padding:4px 8px; }
.image-studio .image-studio-pdf-remove { min-width:34px; padding:4px 8px; color:#ff9bb2; }
.image-studio .image-studio-pdf-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:13px; margin:12px 0; border:1px solid #21394f; border-radius:11px; background:linear-gradient(140deg,#0c1c2d,#101c30); }
.image-studio .image-studio-pdf-options .studio-field { min-width:0; }
.image-studio .image-studio-pdf-options select { width:100%; min-width:0; }
.image-studio .image-studio-pdf-result { display:grid; gap:12px; margin-top:auto; padding-top:12px; border-top:1px solid #283b55; }
.image-studio .image-studio-pdf-result>strong { overflow-wrap:anywhere; color:var(--muted); font-size:13px; }
.image-studio .image-studio-pdf-result>div { display:flex; flex-wrap:wrap; gap:9px; }
.image-studio .image-studio-pdf-result .studio-button { flex:1 1 180px; }
.image-studio .image-studio-pdf-settings .image-studio-error:empty { display:none; }
:root[data-theme=light] .image-studio .image-studio-pdf-drop { background:linear-gradient(145deg,#f7fcff,#eaf3fd); border-color:#79b8d5; }
:root[data-theme=light] .image-studio .image-studio-pdf-cloud { color:#7650c9; filter:drop-shadow(0 0 7px #895cff45); }
:root[data-theme=light] .image-studio .image-studio-pdf-drop.is-dragging { border-color:#1488bd; box-shadow:0 0 17px #37a8d633; }
:root[data-theme=light] .image-studio .image-studio-pdf-item { background:linear-gradient(130deg,#fff,#edf4fc); border-color:#c0cfe3; }
:root[data-theme=light] .image-studio .image-studio-pdf-options { background:linear-gradient(140deg,#fff,#f0f5fb); border-color:#c0cfe3; }
:root[data-theme=light] .image-studio .image-studio-pdf-result { border-color:#c6d5e7; }
@media(max-width:760px) { .image-studio .image-studio-operations { grid-template-columns:repeat(2,minmax(0,1fr)); } .image-studio .image-studio-pdf-options { grid-template-columns:minmax(0,1fr); } }
@media(max-width:480px) { .image-studio .image-studio-pdf-item { grid-template-columns:44px minmax(0,1fr); } .image-studio .image-studio-pdf-item img { width:44px; height:40px; } .image-studio .image-studio-pdf-reorder { grid-column:2; justify-content:flex-end; } .image-studio .image-studio-pdf-name { align-self:end; } }

/* Live resize changes presentation only; committed bytes keep their own preview. */
.image-studio .studio-image-surface img.is-resize-draft { inset:auto; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:fill; }
.image-studio .image-studio-dimensions .studio-field { min-width:0; }
.image-studio .image-studio-dimensions input { min-width:0; width:100%; }
.image-studio.vc-workspace .image-studio-lock { min-height:50px; padding:10px 12px; border:1px solid #51619a; border-radius:10px; gap:12px; background:linear-gradient(120deg,#183450,#242548); color:var(--ink); font-size:14px; font-weight:650; cursor:pointer; }
.image-studio.vc-workspace .image-studio-lock input { width:24px; height:24px; margin:0; flex:0 0 24px; cursor:pointer; }
.image-studio.vc-workspace .image-studio-lock:has(input:disabled) { opacity:.55; cursor:default; }
.image-studio.vc-workspace main .image-studio-resize-range { appearance:none; height:32px; padding:0; border:0; border-radius:0; background:transparent; cursor:pointer; }
.image-studio.vc-workspace main .image-studio-resize-range::-webkit-slider-runnable-track { height:8px; border-radius:8px; background:linear-gradient(90deg,#8856e8,#2483ec,#37d2f4); }
.image-studio.vc-workspace main .image-studio-resize-range::-webkit-slider-thumb { appearance:none; width:20px; height:20px; margin-top:-6px; border:2px solid #9beaff; border-radius:50%; background:#287fea; box-shadow:0 0 8px #39cfff80; }
.image-studio.vc-workspace main .image-studio-resize-range::-moz-range-track { height:8px; border-radius:8px; background:linear-gradient(90deg,#8856e8,#2483ec,#37d2f4); }
.image-studio.vc-workspace main .image-studio-resize-range::-moz-range-thumb { width:16px; height:16px; border:2px solid #9beaff; border-radius:50%; background:#287fea; }
.image-studio.vc-workspace main .image-studio-resize-range:disabled { opacity:.45; cursor:default; }
:root[data-theme=light] .image-studio.vc-workspace .image-studio-lock { color:#234367; background:linear-gradient(120deg,#e1f5ff,#eee9ff); border-color:#a1b7d5; }
@media(forced-colors:active) { .image-studio.vc-workspace main .image-studio-resize-range { appearance:auto; } }