/* Image creation: one coherent editor and a calm preview canvas. */
body[data-section="image"] #main{background:var(--color-surface)}
body[data-section="image"] .page-lead{margin-bottom:24px}
body[data-section="image"] .page-lead h1{font-size:28px;line-height:1.35;letter-spacing:-.6px;font-weight:650;margin:0}
.image-workspace{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px}
.image-workspace fieldset{background:#fff;border:1px solid #e5e7ed;border-radius:20px;overflow:hidden;box-shadow:0 8px 32px #20243b04}
.image-workspace fieldset>.panel{border:0;border-radius:0;box-shadow:none;margin:0;padding:22px;background:transparent}
.image-workspace fieldset>.panel+.panel{border-top:1px solid #f0f1f4}
.image-workspace h2{font-size:15px;font-weight:600;line-height:24px;margin-bottom:12px}
.image-workspace textarea{height:176px;min-height:140px;border:1px solid #e1e4eb;background:var(--color-surface);border-radius:12px;padding:14px;font-size:15px;line-height:1.75;transition:border-color .15s,box-shadow .15s}
.image-workspace textarea:focus{outline:0;border-color:#779bea;box-shadow:0 0 0 3px #376eea12;background:#fff}
.image-workspace textarea::placeholder{color:#989da8}
.image-workspace .image-title{align-items:center;margin-bottom:12px}.image-workspace .image-title h2{margin:0}.image-workspace .image-title small{font-size:11px;background:#f2f3f6;border-radius:5px;padding:2px 6px;margin-left:6px}
.image-workspace .reference-upload{min-height:76px;border-radius:12px;background:var(--color-surface);border-color:#d9deea}.image-workspace .reference-upload:hover:not(:disabled){background:#f1f5ff;border-color:#8ba8e3}
.image-workspace .hint{font-size:11px;color:#8a909c;margin-top:10px}.image-workspace .image-help{font-size:11px;margin-top:8px}
.image-workspace .image-ratios{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.image-workspace .image-ratios button{flex-direction:row;gap:9px;min-height:44px;padding:9px 6px;background:#fff;border-color:#e7e9ef;border-radius:9px;font-size:12px;color:#6d7482}
.image-workspace .image-ratios button.selected{background:#edf3ff;border-color:#8daeed;color:#3268cb;box-shadow:0 0 0 1px #8daeed33}
.image-workspace button:focus-visible{outline:2px solid #6790e1;outline-offset:3px}
.image-workspace #imageBtn{border-radius:12px;min-height:46px;margin-top:18px;font-size:14px;box-shadow:0 4px 10px #1769dc16}
.image-workspace .image-output{padding:20px;border:1px solid #e5e7ed;border-radius:20px;background:#fff;box-shadow:0 8px 32px #20243b04}
.image-workspace .image-output>.empty{min-height:420px;border:1px dashed #e1e5ed;border-radius:14px;background:var(--color-surface);gap:14px;padding:24px 16px}
.image-workspace .empty-icon{width:56px;height:56px;border-radius:17px;background:#fff;color:#96a5c3;box-shadow:0 5px 20px #5c7fa014}
.image-workspace .empty h3{font-size:14px;font-weight:500;color:#7a8495;line-height:1.8;max-width:210px}
@media(max-width:1100px) and (min-width:768px){.image-workspace{gap:16px}.image-workspace fieldset>.panel{padding:18px}.image-workspace .image-output{padding:16px}}
@media(max-width:900px){.image-workspace{grid-template-columns:minmax(0,1fr);gap:20px}.image-workspace .image-output{position:static}.image-workspace .image-output>.empty{min-height:240px}.image-workspace .image-ratios{grid-template-columns:repeat(6,minmax(0,1fr))}.image-workspace .image-ratios button{flex-direction:column}}
@media(max-width:600px){body[data-section="image"] .page-lead h1{font-size:24px}.image-workspace fieldset>.panel{padding:18px}.image-workspace textarea{font-size:16px;height:160px}.image-workspace .image-ratios{grid-template-columns:repeat(3,minmax(0,1fr))}.image-workspace .image-ratios button{flex-direction:row}.image-workspace .image-output{padding:16px}}

body[data-section="image"] .shell,body[data-section="image"] .shell>.page-header{background:var(--color-surface)}