/* Scoped image utility and guides; existing tools keep their styles. */
.smt-image-page h1,.smt-image-page h2,.smt-image-page h3,.smt-image-page .smt-hub-actions { text-align:center; }
.smt-image-page .smt-tool-hero { padding-top:145px; padding-bottom:64px; }
.smt-image-page .smt-tool-hero-grid>div:first-child { text-align:center; }
.smt-image-page .smt-hub-kicker { text-align:center; margin-left:auto; margin-right:auto; }
.smt-image-page .smt-tool-hero-visual { border-radius:8px; }
.smt-image-page .smt-tool-hero-visual h2 { font-size:26px;line-height:1.3;margin:0 0 20px; }
.smt-image-hero-master { display:block;width:100%;height:auto;border:1px solid #d5e7f7;border-radius:6px; }
.smt-image-hero-frames { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px; }
.smt-image-hero-frames figure { margin:0;min-width:0; }
.smt-image-hero-frames canvas { display:block;width:100%;height:auto;border:1px solid #e5def7;border-radius:6px; }
.smt-image-hero-frames figcaption { text-align:center;font-size:12px;color:#5325bc;font-weight:700;margin-top:6px; }
.smt-image-hero-note { text-align:center;font-size:14px;color:#08785d;margin:18px 0 0; }
.smt-image-page #image-tool { scroll-margin-top:95px; }
.smt-image-page .smt-hub-head { margin-bottom:30px; }
.smt-image-workspace { background:#fff;border:1px solid #e5def7;border-radius:8px;padding:24px; }
.smt-image-layout { display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:stretch; }
.smt-image-panel { display:flex;flex-direction:column;min-width:0;border:1px solid #d5e7f7;border-radius:8px;background:#f2f9ff;padding:22px; }
.smt-image-panel-output { background:#f7f3ff;border-color:#e0d3fa; }
.smt-image-panel>h3 { font-size:21px;line-height:1.4;margin:0 0 22px; }
.smt-image-page [hidden] { display:none!important; }
.smt-image-fields { display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:18px; }
.smt-image-field { min-width:0;display:flex;flex-direction:column;gap:8px;margin:0; }
.smt-image-field>span { font-size:14px;font-weight:700;color:#29213e;line-height:1.5; }
.smt-image-page .smt-image-field input:not([type=range]):not([type=color]),.smt-image-page .smt-image-field select { box-sizing:border-box;width:100%;min-width:0;min-height:48px;border:1px solid #cbd2e2;border-radius:6px;background:#fff;color:#151523;font:inherit;font-size:15px;line-height:1.5;padding:11px 12px; }
.smt-image-page .smt-image-field select { padding-right:28px; }
.smt-image-page input:focus-visible,.smt-image-page select:focus-visible,.smt-image-page button:focus-visible { outline:3px solid #b9a2f5;outline-offset:2px; }
.smt-image-page input[aria-invalid=true] { border-color:#a62b3a!important; }
.smt-image-page button { font-family:inherit;letter-spacing:0;cursor:pointer; }
.smt-image-page button:disabled { opacity:.5;cursor:not-allowed; }
.smt-image-modes { display:flex;gap:6px;justify-content:center;margin:0 0 18px; }
.smt-image-modes button { flex:1;border:1px solid #d6c8f4;border-radius:6px;background:#fff;color:#5325bc;padding:10px 12px;font-size:14px;font-weight:700; }
.smt-image-modes button[aria-pressed=true] { background:#7138e8;color:#fff;border-color:#7138e8; }
.smt-image-drop { border:1px dashed #a6c9e5;border-radius:6px;background:#fff;padding:18px;text-align:center;margin-bottom:20px; }
.smt-image-drop p { margin:12px 0 0;font-size:13px;line-height:1.6; }
.smt-image-pick-actions { display:flex;flex-wrap:wrap;justify-content:center;gap:10px; }
.smt-image-pick-actions button,.smt-image-clear { border:1px solid #d6c8f4;border-radius:6px;background:#fff;color:#5325bc;padding:10px 14px;font-size:14px;font-weight:700; }
.smt-image-pick-actions button:first-child { background:#7138e8;color:#fff;border-color:#7138e8; }
.smt-image-source-info { overflow-wrap:anywhere;font-size:13px!important; }
.smt-image-options { padding:16px;background:#fff;border:1px solid #d5e7f7;border-radius:6px;margin-top:2px; }
.smt-image-range { margin:0 0 18px; }
.smt-image-range:last-child { margin-bottom:0; }
.smt-image-range label { display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 12px;font-size:14px;font-weight:700;color:#29213e; }
.smt-image-range output { color:#5325bc;font-weight:400; }
.smt-image-range input { display:block;flex:0 0 100%;box-sizing:border-box;width:100%;accent-color:#7138e8;margin:12px 0 0;min-height:22px; }
.smt-image-color-row { display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:18px 0; }
.smt-image-color-row>label { font-size:14px;color:#29213e;font-weight:700;display:flex;align-items:center;gap:10px; }
.smt-image-color-row input[type=color] { width:40px;height:34px;padding:2px;border:1px solid #cbd2e2;border-radius:4px;cursor:pointer; }
.smt-image-swatches { display:flex;gap:8px; }
.smt-image-swatches button { width:27px;height:27px;min-width:27px;padding:0;border:1px solid #b4b7c1;border-radius:50%; }
.smt-image-swatch-white { background:#ffffff; }
.smt-image-swatch-ink { background:#151523; }
.smt-image-swatch-purple { background:#f5f0ff; }
.smt-image-swatch-green { background:#eaf9f4; }
.smt-image-transparent { display:flex;align-items:center;gap:10px;font-size:13px;color:#62677a;line-height:1.5; }
.smt-image-transparent input { width:17px;height:17px;accent-color:#7138e8; }
.smt-image-clear-row { margin:20px 0 0;text-align:center; }
.smt-image-clear { min-width:110px; }
.smt-image-page .smt-image-clear { font-size:14px;font-weight:700;line-height:1.4;padding:10px 14px; }
.smt-image-error { color:#a62b3a!important;font-size:14px!important;line-height:1.5;margin:16px 0 0; }
.smt-image-error:empty { display:none; }
.smt-image-preview-stage { display:flex;align-items:center;justify-content:center;min-height:300px;flex:1;border:1px solid #e5def7;border-radius:6px;padding:16px;background-color:#fff;background-image:repeating-conic-gradient(#f0edf5 0% 25%,transparent 0% 50%);background-size:16px 16px;overflow:hidden; }
.smt-image-preview-stage canvas { max-width:100%;max-height:560px;width:auto;height:auto;display:block; }
.smt-image-empty { max-width:330px;text-align:center;background:#fff;padding:24px;border:1px solid #e5def7;border-radius:6px; }
.smt-image-empty strong { display:block;color:#5325bc;font-size:19px;margin-bottom:12px; }
.smt-image-empty p { margin:0;font-size:15px;line-height:1.6; }
.smt-image-result-info { text-align:center;font-size:14px!important;color:#5325bc!important;font-weight:700;margin:18px 0!important; }
.smt-image-thumbs { display:flex;gap:9px;overflow-x:auto;padding:4px 2px 12px;min-height:20px; }
.smt-image-thumbs button { flex:0 0 80px;width:80px;min-width:80px;border:2px solid transparent;border-radius:6px;background:#fff;padding:5px;color:#62677a; }
.smt-image-thumbs button[aria-pressed=true] { border-color:#7138e8;color:#5325bc; }
.smt-image-thumbs canvas { display:block;max-width:100%;height:80px;width:100%;object-fit:contain;background:#f5f0ff; }
.smt-image-thumbs span { display:block;font-size:12px;font-weight:700;text-align:center;margin-top:5px; }
.smt-image-review-note { font-size:14px!important;line-height:1.65;margin:10px 0 0!important; }
.smt-image-export-actions { display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px; }
.smt-image-export-actions button { font-size:14px;font-weight:700;border-radius:6px;padding:10px 14px;background:#7138e8;border:1px solid #7138e8;color:#fff; }
.smt-image-export-actions button+button { background:#fff;color:#5325bc;border-color:#d6c8f4; }
.smt-image-status { min-height:24px;margin:20px 0 0!important;text-align:center;font-size:14px!important;color:#08785d!important; }
.smt-image-status[data-error=true] { color:#a62b3a!important; }
.smt-image-privacy { text-align:center;font-size:13px!important;line-height:1.6;margin:18px 0 0!important; }
.smt-image-method-grid { display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px; }
.smt-image-method-grid>article { min-width:0;display:flex;flex-direction:column;background:#fff;border:1px solid #e5def7;border-radius:8px;padding:24px; }
.smt-image-method-grid h3 { font-size:20px;margin:0 0 16px; }
.smt-image-method-grid p { font-size:16px;line-height:1.65; }
.smt-image-method-grid code { display:block;text-align:center;font-family:inherit;font-size:14px;font-weight:400;color:#5325bc;background:#f5f0ff;padding:12px;border-radius:6px;margin-top:auto; }
.smt-image-page .smt-tool-guide-grid { display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px; }
.smt-image-page .smt-tool-guide-card { display:flex;flex-direction:column;min-width:0;border-radius:8px; }
.smt-image-page .smt-tool-guide-card h3 { font-size:21px;margin-top:0; }
.smt-image-page .smt-tool-guide-card>p { margin-bottom:0; }
.smt-image-page .smt-tool-guide-card>a { display:block;text-align:center;margin-top:auto;padding-top:18px; }
.smt-image-page .smt-tool-guide-grid>p:empty,.smt-image-page .smt-image-layout>p:empty,.smt-image-page .smt-tool-guide-links>p:empty { display:none!important; }
.smt-image-page .smt-tool-cta { background:#f5f0ff;border:1px solid #e5def7;border-radius:8px;color:#151523;display:block;text-align:center;margin-top:42px; }
.smt-image-page .smt-tool-cta h2,.smt-image-page .smt-tool-cta h3 { color:#151523;margin:18px auto; }
.smt-image-page .smt-tool-cta p:not(.smt-hub-kicker) { color:#62677a;max-width:850px;margin:0 auto; }
.smt-image-page .smt-tool-cta .smt-hub-actions { margin:24px 0 0; }
.smt-image-page .smt-hub-article-body>h2 { margin:54px 0 22px; }
.smt-image-page .smt-hub-article-body>p { margin-bottom:22px; }
.smt-image-page .smt-hub-faq+h2 { margin-top:66px; }
.smt-image-page .smt-tool-guide-nav { display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:24px;margin:0 0 38px;border-radius:8px;counter-reset:image-guide; }
.smt-image-page .smt-tool-guide-nav>strong { grid-column:1/-1;font-size:24px;text-align:center;margin:0 0 10px; }
.smt-image-page .smt-tool-guide-nav>a { counter-increment:image-guide;display:flex;align-items:center;gap:12px;font-size:16px;line-height:1.45;font-weight:600;padding:12px;border:1px solid #e5def7;border-radius:6px;min-width:0; }
.smt-image-page .smt-tool-guide-nav>a:last-of-type { grid-column:auto;justify-self:stretch;width:auto; }
.smt-image-page .smt-tool-guide-nav>a::before { content:counter(image-guide);flex:0 0 30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%; }
.smt-image-page .smt-tool-guide-nav>a:nth-of-type(1) { background:#fcfaff;border-color:#e5def7; }
.smt-image-page .smt-tool-guide-nav>a:nth-of-type(1)::before { background:#eee5ff;color:#5325bc; }
.smt-image-page .smt-tool-guide-nav>a:nth-of-type(2) { background:#f3f9ff;border-color:#d5e7f7; }
.smt-image-page .smt-tool-guide-nav>a:nth-of-type(2)::before { background:#e1f1ff;color:#1265a9; }
.smt-image-page .smt-tool-guide-nav>a:nth-of-type(3) { background:#f2fbf7;border-color:#c3e8d8; }
.smt-image-page .smt-tool-guide-nav>a:nth-of-type(3)::before { background:#ddf5e9;color:#08785d; }
.smt-image-page .smt-tool-guide-nav>a:nth-of-type(4) { background:#fff7f3;border-color:#f3d1c5; }
.smt-image-page .smt-tool-guide-nav>a:nth-of-type(4)::before { background:#ffe8dd;color:#994021; }
.smt-image-page .smt-tool-guide-nav>a:nth-of-type(5) { background:#fff5f9;border-color:#f1d2e0; }
.smt-image-page .smt-tool-guide-nav>a:nth-of-type(5)::before { background:#fde4ef;color:#9d2c60; }
.smt-image-page .smt-tool-guide-nav>a:nth-of-type(6) { background:#f2fbfa;border-color:#c5e8e3; }
.smt-image-page .smt-tool-guide-nav>a:nth-of-type(6)::before { background:#dcf4f1;color:#146f68; }
.smt-image-page .smt-tool-guide-nav>a:nth-of-type(7) { background:#f7f8ff;border-color:#d5daf6; }
.smt-image-page .smt-tool-guide-nav>a:nth-of-type(7)::before { background:#e9edff;color:#424baf; }
.smt-image-page .smt-tool-guide-nav>a:nth-of-type(8) { background:#fffbf0;border-color:#f0e0b4; }
.smt-image-page .smt-tool-guide-nav>a:nth-of-type(8)::before { background:#fff2cf;color:#83600d; }
.smt-image-page .smt-tool-guide-links { display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px; }
.smt-image-page .smt-tool-guide-links>a { display:flex;align-items:center;justify-content:center;text-align:center;min-height:80px;height:100%;padding:16px;border-radius:6px;margin:0;box-sizing:border-box;font-size:16px; }
.smt-image-guide .smt-tool-hero { padding-bottom:36px; }
.smt-image-guide .smt-hub-article-hero { max-width:1050px;text-align:center; }
.smt-image-guide .smt-hub-article-body { max-width:1080px; }
.smt-image-guide .smt-hub-section { padding-top:30px; }
.smt-image-page .smt-image-guides-section { padding-bottom:28px; }
.smt-image-page .smt-image-next-section { padding-top:30px; }
@media(max-width:1000px) {
 .smt-image-page .smt-tool-guide-grid,.smt-image-page .smt-tool-guide-links { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .smt-image-page .smt-tool-hero-grid { grid-template-columns:1fr;gap:32px; }
 .smt-image-page .smt-tool-hero-visual { max-width:650px;width:100%;margin:0 auto;box-sizing:border-box; }
 .smt-image-panel { padding:16px; }
 .smt-image-layout { gap:16px; }
}
@media(max-width:760px) {
 .smt-image-layout,.smt-image-method-grid { grid-template-columns:1fr!important; }
 .smt-image-page .smt-tool-hero { padding-top:112px; }
 .smt-image-workspace { padding:14px; }
 .smt-image-page .smt-tool-guide-nav { padding:16px; }
 .smt-image-page .smt-tool-guide-nav>strong { font-size:22px; }
 .smt-image-preview-stage { min-height:260px; }
}
@media(max-width:560px) {
 .smt-image-page .smt-tool-guide-grid,.smt-image-page .smt-tool-guide-links,.smt-image-page .smt-tool-guide-nav { grid-template-columns:1fr; }
 .smt-image-fields { gap:10px; }
 .smt-image-field>span { min-height:42px; }
 .smt-image-page .smt-image-field input:not([type=range]):not([type=color]),.smt-image-page .smt-image-field select { font-size:14px;padding:10px 8px; }
 .smt-image-panel { padding:14px; }
 .smt-image-export-actions { gap:8px; }
 .smt-image-export-actions button { font-size:12px;padding:10px 8px; }
 .smt-image-hero-frames { gap:8px; }
 .smt-image-color-row { gap:8px; }
}
@media(max-width:360px) {
 .smt-image-fields { grid-template-columns:1fr!important; }
 .smt-image-field>span { min-height:0; }
}
