/* ---- bundled brochure fonts ---- */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter.woff2) format("woff2-variations")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/montserrat.woff2) format("woff2-variations")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/playfair-display.woff2) format("woff2-variations")}
@font-face{font-family:"Source Serif";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/source-serif-4.woff2) format("woff2-variations")}
@font-face{font-family:"Oswald";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/oswald.woff2) format("woff2-variations")}
@font-face{font-family:"Raleway";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/raleway.woff2) format("woff2-variations")}
@font-face{font-family:"Nunito";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/nunito.woff2) format("woff2-variations")}
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/roboto-mono.woff2) format("woff2-variations")}
@font-face{font-family:"Lora";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/lora.woff2) format("woff2-variations")}
@font-face{font-family:"Bebas Neue";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/bebas-neue-400.woff2) format("woff2")}
@font-face{font-family:"Dancing Script";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dancing-script-400.woff2) format("woff2")}
@font-face{font-family:"Dancing Script";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/dancing-script-700.woff2) format("woff2")}
@font-face{font-family:"Courier Prime";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/courier-prime-400.woff2) format("woff2")}
@font-face{font-family:"Courier Prime";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/courier-prime-700.woff2) format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/lato-400.woff2) format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/lato-700.woff2) format("woff2")}
@font-face{font-family:"Merriweather";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/merriweather-400.woff2) format("woff2")}
@font-face{font-family:"Merriweather";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/merriweather-700.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/poppins-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/poppins-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;src:url(fonts/dm-sans-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;src:url(fonts/dm-sans-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/archivo-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/archivo-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/figtree-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/figtree-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Josefin Sans";font-style:normal;font-weight:100 700;font-display:swap;src:url(fonts/josefin-sans-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Josefin Sans";font-style:normal;font-weight:100 700;font-display:swap;src:url(fonts/josefin-sans-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Rubik";font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/rubik-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Rubik";font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/rubik-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/space-grotesk-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/space-grotesk-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Teko";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/teko-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Teko";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/teko-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/work-sans-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/work-sans-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/anton-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/anton-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-condensed-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-condensed-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-condensed-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-condensed-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/barlow-condensed-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/barlow-condensed-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cormorant-garamond-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/cormorant-garamond-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/cormorant-garamond-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Great Vibes";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/great-vibes-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Great Vibes";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/great-vibes-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Rajdhani";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/rajdhani-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Rajdhani";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/rajdhani-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Rajdhani";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/rajdhani-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Rajdhani";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/rajdhani-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Rajdhani";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/rajdhani-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Rajdhani";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/rajdhani-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Rajdhani";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/rajdhani-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Rajdhani";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/rajdhani-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Libre Baskerville";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/libre-baskerville-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Libre Baskerville";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/libre-baskerville-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Libre Baskerville";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/libre-baskerville-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Libre Baskerville";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/libre-baskerville-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM Serif Display";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-serif-display-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Serif Display";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-serif-display-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* SaaS-style front-end tool — scoped to .smjbg-app so it never fights the theme */
/* Colour system — taken from the logo: its blue leads, its teal and amber are the
two supporting roles. Light tints carry surfaces, hovers and selected states;
the full-strength colours are kept for primary actions and active marks. The
ground behind the brochure stays neutral grey so nothing tints the design.
Chrome only — the brochure itself is drawn from its own theme in JS. */
.smjbg-app{
/* ======================================================================
ETA editor colour system — role-based tokens.
Three layers, in order: brand foundation (read off the logo), tonal
ramps (one shared perceptual lightness scale, generated in OKLCH), then
semantic roles. Components reference ONLY the semantic roles, so a theme
change is a token change, never a component edit.
This system dresses the EDITOR ONLY. The brochure is drawn on canvas
from whatever Color Theme the user picks, and reads none of these.
====================================================================== */
/* --- brand foundation: the logo's own three colours ------------------- */
--eta-blue:#0b6aff; /* the E, and the A's stroke */
--eta-teal:#00c0b3; /* the T */
--eta-amber:#fea705; /* the A */
/* --- primary ramp (blue): interaction ---------------------------------- */
--p-050:#f1f8ff;--p-100:#deeeff;--p-200:#c0ddff;--p-300:#94c4ff;--p-400:#62a0ff;
--p-500:#387cff;--p-600:#2667e7;--p-700:#1d52bb;--p-800:#133c8b;--p-900:#0b275e;
/* --- accent ramp (teal): the secondary brand voice, used sparingly ----- */
--a-050:#ecfbfa;--a-100:#d3f5f2;--a-200:#adeae6;--a-300:#77d7d2;--a-400:#3cbab5;
--a-500:#009b96;--a-600:#008480;--a-700:#006b67;--a-800:#004f4c;--a-900:#003432;
/* --- neutral ramp: nine tenths of the interface. Very low chroma at a
cool hue, so the greys sit under the logo's blue without turning
the product blue-grey. ------------------------------------------- */
--n-050:#f6f7f9;--n-100:#eaedf0;--n-200:#d9dde1;--n-300:#c0c5ca;--n-400:#a0a5ab;
--n-500:#81878d;--n-600:#6c7278;--n-700:#565b61;--n-800:#3e4348;--n-900:#282c2f;
/* --- status ramps: kept apart from the brand ramps -------------------- */
--su-050:#effbf3;--su-100:#daf5e4;--su-200:#bbe9cd;--su-500:#3a9b6a;
--su-600:#278558;--su-700:#1b6b45;--su-800:#104f32;
--wa-050:#fff6e9;--wa-100:#ffe9ca;--wa-200:#fed59d;--wa-400:#da950b;
--wa-600:#a36000;--wa-700:#844c00;--wa-800:#633700;--wa-900:#432300;
--er-050:#fff4f3;--er-100:#ffe5e3;--er-200:#ffcecb;--er-500:#d45859;
--er-600:#bf3e43;--er-700:#9e2b32;--er-800:#771c22;
/* ======================= semantic roles ============================== */
/* surfaces — a three-step hierarchy: page < workspace well < panel */
--color-bg-page:var(--n-050);
--color-bg-workspace:var(--n-100);
--color-surface:#fff;
--color-surface-subtle:var(--n-050);
--color-surface-sunken:var(--n-100);
--color-surface-inverse:var(--n-900);
/* text — 14.1:1, 6.9:1 and 4.9:1 on a panel */
--color-text-primary:var(--n-900);
--color-text-secondary:var(--n-700);
--color-text-tertiary:var(--n-600);
--color-text-placeholder:var(--n-500);
--color-text-disabled:var(--n-400);
--color-text-inverse:#fff;
--color-text-brand:var(--p-700);
/* borders — subtle for dividers, default for objects, strong for controls */
--color-border-subtle:var(--n-100);
--color-border-default:var(--n-200);
--color-border-strong:var(--n-300);
--color-border-control:var(--n-400);
/* actions — primary is the only solid fill in the chrome (white on it 5:1) */
--color-action-primary:var(--p-600);
--color-action-primary-hover:var(--p-700);
--color-action-primary-active:var(--p-800);
--color-on-primary:#fff;
--color-action-secondary-text:var(--p-700);
--color-action-secondary-border:var(--p-200);
--color-action-secondary-hover:var(--p-050);
/* interaction states */
--color-state-hover:var(--n-050);
--color-state-hover-border:var(--n-300);
--color-state-pressed:var(--n-100);
--color-state-selected:var(--p-050);
--color-state-selected-border:var(--p-600);
--color-state-selected-text:var(--p-700);
--color-state-selected-quiet:var(--p-100);
--color-focus-ring:var(--p-600);
/* status: fill, tint, border, text — text steps are AA on their own tint */
--color-success:var(--su-600);--color-success-bg:var(--su-050);
--color-success-border:var(--su-200);--color-success-text:var(--su-700);
--color-warning:var(--eta-amber);--color-warning-bg:var(--wa-050);
--color-warning-border:var(--wa-200);--color-warning-text:var(--wa-800);
--color-error:var(--er-600);--color-error-bg:var(--er-050);
--color-error-border:var(--er-200);--color-error-text:var(--er-700);
--color-info:var(--p-600);--color-info-bg:var(--p-050);
--color-info-border:var(--p-200);--color-info-text:var(--p-700);
/* disabled */
--color-disabled-bg:var(--n-100);
--color-disabled-border:var(--n-200);
--color-disabled-text:var(--n-400);
/* the ink every shadow is mixed from, so elevation stays neutral */
--color-shadow:#282c2f;
/* --- legacy names, kept as aliases of the roles above ------------------
Two thousand lines of component CSS already reference these. Pointing
them at the tokens re-themes every one of those rules at once, with no
component edits and no risk of a rule being missed. */
--brand:var(--color-action-primary);--brand-700:var(--p-700);
--brand-100:var(--p-100);--brand-050:var(--p-050);
--teal:var(--a-500);--teal-700:var(--a-700);--teal-100:var(--a-100);--teal-050:var(--a-050);
--amber:var(--eta-amber);--amber-700:var(--wa-700);
--amber-100:var(--wa-100);--amber-050:var(--wa-050);
--ac:var(--color-action-primary);--ac2:var(--color-action-primary-hover);
--ink:var(--color-text-primary);--sub:var(--color-text-secondary);
--line:var(--color-border-default);
--soft:var(--color-surface-subtle);--card:var(--color-surface);
--ground:var(--color-bg-workspace);--shell:var(--color-bg-page);
--muted:var(--color-text-tertiary);--rad:4px;
all:initial;display:block;box-sizing:border-box;font-family:-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;
font-size:16px;line-height:1.5;color:var(--ink);max-width:1600px;margin:0 auto;padding:4px 10px}
.smjbg-app *,.smjbg-app *::before,.smjbg-app *::after{box-sizing:border-box}
.smjbg-app h1,.smjbg-app h2,.smjbg-app h3,.smjbg-app p{margin:0}
.smjbg-app button{font:inherit;cursor:pointer}
.smjbg-hd{text-align:center;padding:18px 8px 6px}
.smjbg-hd h2{font-size:26px;font-weight:800;letter-spacing:-.02em}
.smjbg-hd p{color:var(--sub);font-size:14px;margin-top:4px}
.smjbg-steps{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:14px 0 6px}
.smjbg-steps b{font-size:12px;font-weight:700;color:var(--sub);background:var(--soft);border:1px solid var(--line);
border-radius:20px;padding:5px 12px}
.smjbg-steps b.on{background:var(--ac);border-color:var(--ac);color:#fff}
.smjbg-card{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:18px;margin:12px 0;
box-shadow:0 1px 3px rgba(16,24,40,.05)}
.smjbg-card>h3{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ac);margin-bottom:12px}
.smjbg-row{display:flex;flex-wrap:wrap;gap:12px}
.smjbg-f{display:flex;flex-direction:column;gap:5px;flex:1 1 190px;min-width:0}
.smjbg-f.w100{flex-basis:100%}
.smjbg-f>span{font-size:12.5px;font-weight:600;color:var(--sub)}
.smjbg-app input[type=text],.smjbg-app input[type=number],.smjbg-app input[type=date],
.smjbg-app input[type=email],.smjbg-app input[type=tel],.smjbg-app select,.smjbg-app textarea{
font:inherit;font-size:15px;width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;
background:#fff;color:var(--ink);-webkit-appearance:none;appearance:none}
.smjbg-app select{background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.smjbg-app textarea{resize:vertical;min-height:64px}
.smjbg-app input:focus,.smjbg-app select:focus,.smjbg-app textarea:focus{outline:none;border-color:var(--ac);
box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 18%,transparent)}
.smjbg-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.smjbg-b{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:700;
padding:12px 18px;border-radius:10px;border:1.5px solid var(--line);background:#fff;color:var(--ink);text-decoration:none}
.smjbg-b svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.smjbg-b.pri{background:var(--ac);border-color:var(--ac);color:#fff}
.smjbg-b.pri:hover{background:var(--ac2);border-color:var(--ac2)}
.smjbg-b:hover{border-color:var(--ac)}
.smjbg-b.wide{flex:1 1 100%}
.smjbg-b[disabled]{opacity:.5;cursor:not-allowed}
.smjbg-items{width:100%;border-collapse:collapse}
.smjbg-items th{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--sub);text-align:left;
padding:0 6px 6px;font-weight:700}
.smjbg-items td{padding:0 6px 8px;vertical-align:top}
.smjbg-items .del{background:none;border:1.5px solid var(--line);border-radius:8px;color:var(--sub);width:38px;height:42px;font-size:16px}
.smjbg-items .del:hover{border-color:var(--color-error);color:var(--color-error)}
.smjbg-tot{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-top:14px}
.smjbg-tot div{display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-size:14.5px}
.smjbg-tot .g{border-top:1px solid var(--line);margin-top:6px;padding-top:10px;font-size:18px;font-weight:800}
.smjbg-tot .g b:last-child{color:var(--ac)}
.smjbg-tot .w{color:var(--sub);font-size:12.5px;display:block;padding-top:8px}
.smjbg-prev{background:var(--color-surface-sunken);border-radius:12px;padding:12px;text-align:center}
.smjbg-prev img{max-width:100%;max-height:72vh;width:auto;height:auto;object-fit:contain;
border-radius:8px;box-shadow:0 3px 14px rgba(16,24,40,.18);display:inline-block}
.smjbg-prev.full img{max-height:none}
.smjbg-logo{display:flex;align-items:center;gap:12px}
.smjbg-logo img{width:56px;height:56px;object-fit:contain;border:1px solid var(--line);border-radius:10px;background:#fff;display:none}
.smjbg-file{font-size:13px;color:var(--sub)}
.smjbg-hint{font-size:12.5px;color:var(--sub);margin-top:8px}
.smjbg-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--color-surface-inverse);color:#fff;
font-size:14px;font-weight:600;padding:12px 18px;border-radius:10px;max-width:90vw;text-align:center;z-index:99999;
opacity:0;pointer-events:none;transition:.25s;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.smjbg-toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:640px){
.smjbg-app{font-size:15px;padding:0}
.smjbg-hd h2{font-size:21px}
.smjbg-card{padding:14px;border-radius:12px}
.smjbg-f{flex-basis:100%}
.smjbg-b{flex:1 1 100%}
.smjbg-items thead{display:none}
.smjbg-items tr{display:block;border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:10px}
.smjbg-items td{display:block;padding:0 0 8px}
.smjbg-items td::before{content:attr(data-l);display:block;font-size:11.5px;font-weight:700;color:var(--sub);
text-transform:uppercase;margin-bottom:4px}
.smjbg-items .del{width:100%}
}
/* ---- visual tile selectors (mobile-first, auto multi-column) ---- */
.smjbg-tg{margin:0 0 4px}
.smjbg-lbl{display:block;font-size:12.5px;font-weight:600;color:var(--sub);margin-bottom:7px}
.smjbg-tiles{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
.smjbg-tiles.g-sm{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
.smjbg-tiles.g-md,.smjbg-tiles.g-lg{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
.smjbg-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
border:1.5px solid var(--line);border-radius:12px;background:#fff;padding:9px 8px;color:var(--ink);font:inherit;
transition:border-color .12s,box-shadow .12s,background .12s}
.smjbg-tile:hover{border-color:var(--ac)}
.smjbg-tile.sel{border-color:var(--ac);box-shadow:0 0 0 2px color-mix(in srgb,var(--ac) 22%,transparent);
background:color-mix(in srgb,var(--ac) 6%,#fff)}
.smjbg-tile.sel::after{content:"";position:absolute;top:6px;right:6px;width:15px;height:15px;border-radius:0;background:var(--ac);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:center}
.smjbg-tl{font-size:11.5px;font-weight:600;line-height:1.2;color:var(--ink)}
.smjbg-tile.sel .smjbg-tl{color:var(--ac)}
.smjbg-selval{font-size:12px;color:var(--sub);margin:9px 2px 2px}
.smjbg-selval b{color:var(--ink);font-weight:700}
.smjbg-selval .fp{font-size:15px;color:var(--ink)}
.smjbg-fpv{min-height:34px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:15px;line-height:1.15;color:var(--ink);word-break:break-word;padding:2px 1px}
.smjbg-thpv{width:58px;height:96px;margin:0 auto;border-radius:9px;border:1px solid rgba(0,0,0,.14);padding:6px;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.smjbg-thpv i{display:block;border-radius:2px}
.smjbg-thpv .bn{height:3px;width:44%}
.smjbg-thpv .hd{height:5px;width:84%;margin-top:1px}
.smjbg-thpv .h2{height:5px;width:60%}
.smjbg-thpv .im{height:38px;border-radius:3px;margin-top:2px}
.smjbg-thpv .feat{display:flex;gap:3px;margin-top:2px}
.smjbg-thpv .feat i{height:9px;flex:1;border-radius:2px;opacity:.9}
.smjbg-thpv .cta{display:flex;gap:4px;align-items:center;margin-top:auto}
.smjbg-thpv .cta .pr{height:4px;flex:1;border-radius:2px;opacity:.4}
.smjbg-thpv .cta .btn{height:10px;width:24px;border-radius:20px}
.smjbg-swpv{width:100%;height:38px;border-radius:8px;border:1px solid var(--line)}
.smjbg-cpv{height:34px;display:flex;align-items:center;justify-content:center;color:var(--ink);font-weight:700}
.smjbg-sppv{display:flex;flex-direction:column;justify-content:center;height:46px;width:78px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:7px;padding:7px}
.smjbg-sppv i{height:4px;background:var(--color-border-strong);border-radius:20px;width:100%}
.smjbg-sppv i.h{background:var(--n-800);width:66%}
.smjbg-alpv{display:flex;flex-direction:column;justify-content:center;gap:4px;height:40px;width:70px;margin:0 auto}
.smjbg-alpv i{height:4px;background:var(--color-border-strong);border-radius:20px;width:100%}
.smjbg-alpv i.s{width:60%}
.smjbg-lopv{position:relative;width:58px;height:96px;margin:0 auto;border-radius:9px;background:#fff;border:1px solid var(--line);padding:6px;overflow:hidden;display:flex;flex-direction:column;gap:3px;align-items:stretch}
.smjbg-lopv .img{background:linear-gradient(135deg,var(--ac),var(--n-400));border-radius:3px;width:100%}
.smjbg-lopv .hd{height:5px;background:var(--n-800);border-radius:2px;width:84%}
.smjbg-lopv .hd.h2{width:58%}
.smjbg-lopv .tx{height:3px;background:var(--color-border-strong);border-radius:2px;width:74%}
.smjbg-lopv .tgs{display:flex;gap:3px;margin-top:1px;flex-wrap:wrap}
.smjbg-lopv .tag{height:6px;width:12px;background:var(--ac);border-radius:3px;opacity:.85}
/* showcase: hero image on top */
.smjbg-lopv.sc .img{height:46px}
/* overlay: full-bleed hero, heading/text overlaid near the bottom */
.smjbg-lopv.ov{padding:0}
.smjbg-lopv.ov .img{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:0;height:auto}
.smjbg-lopv.ov .hd{position:absolute;left:6px;bottom:20px;width:64%;background:#fff}
.smjbg-lopv.ov .hd.h2{bottom:13px;width:46%;background:rgba(255,255,255,.85)}
.smjbg-lopv.ov .tx{position:absolute;left:6px;bottom:7px;width:38%;background:rgba(255,255,255,.6)}
/* catalog: small hero + spec rows */
.smjbg-lopv.ca .img{height:30px}
.smjbg-lopv.ca .rw{display:flex;justify-content:space-between;align-items:center;margin-top:3px}
.smjbg-lopv.ca .rw .k{height:3px;width:38%;background:var(--n-400);border-radius:2px}
.smjbg-lopv.ca .rw .v{height:3px;width:34%;background:var(--n-800);border-radius:2px}
/* poster: heading first, big hero at the bottom */
.smjbg-lopv.po .img{height:52px;margin-top:auto}
/* editorial: centered gallery */
.smjbg-lopv.ed{align-items:center;text-align:center}
.smjbg-lopv.ed .img{width:78%;height:40px}
.smjbg-lopv.ed .hd,.smjbg-lopv.ed .tx{align-self:center}
.smjbg-lopv.ed .tgs{justify-content:center}
/* section card mini example */
.smjbg-cdpv{width:100%;height:46px;border-radius:8px;padding:9px;display:flex;flex-direction:column;gap:4px;justify-content:center}
.smjbg-cdpv i{border-radius:2px}
.smjbg-cdpv .h{height:5px;width:58%;background:var(--n-800)}
.smjbg-cdpv .t{height:3px;width:82%;background:var(--color-border-strong)}
.smjbg-cdpv .t.s{width:55%}
.cd-outlined{background:#fff;border:1.5px solid var(--line)}
.cd-flat{background:var(--soft)}
.cd-shadow{background:#fff;box-shadow:0 3px 9px rgba(0,0,0,.17)}
.cd-filled{background:color-mix(in srgb,var(--ac) 12%,#fff)}
.cd-none{background:transparent;border:1px dashed var(--line)}
.smjbg-fxwrap{width:100%;height:42px;display:flex;align-items:center;justify-content:center;padding:3px}
.smjbg-fx{width:56px;height:34px;border-radius:4px;background:linear-gradient(135deg,var(--color-border-strong),var(--n-400));position:relative;display:block}
.fx-shadow{box-shadow:0 3px 7px rgba(0,0,0,.35)}
.fx-float{border:3px solid #fff;box-shadow:0 4px 9px rgba(0,0,0,.32)}
.fx-glass{box-shadow:inset 0 0 0 2px rgba(255,255,255,.75)}
.fx-rounded{border-radius:12px}
.fx-gradient::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:4px;background:linear-gradient(to top,rgba(0,0,0,.55),transparent 62%)}
.fx-diagonal{clip-path:polygon(0 0,78% 0,100% 32%,100% 100%,0 100%)}
.fx-wave{border-bottom-left-radius:42% 60%;border-bottom-right-radius:42% 60%}
.fx-glow{box-shadow:0 0 9px 2px var(--ac)}
.fx-reflection{box-shadow:0 9px 6px -6px rgba(0,0,0,.25)}
.fx-reflection::after{content:"";position:absolute;left:0;right:0;top:106%;height:44%;border-radius:4px;
background:linear-gradient(to bottom,rgba(147,164,177,.55),transparent)}
.fx-perspective{transform:rotate(-6deg);box-shadow:5px 6px 8px rgba(0,0,0,.28)}
.fx-border{border:3px solid var(--ac)}
.fx-polaroid{border:3px solid #fff;border-bottom-width:11px;box-shadow:0 3px 7px rgba(0,0,0,.28)}
/* toggle switches */
.smjbg-toggles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.smjbg-tgl{position:relative;display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:12px;
padding:11px 13px;background:#fff;cursor:pointer}
.smjbg-tgl input{position:absolute;opacity:0;pointer-events:none}
.smjbg-tgl .sw{flex:0 0 auto;width:38px;height:22px;border-radius:20px;background:var(--color-border-strong);position:relative;transition:.15s}
.smjbg-tgl .sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:0;background:#fff;
box-shadow:0 1px 2px rgba(0,0,0,.3);transition:.15s}
.smjbg-tgl.on{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 6%,#fff)}
.smjbg-tgl.on .sw{background:var(--ac)}
.smjbg-tgl.on .sw::after{left:18px}
.smjbg-tgl .tt{font-weight:600;font-size:13.5px;color:var(--ink)}
.smjbg-colr{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.smjbg-colr label{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:12px;padding:8px 10px}
.smjbg-colr span{font-size:12px;font-weight:600;color:var(--sub)}
.smjbg-colr input[type=color]{width:40px;height:40px;padding:2px;border:1px solid var(--line);border-radius:8px;background:#fff;flex:0 0 auto}
/* toggle option previews (accent line / corner ribbon) */
.smjbg-tglpv{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center}
.smjbg-dvpv{display:inline-flex;flex-direction:column;gap:3px;width:44px}
.smjbg-dvpv .l{height:5px;width:76%;background:var(--n-800);border-radius:2px}
.smjbg-dvpv .u{height:3px;width:42%;background:var(--ac);border-radius:2px}
.smjbg-rbpv{position:relative;width:42px;height:30px;background:var(--soft);border:1px solid var(--line);border-radius:5px;overflow:hidden;display:inline-block}
.smjbg-rbpv .r{position:absolute;top:4px;right:-9px;width:28px;height:8px;background:var(--ac);transform:rotate(45deg)}
/* selected state: crisp elegant highlight */
.smjbg-tile.sel{box-shadow:0 0 0 2px var(--ac),0 4px 12px rgba(0,0,0,.10)}
@media(max-width:1023px){
.smjbg-tiles,.smjbg-tiles.g-sm,.smjbg-tiles.g-md,.smjbg-tiles.g-lg{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
.smjbg-tiles,.smjbg-tiles.g-sm,.smjbg-tiles.g-md,.smjbg-tiles.g-lg{grid-template-columns:repeat(2,1fr)}
.smjbg-toggles,.smjbg-colr{grid-template-columns:1fr}
}
/* ---- product photos upload (dual drop-zone) ---- */
.smjbg-photos{margin-top:14px;border:1px solid var(--line);border-radius:14px;padding:16px;background:#fff}
.smjbg-photos-hd{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--ink)}
.smjbg-photos-hd svg{width:20px;height:20px;stroke:var(--ac);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.smjbg-uprow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.smjbg-up-hd{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-weight:600;font-size:13.5px;color:var(--ink)}
.smjbg-up-hd em{font-style:normal;font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px}
.smjbg-up-hd em.rec{color:var(--ac);background:color-mix(in srgb,var(--ac) 12%,#fff)}
.smjbg-up-hd em.opt{color:var(--sub);background:var(--soft)}
.smjbg-drop{position:relative;border:2px dashed var(--line);border-radius:14px;background:var(--soft);
min-height:236px;display:flex;align-items:center;justify-content:center;padding:16px;text-align:center;
transition:border-color .12s,background .12s}
.smjbg-drop.drag{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 8%,#fff)}
.smjbg-drop-empty{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%}
.smjbg-drop-empty svg.up{width:34px;height:34px;stroke:var(--ac);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:2px}
.smjbg-drop-empty b{font-size:15px;color:var(--ink);font-weight:700}
.smjbg-drop-empty .or{font-size:12px;color:var(--sub)}
.smjbg-drop-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.smjbg-drop-btns .smjbg-b{padding:9px 14px}
.smjbg-drop-full{display:none;flex-direction:column;align-items:center;gap:12px;width:100%}
.smjbg-drop.has .smjbg-drop-empty{display:none}
.smjbg-drop.has .smjbg-drop-full{display:flex}
.smjbg-drop-full img{max-width:100%;max-height:210px;border-radius:10px;object-fit:contain;box-shadow:0 3px 12px rgba(0,0,0,.14)}
.smjbg-x{position:absolute;top:10px;right:10px;z-index:2;width:30px;height:30px;border-radius:50%;background:#fff;
border:1px solid var(--line);color:var(--color-error);font-size:19px;line-height:1;cursor:pointer;box-shadow:0 1px 5px rgba(0,0,0,.2);
display:flex;align-items:center;justify-content:center;padding:0}
.smjbg-x:hover{background:var(--color-error-bg);border-color:var(--color-error-border)}
.smjbg-mobtip{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:10px;
background:color-mix(in srgb,var(--ac) 6%,#fff);border-radius:10px;padding:9px 12px}
.smjbg-mobtip svg{width:16px;height:18px;stroke:var(--ac);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
@media(max-width:640px){ .smjbg-uprow{grid-template-columns:1fr} .smjbg-drop{min-height:210px} }
/* ---- first-run sample/demo banner ---- */
.smjbg-demo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px;padding:12px 14px;
border:1px solid color-mix(in srgb,var(--ac) 30%,var(--line));border-radius:12px;
background:color-mix(in srgb,var(--ac) 7%,#fff)}
.smjbg-demo-badge{flex:0 0 auto;font-size:11px;font-weight:800;letter-spacing:.06em;color:#fff;background:var(--ac);
padding:4px 9px;border-radius:20px}
.smjbg-demo-tx{flex:1 1 260px;font-size:13px;color:var(--ink);line-height:1.45}
.smjbg-demo-tx b{font-weight:700}
.smjbg-demo .smjbg-b{flex:0 0 auto}
@media(max-width:640px){ .smjbg-demo{gap:9px} .smjbg-demo .smjbg-b{width:100%} }
/* ---- two-column layout: form left, sticky compact preview right ---- */
.smjbg-main{display:grid;
grid-template-columns:minmax(0,1fr) minmax(300px,min(46%,calc((100vh - 82px) * var(--smjbg-ar,0.42))));
gap:18px;align-items:start;margin-top:4px}
.smjbg-formcol{min-width:0}
/* the column is exactly as wide as the brochure renders, so nothing scrolls inside it */
.smjbg-prevcol{position:sticky;top:10px;overflow:visible}
/* the brochure sits directly in the column — no card, no grey frame, no heading */
.smjbg-prevcol #out{margin:0;padding:0;background:none;border:0;box-shadow:none}
.smjbg-prevcol .smjbg-prev{background:none;padding:0;border-radius:0}
/* fit to the available height and width; object-fit keeps the ratio if the height cap binds */
.smjbg-prevcol #out .smjbg-prev img{width:100%;height:auto;max-width:100%;
max-height:calc(100vh - 82px);object-fit:contain;
border-radius:10px;box-shadow:0 4px 18px rgba(16,24,40,.16)}
/* compact action buttons — above the brochure so they cost it no height */
.smjbg-prevcol .smjbg-btns{justify-content:flex-end;gap:8px;margin:0 0 10px;padding:0}
.smjbg-prevcol .smjbg-b{flex:0 1 auto;padding:8px 14px;font-size:13.5px;border-radius:9px}
.smjbg-prevcol .smjbg-b svg{width:15px;height:15px}
.smjbg-prevempty{border:1.5px dashed var(--line);border-radius:14px;padding:34px 18px;text-align:center;
color:var(--sub);font-size:13.5px;line-height:1.5;background:var(--soft)}
.smjbg-dummybar{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.smjbg-dummybar .smjbg-b{flex:0 0 auto}
@media(max-width:1023px){
.smjbg-main{grid-template-columns:1fr;gap:0}
.smjbg-prevcol{position:static;max-height:none;overflow:visible;margin-top:6px}
.smjbg-prevcol #out .smjbg-prev img{width:auto;max-width:100%;max-height:78vh;object-fit:contain}
.smjbg-prevcol .smjbg-btns{justify-content:center;margin:0 0 10px}
}
@media(max-width:640px){ .smjbg-app{padding:4px 8px} .smjbg-dummybar .smjbg-b{flex:1 1 auto} }
/* --- per-photo styling & placement sections --- */
.smjbg-photofx{border:1px solid var(--line);border-radius:12px;padding:14px;margin:0 0 14px;background:var(--color-surface)}
.smjbg-photofx:last-child{margin-bottom:0}
.smjbg-photofx>h4{margin:0 0 10px;font-size:14px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
/* structural layout thumbnails — generated from each layout's real flow */
.smjbg-lopv.gen{display:block;padding:0;overflow:hidden;background:#fff}
.smjbg-lopv.gen i{position:absolute;border-radius:1.5px}
.smjbg-lopv.gen .i1{background:linear-gradient(135deg,var(--ac),var(--n-500));border-radius:2px}
.smjbg-lopv.gen .i2{background:linear-gradient(135deg,var(--n-300),var(--n-500));border-radius:2px}
.smjbg-lopv.gen .i1.circ,.smjbg-lopv.gen .i2.circ{border-radius:50%}
.smjbg-lopv.gen .hd{background:var(--n-800)}
.smjbg-lopv.gen .h2{background:var(--n-400)}
.smjbg-lopv.gen .tg{background:var(--ac);opacity:.42;border-radius:2px}
.smjbg-lopv.gen .sp{background:var(--color-border-default);border-radius:2px}
.smjbg-lopv.gen .hl{background:var(--color-surface-sunken);border:1px solid var(--color-border-default);border-radius:2px}
.smjbg-lopv.gen .pr{background:var(--color-bg-workspace);border:1px solid var(--color-border-default);border-radius:2px}
.smjbg-lopv.gen .tt{background:var(--ac);opacity:.92;border-radius:2px}
.smjbg-lopv.gen .ft{background:var(--color-surface-sunken);border-radius:2px}
.smjbg-tile.sel .smjbg-lopv.gen{outline:1px solid var(--ac)}
/* --- layout-driven upload slot briefs --- */
.smjbg-slot{display:flex;gap:12px;align-items:flex-start;margin:0 0 12px;padding:10px 12px;
border:1px solid var(--line);border-radius:10px;background:var(--color-surface)}
.smjbg-slot-shapewrap{flex:0 0 auto;text-align:center;min-width:70px}
.smjbg-slot-shape{display:block;margin:0 auto 4px;border-radius:4px;
background:linear-gradient(135deg,var(--ac),var(--n-400));opacity:.9}
.smjbg-slot-shape.circ{border-radius:50%}
.smjbg-slot-shapewrap em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.04em;
text-transform:uppercase;color:var(--sub)}
.smjbg-slot-txt{min-width:0}
.smjbg-slot-txt b{display:block;font-size:14px;font-weight:800;margin-bottom:2px}
.smjbg-slot-meta{display:block;font-size:12px;color:var(--sub);margin-bottom:4px}
.smjbg-slot-tip{display:block;font-size:12.5px;color:var(--ink);opacity:.85;line-height:1.45}
/* --- smart, layout-shaped upload box --- */
.smjbg-sbox{position:relative;width:100%;border:2px dashed var(--line);border-radius:12px;
background:var(--color-surface-subtle);overflow:hidden;display:flex;align-items:center;justify-content:center;
transition:border-color .15s,background .15s}
.smjbg-sbox.drag{border-color:var(--ac);background:var(--p-050)}
.smjbg-sbox-empty{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:4px;padding:14px;text-align:center;cursor:pointer}
.smjbg-sbox-empty svg{width:26px;height:26px;fill:none;stroke:var(--ac);stroke-width:1.9;
stroke-linecap:round;stroke-linejoin:round;margin-bottom:2px}
.smjbg-sbox-empty b{font-size:14px;font-weight:800}
.smjbg-sbox-empty .tip{font-size:11.5px;color:var(--sub);line-height:1.4;max-width:92%}
.smjbg-sbox-empty .or{font-size:11px;color:var(--sub);opacity:.85;margin-top:2px}
.smjbg-sbox-img{display:none;position:absolute;left:50%;top:50%;max-width:100%;max-height:100%;
width:auto;height:auto;transform:translate(-50%,-50%);transform-origin:center center;
user-select:none;-webkit-user-drag:none;pointer-events:none}
.smjbg-sbox .smjbg-x{display:none;position:absolute;top:6px;right:6px;z-index:3}
.smjbg-sbox-hint{display:none;position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
z-index:2;font-size:10.5px;padding:2px 8px;border-radius:20px;background:rgba(17,17,17,.62);color:#fff;
pointer-events:none;opacity:0;transition:opacity .15s}
.smjbg-sbox:hover .smjbg-sbox-hint{opacity:1}
.smjbg-sbox.has{border-style:solid;background:var(--color-surface-sunken);cursor:grab;touch-action:none}
.smjbg-sbox.has.dragging{cursor:grabbing}
.smjbg-sbox.has.dragging .smjbg-sbox-img{transition:none}
.smjbg-sbox.has .smjbg-sbox-empty{display:none}
.smjbg-sbox.has .smjbg-sbox-img,.smjbg-sbox.has .smjbg-x,.smjbg-sbox.has .smjbg-sbox-hint{display:block}
/* controls under the box */
.smjbg-zoom{display:grid;grid-template-columns:16px 1fr 16px;align-items:center;gap:8px}
/* --- compact photo box toolbar --- */
.smjbg-sbox.has{cursor:grab;touch-action:none}
.smjbg-sbox.has.dragging{cursor:grabbing}
.smjbg-sbox-img{will-change:transform;transition:none}
.smjbg-zbadge{display:none;position:absolute;left:6px;bottom:6px;z-index:2;font-size:10.5px;
font-weight:700;padding:2px 7px;border-radius:20px;background:rgba(17,17,17,.62);color:#fff;pointer-events:none}
.smjbg-sbox.has .smjbg-zbadge{display:block}
.smjbg-sbox-hint{left:auto;right:6px;transform:none}
.smjbg-sbox-bar{display:flex;align-items:center;gap:6px;margin-top:6px}
.smjbg-sbox-bar .smjbg-mini{flex:1 1 0;text-align:center}
.smjbg-mini{flex:0 0 auto;border:1px solid var(--line);background:#fff;border-radius:7px;
padding:4px 8px;font-size:11.5px;font-weight:600;line-height:1.2;cursor:pointer;color:var(--ink);white-space:nowrap}
.smjbg-mini:hover{border-color:var(--ac);color:var(--ac)}
.smjbg-slotline{margin:5px 0 0;font-size:11.5px;color:var(--sub);line-height:1.4;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smjbg-slotline b{color:var(--ink);font-weight:700}
.smjbg-slotline span{cursor:help;opacity:.7}
/* tighter empty state */
.smjbg-sbox-empty{gap:2px;padding:10px}
.smjbg-sbox-empty svg{width:22px;height:22px;margin-bottom:0}
.smjbg-sbox-empty b{font-size:13px}
.smjbg-sbox-empty .tip{font-size:11px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:640px){ .smjbg-mini{padding:5px 9px;font-size:12px} }
/* --- stability fixes ------------------------------------------------------
The photo box keeps the layout region's exact shape but is capped in height,
so a square or portrait region can no longer grow to the full column width
and push the form into the preview. Capping via max-width (not max-height)
keeps the aspect ratio intact. */
.smjbg-sbox{aspect-ratio:var(--sar,1.3);max-width:min(100%,calc(var(--sar,1.3) * 190px));
margin-left:auto;margin-right:auto;min-height:0}
.smjbg-uprow,.smjbg-up,.smjbg-photos,.smjbg-card{min-width:0}
.smjbg-uprow>*{min-width:0}
.smjbg-up{display:flex;flex-direction:column}
/* nothing from the form may paint over the sticky preview */
.smjbg-prevcol{z-index:5;isolation:isolate}
.smjbg-formcol{z-index:1;position:relative}
.smjbg-sbox-hint,.smjbg-zbadge{max-width:calc(100% - 12px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px){ .smjbg-sbox-hint{display:none!important} }
/* the preview keeps its slot while a new frame renders, so nothing jumps */
.smjbg-prevcol #out .smjbg-prev{min-height:1px;contain:layout paint}
.smjbg-sbox,.smjbg-sbox-img{contain:layout paint}
/* --- price mode chooser --- */
.smjbg-seg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
.smjbg-seg button{display:block;text-align:left;padding:11px 13px;border:2px solid var(--line);
border-radius:11px;background:#fff;cursor:pointer;color:var(--ink);transition:border-color .12s,background .12s}
.smjbg-seg button:hover{border-color:var(--color-border-strong)}
.smjbg-seg button b{display:block;font-size:14px;font-weight:800;margin-bottom:2px}
.smjbg-seg button span{display:block;font-size:12px;color:var(--sub);line-height:1.35}
.smjbg-seg button.on{border-color:var(--ink);background:var(--color-surface-subtle)}
.smjbg-seg button.on b::after{content:" ✓";color:var(--ac)}
@media(max-width:640px){ .smjbg-seg{grid-template-columns:1fr} }
/* --- background image --- */
.smjbg-bgimg{margin:0 0 4px}
.smjbg-bgrow{display:flex;gap:12px;align-items:flex-start}
.smjbg-bgthumb{position:relative;flex:0 0 auto;width:110px;height:78px;border:1px solid var(--line);
border-radius:10px;background:var(--color-surface-subtle);overflow:hidden;display:flex;align-items:center;justify-content:center}
.smjbg-bgthumb img{display:none;width:100%;height:100%;object-fit:cover}
.smjbg-bgthumb span{font-size:11.5px;color:var(--sub)}
.smjbg-bgthumb.has img{display:block}
.smjbg-bgthumb.has span{display:none}
.smjbg-bgctl{min-width:0;flex:1 1 auto}
.smjbg-bgbtns{display:flex;gap:6px;flex-wrap:wrap}
.smjbg-bgbtns .smjbg-b{padding:7px 12px;font-size:13px;border-radius:8px}
@media(max-width:640px){ .smjbg-bgrow{flex-direction:column} .smjbg-bgthumb{width:100%;height:96px} }
.smjbg-sharp{display:block;margin-top:10px;max-width:320px}
.smjbg-sharp-hd{display:flex;justify-content:space-between;align-items:baseline;
font-size:12.5px;color:var(--sub);margin-bottom:3px}
.smjbg-sharp-hd em{font-style:normal;font-weight:700;color:var(--ink)}
.smjbg-sharp input[type=range]{width:100%;margin:0;accent-color:var(--ac);height:18px}
.smjbg-sharp-ends{display:flex;justify-content:space-between;margin-top:1px}
.smjbg-sharp-ends i{font-style:normal;font-size:11px;color:var(--sub)}
/* File inputs must stay rendered — a display:none input cannot be opened by .click()
on iOS Safari and several Android browsers — so hide them visually instead. */
.smjbg-vh{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;
border:0;padding:0;margin:0;overflow:hidden;z-index:-1;pointer-events:none}
/* ==========================================================================
Mobile app shell — a fixed 70/30 editor.
The brochure preview is pinned to the top 70% of the screen and never scrolls
away; the controls occupy the lower 30% and scroll on their own. Everything is
inside a max-width query, so the desktop layout is untouched, and no element is
removed from the page — sections are only shown or hidden.
========================================================================== */
.smjbg-appbar,.smjbg-tabbar,.smjbg-mbar,.smjbg-handle,.smjbg-secbar,
.smjbg-subrow,.smjbg-mainrow,.smjbg-appnav,.smjbg-fs,.smjbg-cp,.smjbg-zoombar{display:none}
/* the handle rests, then gives a short nudge in the direction it will travel, so it reads
as "pull me" without animating continuously enough to distract */
@keyframes smjbg-nudge-up{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-3px)}90%{transform:translateY(-1px)}}
@keyframes smjbg-nudge-dn{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(3px)}90%{transform:translateY(1px)}}
@media(max-width:1023px){
/* ============================================================================
Mobile shell. The brochure is the dominant element: the app is a flex column
and the preview takes every row of space the compact chrome does not need.
Rows are in normal flow rather than fixed, so when a row is hidden the preview
grows into it automatically instead of leaving a reserved gap behind.
============================================================================ */
/* the tab row and the option row are smaller now, so less of the screen is reserved
for them and more is left for the brochure */
/* --smjbg-panel must clear the tallest thing any tab puts in it: the standard
preview tile is 104px tall, plus this row's own bottom padding, so 86px was
cutting roughly a fifth off the bottom of every Layout/Theme/Card-style/etc.
card. Typography overrides this to a smaller value of its own further down,
since it never uses these large tiles. */
:root{--smjbg-nav:50px;--smjbg-logo:22px;--smjbg-row:31px;--smjbg-panel:110px}
/* Longhand offsets, not the inset shorthand: inset is Chrome/WebView 87+, and where
it is unsupported the declaration is dropped, leaving position:fixed with auto
offsets — the shell then sits at its static position and shrinks to its content,
which is what pushed the navigation up into the middle of the screen.
top+bottom also define the height, so no vh/dvh unit is needed and the browser's
collapsing address bar cannot clip the navigation off the bottom. */
/* App shell. The height is an explicit viewport height, NOT bottom:0 — a length
resolves against the viewport no matter what any ancestor does, whereas bottom:0
resolves against the containing block, which a transform/filter/contain on a theme
wrapper silently becomes. That is what left the navigation stranded mid-screen.
100vh first as the fallback, then 100dvh for browsers that have it, so a collapsing
address bar cannot clip the navigation off the bottom. */
.smjbg-app{position:fixed;top:0;right:0;left:0;display:flex;flex-direction:column;
align-items:stretch;height:100vh;height:100dvh;
padding:0;background:#fff;overflow:hidden;z-index:2147483000}
/* .smjbg-main is a two-column GRID on desktop and sits between the app container and
every shell element. Left as a grid it is auto-height, so it collapses to its
content and the navigation inside it lands wherever that content ends — which is
what put the navigation in the middle of the screen with blank space below.
On mobile it becomes the flex column that carries the shell. */
.smjbg-main{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;min-width:0;
grid-template-columns:none;gap:0;margin:0;overflow:hidden;
/* the desktop rule sets align-items:start. Carried into a flex column that sizes
every child to its max-content width instead of the full width — which shrank
the navigation to half the screen and stretched the content region to the width
of the nowrap pill rows, pushing the preview off the right edge. */
align-items:stretch}
/* MAIN CONTENT region — preview and editing controls. Takes all the space the
navigation does not need, and is the only part that ever scrolls. */
.smjbg-shellmain{flex:1 1 auto;min-height:0;min-width:0;display:flex;
flex-direction:column;align-items:stretch;overflow:hidden}
/* the page behind the shell must not scroll or contribute its own height */
html.smjbg-lock,body.smjbg-lock{overflow:hidden!important;height:100%!important;
margin:0!important;padding:0!important;position:relative!important}
.smjbg-hd,.smjbg-steps,.smjbg-dummybar,.smjbg-demo,.smjbg-hint,.smjbg-selval,
.smjbg-mobtip,.smjbg-sbox-hint,.smjbg-slotline,.smjbg-formcol,.smjbg-handle,
.smjbg-prevcol .smjbg-btns,.smjbg-app[data-sec] #gen{display:none!important}
/* --- 1. app-level logo header ---
An application element, never brochure content: it lives outside the preview
container entirely, so whichever brochure is generated, replaced or resized, the
logo is unaffected and is never drawn into the exported image.
No background, border or card — the transparent PNG sits straight on the shell. */
.smjbg-appbar{display:flex;align-items:center;justify-content:space-between;
gap:10px;flex:0 0 auto;height:auto;padding:4px 10px 2px;
padding-top:calc(4px + env(safe-area-inset-top,0px));
background:none;border:0;box-shadow:none}
/* the switch, its dropdown arrow and the mode menu travel together */
.smjbg-pmwrap{position:relative;display:flex;align-items:center;gap:4px;
flex:0 1 auto;min-width:0}
/* undo sits in the existing row, the same size as the mode arrow beside it */
.smjbg-undo{flex:0 0 auto;width:26px;height:26px;display:inline-flex;align-items:center;
justify-content:center;border:1px solid var(--line);border-radius:0;background:#fff;
color:var(--ink);cursor:pointer;padding:0;margin-left:6px;
-webkit-tap-highlight-color:transparent}
.smjbg-undo svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.smjbg-undo:disabled{opacity:.38;cursor:default}
.smjbg-undo:active:not(:disabled){background:var(--soft)}
.smjbg-pmcaret{flex:0 0 auto;width:26px;height:26px;display:inline-flex;
align-items:center;justify-content:center;border:1px solid var(--line);
border-radius:0;background:#fff;color:var(--ink);cursor:pointer;padding:0;
-webkit-tap-highlight-color:transparent}
.smjbg-pmcaret svg{width:14px;height:14px;fill:none;stroke:currentColor;
stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.smjbg-pmmenu{position:absolute;top:calc(100% + 6px);right:0;z-index:85;
min-width:230px;max-width:min(280px,90vw);background:#fff;border:1px solid var(--line);
border-radius:12px;box-shadow:0 10px 28px rgba(16,24,40,.2);padding:5px;
display:flex;flex-direction:column;gap:2px}
.smjbg-pmmenu[hidden]{display:none}
.smjbg-pmmenu button{display:block;width:100%;text-align:left;border:0;background:none;
padding:9px 10px;border-radius:8px;cursor:pointer}
.smjbg-pmmenu button:active{background:var(--soft)}
.smjbg-pmmenu b{display:block;font-size:12.5px;font-weight:800;color:var(--ink)}
.smjbg-pmmenu span{display:block;font-size:10.5px;font-weight:600;color:var(--sub);
margin-top:1px}
/* the popup states the chosen mode before the fields */
.smjbg-pmnow{font-size:11.5px;font-weight:800;color:var(--ac);letter-spacing:.02em;
padding:8px 10px;margin:0 0 12px;border:1px solid var(--line);border-radius:10px;
background:var(--soft);text-align:center}
/* logo left, price-calculation toggle right, with room between them */
.smjbg-appbar .smjbg-logoimg{margin-right:auto;flex:0 0 auto}
.smjbg-appbar .smjbg-tgl{flex:0 1 auto;min-width:0;margin:0;padding:3px 8px;
gap:6px;border-radius:0;border:1px solid var(--line);background:#fff}
.smjbg-appbar .smjbg-tgl .tt{font-size:10px;font-weight:700;line-height:1.15;
white-space:normal;overflow-wrap:anywhere}
.smjbg-appbar .smjbg-tgl .sw{flex:0 0 auto;transform:scale(.82);transform-origin:center}
/* height only — width stays auto so the original proportions are exact, and the
source is the trimmed artwork so there is no empty margin adding to the gap */
.smjbg-logoimg{height:var(--smjbg-logo);width:auto;max-width:40%;
display:block;background:none;border:0;border-radius:0;box-shadow:none;object-fit:contain}
/* The control strip wraps onto as many rows as it needs and never scrolls sideways:
a scrolling row here pushed the whole page wider than the screen. */
/* With content images off, the tabs that upload them have nothing to do. The
Background Image tab stays: the backdrop is a separate layer and is not affected
by this toggle. */
.smjbg-app.noimg [data-opt-go="img1"],.smjbg-app.noimg [data-opt-go="img2"],
.smjbg-app.noimg [data-opt-go="fx1"],.smjbg-app.noimg [data-opt-go="fx2"]{display:none}
/* the text-style button floats at the right, clear of the tab row and the nav */
/* Typography is a toolbar, not a settings page: the Apply To chooser on one line and
the four controls side by side on the next, each scrolling within its own share. */
/* Tall enough for both rows (Apply To, the control carousel) at their natural height
with room to spare, by the fixed-height panel every tab shares. */
.smjbg-app[data-opt="typo"]{--smjbg-panel:90px}
/* This panel holds its own two scrollers (Apply To, the control carousel) —
it must never scroll or shift as a whole, only they should. */
.smjbg-app[data-opt="typo"] .smjbg-sub.on{overflow-x:hidden}
.smjbg-typogrid{display:flex;flex-direction:column;gap:4px;
width:100%;max-width:100%;min-width:0;padding:1px 8px 2px;box-sizing:border-box}
/* Apply to: one short line of choices. flex:0 0 auto keeps this row at its own
natural height — it can never be shrunk by its column siblings, so it is always
fully visible and tappable. margin-bottom gives it clear air above the controls. */
.smjbg-applybar{display:flex;flex-wrap:nowrap;align-items:center;gap:4px;width:100%;
min-width:0;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;
overscroll-behavior-x:contain;padding-bottom:1px;flex:0 0 auto;margin-bottom:6px}
.smjbg-applybar::-webkit-scrollbar{height:2px}
.smjbg-applybar::-webkit-scrollbar-thumb{background:var(--line)}
.smjbg-applycap{flex:0 0 auto;font-size:8px;font-weight:800;letter-spacing:.05em;
text-transform:uppercase;color:var(--sub);margin-right:2px}
.smjbg-applybtn{flex:0 0 auto;height:22px;padding:0 8px 0 6px;border:1px solid var(--line);
border-radius:0;background:#fff;color:var(--sub);font-size:9.5px;font-weight:700;
line-height:1;cursor:pointer;white-space:nowrap;position:relative;
display:inline-flex;align-items:center;gap:4px;
-webkit-tap-highlight-color:transparent}
/* the same small, clean mark next to every target, so which text a change will
reach is clear before the name is even read */
.smjbg-applybtn svg{width:12px;height:12px;flex:0 0 auto;fill:none;stroke:currentColor;
stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.smjbg-applybtn b{font:inherit;color:inherit}
.smjbg-applybtn::after{content:"";position:absolute;left:0;right:0;top:-8px;bottom:-8px}
.smjbg-applybtn.on{background:var(--ac);border-color:var(--ac);color:#fff}
.smjbg-applybtn.on svg{opacity:1}
/* An arrow fixed at each end. Only the space between them scrolls, so the options
can never spill past the arrows or off the screen. Styled apart from the option
tiles — a shaded fill and a border, not the plain white of a data option — so
they read immediately as navigation, not as a choice. Sized and coloured to read
as clearly as the option tiles beside them, not smaller or fainter. */
.smjbg-typonav{display:flex;flex-direction:row;align-items:stretch;gap:4px;
width:100%;max-width:100%;min-width:0;flex:0 0 auto}
.smjbg-typoarrow{flex:0 0 auto;width:26px;min-width:26px;padding:0;
display:inline-flex;align-items:center;justify-content:center;
border:1.5px solid var(--line);border-radius:0;background:var(--soft);color:var(--ink);
cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent;
transition:background-color .12s,border-color .12s,color .12s}
.smjbg-typoarrow svg{width:15px;height:15px;fill:none;stroke:currentColor;
stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
/* the visible button stays 22px; the tap target it answers to is much bigger,
so a thumb near either end of the strip reaches it without precise aim */
.smjbg-typoarrow::after{content:"";position:absolute;left:-8px;right:-8px;
top:-8px;bottom:-8px}
.smjbg-typoarrow:disabled{opacity:.3;cursor:default}
.smjbg-typoarrow:hover:not(:disabled){border-color:var(--ac);background:#fff;color:var(--ink)}
.smjbg-typoarrow:active:not(:disabled){background:var(--ac);border-color:var(--ac);color:#fff}
/* One control at a time, filling the width. The others are a swipe away: the strip
snaps so a swipe always lands on a whole control, and only this strip scrolls. */
.smjbg-typorows{display:flex;flex-direction:row;flex-wrap:nowrap;gap:0;
flex:1 1 auto;width:auto;min-width:0;max-width:100%;
overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;scroll-behavior:smooth;
touch-action:pan-x;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.smjbg-typorows::-webkit-scrollbar{display:none;height:0}
.smjbg-typocell{position:relative;display:flex;flex-direction:column;gap:4px;
flex:0 0 100%;width:100%;min-width:100%;scroll-snap-align:start;scroll-snap-stop:always}
.smjbg-typocap{font-size:8px;font-weight:800;letter-spacing:.04em;
text-transform:uppercase;color:var(--sub);line-height:1;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
/* the control fills the width, so the options rarely overflow; when they do the row
scrolls within the control */
/* five even columns, so the row always fits the screen whatever the labels say */
.smjbg-secbar{display:grid;grid-template-columns:repeat(6,1fr);align-items:stretch;
gap:4px;flex:0 0 auto;width:100%;max-width:100%;min-width:0;
padding:4px 8px 5px;overflow:hidden;white-space:normal;
border-bottom:1px solid var(--line)}
/* --- 2. the brochure: everything left over --- */
.smjbg-prevcol{position:static;flex:1 1 auto;min-height:0;min-width:0;max-width:100%;display:flex;
flex-direction:column;padding:1px 6px 0;background:#fff;border:0;max-height:none;overflow:visible}
.smjbg-prevcol #out{display:flex;flex-direction:column;width:100%;flex:1 1 auto;
min-height:0;overflow:hidden;margin:0}
.smjbg-prevcol .smjbg-prevempty{flex:1 1 auto;min-height:0;margin:0}
/* fill the space without ever distorting the sheet */
.smjbg-prevcol #out .smjbg-prev{flex:1 1 auto;min-height:0;display:flex;margin:0}
.smjbg-prevcol #out .smjbg-prev img,.smjbg-prevcol #out .smjbg-prev canvas{
width:auto!important;height:auto!important;max-width:100%;max-height:100%;
object-fit:contain;margin:auto;display:block}
/* --- share menu keeps working, anchored above the bottom navigation --- */
.smjbg-mbar{display:block;position:fixed;left:0;right:0;height:0;margin:0;z-index:70;
bottom:calc(var(--smjbg-nav) + env(safe-area-inset-bottom,0px))}
.smjbg-mbar .smjbg-mb,.smjbg-mspace{display:none}
.smjbg-mshare{position:static}
.smjbg-mmenu{position:absolute;bottom:8px;right:10px;top:auto;z-index:70;min-width:190px;
background:#fff;border:1px solid var(--line);border-radius:10px;
box-shadow:0 8px 22px rgba(16,24,40,.18);padding:4px;display:flex;flex-direction:column}
.smjbg-mmenu[hidden]{display:none}
.smjbg-mmenu button{border:0;background:none;text-align:left;padding:9px 10px;border-radius:7px;
font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.smjbg-mmenu button:active{background:var(--soft)}
/* --- the two horizontal rows: options always available, sub-row on selection --- */
.smjbg-subrow{display:none;flex:0 0 auto}
.smjbg-mainrow{display:flex;flex:0 0 auto}
.smjbg-app[data-opt] .smjbg-subrow{display:block}
/* horizontal only — never vertical, and never a wrap into a second line */
.smjbg-mainrow{min-width:0;max-width:100%;
overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;
touch-action:pan-x;overscroll-behavior:contain;scroll-behavior:auto;
white-space:nowrap;padding:3px 8px}
.smjbg-mainrow::-webkit-scrollbar{height:2px}
.smjbg-mainrow::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px}
/* the outer row only holds the open panel; the panel does the scrolling */
/* nowrap keeps the groups side by side; the text inside them wraps normally, or a
long label runs straight out of its card and over the next one */
.smjbg-subrow{min-width:0;max-width:100%;overflow:hidden;
white-space:nowrap;padding:3px 8px}
.smjbg-sub .smjbg-tl{white-space:normal}
.smjbg-sub .smjbg-tgl .tt{white-space:normal}
.smjbg-sub .smjbg-lbl{white-space:normal}
/* a taller pill with more space between, so a neighbouring tab is not caught by mistake.
padding-bottom matches padding-top so the row's own bottom edge isn't tighter than
its top, and the pill itself is a touch taller so bold text/borders never sit right
on the edge of the box, on either the plain or the selected (filled) tab. */
.smjbg-mainrow{gap:6px;border-top:1px solid var(--line);padding-top:3px;padding-bottom:3px}
.smjbg-mo{flex:0 0 auto;height:28px;padding:0 10px;border:1px solid var(--line);
border-radius:0;background:#fff;color:var(--sub);font-size:10.5px;font-weight:700;
line-height:1;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;
display:inline-flex;align-items:center;position:relative}
/* the pill is small to look at, but answers a touch over a taller area, so the row
stays easy to hit while taking little room */
.smjbg-mo::after{content:"";position:absolute;left:0;right:0;top:-8px;bottom:-8px}
.smjbg-mo.on{background:var(--ac);border-color:var(--ac);color:#fff}
/* The open tab is marked with a class by the script rather than each tab key being
listed here. CSS cannot compare one attribute against another, so the previous
enumeration had to name every tab — and any tab added later was invisible until
someone remembered to add it. A class cannot fall out of step. */
.smjbg-sub{display:none}
/* ONE scroller per tab. Previously each group inside a tab scrolled on its own, so a
tab holding two groups had two strips sliding independently and their cards could
overlap. The open panel now scrolls and everything inside it moves together. */
/* Every tab panel is the same box: same height, same padding, same tile size — only
the contents change, so switching tabs cannot make the row grow, shrink or jump. */
.smjbg-sub.on{height:var(--smjbg-panel);display:flex;gap:12px;align-items:stretch;
overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;
touch-action:pan-y;overscroll-behavior-x:contain;scroll-behavior:auto;
padding-bottom:3px;-webkit-overflow-scrolling:touch}
.smjbg-sub.on::-webkit-scrollbar{height:3px}
.smjbg-sub.on::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
/* the groups inside no longer scroll — they just lay their contents out in a line */
.smjbg-sub .smjbg-tiles,.smjbg-sub .smjbg-toggles,.smjbg-sub .smjbg-uprow{
overflow:visible;flex:0 0 auto;width:auto;max-width:none;padding-bottom:0;
touch-action:auto}
.smjbg-sub .smjbg-tiles::-webkit-scrollbar,
.smjbg-sub .smjbg-toggles::-webkit-scrollbar{display:none}
.smjbg-sub .smjbg-tg{flex:0 0 auto;display:flex;align-items:stretch}
.smjbg-sub .smjbg-tg{margin:0;flex:1 1 auto;min-width:0;max-width:100%}
.smjbg-sub .smjbg-lbl{display:none} /* the main pill already names the group */
/* every tab's controls stay inside their row: nothing overflows the container, and
the row itself never grows taller than the content it holds */
.smjbg-sub{max-width:100%;min-width:0;overflow:hidden}
.smjbg-sub>*{min-width:0;max-width:100%}
.smjbg-sub .smjbg-photofx{margin:0;padding:6px 8px;border-radius:10px;width:100%}
.smjbg-sub .smjbg-photofx>h4{font-size:11px;margin:0 0 5px}
.smjbg-sub .smjbg-photofx>p{display:none}
/* The four colour controls are a fixed set, so they are laid out as four equal
columns that fit the screen and sit centred, rather than a scrolling strip.
Each keeps its label, which is what tells the user where that colour is used. */
.smjbg-sub[data-opt="colour"].on{overflow:hidden}
.smjbg-sub .smjbg-colr{flex:1 1 100%;margin:0 auto;width:100%;max-width:100%;
display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
overflow:visible;touch-action:auto;padding:0;justify-items:stretch}
.smjbg-sub .smjbg-colr label{flex:0 0 auto;display:flex;flex-direction:column;
align-items:center;justify-content:flex-start;gap:5px;min-width:0;width:100%;
padding:7px 4px;border:1.5px solid var(--line);border-radius:11px;text-align:center}
.smjbg-sub .smjbg-colr input[type=color]{width:100%;max-width:44px;height:30px;
padding:1px;border-radius:7px;flex:0 0 auto}
/* the helper text: which element each colour applies to */
.smjbg-sub .smjbg-colr span{display:block;font-size:9.5px;line-height:1.25;
font-weight:700;color:var(--sub);min-width:0;overflow-wrap:anywhere;hyphens:auto}
/* In a tab row the sliding switches were cramped and awkward to hit. Inside the row
they become checkbox-style cards the same size as the other options, so the whole
card is the tap target instead of a small switch. The underlying checkbox is
untouched, so everything reading it keeps working. */
.smjbg-sub .smjbg-toggles{margin:0;width:auto;gap:10px;align-items:stretch}
.smjbg-sub .smjbg-toggles .smjbg-tgl{position:relative;flex:0 0 auto;
display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:7px;padding:8px 6px;margin:0;border-radius:12px;
text-align:center;background:#fff;-webkit-tap-highlight-color:transparent}
.smjbg-sub .smjbg-toggles .smjbg-tgl .sw{display:none}
.smjbg-sub .smjbg-toggles .smjbg-tglpv{display:none}
/* the checkbox */
.smjbg-sub .smjbg-toggles .smjbg-tgl::before{content:"";width:22px;height:22px;
border:2px solid var(--line);border-radius:6px;background:#fff;display:block;flex:0 0 auto}
.smjbg-sub .smjbg-toggles .smjbg-tgl.on::before{background:var(--ac);border-color:var(--ac)}
/* keep the selected outline inside the box so it cannot crowd the next option */
.smjbg-sub .smjbg-toggles .smjbg-tgl.on{border-color:var(--line);
box-shadow:inset 0 0 0 2px var(--ac)}
/* its tick */
.smjbg-sub .smjbg-toggles .smjbg-tgl.on::after{content:"";position:absolute;
left:50%;top:16px;width:6px;height:11px;margin-left:-3px;
border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.smjbg-sub .smjbg-toggles .smjbg-tgl .tt{font-size:10px;font-weight:700;line-height:1.25;
color:var(--ink);min-width:0;overflow-wrap:anywhere}
/* --- one tile shape for every tab ------------------------------------------- */
.smjbg-sub .smjbg-tg{flex:0 0 auto;display:flex;align-items:stretch;height:100%}
.smjbg-sub .smjbg-tiles{height:100%;align-items:stretch}
.smjbg-sub .smjbg-tile{flex:0 0 auto;width:86px;height:104px;min-height:0;
display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
gap:5px;padding:7px 5px;overflow:hidden}
/* the preview occupies a fixed band, whatever kind of preview it is */
.smjbg-sub .smjbg-tile>*:not(.smjbg-tl){flex:0 0 auto;width:100%;height:58px;
max-width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}
.smjbg-sub .smjbg-tile .smjbg-tl{margin-top:auto;font-size:9.5px;line-height:1.2;
max-height:23px;overflow:hidden;width:100%;overflow-wrap:anywhere}
/* a font tile shows a sample set in that font, with its name on the label below */
.smjbg-sub .smjbg-fpv{display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:1px;width:100%;height:58px;line-height:1.1;overflow:hidden}
.smjbg-sub .smjbg-fpv b{font-size:21px;font-weight:600;color:var(--ink);line-height:1.05}
.smjbg-sub .smjbg-fpv i{font-style:normal;font-size:11px;color:var(--sub);line-height:1.1}
.smjbg-sub .smjbg-thpv{height:58px;width:auto;max-width:100%}
/* the name must stay legible and never be clipped */
.smjbg-sub .smjbg-tg[data-tg="dFont"] .smjbg-tl{font-size:10.5px;font-weight:700;
color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
max-height:none;line-height:1.25;padding:0 2px}
/* the selected state is the accent ring and tick already used by every option tile */
/* the visual-style groups carry their own heading, which the tab name already gives */
.smjbg-sub .smjbg-photofx{padding:0;margin:0;border:0;background:none;height:100%}
.smjbg-sub .smjbg-photofx>h4,.smjbg-sub .smjbg-photofx>p{display:none}
/* the checkbox cards are exactly the same box as the tiles */
.smjbg-sub .smjbg-toggles{height:100%;align-items:stretch}
.smjbg-sub .smjbg-toggles .smjbg-tgl{width:86px;height:104px;min-height:0;
justify-content:center;gap:7px;overflow:hidden;box-sizing:border-box}
.smjbg-sub .smjbg-toggles .smjbg-tgl .tt{max-width:100%;overflow:hidden}
/* the colour row keeps its fitted grid, in the same box */
.smjbg-sub[data-opt="colour"].on{align-items:center}
.smjbg-sub .smjbg-f{margin:0;min-width:180px}
.smjbg-sub input[type=text]{width:100%;max-width:100%;height:30px;font-size:12.5px}
/* the full-screen editors hold one element each, so their blocks fill the width */
.smjbg-fs-pane>*{max-width:100%;min-width:0}
.smjbg-fs-pane .smjbg-up{width:100%;max-width:100%;margin:0 0 12px}
.smjbg-fs-pane .smjbg-photofx{width:100%;max-width:100%}
.smjbg-fs-pane .smjbg-bgimg{width:100%;max-width:100%}
/* --- option strips inside the rows: horizontal, one at a time --- */
.smjbg-tiles,.smjbg-tiles.g-sm,.smjbg-tiles.g-md,.smjbg-tiles.g-lg,
.smjbg-colr,.smjbg-toggles,.smjbg-uprow{
display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;overflow-y:hidden;
touch-action:pan-y;overscroll-behavior-x:contain;scroll-behavior:auto;
padding-bottom:3px;margin-top:0}
.smjbg-subrow .smjbg-tiles,.smjbg-subrow .smjbg-colr,.smjbg-subrow .smjbg-toggles{
touch-action:pan-x} /* inside a row there is nothing to pan down to */
.smjbg-tiles::-webkit-scrollbar,.smjbg-colr::-webkit-scrollbar,
.smjbg-toggles::-webkit-scrollbar,.smjbg-uprow::-webkit-scrollbar{height:3px}
.smjbg-tiles::-webkit-scrollbar-thumb,.smjbg-colr::-webkit-scrollbar-thumb,
.smjbg-toggles::-webkit-scrollbar-thumb,.smjbg-uprow::-webkit-scrollbar-thumb{
background:var(--line);border-radius:3px}
[data-hs="on"]::-webkit-scrollbar-thumb{background:var(--ac)}
.smjbg-tile{flex:0 0 auto;width:54px;min-height:0;padding:3px 2px;gap:2px}
.smjbg-tile .smjbg-tl{font-size:8.5px;line-height:1.2}
.smjbg-colr label{flex:0 0 auto;padding:3px 5px;gap:4px;border-radius:0}
.smjbg-colr span{display:none}
.smjbg-colr input[type=color]{width:22px;height:22px}
/* these are cards now, not a strip of nowrap pills — their labels must wrap */
.smjbg-toggles>*{flex:0 0 auto;min-width:0;white-space:normal}
/* --- 5. full-screen Image and Text editors --- */
/* Centred modal. The overlay covers the screen and centres the dialog; the dialog is
bounded by the viewport on both axes and scrolls internally, so it can never grow
past the edges however much a form contains. Safe-area insets are honoured in the
overlay padding so the dialog clears the status bar and the system navigation. */
.smjbg-fs{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;
background:rgba(16,24,40,.48);align-items:center;justify-content:center;
padding:calc(14px + env(safe-area-inset-top,0px)) 14px
calc(14px + env(safe-area-inset-bottom,0px))}
.smjbg-app[data-fs] .smjbg-fs{display:flex}
.smjbg-fs-dlg{display:flex;flex-direction:column;width:100%;max-width:420px;
max-height:100%;min-height:0;background:#fff;border-radius:16px;overflow:hidden;
box-shadow:0 18px 48px rgba(16,24,40,.32)}
.smjbg-fs-hd{flex:0 0 auto;display:flex;align-items:center;gap:8px;height:46px;
padding:0 10px;border-bottom:1px solid var(--line);background:#fff}
.smjbg-fs-back,.smjbg-fs-done{display:inline-flex;align-items:center;gap:4px;height:30px;
padding:0 12px;border-radius:0;font-size:12px;font-weight:800;line-height:1;
cursor:pointer;-webkit-tap-highlight-color:transparent}
.smjbg-fs-back{border:1px solid var(--line);background:#fff;color:var(--ink)}
.smjbg-fs-back svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;
stroke-linecap:round;stroke-linejoin:round}
.smjbg-fs-back i{font-style:normal}
.smjbg-fs-done{border:1px solid var(--ac);background:var(--ac);color:#fff;margin-left:auto}
.smjbg-fs-t{font-size:12.5px;font-weight:800;color:var(--sub);
flex:1 1 auto;text-align:center;min-width:0;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}
.smjbg-fs-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;padding:12px 12px 14px}
/* contents sit centred in the dialog and never wider than it */
.smjbg-fs-pane.on{margin:0 auto;max-width:100%}
.smjbg-fs-body .smjbg-uprow,.smjbg-fs-body .smjbg-sbox-bar{justify-content:center}
.smjbg-fs-body .smjbg-up-hd{justify-content:center;text-align:center}
.smjbg-fs-body .smjbg-sbox-bar .smjbg-mini{flex:0 1 auto}
.smjbg-fs-pane{display:none}
.smjbg-fs-pane.on{display:block}
/* inside a full-screen editor there is room, so fields stack and stay large */
.smjbg-fs-pane>*{margin:0 0 14px}
.smjbg-fs-pane .smjbg-tg{margin:0 0 14px}
.smjbg-fs-pane .smjbg-lbl{display:block;font-size:11.5px;margin-bottom:5px}
.smjbg-fs-pane .smjbg-uprow{display:block}
.smjbg-fs-pane .smjbg-uprow>*{width:100%;max-width:none;margin:0 0 12px}
.smjbg-fs-pane .smjbg-photos{margin:0 0 14px;padding:12px;border-radius:12px}
.smjbg-fs-pane .smjbg-photofx{padding:12px;margin:0 0 12px}
.smjbg-fs-pane label.smjbg-f,.smjbg-fs-pane .smjbg-f{display:block;margin:0 0 12px}
.smjbg-fs-pane input[type=text],.smjbg-fs-pane input[type=tel],
.smjbg-fs-pane input[type=email],.smjbg-fs-pane textarea{width:100%;font-size:16px}
/* --- 7. compact bottom navigation --- */
/* BOTTOM NAVIGATION — a sibling of the content region, so content can never push
it up. The safe-area padding keeps it clear of Android gesture navigation. */
.smjbg-appnav{display:grid;grid-template-columns:repeat(4,1fr);flex:0 0 auto;
border-top:1px solid var(--line);background:#fff;
padding-bottom:env(safe-area-inset-bottom,0px)}
.smjbg-appnav button{display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:2px;height:var(--smjbg-nav);border:0;background:none;color:var(--sub);
font-size:9.5px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent}
.smjbg-appnav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;
stroke-linecap:round;stroke-linejoin:round}
.smjbg-appnav i{font-style:normal}
.smjbg-appnav button:active{color:var(--ink)}
/* --- 9. instant response --- */
.smjbg-app *,.smjbg-app *::before,.smjbg-app *::after{
transition:none!important;animation:none!important}
}
/* dynamic viewport units where supported, so browser chrome appearing/disappearing
does not change the 70/30 split */
/* height comes from top+bottom, so no viewport-unit fallback is required here */
/* respect the system setting: the layout still changes, it just changes at once */
@media(prefers-reduced-motion:reduce){
.smjbg-app *,.smjbg-app *::before,.smjbg-app *::after{
transition:none!important;animation:none!important}
}
@media(min-width:1024px){
/* desktop ignores the mobile section switch entirely */
.smjbg-app[data-sec] .smjbg-card,.smjbg-app[data-sec] .smjbg-g{display:block}
.smjbg-app{position:static;height:auto;display:block;overflow:visible;top:auto;bottom:auto}
.smjbg-app[data-sec] .smjbg-formcol,.smjbg-app[data-sec] .smjbg-prevcol{display:block}
}
/* ==========================================================================
Industry surface pass — the editor chrome takes the project's design system
at every width, so phone, tablet and desktop read as one application:
Barlow Condensed headings over Barlow, square corners, hairline borders,
the steel accent as the only colour, focus always visible.
========================================================================== */
.smjbg-app{font-family:"Barlow",-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif}
.smjbg-app h2,.smjbg-app h3,.smjbg-app h4{font-family:"Barlow Condensed","Oswald",
-apple-system,"Segoe UI",sans-serif;font-weight:600;letter-spacing:.005em}
.smjbg-hd h2{font-size:30px;letter-spacing:0}
.smjbg-card>h3{font-size:15px;font-weight:600;letter-spacing:.05em;color:var(--ink)}
.smjbg-card{border-radius:var(--rad);box-shadow:none}
.smjbg-app input[type=text],.smjbg-app input[type=number],.smjbg-app input[type=date],
.smjbg-app input[type=email],.smjbg-app input[type=tel],.smjbg-app select,.smjbg-app textarea{
border-width:1px;border-radius:var(--rad)}
.smjbg-app input:focus,.smjbg-app select:focus,.smjbg-app textarea:focus{
border-color:var(--ac);box-shadow:none;outline:2px solid var(--ac);outline-offset:1px}
.smjbg-app :focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.smjbg-app ::selection{background:color-mix(in srgb,var(--ac) 26%,transparent)}
.smjbg-b{border-width:1px;border-radius:var(--rad);font-weight:600}
.smjbg-b.pri{background:var(--ac);border-color:var(--ac)}
.smjbg-b.pri:hover{background:var(--ac2);border-color:var(--ac2)}
.smjbg-steps b,.smjbg-tot,.smjbg-prev,.smjbg-toast,.smjbg-items .del,
.smjbg-tile,.smjbg-mini,.smjbg-sbox,.smjbg-drop{border-radius:var(--rad)}
/* --- the three colour roles, applied the same way at every width -----------
Blue: selection and primary action. Teal: something is switched on. Amber:
sample/demo material, so it never reads as a setting the user chose. */
.smjbg-tile.sel{border-color:var(--brand);background:var(--brand-050);
box-shadow:0 0 0 2px var(--brand-100)}
.smjbg-tile.sel .smjbg-tl{color:var(--brand-700)}
.smjbg-tile:hover:not(.sel){border-color:var(--brand-100);background:var(--brand-050)}
.smjbg-steps b.on{background:var(--brand-050);border-color:var(--brand-100);
color:var(--brand-700)}
.smjbg-tgl.on{border-color:var(--teal);background:var(--teal-050)}
.smjbg-tgl.on .sw{background:var(--teal)}
.smjbg-tot .g b:last-child{color:var(--brand-700)}
.smjbg-demo{border-color:var(--amber-100);background:var(--amber-050)}
.smjbg-demo-badge{background:var(--amber);color:var(--wa-900)}
.smjbg-mo.on{background:var(--brand-050);border-color:var(--brand-100);
color:var(--brand-700)}
.smjbg-prevempty{background:var(--card);border-color:var(--line);color:var(--sub)}
/* ==========================================================================
Desktop editor shell (>=1024px). Structure only in code terms: it reuses the
exact tab machinery mobile relies on (mainrow/subrow, populated once by
shellUp()) rather than building a parallel system, so every control that
works on a phone is the same control here. The stacked card form stays
available below the workspace — nothing is hidden because the screen grew.
1023px and below is untouched (existing mobile shell / stacked form).
========================================================================== */
@media(min-width:1024px){
/* the two fixed strips at the top; every pane below measures from their sum */
.smjbg-app{--bar:56px;--sec:56px;--top:112px;background:var(--ground);
max-width:none;padding:0}
/* --- top toolbar: identity left, document actions right ------------------ */
.smjbg-appbar{display:flex;align-items:center;gap:10px;
position:sticky;top:0;z-index:30;background:var(--card);
border-bottom:1px solid var(--line);height:var(--bar);box-sizing:border-box;
margin:0;padding:0 320px 0 20px}
.smjbg-appbar .smjbg-logoimg{height:24px;width:auto;margin:0}
.smjbg-proj{font-family:"Barlow Condensed","Oswald",sans-serif;font-size:19px;
font-weight:600;color:var(--ink);letter-spacing:.01em;margin-right:auto;
padding-left:12px;border-left:1px solid var(--line);line-height:1.1;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34ch}
.smjbg-appbar .smjbg-pmwrap{flex:0 0 auto;display:inline-flex;align-items:center;
gap:8px;position:relative}
/* the price-calculation switch reads as one toolbar control, not a form field */
.smjbg-appbar .smjbg-tgl{margin:0;padding:0 12px;height:34px;gap:9px;
border:1px solid var(--line);border-radius:var(--rad);background:var(--card);
box-shadow:none;cursor:pointer}
.smjbg-appbar .smjbg-tgl .tt,.smjbg-appbar .smjbg-tgl b,.smjbg-appbar .smjbg-tgl>span{
font-size:13px;font-weight:500;line-height:1.2;white-space:nowrap}
.smjbg-appbar .smjbg-tgl:hover{border-color:var(--brand)}
.smjbg-appbar .smjbg-undo,.smjbg-appbar .smjbg-pmcaret{flex:0 0 auto;
width:34px;height:34px;display:inline-flex;align-items:center;
justify-content:center;padding:0;margin:0;border:1px solid var(--line);
border-radius:var(--rad);background:var(--card);color:var(--ink);cursor:pointer;
transition:border-color .12s ease,background-color .12s ease;
-webkit-tap-highlight-color:transparent}
.smjbg-appbar .smjbg-undo svg,.smjbg-appbar .smjbg-pmcaret svg{width:18px;height:18px;
fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;
stroke-linejoin:round}
.smjbg-appbar .smjbg-undo:hover:not(:disabled),
.smjbg-appbar .smjbg-pmcaret:hover{border-color:var(--brand);
background:var(--brand-050)}
.smjbg-appbar .smjbg-undo:disabled{opacity:.45;cursor:default}
.smjbg-appbar .smjbg-pmmenu{position:absolute;top:calc(100% + 6px);right:0;left:auto;
bottom:auto;z-index:40;min-width:250px;display:flex;flex-direction:column;
background:var(--card);border:1px solid var(--line);border-radius:var(--rad);
box-shadow:0 12px 32px color-mix(in srgb,var(--color-shadow) 22%,transparent);padding:4px}
.smjbg-appbar .smjbg-pmmenu[hidden]{display:none}
.smjbg-appbar .smjbg-pmmenu button{display:block;width:100%;text-align:left;border:0;
background:none;padding:9px 10px;border-radius:var(--rad);cursor:pointer;color:var(--ink)}
.smjbg-appbar .smjbg-pmmenu button b{display:block;font-size:13.5px;font-weight:600}
.smjbg-appbar .smjbg-pmmenu button span{display:block;font-size:12px;color:var(--sub)}
.smjbg-appbar .smjbg-pmmenu button:hover{background:var(--brand-050)}
/* account / location / share ride in the toolbar, where document-level
controls belong on a large screen — the same buttons, not a second set */
.smjbg-appnav{position:fixed;top:0;right:0;z-index:31;height:var(--bar);
width:auto;display:flex;align-items:stretch;gap:0;padding:0 12px 0 0;
background:transparent;border:0;box-shadow:none}
.smjbg-appnav button{width:74px;height:var(--bar);display:flex;
flex-direction:column;align-items:center;justify-content:center;gap:3px;
border:0;background:none;color:var(--sub);font-size:11px;font-weight:500;
cursor:pointer;transition:color .12s ease,background-color .12s ease}
.smjbg-appnav button svg{width:19px;height:19px;fill:none;stroke:currentColor;
stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.smjbg-appnav button i{font-style:normal;letter-spacing:.01em}
.smjbg-appnav button:hover{color:var(--brand-700);background:var(--brand-050)}
/* --- what appears on the brochure: one strip under the toolbar ----------- */
.smjbg-secbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
gap:8px;height:var(--sec);box-sizing:border-box;align-items:center;
position:sticky;top:var(--bar);z-index:29;background:var(--card);
border-bottom:1px solid var(--line);margin:0;padding:0 20px}
/* the toolbar carries the project name, so the page heading is redundant here */
.smjbg-hd{display:none}
/* --- workspace: rail | canvas | properties ------------------------------
The mobile shell parks the three panes inside .smjbg-shellmain, so that
wrapper — not .smjbg-main — is the workspace grid. Park order is canvas,
properties, rail; grid-area puts each where it belongs. */
.smjbg-main{display:grid;grid-template-columns:minmax(0,1fr);margin:0}
.smjbg-shellmain{grid-row:1;display:grid;
grid-template-columns:212px minmax(0,1fr) 320px;
grid-template-areas:"rail canvas panel";
align-items:start;height:calc(100vh - var(--top));min-height:520px}
.smjbg-mainrow{grid-area:rail;display:flex;flex-direction:column;gap:1px;
padding:14px 10px;border-right:1px solid var(--line);
height:100%;min-height:0;overflow-y:auto;background:var(--card)}
.smjbg-mo{flex:0 0 auto;width:100%;height:auto;padding:9px 11px;
border:1px solid transparent;border-radius:var(--rad);background:none;
color:var(--sub);font-size:14px;font-weight:500;line-height:1.3;
text-align:left;white-space:normal;cursor:pointer;
transition:background-color .12s ease,color .12s ease;
-webkit-tap-highlight-color:transparent}
.smjbg-mo:hover:not(.on){background:var(--brand-050);color:var(--ink)}
.smjbg-mo.on{background:var(--brand-050);border-color:var(--brand-100);
color:var(--brand-700);font-weight:600;box-shadow:inset 2px 0 0 var(--brand)}
/* --- canvas: the brochure at its true proportions -----------------------
The mobile section switch sets display:block on this column at >=761px
([data-sec] on the app); the workspace needs it to stay a flex column, so
that selector is answered here rather than weakened there. */
.smjbg-app[data-sec] .smjbg-prevcol{display:flex;flex-direction:column}
.smjbg-prevcol{grid-area:canvas;min-width:0;height:100%;
display:flex;flex-direction:column;align-items:center;
overflow:auto;padding:22px 26px 14px;background:var(--ground)}
.smjbg-prevcol .smjbg-mbar{display:flex;align-items:center;gap:8px;
position:static;inset:auto;height:auto;z-index:auto;
width:100%;max-width:560px;margin:0 0 12px;flex:0 0 auto}
.smjbg-prevcol .smjbg-mspace{display:block;flex:1 1 auto}
.smjbg-prevcol .smjbg-mbar .smjbg-mb{display:inline-flex;align-items:center;gap:7px;
flex:0 0 auto;padding:8px 14px;border:1px solid var(--line);border-radius:var(--rad);
background:var(--card);color:var(--ink);font-size:13.5px;font-weight:600;
cursor:pointer;transition:border-color .12s ease,background-color .12s ease;
-webkit-tap-highlight-color:transparent}
.smjbg-prevcol .smjbg-mbar .smjbg-mb svg{width:16px;height:16px;fill:none;
stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.smjbg-prevcol .smjbg-mbar .smjbg-mb:hover:not(.pri){border-color:var(--brand);
background:var(--brand-050)}
/* Sample is sample material, not a design choice — it carries the amber role */
.smjbg-prevcol .smjbg-mbar #mDemo{border-color:var(--amber-100);
background:var(--amber-050);color:var(--amber-700)}
.smjbg-prevcol .smjbg-mbar #mDemo:hover{border-color:var(--amber);
background:var(--amber-100)}
.smjbg-prevcol .smjbg-mbar .smjbg-mb.pri{background:var(--ac);border-color:var(--ac);
color:#fff}
.smjbg-prevcol .smjbg-mbar .smjbg-mb.pri:hover{background:var(--ac2);
border-color:var(--ac2)}
.smjbg-prevcol .smjbg-mshare{position:relative;flex:0 0 auto}
.smjbg-prevcol .smjbg-mmenu{position:absolute;top:calc(100% + 6px);right:0;left:auto;
bottom:auto;z-index:40;min-width:210px;display:flex;flex-direction:column;
background:var(--card);border:1px solid var(--line);border-radius:var(--rad);
box-shadow:0 12px 32px color-mix(in srgb,var(--color-shadow) 22%,transparent);padding:4px}
.smjbg-prevcol .smjbg-mmenu[hidden]{display:none}
.smjbg-prevcol .smjbg-mmenu button{border:0;background:none;text-align:left;
padding:9px 10px;border-radius:var(--rad);font-size:13.5px;font-weight:500;
color:var(--ink);cursor:pointer}
.smjbg-prevcol .smjbg-mmenu button:hover{background:var(--brand-050)}
.smjbg-prevcol .smjbg-prevempty{max-width:420px;width:100%;flex:0 0 auto;margin:auto;
padding:34px 28px;text-align:center;line-height:1.55;
background:var(--card);border:1px solid var(--line);border-radius:0;
color:var(--sub);font-size:14px;
box-shadow:inset 14px 14px 0 -13px var(--brand),
inset -14px 14px 0 -13px var(--brand),
inset 14px -14px 0 -13px var(--brand),
inset -14px -14px 0 -13px var(--brand)}
.smjbg-prevcol #out{display:flex;flex-direction:column;width:100%;max-width:560px;
flex:1 1 0;min-height:0;overflow:hidden;margin:0 auto}
.smjbg-prevcol #out>.smjbg-btns{display:none} /* the same actions sit in Share */
/* the pre-existing pinch/wheel zoom (buildZoomBar/pzApply in smjbg.js) sets its
own transform on the canvas below, so nothing here duplicates that */
.smjbg-prevcol #out .smjbg-prev{flex:1 1 0;min-height:0;display:flex;margin:0;
overflow:hidden;background:transparent;padding:0}
.smjbg-prevcol #out .smjbg-prev img,.smjbg-prevcol #out .smjbg-prev canvas{
width:auto!important;height:100%!important;max-width:100%;max-height:100%;
object-fit:contain;margin:auto;display:block;border-radius:0;
box-shadow:0 3px 10px color-mix(in srgb,var(--color-shadow) 16%,transparent)}
.smjbg-prevcol #out .smjbg-prev canvas{cursor:pointer}
.smjbg-prevcol #out.zoomed .smjbg-prev canvas{cursor:grab}
.smjbg-prevcol #out.dragging .smjbg-prev canvas{cursor:grabbing}
/* zoom dock — the one piece of new chrome, not a repositioned control */
.smjbg-zoombar{display:flex;align-items:center;gap:6px;position:sticky;bottom:0;
flex:0 0 auto;margin-top:12px;align-self:center;width:max-content;
left:auto;right:auto;
background:var(--card);border:1px solid var(--line);border-radius:var(--rad);
padding:5px 8px;box-shadow:0 3px 10px color-mix(in srgb,var(--color-shadow) 14%,transparent)}
.smjbg-zoombar button{width:26px;height:26px;padding:0;border:1px solid var(--line);
border-radius:var(--rad);background:var(--card);color:var(--ink);font-size:15px;
font-weight:600;line-height:1;cursor:pointer;display:flex;align-items:center;
justify-content:center;transition:border-color .12s ease,background-color .12s ease;
-webkit-tap-highlight-color:transparent}
.smjbg-zoombar button:hover{border-color:var(--brand);background:var(--brand-050)}
.smjbg-zoombar button[data-zoom="fit"]{width:auto;padding:0 10px;font-size:11px;
font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.smjbg-zoombar span{font-size:13px;font-weight:500;color:var(--sub);
min-width:40px;text-align:center;font-variant-numeric:tabular-nums}
/* --- properties panel: options for the selected tool -------------------- */
.smjbg-subrow{grid-area:panel;display:block;border-left:1px solid var(--line);
height:100%;min-height:0;overflow-y:auto;background:var(--card);
padding:18px 18px 32px}
/* only the mobile block sets .on's own flex/height rules; both need a plain
default here or every panel would show stacked at once */
.smjbg-sub{display:none}
.smjbg-sub.on{display:block;height:auto;max-height:none;overflow:visible;
padding-bottom:0}
.smjbg-subrow .smjbg-tg>b,.smjbg-subrow .smjbg-lbl{font-family:"Barlow Condensed",
"Oswald",sans-serif;font-size:14px;font-weight:600;letter-spacing:.05em;
text-transform:uppercase;color:var(--sub)}
/* --- everything else, in one place below the workspace ------------------ */
.smjbg-formcol{grid-row:2;border-top:1px solid var(--line);background:var(--card);
margin:0;padding:28px 20px 56px}
.smjbg-formcol>*{max-width:1000px;margin-left:auto;margin-right:auto}
.smjbg-formcol::before{content:"All details & settings";display:block;
font-family:"Barlow Condensed","Oswald",sans-serif;font-size:15px;font-weight:600;
letter-spacing:.06em;color:var(--sub);text-transform:uppercase;
max-width:1000px;margin:0 auto 18px}
.smjbg-handle{display:none}
/* element editing: the content popups become a desktop dialog rather than
being unreachable. Clicking already selects, drags and opens the right
editor through pointer events — this only makes it comfortable at size. */
.smjbg-app[data-fs] .smjbg-fs{display:flex}
.smjbg-fs-dlg{max-width:460px;border-radius:var(--rad)}
/* narrow laptops give the canvas the space back first */
@media(max-width:1279px){
.smjbg-shellmain{grid-template-columns:180px minmax(0,1fr) 288px}
.smjbg-mo{font-size:13.5px;padding:8px 10px}
.smjbg-subrow{padding:16px 14px 28px}
.smjbg-prevcol{padding:18px 18px 12px}
}
/* large monitors: the brochure grows, the panels do not */
@media(min-width:1600px){
.smjbg-shellmain{grid-template-columns:236px minmax(0,1fr) 344px}
.smjbg-prevcol .smjbg-mbar,.smjbg-prevcol #out{max-width:680px}
}
}
/* ---- colour picker popup (mobile and desktop alike) ---- */
.smjbg-app[data-cp] .smjbg-cp{display:flex}
.smjbg-cp{position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;
background:rgba(16,24,40,.48);align-items:center;justify-content:center;
padding:calc(14px + env(safe-area-inset-top,0px)) 14px
calc(14px + env(safe-area-inset-bottom,0px))}
.smjbg-cp-dlg{display:flex;flex-direction:column;width:100%;max-width:340px;
max-height:100%;min-height:0;background:#fff;border-radius:16px;overflow:hidden;
box-shadow:0 18px 48px rgba(16,24,40,.32)}
.smjbg-cp-hd{flex:0 0 auto;display:flex;align-items:baseline;gap:8px;
padding:14px 16px 10px}
.smjbg-cp-hd>span{font-size:15px;font-weight:800;color:var(--ink)}
.smjbg-cp-for{font-style:normal;font-size:12px;font-weight:700;color:var(--sub);
margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.smjbg-cp-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
padding:0 16px 4px}
/* saturation and brightness: pick anywhere in the square */
.smjbg-cp-area{position:relative;width:100%;height:150px;border-radius:12px;
cursor:crosshair;touch-action:none;--cp-hue:#ff0000;
background:
linear-gradient(to top, #000, rgba(0,0,0,0)),
linear-gradient(to right, #fff, var(--cp-hue))}
.smjbg-cp-dot{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;
border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px rgba(16,24,40,.35),
0 1px 4px rgba(16,24,40,.4);pointer-events:none}
/* hue strip */
.smjbg-cp-hue{position:relative;width:100%;height:16px;margin-top:14px;border-radius:0;
cursor:pointer;touch-action:none;
background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.smjbg-cp-hdot{position:absolute;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;
border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(16,24,40,.3),
0 1px 4px rgba(16,24,40,.35);pointer-events:none}
.smjbg-cp-row{display:flex;align-items:center;gap:10px;margin-top:14px}
.smjbg-cp-sel{display:inline-flex;align-items:center;gap:8px}
.smjbg-cp-sel>span,.smjbg-cp-hexwrap>span{font-size:11.5px;font-weight:700;color:var(--sub)}
.smjbg-cp-sw{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);display:block}
.smjbg-cp-hexwrap{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
.smjbg-cp-hexwrap input{width:96px;height:32px;padding:0 10px;border:1px solid var(--line);
border-radius:9px;font-size:13px;font-weight:700;color:var(--ink);
text-transform:uppercase;font-family:ui-monospace,Menlo,Consolas,monospace}
/* a short row of quick colours, not a wall of swatches */
.smjbg-cp-presets{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;margin-top:14px}
.smjbg-cp-c{width:100%;aspect-ratio:1/1;min-height:0;border:1px solid rgba(16,24,40,.16);
border-radius:6px;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
.smjbg-cp-c.on{border-color:var(--ink);border-width:2px}
.smjbg-cp-acts{flex:0 0 auto;display:flex;justify-content:flex-end;gap:8px;padding:14px 16px}
.smjbg-cp-cancel,.smjbg-cp-apply{height:36px;padding:0 18px;border-radius:0;
font-size:13px;font-weight:800;cursor:pointer;-webkit-tap-highlight-color:transparent}
.smjbg-cp-cancel{border:1px solid var(--line);background:#fff;color:var(--ink)}
.smjbg-cp-apply{border:1px solid var(--ac);background:var(--ac);color:#fff}
/* the swatch still shows its colour but the label handles the tap, wherever it sits */
.smjbg-colr input[type=color],.smjbg-fs-pane input[type=color]{pointer-events:none}
@media(max-width:420px){
.smjbg-cp-area{height:135px}
.smjbg-cp-hexwrap input{width:88px}
}
/* --- Background image popup: same shape and centring as the normal upload popup --- */
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-bgimg{width:100%;max-width:100%;margin:0}
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-bgimg>.smjbg-lbl{display:block;text-align:center;
font-size:12px;font-weight:800;color:var(--ink);margin:0 0 10px}
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-bgrow{display:block;width:100%}
/* the picture area IS the upload control — no separate upload button */
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-bgthumb{width:100%;max-width:100%;height:auto;
aspect-ratio:4/3;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;
border:2px dashed var(--line);border-radius:14px;background:var(--soft);
cursor:pointer;overflow:hidden;position:relative;-webkit-tap-highlight-color:transparent}
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-bgthumb img{width:100%;height:100%;object-fit:cover;
display:none;border-radius:12px}
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-bgthumb.has img{display:block}
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-bgthumb.has{border-style:solid;background:none}
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-bgthumb.has .smjbg-bgempty{display:none}
.smjbg-bgempty{display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:6px;text-align:center;padding:14px;color:var(--sub)}
.smjbg-bgempty svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.smjbg-bgempty b{font-size:14px;font-weight:800;color:var(--ink)}
.smjbg-bgempty em{font-style:normal;font-size:11.5px}
/* controls centred beneath it, exactly like the normal upload popup */
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-bgctl{width:100%;display:block}
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-bgbtns{display:flex;justify-content:center;
gap:8px;flex-wrap:wrap;margin:0 0 14px}
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-bgbtns .smjbg-b{flex:0 1 auto;min-width:104px}
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-sharp{display:block;width:100%;text-align:center}
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-sharp-hd{display:flex;justify-content:center;
gap:8px;font-size:12px;font-weight:700;color:var(--sub);margin:0 0 6px}
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-sharp input[type=range]{width:100%;display:block}
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-sharp-ends{display:flex!important;
justify-content:space-between;font-size:11px;color:var(--sub);margin-top:2px}
/* ---- Text and Price popups: a flat, two-column data-entry form ------------------
Sections are a heading and a rule rather than a rounded card, and pairs of fields
sit side by side, so far more of the form is visible at once. ------------------- */
.smjbg-fs-pane[data-fs="text"] .smjbg-g[data-sect],
.smjbg-fs-pane[data-fs="price"] .smjbg-g[data-sect],
.smjbg-fs-pane[data-fs="text"] .smjbg-card,
.smjbg-fs-pane[data-fs="price"] .smjbg-card{
border:0;border-radius:0;padding:0;margin:0 0 16px;background:none}
/* heading + explanation, then a hairline instead of a box around everything */
.smjbg-fs-pane[data-fs="text"] .smjbg-g[data-sect]::before,
.smjbg-fs-pane[data-fs="price"] .smjbg-g[data-sect]::before{
content:attr(data-sect);display:block;font-size:10.5px;font-weight:800;
letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
padding:0 0 4px;border-bottom:1px solid var(--line);margin:0 0 8px}
.smjbg-fs-pane[data-fs="text"] .smjbg-card>h3,
.smjbg-fs-pane[data-fs="price"] .smjbg-card>h3,
.smjbg-fs-pane[data-fs="text"] .smjbg-g>h3,
.smjbg-fs-pane[data-fs="price"] .smjbg-g>h3{
font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
color:var(--ink);padding:0 0 4px;border-bottom:1px solid var(--line);margin:0 0 8px!important}
.smjbg-fs-pane[data-fs="text"] [data-help]::after,
.smjbg-fs-pane[data-fs="price"] [data-help]::after{
content:attr(data-help);display:block;font-size:10.5px;line-height:1.35;
color:var(--sub);margin:-4px 0 9px}
/* heading, then the line explaining it, then the fields */
.smjbg-fs-pane[data-fs="text"] [data-help],.smjbg-fs-pane[data-fs="price"] [data-help]{
display:flex;flex-direction:column}
.smjbg-fs-pane[data-fs="text"] [data-help]::before,.smjbg-fs-pane[data-fs="price"] [data-help]::before{order:1}
.smjbg-fs-pane[data-fs="text"] [data-help]>h3,.smjbg-fs-pane[data-fs="price"] [data-help]>h3{order:1}
.smjbg-fs-pane[data-fs="text"] [data-help]::after,.smjbg-fs-pane[data-fs="price"] [data-help]::after{order:2}
.smjbg-fs-pane[data-fs="text"] [data-help]>*:not(h3),.smjbg-fs-pane[data-fs="price"] [data-help]>*:not(h3){order:3}
/* two fields to a line, dropping to one when the screen is too narrow for that */
.smjbg-fs-pane[data-fs="text"] .smjbg-row,
.smjbg-fs-pane[data-fs="price"] .smjbg-row{display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 10px;margin:0!important}
.smjbg-fs-pane[data-fs="text"] .smjbg-f,
.smjbg-fs-pane[data-fs="price"] .smjbg-f{display:block;margin:0 0 8px;min-width:0}
.smjbg-fs-pane[data-fs="text"] .smjbg-row .smjbg-f,
.smjbg-fs-pane[data-fs="price"] .smjbg-row .smjbg-f{margin:0}
.smjbg-fs-pane[data-fs="text"] .smjbg-f>span,
.smjbg-fs-pane[data-fs="price"] .smjbg-f>span{display:block;font-size:10.5px;font-weight:700;
color:var(--sub);margin:0 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* comfortable to tap without being tall */
.smjbg-fs-pane[data-fs="text"] input[type=text],
.smjbg-fs-pane[data-fs="text"] input[type=tel],
.smjbg-fs-pane[data-fs="text"] input[type=email],
.smjbg-fs-pane[data-fs="text"] input[type=number],
.smjbg-fs-pane[data-fs="price"] input[type=text],
.smjbg-fs-pane[data-fs="price"] input[type=number],
.smjbg-fs-pane[data-fs="text"] textarea{width:100%;height:40px;padding:0 10px;
font-size:16px;border:1px solid var(--line);border-radius:6px;background:#fff;
color:var(--ink);line-height:40px;min-width:0}
.smjbg-fs-pane[data-fs="text"] textarea{height:auto;min-height:62px;padding:8px 10px;line-height:1.4}
/* a field that needs the room takes the whole line */
.smjbg-fs-pane[data-fs="text"] .smjbg-f.wide,
.smjbg-fs-pane[data-fs="price"] .smjbg-f.wide{grid-column:1/-1}
/* specifications and price rows: one line each */
.smjbg-fs-pane[data-fs="text"] .smjbg-items,
.smjbg-fs-pane[data-fs="price"] .smjbg-items{width:100%;border-collapse:collapse}
.smjbg-fs-pane[data-fs="text"] .smjbg-items thead,
.smjbg-fs-pane[data-fs="price"] .smjbg-items thead{display:none}
.smjbg-fs-pane[data-fs="text"] .smjbg-items tbody,
.smjbg-fs-pane[data-fs="price"] .smjbg-items tbody{display:block}
.smjbg-fs-pane[data-fs="text"] .smjbg-items tr{display:grid;
grid-template-columns:1fr 1fr 34px;gap:6px;align-items:center;margin:0 0 8px;
border:0;border-radius:0;padding:0;background:none}
.smjbg-fs-pane[data-fs="price"] .smjbg-items tr{display:grid;
grid-template-columns:1fr 1fr 68px 34px;gap:6px;align-items:center;margin:0 0 8px;
border:0;border-radius:0;padding:0;background:none}
.smjbg-fs-pane[data-fs="text"] .smjbg-items td,
.smjbg-fs-pane[data-fs="price"] .smjbg-items td{display:block;padding:0;border:0;
background:none;flex:none;min-width:0;width:auto!important;max-width:100%}
.smjbg-fs-pane[data-fs="text"] .smjbg-items td::before,
.smjbg-fs-pane[data-fs="price"] .smjbg-items td::before{display:none}
.smjbg-fs-pane[data-fs="text"] .smjbg-items input,
.smjbg-fs-pane[data-fs="price"] .smjbg-items input,
.smjbg-fs-pane[data-fs="price"] .smjbg-items select{width:100%;height:40px;min-width:0;
box-sizing:border-box}
.smjbg-fs-pane[data-fs="price"] .smjbg-items select{padding:0 4px;font-size:12px;
border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink)}
.smjbg-fs-pane[data-fs="price"] .smjbg-items input[type=number]{text-align:right}
.smjbg-fs-pane[data-fs="text"] .smjbg-items .del,
.smjbg-fs-pane[data-fs="price"] .smjbg-items .del{width:34px;height:34px;padding:0;
border:0;background:none;color:var(--sub);font-size:20px;line-height:1;cursor:pointer;
display:flex;align-items:center;justify-content:center;border-radius:8px;
-webkit-tap-highlight-color:transparent}
.smjbg-fs-pane[data-fs="text"] .smjbg-items .del:active,
.smjbg-fs-pane[data-fs="price"] .smjbg-items .del:active{background:var(--soft);color:var(--ink)}
.smjbg-fs-pane[data-fs="text"] .smjbg-items .del.addrow,
.smjbg-fs-pane[data-fs="price"] .smjbg-items .del.addrow{border:1.5px dashed var(--line);
color:var(--ink);font-size:19px}
/* ---- Price popup: entry, then calculation, then the result ---------------------- */
/* the mode choice reads as two options, side by side */
.smjbg-fs-pane[data-fs="price"] .smjbg-seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.smjbg-fs-pane[data-fs="price"] .smjbg-seg button{display:block;width:100%;text-align:left;
padding:9px 10px;border:1.5px solid var(--line);border-radius:11px;background:#fff;cursor:pointer}
.smjbg-fs-pane[data-fs="price"] .smjbg-seg button b{display:block;font-size:11.5px;
font-weight:800;color:var(--ink);line-height:1.25}
.smjbg-fs-pane[data-fs="price"] .smjbg-seg button span{display:block;font-size:10px;
color:var(--sub);margin-top:2px;line-height:1.3}
.smjbg-fs-pane[data-fs="price"] .smjbg-seg button.on{border-color:var(--ac);
background:color-mix(in srgb,var(--ac) 7%,#fff)}
/* a price row on one line: what it is, how much, add or deduct, remove */
.smjbg-fs-pane[data-fs="price"] .smjbg-items input[type=number]{width:100%;height:38px;
padding:0 8px;font-size:16px;border:1px solid var(--line);border-radius:9px;text-align:right}
.smjbg-fs-pane[data-fs="price"] .smjbg-items select{width:100%;height:38px;padding:0 4px;
font-size:12px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink)}
/* step 3: the two total fields sit together, the button beneath them */
.smjbg-fs-pane[data-fs="price"] #totals,.smjbg-fs-pane[data-fs="price"] .smjbg-tot{
display:block;margin:10px 0 4px;padding:9px 0 0;border-radius:0;background:none;
border:0;border-top:1px solid var(--line);font-size:12px;color:var(--sub)}
.smjbg-fs-pane[data-fs="price"] #totals b,.smjbg-fs-pane[data-fs="price"] .smjbg-tot b{
color:var(--ink);font-weight:800}
.smjbg-fs-pane[data-fs="price"] #totals>div,.smjbg-fs-pane[data-fs="price"] .smjbg-tot>div{
display:flex;justify-content:space-between;align-items:center;gap:10px;padding:2px 0}
/* the button sits on its own line beneath the pair of fields. Marked with a class
rather than :has(), which older Android browsers do not support. */
.smjbg-fs-pane[data-fs="price"] #autoTotal{height:40px;width:100%;margin-top:2px;
white-space:nowrap;border-radius:6px}
/* ---- rows in the Text and Price popups: equal fields, icon controls ------------ */
/* a grid, so the two text fields are exactly the same width whatever they contain */
.smjbg-fs-pane[data-fs="text"] .smjbg-items tr{display:grid;
grid-template-columns:1fr 1fr 34px;gap:6px;align-items:center}
.smjbg-fs-pane[data-fs="price"] .smjbg-items tr{display:grid;
grid-template-columns:1fr 1fr 68px 34px;gap:6px;align-items:center}
/* the cells carry inline widths for the desktop table; in the popup grid those fixed
widths would eat the whole row and collapse the label track to nothing */
.smjbg-fs-pane[data-fs="text"] .smjbg-items td,
.smjbg-fs-pane[data-fs="price"] .smjbg-items td{flex:none;min-width:0;
width:auto!important;max-width:100%}
/* every control in a row is the same height and fills its cell */
.smjbg-fs-pane[data-fs="text"] .smjbg-items input,
.smjbg-fs-pane[data-fs="price"] .smjbg-items input,
.smjbg-fs-pane[data-fs="price"] .smjbg-items select{width:100%;height:38px;min-width:0;
box-sizing:border-box}
/* remove: a plain cross, not a boxed button */
.smjbg-fs-pane[data-fs="text"] .smjbg-items .del,
.smjbg-fs-pane[data-fs="price"] .smjbg-items .del{width:34px;height:34px;padding:0;
border:0;background:none;color:var(--sub);font-size:20px;line-height:1;cursor:pointer;
display:flex;align-items:center;justify-content:center;border-radius:8px;
-webkit-tap-highlight-color:transparent}
.smjbg-fs-pane[data-fs="text"] .smjbg-items .del:active,
.smjbg-fs-pane[data-fs="price"] .smjbg-items .del:active{background:var(--soft);color:var(--ink)}
/* the plus on the last row reads as an action rather than a removal */
.smjbg-fs-pane[data-fs="text"] .smjbg-items .del.addrow,
.smjbg-fs-pane[data-fs="price"] .smjbg-items .del.addrow{border:1.5px dashed var(--line);
color:var(--ink);font-size:19px}
/* add: a plain plus of the same size, aligned under the rows */
.smjbg-addico{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
margin:2px 0 6px;padding:0;border:1.5px dashed var(--line);border-radius:9px;background:none;
color:var(--sub);font-size:20px;line-height:1;cursor:pointer;
-webkit-tap-highlight-color:transparent}
.smjbg-addico:active{background:var(--soft);color:var(--ink);border-style:solid}
/* ---- per-section Show on brochure switch ---------------------------------------- */
.smjbg-sechd{display:flex;align-items:center;gap:8px;padding:0 0 4px;margin:0 0 8px;
border-bottom:1px solid var(--line)}
.smjbg-sechd>span{font-size:10.5px;font-weight:800;letter-spacing:.06em;
text-transform:uppercase;color:var(--ink);min-width:0;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.smjbg-secsw{display:inline-flex;align-items:center;gap:6px;margin-left:auto;
flex:0 0 auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.smjbg-secsw input{position:absolute;opacity:0;pointer-events:none}
.smjbg-secsw i{width:32px;height:18px;border-radius:0;background:var(--color-border-strong);
position:relative;flex:0 0 auto;transition:none}
.smjbg-secsw i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;
border-radius:0;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.3)}
.smjbg-secsw input:checked+i{background:var(--ac)}
.smjbg-secsw input:checked+i::after{left:16px}
.smjbg-secsw em{font-style:normal;font-size:9.5px;font-weight:700;color:var(--sub);
white-space:nowrap}
/* the heading is drawn by this bar now, so the generated one is not needed */
.smjbg-fs-pane [data-sk][data-sect]::before{display:none}
/* a section that is off stays readable but clearly not in play */
.smjbg-fs-pane [data-sk].off>*:not(.smjbg-sechd){opacity:.45}
.smjbg-fs-pane [data-sk].off::after{opacity:.45}
/* ---- the strip that decides what appears on the brochure ------------------------ */
.smjbg-secbar-t{display:none} /* the switches speak for themselves */
.smjbg-secchip{display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:3px;min-width:0;max-width:100%;padding:4px 2px 3px;border:0;border-radius:9px;
background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.smjbg-secchip input{position:absolute;opacity:0;pointer-events:none}
.smjbg-secchip i{width:20px;height:12px;border-radius:0;background:var(--color-border-strong);
position:relative;flex:0 0 auto}
.smjbg-secchip i::after{content:"";position:absolute;top:2px;left:2px;width:8px;height:8px;
border-radius:0;background:#fff;box-shadow:0 1px 1px rgba(16,24,40,.35)}
.smjbg-secchip input:checked+i{background:var(--ac)}
.smjbg-secchip input:checked+i::after{left:10px}
.smjbg-secchip b{font-size:9px;font-weight:700;color:var(--sub);white-space:nowrap;
letter-spacing:.01em;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;
line-height:1.1}
.smjbg-secchip.on b{color:var(--ink)}
.smjbg-secchip:active{background:var(--soft)}
/* ---- square edges on every pill-style control ----------------------------------
Kept last so nothing added later quietly rounds these again. Genuinely circular
controls are deliberately untouched: the colour picker's drag handles, the close
button, and the round photo-shape option, which would lose its meaning as a square. */
.smjbg-mo,.smjbg-pill,.smjbg-chip,.smjbg-b,.smjbg-mini,.smjbg-tgl,.smjbg-secchip,
.smjbg-secchip i,.smjbg-secsw i,.smjbg-tgl .sw,.smjbg-tile.sel::after,
.smjbg-typosec button,.smjbg-cp-cancel,.smjbg-cp-apply,.smjbg-cp-hue,
.smjbg-pmcaret,.smjbg-addico,.smjbg-fs-hd .smjbg-b,.smjbg-appbar .smjbg-tgl,
.smjbg-secchip i::after,.smjbg-secsw i::after,.smjbg-tgl .sw::after{border-radius:0}
/* ---- background image: the same adjustable stage as a photo box ----------------- */
/* the same proportion the page uses (1 : 1.414), so what is framed here is what the
brochure shows — the stage is never shaped by the uploaded picture */
.smjbg-bgstage{--sar:0.707}
/* the renderer covers the page with the background, so the preview covers the box —
otherwise the picture would sit letterboxed here and be cropped on the brochure */
.smjbg-bgstage .smjbg-sbox-img{width:100%;height:100%;max-width:none;max-height:none;
object-fit:cover}
/* the same compact stage as the other image uploader: the brochure's proportion, but
capped so the popup stays the size of the ordinary upload popup */
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-sbox{width:100%;margin:0 auto 10px;
aspect-ratio:var(--sar);max-width:min(100%,calc(var(--sar) * 190px));height:auto}
/* no button row: the box handles moving, zooming and removing on its own */
/* the brochure preview is tappable: each part opens its own editor */
.smjbg-app #out img,.smjbg-app #out canvas{cursor:pointer}
/* ---- pinch to zoom the preview -------------------------------------------------- */
/* the drag outline is placed against this box, so it must be a positioning context —
without it the outline resolved against a distant ancestor and appeared displaced */
.smjbg-app #out{position:relative;overflow:hidden;touch-action:pan-y}
.smjbg-app #out img,.smjbg-app #out canvas{transition:transform .08s linear;
will-change:transform}
.smjbg-prevcanvas{display:block;width:100%;height:auto;max-width:100%}
.smjbg-app #out.zoomed{touch-action:none}
.smjbg-app #out.zoomed img,.smjbg-app #out.zoomed canvas{cursor:grab}
.smjbg-app #out.zoomed:active img,.smjbg-app #out.zoomed:active canvas{cursor:grabbing}
/* the outline that follows the finger while an element is being moved */
.smjbg-dragbox{position:absolute;display:none;z-index:4;pointer-events:none;
border:2px solid var(--ac);border-radius:0;
background:color-mix(in srgb,var(--ac) 10%,transparent);
box-shadow:0 0 0 1px rgba(255,255,255,.85);
will-change:transform;transform:translate3d(0,0,0)}
/* the outline must not lag behind the finger, so it is never animated */
.smjbg-app #out.dragging .smjbg-dragbox{transition:none}
/* while an element is being moved the browser must not claim the gesture */
.smjbg-app #out.dragging{touch-action:none}
.smjbg-app #out.dragging img,.smjbg-app #out.dragging canvas{transition:none;cursor:grabbing}
/* the page background colour, shown with the rest of the background settings */
.smjbg-fs-pane[data-fs="bgimg"] #cBgWrap{display:flex;align-items:center;justify-content:center;
gap:10px;margin:0 0 8px;padding:8px 0 0;border-top:1px solid var(--line)}
.smjbg-fs-pane[data-fs="bgimg"] #cBgWrap span{display:block;font-size:11px;font-weight:700;
color:var(--sub)}
.smjbg-fs-pane[data-fs="bgimg"] #cBgWrap input[type=color]{width:38px;height:32px;padding:1px;
border:1px solid var(--line);border-radius:6px;background:#fff}
/* the pattern choices: one horizontal strip, so the popup gains a row and not a grid */
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-tg[data-tg="xPattern"]{margin:0;padding:8px 0 0;
border-top:1px solid var(--line)}
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-tg[data-tg="xPattern"] .smjbg-lbl{display:block;
font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
color:var(--ink);margin:0 0 8px}
/* one row that scrolls sideways, keeping the popup short whatever the choice count */
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-tiles{display:flex;flex-wrap:nowrap;gap:6px;
overflow-x:auto;overflow-y:hidden;touch-action:pan-x;overscroll-behavior-x:contain;
width:100%;max-width:100%;min-width:0;height:auto;padding-bottom:3px}
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-tiles::-webkit-scrollbar{height:3px}
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-tiles::-webkit-scrollbar-thumb{
background:var(--line);border-radius:0}
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-tiles .smjbg-tile{flex:0 0 auto;width:62px;
height:auto;min-height:0;padding:4px 3px;gap:3px}
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-tiles .smjbg-tile>*:not(.smjbg-tl){height:28px}
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-tiles .smjbg-tl{font-size:8px;max-height:12px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-selval{display:none}
/* the visual styles, inside the picture's own popup rather than a row of their own */
.smjbg-fs-pane[data-fs="img1"] .smjbg-photofx,
.smjbg-fs-pane[data-fs="img2"] .smjbg-photofx{display:block;margin:0;padding:12px 0 0;
border:0;border-top:1px solid var(--line);background:none;height:auto}
.smjbg-fs-pane[data-fs="img1"] .smjbg-photofx>h4,
.smjbg-fs-pane[data-fs="img2"] .smjbg-photofx>h4{display:block;font-size:11px;
font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);
margin:0 0 8px}
/* a single row that scrolls sideways instead of wrapping, so every style is one
swipe away and the popup never grows taller than it needs to be */
.smjbg-fs-pane[data-fs="img1"] .smjbg-tiles,
.smjbg-fs-pane[data-fs="img2"] .smjbg-tiles{display:flex;flex-wrap:nowrap;gap:7px;
overflow-x:auto;overflow-y:hidden;width:auto;max-width:100%;height:auto;flex:0 0 auto;
touch-action:pan-x;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
scroll-behavior:smooth;padding-bottom:3px}
.smjbg-fs-pane[data-fs="img1"] .smjbg-tiles::-webkit-scrollbar,
.smjbg-fs-pane[data-fs="img2"] .smjbg-tiles::-webkit-scrollbar{height:3px}
.smjbg-fs-pane[data-fs="img1"] .smjbg-tiles::-webkit-scrollbar-thumb,
.smjbg-fs-pane[data-fs="img2"] .smjbg-tiles::-webkit-scrollbar-thumb{
background:var(--line);border-radius:3px}
/* same compact box the grid used to give each option, now a fixed width so the row
scrolls at a consistent pace instead of each tile being sized by its own label */
.smjbg-fs-pane[data-fs="img1"] .smjbg-tiles .smjbg-tile,
.smjbg-fs-pane[data-fs="img2"] .smjbg-tiles .smjbg-tile{width:74px;min-width:74px;
height:auto;min-height:0;padding:5px 4px;gap:4px;flex:0 0 auto}
.smjbg-fs-pane[data-fs="img1"] .smjbg-tiles .smjbg-tile>*:not(.smjbg-tl),
.smjbg-fs-pane[data-fs="img2"] .smjbg-tiles .smjbg-tile>*:not(.smjbg-tl){height:34px}
.smjbg-fs-pane[data-fs="img1"] .smjbg-tiles .smjbg-tl,
.smjbg-fs-pane[data-fs="img2"] .smjbg-tiles .smjbg-tl{font-size:8.5px;max-height:20px}
.smjbg-fs-pane[data-fs="img1"] .smjbg-selval,
.smjbg-fs-pane[data-fs="img2"] .smjbg-selval{display:none}
/* ---- the text options: four compact rows inside the text popup ------------------
Each row is a small mark and its own sideways scroller, so reaching the sizes does
not mean scrolling past every font. ------------------------------------------- */
/* the popup can be dragged by its title bar, so the brochure stays in view */
.smjbg-fs-hd{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.smjbg-fs-hd.dragging{cursor:grabbing}
.smjbg-fs-hd button{cursor:pointer;touch-action:manipulation}
.smjbg-fs-dlg{will-change:transform}
/* the small control that fits the panel to the foot of the screen */
.smjbg-fs-dock{flex:0 0 auto;width:30px;height:30px;display:inline-flex;align-items:center;
justify-content:center;margin-left:auto;margin-right:8px;padding:0;border:1px solid var(--line);
border-radius:0;background:#fff;color:var(--ink);cursor:pointer;
-webkit-tap-highlight-color:transparent}
.smjbg-fs-dock svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.smjbg-fs-dock.on{background:var(--ac);border-color:var(--ac);color:#fff}
.smjbg-fs-dock:active{background:var(--soft)}
.smjbg-fs-dock.on:active{background:var(--ac)}
/* the title keeps its place now that a control sits beside it */
.smjbg-fs-hd .smjbg-fs-t{margin-left:auto}
/* ---- Typography: four controls in the bottom row, two columns by two rows --------
Each control is a short run of small squares, the same size as the colour box, that
scrolls sideways inside its own cell. ----------------------------------------- */
.smjbg-typorow{display:flex;flex-direction:row;width:100%;min-width:0;
overflow-x:auto;overflow-y:hidden;
touch-action:pan-x;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.smjbg-typorow::-webkit-scrollbar{height:2px}
.smjbg-typorow::-webkit-scrollbar-thumb{background:var(--line)}
.smjbg-typorow .smjbg-tg{display:flex;margin:0;min-width:0;flex:1 1 auto}
/* touch-action:pan-x here (not the generic auto other tile groups use) is what makes
a swipe that starts on a tile itself scroll smoothly in one motion, instead of the
browser hesitating over whether the gesture belongs to this row or the page. */
.smjbg-typorow .smjbg-tiles{display:flex;flex-wrap:nowrap;gap:5px;width:100%;
max-width:none;min-width:0;height:auto;padding:0;overflow:visible;touch-action:pan-x}
/* every option is the same square as the colour box, but when fewer options exist
than the row is wide, each grows evenly to fill it — never past a comfortable
maximum — instead of leaving the rest of the row empty. A full row (more options
than fit) is unaffected: flex-shrink:0 keeps every tile at its normal size and the
row scrolls exactly as before. */
.smjbg-typorow .smjbg-tile{position:relative;flex:1 0 28px;min-width:28px;max-width:44px;
height:28px;padding:0;flex-direction:row;align-items:center;justify-content:center;gap:0;
border:1px solid var(--line);border-radius:0;background:#fff;
color:var(--ink);transition:border-color .12s,background-color .12s}
/* a light, subtle cue on touch/hover — never on the option already selected */
.smjbg-typorow .smjbg-tile:hover:not(.sel){border-color:var(--ac);
background:color-mix(in srgb,var(--ac) 6%,#fff)}
/* The chosen option is marked with a firmer border, an inset ring and a light fill —
no icon, no arrow, nothing that can be mistaken for the scroll arrows at either end.
The 15x15 checkmark badge every other tile selector shows is sized for much larger
tiles and does not fit this 28px box, so it is switched off just below. */
.smjbg-typorow .smjbg-tile.sel{border-color:var(--ac);box-shadow:inset 0 0 0 1px var(--ac);
background:color-mix(in srgb,var(--ac) 10%,#fff)}
/* same invisible touch-target padding every option gets, at a specificity high enough
to replace the large checkmark badge rather than stack underneath it */
.smjbg-typorow .smjbg-tile.sel::after{content:"";position:absolute;top:-7px;bottom:-7px;
left:-3px;right:-3px;width:auto;height:auto;background:none}
/* small to look at, with a larger area that answers a touch */
.smjbg-typorow .smjbg-tile::after{content:"";position:absolute;top:-7px;bottom:-7px;
left:-3px;right:-3px}
.smjbg-typorow .smjbg-lbl,.smjbg-typorow .smjbg-selval{display:none!important}
.smjbg-typorow .smjbg-tile .smjbg-tl{display:block;font-size:9px;font-weight:700;
max-height:none;line-height:28px;white-space:nowrap;overflow:visible;color:var(--ink);
text-align:center;width:100%}
.smjbg-typorow .smjbg-tg[data-tg="dFont"] .smjbg-tile>.smjbg-fpv{display:flex;
align-items:center;justify-content:center;width:100%;height:28px;margin:0}
.smjbg-typorow .smjbg-fpv b{font-size:14px}
.smjbg-typorow .smjbg-fpv i{display:none}
.smjbg-typorow .smjbg-tg[data-tg="dTypoColour"] .smjbg-tile{min-width:28px;max-width:28px;padding:0}
.smjbg-typorow .smjbg-tg[data-tg="dTypoColour"] .smjbg-tile>.smjbg-xpv{display:flex;
align-items:center;justify-content:center;width:100%;height:28px}
.smjbg-typorow .smjbg-tg[data-tg="dTypoColour"] .smjbg-tile .smjbg-tl{display:none}
/* one mark per square: size and thickness show their value alone */
.smjbg-typorow .smjbg-tg[data-tg="dFontScale"] .smjbg-tile>*:not(.smjbg-tl),
.smjbg-typorow .smjbg-tg[data-tg="dFontWeight"] .smjbg-tile>*:not(.smjbg-tl){display:none}
/* the controls wait, greyed and inert, until a text element has been chosen */
.smjbg-typogrid .smjbg-typorow{opacity:.38;pointer-events:none}
.smjbg-typogrid.ready .smjbg-typorow{opacity:1;pointer-events:auto}
/* ---- the text popups: two columns of fields --------------------------------------- */
.smjbg-fs-pane[data-fs="head"] .smjbg-row,.smjbg-fs-pane[data-fs="tags"] .smjbg-row,
.smjbg-fs-pane[data-fs="specs"] .smjbg-row,.smjbg-fs-pane[data-fs="hl"] .smjbg-row,
.smjbg-fs-pane[data-fs="biz"] .smjbg-row{display:grid;grid-template-columns:1fr 1fr;
gap:8px 10px;align-items:start}
/* a field that needs the whole line still gets it */
.smjbg-fs-pane[data-fs="head"] .smjbg-row .smjbg-f.wide,
.smjbg-fs-pane[data-fs="tags"] .smjbg-row .smjbg-f.wide,
.smjbg-fs-pane[data-fs="specs"] .smjbg-row .smjbg-f.wide,
.smjbg-fs-pane[data-fs="hl"] .smjbg-row .smjbg-f.wide,
.smjbg-fs-pane[data-fs="biz"] .smjbg-row .smjbg-f.wide{grid-column:1 / -1}
/* ==========================================================================
2026 refinement pass — desktop editor chrome only (>=1024px).
Appended last so nothing above is edited or weakened: this block only
restates chrome that already exists at a lower density and a lighter
colour weight. No brochure rendering, no control, no handler is touched.
Neutral surfaces carry the interface; blue marks action and selection;
teal reports price status; amber flags sample material.
========================================================================== */
@media(min-width:1024px){
/* --- shell: a shorter header, and a workspace that is exactly the screen -- */
.smjbg-app{--sec:44px;--top:100px;background:var(--color-bg-page)}
/* the toolbar loses 12px of section strip and gains the document actions */
.smjbg-appbar{gap:12px;padding:0 268px 0 20px}
.smjbg-proj{font-size:18px;max-width:26ch}
.smjbg-appbar .smjbg-tgl{height:32px;padding:0 10px}
.smjbg-appbar .smjbg-tgl .tt,.smjbg-appbar .smjbg-tgl b,
.smjbg-appbar .smjbg-tgl>span{font-size:12.5px}
/* price calculation is status, not action — it carries the teal role */
.smjbg-appbar .smjbg-tgl.on{border-color:var(--teal-100);background:var(--teal-050)}
.smjbg-appbar .smjbg-tgl.on .tt{color:var(--teal-700)}
.smjbg-appbar .smjbg-tgl input:checked ~ .sw{background:var(--teal)}
.smjbg-appbar .smjbg-undo,.smjbg-appbar .smjbg-pmcaret{width:32px;height:32px}
/* --- document actions: one cluster, one primary ------------------------- */
.smjbg-acts{flex:0 0 auto;display:flex;align-items:center;gap:8px;
margin-left:4px;padding-left:12px;border-left:1px solid var(--line)}
.smjbg-act{display:inline-flex;align-items:center;justify-content:center;gap:7px;
height:32px;padding:0 12px;border:1px solid var(--line);border-radius:var(--rad);
background:var(--card);color:var(--ink);font-size:13px;font-weight:500;
line-height:1;white-space:nowrap;cursor:pointer;
transition:border-color .12s ease,background-color .12s ease,color .12s ease;
-webkit-tap-highlight-color:transparent}
.smjbg-act svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;
stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.smjbg-act i{font-style:normal}
.smjbg-act:hover{border-color:var(--color-border-strong);background:var(--color-bg-workspace)}
.smjbg-act.on{border-color:var(--brand-100);background:var(--brand-050);
color:var(--brand-700)}
/* Preview: secondary, and plainly the quieter of the two */
.smjbg-act-sec{border-color:var(--brand-100);color:var(--brand-700);
background:var(--card);font-weight:600}
.smjbg-act-sec:hover{border-color:var(--brand);background:var(--brand-050);
color:var(--brand-700)}
/* Generate: the one solid object in the toolbar */
.smjbg-split{position:relative;display:inline-flex;align-items:stretch}
.smjbg-act-pri{background:var(--brand);border-color:var(--brand);color:#fff;
font-weight:600;height:32px}
.smjbg-act-pri:hover{background:var(--brand-700);border-color:var(--brand-700);
color:#fff}
.smjbg-split .smjbg-act-pri:first-child{border-right-color:rgba(255,255,255,.28)}
.smjbg-act-car{width:28px;padding:0;margin-left:-1px}
.smjbg-act-car svg{width:15px;height:15px}
.smjbg-genmenu{position:absolute;top:calc(100% + 6px);right:0;z-index:40;
min-width:262px;display:flex;flex-direction:column;padding:4px;
background:var(--card);border:1px solid var(--line);border-radius:var(--rad);
box-shadow:0 12px 32px color-mix(in srgb,var(--color-shadow) 22%,transparent)}
.smjbg-genmenu[hidden]{display:none}
.smjbg-genmenu button{border:0;background:none;text-align:left;padding:9px 10px;
border-radius:var(--rad);cursor:pointer;color:var(--ink)}
.smjbg-genmenu button b{display:block;font-size:13.5px;font-weight:600}
.smjbg-genmenu button span{display:block;font-size:12px;color:var(--sub);margin-top:1px}
.smjbg-genmenu button:hover{background:var(--brand-050)}
/* the account row keeps its own space at the right edge */
.smjbg-appnav button{width:62px;font-size:10.5px}
.smjbg-appnav button svg{width:18px;height:18px}
/* --- section strip: compact switches, left-aligned, neutral by default -- */
.smjbg-secbar{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;
height:var(--sec);padding:0 20px;background:var(--card)}
.smjbg-secbar .smjbg-secchip{flex:0 0 auto;flex-direction:row;align-items:center;
gap:8px;padding:5px 11px;border:1px solid transparent;border-radius:var(--rad);
transition:background-color .12s ease,border-color .12s ease}
.smjbg-secbar .smjbg-secchip b{font-size:12.5px;font-weight:500;color:var(--sub)}
.smjbg-secbar .smjbg-secchip:hover{background:var(--color-bg-workspace)}
.smjbg-secbar .smjbg-secchip.on{background:var(--brand-050);
border-color:var(--brand-100)}
.smjbg-secbar .smjbg-secchip.on b{color:var(--brand-700);font-weight:600}
.smjbg-secbar .smjbg-secchip i{width:22px;height:13px}
.smjbg-secbar .smjbg-secchip i::after{width:9px;height:9px;top:2px;left:2px}
.smjbg-secbar .smjbg-secchip input:checked+i::after{left:11px}
/* --- rail: three named groups, one open tool -------------------------- */
.smjbg-mainrow{padding:10px 8px 18px;gap:0}
.smjbg-mogrp{font-family:"Barlow Condensed","Oswald",sans-serif;font-size:12px;
font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
padding:14px 11px 6px;line-height:1}
.smjbg-mogrp:first-child{padding-top:4px}
.smjbg-mo{padding:8px 11px;font-size:13.5px}
.smjbg-mo.on{box-shadow:inset 2px 0 0 var(--brand);border-color:transparent}
/* images off means no image tools — the Media group goes with them */
.smjbg-app.noimg [data-opt-go="images"],
.smjbg-app.noimg .smjbg-mogrp[data-grp="media"]{display:none}
/* --- properties panel: compact, two-up, quiet selection ---------------- */
.smjbg-subrow{padding:16px 16px 28px}
.smjbg-subrow .smjbg-tg>b,.smjbg-subrow .smjbg-lbl{font-size:13px;
letter-spacing:.08em;color:var(--muted)}
.smjbg-subrow .smjbg-tiles,
.smjbg-subrow .smjbg-tiles.g-md,
.smjbg-subrow .smjbg-tiles.g-lg{grid-template-columns:repeat(2,1fr);gap:6px}
.smjbg-subrow .smjbg-tiles.g-sm{grid-template-columns:repeat(3,1fr);gap:6px}
.smjbg-subrow .smjbg-tile{gap:5px;padding:6px 5px;border-width:1px;
border-radius:var(--rad);border-color:var(--line)}
.smjbg-subrow .smjbg-tile:hover{border-color:var(--color-border-strong);
box-shadow:0 2px 6px color-mix(in srgb,var(--color-shadow) 10%,transparent)}
/* selected: a tint, a hairline and a small check — not a heavy outline */
.smjbg-subrow .smjbg-tile.sel{border-color:var(--brand);box-shadow:none;
background:var(--brand-050)}
.smjbg-subrow .smjbg-tile.sel::after{width:13px;height:13px;top:5px;right:5px}
.smjbg-subrow .smjbg-tl{font-size:10.5px;line-height:1.15}
.smjbg-subrow .smjbg-tile.sel .smjbg-tl{color:var(--brand-700)}
/* the layout and theme thumbnails shrink so more of them fit the panel: with
nearly sixty layouts the thumbnail size is what decides how much scrolling
the panel costs, so it is kept to the smallest legible page */
.smjbg-subrow .smjbg-lopv,.smjbg-subrow .smjbg-thpv{width:42px;height:62px;
border-radius:0;padding:4px;gap:2px}
.smjbg-subrow .smjbg-lopv .img{border-radius:2px}
.smjbg-subrow .smjbg-fpv{min-height:26px;font-size:13px}
.smjbg-subrow .smjbg-selval{font-size:11.5px;margin:8px 2px 0;color:var(--muted)}
/* --- canvas: the brochure is the hero --------------------------------- */
.smjbg-prevcol{padding:20px 26px 12px;background:var(--ground)}
.smjbg-prevcol #out .smjbg-prev img,.smjbg-prevcol #out .smjbg-prev canvas{
box-shadow:0 1px 2px color-mix(in srgb,var(--color-shadow) 10%,transparent),
0 10px 30px color-mix(in srgb,var(--color-shadow) 14%,transparent)}
/* Generate now lives in the toolbar, so the canvas bar carries only Share/Sample */
.smjbg-prevcol .smjbg-mbar{max-width:560px}
/* --- empty state: onboarding, not an error ---------------------------- */
.smjbg-prevcol .smjbg-prevempty{display:flex;flex-direction:column;align-items:center;
max-width:340px;padding:26px 26px 24px;margin:auto;color:var(--ink);
background:var(--card);border:1px solid var(--line);box-shadow:none}
.smjbg-prevcol .smjbg-prevempty>b{font-family:"Barlow Condensed","Oswald",sans-serif;
font-size:23px;font-weight:600;letter-spacing:.01em;margin-top:18px}
.smjbg-pe-sub{display:block;font-size:13.5px;line-height:1.5;color:var(--sub);
margin-top:5px;text-align:center}
.smjbg-pe-btns{display:flex;gap:8px;margin-top:18px}
.smjbg-pe-btns .smjbg-act{height:34px;padding:0 14px;font-size:13px}
/* a brochure drawn as a skeleton, so the box reads as a page waiting to be filled */
.smjbg-pe-skel{display:flex;flex-direction:column;gap:6px;width:86px;height:122px;
padding:9px;background:var(--color-surface-subtle);border:1px solid var(--line)}
.smjbg-pe-skel i{display:block;background:var(--color-surface-sunken)}
.smjbg-pe-skel .im{height:46px;background:var(--color-border-default)}
.smjbg-pe-skel .h{height:7px;width:78%;background:var(--color-border-default)}
.smjbg-pe-skel .l{height:4px;width:92%}
.smjbg-pe-skel .l.s{width:64%}
.smjbg-pe-skel .tg{height:9px;width:34%;margin-top:auto}
.smjbg-pe-skel .tg.t{width:52%;margin-top:0}
/* --- Preview: the drawn brochure, large, over the workspace ------------ */
.smjbg-pv{display:none;position:fixed;inset:0;z-index:120;
flex-direction:column;background:color-mix(in srgb,var(--color-text-primary) 62%,transparent)}
.smjbg-pv.on{display:flex}
.smjbg-pv-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
gap:12px;height:52px;padding:0 20px;background:var(--card);
border-bottom:1px solid var(--line)}
.smjbg-pv-bar b{font-family:"Barlow Condensed","Oswald",sans-serif;font-size:17px;
font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sub)}
.smjbg-pv-bar button{height:32px;padding:0 14px;border:1px solid var(--line);
border-radius:var(--rad);background:var(--card);color:var(--ink);font-size:13px;
font-weight:500;cursor:pointer}
.smjbg-pv-bar button:hover{border-color:var(--color-border-strong);background:var(--color-bg-workspace)}
.smjbg-pv-stage{flex:1 1 auto;min-height:0;display:flex;align-items:center;
justify-content:center;padding:16px}
/* width/height auto with only a max- cap never scales the brochure UP, so a
sheet smaller than the stage sat tiny in the middle of it. Filling the
stage and letting object-fit do the letterboxing keeps the proportions and
uses the whole modal. */
.smjbg-pv-stage img{width:100%;height:100%;max-width:100%;max-height:100%;
object-fit:contain;display:block;
box-shadow:0 18px 50px color-mix(in srgb,var(--color-shadow) 45%,transparent)}
/* --- the full form: present, disclosed, never in the way -------------- */
/* With it closed the workspace is exactly the viewport, so the editor itself
never scrolls — the three panes scroll independently, as before. */
/* Nothing below the editor. The form's fields live on in the panels and
popups they were moved into; the column that used to hold the leftovers
is never rendered. Specificity matches the [data-sec] rule above, which
would otherwise show it again. */
.smjbg-app .smjbg-formcol,
.smjbg-app[data-sec] .smjbg-formcol,
.smjbg-app.smjbg-settings .smjbg-formcol,
.smjbg-app.smjbg-settings[data-sec] .smjbg-formcol{display:none}
@media(max-width:1439px){
.smjbg-act[data-act="settings"] i{display:none}
.smjbg-act[data-act="settings"]{width:32px;padding:0}
}
@media(max-width:1279px){
.smjbg-appbar{padding-right:256px}
.smjbg-proj{max-width:16ch}
.smjbg-subrow .smjbg-tiles.g-sm{grid-template-columns:repeat(2,1fr)}
}
/* Narrow laptops: the account row drops to icons so Preview and Generate keep
their labels — they are the two actions that must never collapse. */
@media(max-width:1149px){
.smjbg-appnav button{width:44px}
.smjbg-appnav button i{display:none}
.smjbg-appbar{padding-right:196px;gap:10px}
.smjbg-proj{max-width:12ch;padding-left:10px}
.smjbg-acts{padding-left:10px;gap:6px}
}
}
/* ==========================================================================
Editor colour refinement — chrome only.
The editor's palette is independent of the brochure: the brochure is drawn
on canvas in JS from whatever Color Theme is selected (Sage, Navy, Luxury,
Warm, Minimal…), and nothing in this file reads that theme. Chrome never
takes a brochure colour, and nothing here changes the brochure.
Hierarchy: Generate = solid ETA blue; Preview = white + blue text;
active nav/section/layout = the faintest blue tint; everything else neutral.
========================================================================== */
/* (interim overrides folded into the token block above) */
@media(min-width:1024px){
.smjbg-appbar,.smjbg-secbar{background:var(--color-surface)}
.smjbg-prevcol{background:var(--ground)}
/* --- 1/2 · the two document actions carry the whole hierarchy ---------- */
.smjbg-act{border-color:var(--line);background:#fff;color:var(--n-800)}
.smjbg-act:hover{border-color:var(--color-border-strong);background:var(--color-surface-subtle);color:var(--ink)}
.smjbg-act.on{background:var(--brand-050);border-color:var(--brand-100);
color:var(--brand-700)}
/* Preview: white, blue text, subtle border */
.smjbg-act-sec{background:#fff;border-color:var(--color-action-secondary-border);color:var(--brand-700)}
.smjbg-act-sec:hover{background:var(--brand-050);border-color:var(--brand-100);
color:var(--brand-700)}
/* Generate: the one solid fill in the interface */
.smjbg-act-pri,.smjbg-act-pri:link{background:var(--brand);
border-color:var(--brand);color:#fff}
.smjbg-act-pri:hover{background:var(--brand-700);border-color:var(--brand-700)}
/* --- 3/4 · section switches: neutral until on, faint blue when on ------ */
.smjbg-secbar .smjbg-secchip{background:#fff;border-color:transparent}
.smjbg-secbar .smjbg-secchip b{color:var(--color-text-secondary);font-weight:500}
.smjbg-secbar .smjbg-secchip:hover{background:var(--color-surface-subtle);border-color:var(--line)}
.smjbg-secbar .smjbg-secchip i{background:var(--color-border-strong)}
.smjbg-secbar .smjbg-secchip.on{background:var(--brand-050);
border-color:var(--brand-100)}
.smjbg-secbar .smjbg-secchip.on b{color:var(--brand-700);font-weight:600}
.smjbg-secbar .smjbg-secchip.on i{background:var(--brand)}
/* price status stays informational, but in the same blue family — no teal
chrome, so the editor reads as one calm palette */
.smjbg-appbar .smjbg-tgl.on{border-color:var(--brand-100);
background:var(--brand-050)}
.smjbg-appbar .smjbg-tgl.on .tt{color:var(--brand-700)}
.smjbg-appbar .smjbg-tgl input:checked ~ .sw{background:var(--brand)}
/* --- 5 · left rail: the active item is a tint, not a slab ------------- */
.smjbg-mo{color:var(--n-800);background:none;border-color:transparent}
.smjbg-mo:hover{background:var(--color-bg-workspace);color:var(--ink)}
.smjbg-mo.on{background:var(--brand-050);color:var(--brand-700);font-weight:600;
box-shadow:inset 2px 0 0 var(--brand)}
.smjbg-mogrp{color:var(--muted)}
/* --- 6 · borders --------------------------------------------------- */
.smjbg-shellmain,.smjbg-mainrow,.smjbg-subrow,.smjbg-appbar,.smjbg-secbar,
.smjbg-acts,.smjbg-zoombar,.smjbg-genmenu,.smjbg-pv-bar{border-color:var(--line)}
.smjbg-subrow .smjbg-tile{border-color:var(--line);background:#fff}
.smjbg-subrow .smjbg-tile:hover{border-color:var(--color-border-strong)}
/* --- 7/8/9 · layout thumbnails: neutral paper, blue only when selected -
Each thumbnail is a miniature of the brochure's structure. Structure is
what the user is choosing, so it is drawn in grays; the accent parts drop
to a hint of blue, and only the selected tile brings the blue up. */
.smjbg-subrow .smjbg-lopv,.smjbg-subrow .smjbg-thpv{background:#fff;
border-color:var(--color-border-default)}
.smjbg-subrow .smjbg-lopv .img,
.smjbg-subrow .smjbg-lopv.gen .i1{background:var(--color-border-default);background-image:none}
.smjbg-subrow .smjbg-lopv.gen .i2{background:var(--color-surface-sunken);background-image:none}
.smjbg-subrow .smjbg-lopv .hd,
.smjbg-subrow .smjbg-lopv.gen .hd{background:var(--n-400)}
.smjbg-subrow .smjbg-lopv .tx,
.smjbg-subrow .smjbg-lopv.gen .h2{background:var(--color-border-strong)}
.smjbg-subrow .smjbg-lopv.ca .rw .k{background:var(--color-border-strong)}
.smjbg-subrow .smjbg-lopv.ca .rw .v{background:var(--n-400)}
/* the only blue in an unselected thumbnail: tags and the tiny CTA, faint */
.smjbg-subrow .smjbg-lopv .tag,
.smjbg-subrow .smjbg-lopv.gen .tg{background:var(--p-200);opacity:1}
.smjbg-subrow .smjbg-lopv.gen .tt{background:var(--p-200);opacity:1}
.smjbg-subrow .smjbg-lopv.gen .sp{background:var(--color-border-default)}
.smjbg-subrow .smjbg-lopv.gen .hl{background:var(--color-bg-workspace);border-color:var(--color-border-default)}
.smjbg-subrow .smjbg-lopv.gen .pr{background:var(--color-surface-subtle);border-color:var(--color-border-default)}
.smjbg-subrow .smjbg-lopv.gen .ft{background:var(--color-surface-sunken)}
/* selected: the tile tints, the frame goes blue, the accent parts step up */
.smjbg-subrow .smjbg-tile.sel{border-color:var(--brand);background:var(--brand-050);
box-shadow:none}
.smjbg-subrow .smjbg-tile.sel .smjbg-lopv,
.smjbg-subrow .smjbg-tile.sel .smjbg-thpv{border-color:var(--brand-100)}
.smjbg-subrow .smjbg-tile.sel .smjbg-lopv.gen{outline-color:var(--brand-100)}
.smjbg-subrow .smjbg-tile.sel .smjbg-lopv .tag,
.smjbg-subrow .smjbg-tile.sel .smjbg-lopv.gen .tg,
.smjbg-subrow .smjbg-tile.sel .smjbg-lopv.gen .tt{background:var(--brand);opacity:1}
.smjbg-subrow .smjbg-tile.sel .smjbg-tl{color:var(--brand-700)}
/* --- 10/11 · canvas ground, and no green anywhere in the chrome ------- */
.smjbg-prevcol .smjbg-prev{background:transparent}
.smjbg-prevcol .smjbg-prevempty{background:#fff;border-color:var(--line)}
.smjbg-pe-btns .smjbg-act-pri{background:var(--brand);border-color:var(--brand)}
/* focus is the one place blue is allowed to be loud */
.smjbg-app :focus-visible{outline:2px solid var(--brand);outline-offset:2px}
}
/* ==========================================================================
Desktop fixes for two pieces that were only ever styled inside the mobile
media query, so at >=1024px they inherited no geometry at all:
1. the Typography grid (Apply-to bar + the control carousel) — its icons
had no size, so they drew at the SVG's natural size;
2. the popup shell (.smjbg-fs) — it was un-hidden but never positioned,
so Background and the two image editors opened in normal flow below
the workspace and read as an empty panel.
Structure and behaviour are untouched: the carousel still exists, its
arrows still work, and every control stays where the JS parked it.
========================================================================== */
@media(min-width:1024px){
/* --- 1 · Typography, laid out down the panel instead of across a strip --
A 320px column has room to stack, so the horizontal carousel is presented
as a stack: same cells, same order, no clipping and nothing to swipe. */
/* ONE scroller in this column — the panel scrolls with the column, never on
top of it, or the typography tab shows two vertical scrollbars. */
.smjbg-app[data-opt="typo"] .smjbg-sub.on{overflow:visible}
.smjbg-typogrid{display:flex;flex-direction:column;gap:14px;padding:0;
width:100%;max-width:100%;min-width:0}
/* Apply to: a wrapping grid of small chips — every target visible at once */
.smjbg-applybar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:5px;width:100%;overflow:visible;padding:0;margin:0;flex:0 0 auto}
.smjbg-applycap{grid-column:1 / -1;font-family:"Barlow Condensed","Oswald",sans-serif;
font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
color:var(--muted);margin:0}
.smjbg-applybtn{display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:5px;width:auto;height:auto;min-width:0;
padding:9px 4px;border:1px solid var(--line);border-radius:var(--rad);
background:#fff;color:var(--color-text-secondary);font-size:10.5px;font-weight:500;line-height:1.15;
white-space:normal;text-align:center;cursor:pointer;
transition:border-color .12s ease,background-color .12s ease,color .12s ease}
/* the sizing that was missing: without it these SVGs drew at natural size */
.smjbg-applybtn svg{width:17px;height:17px;flex:0 0 auto;fill:none;
stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
opacity:.85}
.smjbg-applybtn svg *{fill:none;stroke:currentColor;stroke-width:1.5;
vector-effect:non-scaling-stroke}
.smjbg-applybtn b{font:inherit;color:inherit;font-weight:500}
.smjbg-applybtn::after{content:none}
.smjbg-applybtn:hover{border-color:var(--color-border-strong);background:var(--color-surface-subtle);color:var(--ink)}
.smjbg-applybtn.on{background:var(--brand-050);border-color:var(--brand);
color:var(--brand-700);font-weight:600}
.smjbg-applybtn.on svg{opacity:1;color:var(--brand)}
/* the carousel becomes a stack; the arrows have nothing left to do */
.smjbg-typonav{display:flex;flex-direction:column;gap:14px;width:100%;
max-width:100%;min-width:0;flex:0 0 auto}
.smjbg-typoarrow{display:none}
.smjbg-typorows{display:flex;flex-direction:column;flex-wrap:nowrap;gap:14px;
width:100%;max-width:100%;min-width:0;overflow:visible;
scroll-snap-type:none;flex:0 0 auto}
.smjbg-typocell{flex:0 0 auto;width:100%;min-width:0;max-width:100%;gap:6px;
scroll-snap-align:none}
.smjbg-typocap{font-family:"Barlow Condensed","Oswald",sans-serif;font-size:12px;
font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
white-space:normal;overflow:visible}
/* the controls in a cell are ordinary panel tiles again */
.smjbg-typorow{display:block;width:100%;min-width:0;overflow:visible}
.smjbg-typorow .smjbg-tg{display:block;width:100%;height:auto;margin:0}
.smjbg-typorow .smjbg-tg>.smjbg-lbl{display:none} /* the cell caption says it */
.smjbg-typorow .smjbg-tiles{display:grid;height:auto;align-items:stretch;
grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;overflow:visible}
.smjbg-typorow .smjbg-tile{width:auto;height:auto;min-width:0;flex:0 0 auto;
gap:4px;padding:7px 4px;justify-content:center}
.smjbg-typorow .smjbg-tile>*:not(.smjbg-tl){width:100%;height:auto;flex:0 0 auto}
.smjbg-typorow .smjbg-tile .smjbg-tl{margin-top:0;font-size:10px;line-height:1.15;
max-height:none;white-space:normal}
/* font tiles: the sample glyphs, then the family name */
.smjbg-typorow .smjbg-tg[data-tg="dFont"] .smjbg-tiles{
grid-template-columns:repeat(3,minmax(0,1fr))}
.smjbg-typorow .smjbg-tg[data-tg="dFont"] .smjbg-tile>.smjbg-fpv{display:flex;
flex-direction:column;align-items:center;justify-content:center;gap:0;
width:100%;height:26px;margin:0;line-height:1}
.smjbg-typorow .smjbg-fpv b{font-size:17px;font-weight:600;color:var(--ink);
line-height:1}
.smjbg-typorow .smjbg-fpv i{display:none}
.smjbg-typorow .smjbg-tg[data-tg="dFont"] .smjbg-tl{font-size:9.5px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* colour: swatches only, six to a row */
.smjbg-typorow .smjbg-tg[data-tg="dTypoColour"] .smjbg-tiles{
grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.smjbg-typorow .smjbg-tg[data-tg="dTypoColour"] .smjbg-tile{min-width:0;
max-width:none;padding:3px;aspect-ratio:1/1}
.smjbg-typorow .smjbg-tg[data-tg="dTypoColour"] .smjbg-tile>.smjbg-xpv{
display:flex;width:100%;height:100%;border-radius:2px}
.smjbg-typorow .smjbg-tg[data-tg="dTypoColour"] .smjbg-tl{display:none}
/* weight and size are plain labels — six per row, no preview band */
.smjbg-typorow .smjbg-tg[data-tg="dFontWeight"] .smjbg-tiles,
.smjbg-typorow .smjbg-tg[data-tg="dFontSize"] .smjbg-tiles{
grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.smjbg-typorow .smjbg-tg[data-tg="dFontWeight"] .smjbg-tile,
.smjbg-typorow .smjbg-tg[data-tg="dFontSize"] .smjbg-tile{padding:6px 2px}
.smjbg-typorow .smjbg-tg[data-tg="dFontWeight"] .smjbg-tile>*:not(.smjbg-tl),
.smjbg-typorow .smjbg-tg[data-tg="dFontSize"] .smjbg-tile>*:not(.smjbg-tl){display:none}
/* the greyed-until-a-target-is-chosen state stays exactly as authored */
.smjbg-typogrid .smjbg-typorow{opacity:.4}
.smjbg-typogrid.ready .smjbg-typorow{opacity:1}
/* --- 2 · the popup shell, positioned ---------------------------------- */
.smjbg-app[data-fs] .smjbg-fs{display:flex;position:fixed;top:0;right:0;bottom:0;
left:0;z-index:130;align-items:center;justify-content:center;padding:24px;
background:color-mix(in srgb,var(--color-text-primary) 52%,transparent)}
.smjbg-fs-dlg{display:flex;flex-direction:column;width:100%;max-width:460px;
max-height:100%;min-height:0;background:#fff;border:1px solid var(--line);
border-radius:var(--rad);overflow:hidden;
box-shadow:0 20px 52px color-mix(in srgb,var(--color-text-primary) 34%,transparent)}
.smjbg-fs-hd{flex:0 0 auto;display:flex;align-items:center;gap:10px;height:50px;
padding:0 12px;border-bottom:1px solid var(--line);background:#fff}
.smjbg-fs-t{flex:1 1 auto;min-width:0;text-align:center;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;
font-family:"Barlow Condensed","Oswald",sans-serif;font-size:16px;font-weight:600;
letter-spacing:.06em;text-transform:uppercase;color:var(--sub)}
.smjbg-fs-back,.smjbg-fs-done{display:inline-flex;align-items:center;gap:5px;
height:32px;padding:0 13px;border-radius:var(--rad);font-size:13px;
font-weight:500;line-height:1;cursor:pointer;white-space:nowrap}
.smjbg-fs-back{flex:0 0 auto;border:1px solid var(--line);background:#fff;
color:var(--n-800)}
.smjbg-fs-back:hover{border-color:var(--color-border-strong);background:var(--color-surface-subtle)}
.smjbg-fs-back svg{width:15px;height:15px;flex:0 0 auto;fill:none;
stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.smjbg-fs-back i{font-style:normal}
.smjbg-fs-done{flex:0 0 auto;margin-left:0;border:1px solid var(--brand);
background:var(--brand);color:#fff;font-weight:600}
.smjbg-fs-done:hover{background:var(--brand-700);border-color:var(--brand-700)}
.smjbg-fs-body{flex:1 1 auto;min-height:0;overflow-y:auto;
overscroll-behavior:contain;padding:16px}
.smjbg-fs-pane{display:none}
.smjbg-fs-pane.on{display:block;margin:0 auto;max-width:100%}
.smjbg-fs-pane>*{max-width:100%;min-width:0;margin:0 0 14px}
.smjbg-fs-pane>*:last-child{margin-bottom:0}
.smjbg-fs-pane .smjbg-tg{margin:0 0 14px}
.smjbg-fs-pane .smjbg-lbl{display:block;font-size:12px;margin-bottom:6px;
color:var(--muted)}
.smjbg-fs-pane .smjbg-uprow{display:block}
.smjbg-fs-pane .smjbg-uprow>*{width:100%;max-width:none;margin:0 0 12px}
.smjbg-fs-pane .smjbg-up,.smjbg-fs-pane .smjbg-photofx,
.smjbg-fs-pane .smjbg-bgimg{width:100%;max-width:100%}
.smjbg-fs-pane label.smjbg-f,.smjbg-fs-pane .smjbg-f{display:block;margin:0 0 12px}
.smjbg-fs-pane input[type=text],.smjbg-fs-pane input[type=tel],
.smjbg-fs-pane input[type=email],.smjbg-fs-pane textarea{width:100%;font-size:14px}
/* the background picture area is the upload control, as on mobile */
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-bgrow,
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-bgctl{display:block;width:100%}
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-bgthumb{width:100%;max-width:100%;
height:auto;aspect-ratio:4/3;margin:0 auto 14px;display:flex;
align-items:center;justify-content:center;border:1px dashed var(--color-border-strong);
border-radius:var(--rad);background:var(--color-surface-subtle);cursor:pointer;overflow:hidden;
position:relative}
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-bgthumb img{width:100%;height:100%;
object-fit:cover;display:none}
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-bgthumb.has img{display:block}
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-bgthumb.has{border-style:solid;
background:none}
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-bgthumb.has .smjbg-bgempty{display:none}
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-bgbtns{display:flex;justify-content:center;
gap:8px;flex-wrap:wrap;margin:0 0 14px}
.smjbg-bgempty{display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:6px;text-align:center;padding:14px;color:var(--sub)}
.smjbg-bgempty svg{width:26px;height:26px;fill:none;stroke:currentColor;
stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.smjbg-bgempty em{font-style:normal;font-size:12px}
/* the colour picker sits above the popup it was opened from */
.smjbg-app[data-cp] .smjbg-cp{z-index:140}
}
/* ==========================================================================
Semantic application pass — the roles, spent where they belong.
Restraint is the point: one solid brand fill (Generate), one quiet brand
tint (selection), teal reserved for the pricing mode, amber for sample
material, and neutrals doing everything else. Nothing here reads the
brochure's Color Theme.
========================================================================== */
@media(min-width:1024px){
/* --- surface hierarchy: page < workspace well < panel ------------------ */
.smjbg-app{background:var(--color-bg-page)}
.smjbg-appbar,.smjbg-secbar,.smjbg-mainrow,.smjbg-subrow{
background:var(--color-surface)}
.smjbg-prevcol{background:var(--color-bg-workspace)}
.smjbg-secbar{border-bottom:1px solid var(--color-border-subtle)}
.smjbg-shellmain,.smjbg-mainrow,.smjbg-subrow{border-color:var(--color-border-default)}
/* the brochure sheet is the brightest object in the well */
.smjbg-prevcol #out .smjbg-prev img,.smjbg-prevcol #out .smjbg-prev canvas{
box-shadow:0 1px 2px color-mix(in srgb,var(--color-shadow) 10%,transparent),
0 12px 32px color-mix(in srgb,var(--color-shadow) 15%,transparent)}
/* --- type ------------------------------------------------------------- */
.smjbg-proj{color:var(--color-text-primary)}
.smjbg-mogrp{color:var(--color-text-tertiary)}
.smjbg-subrow .smjbg-tg>b,.smjbg-subrow .smjbg-lbl,.smjbg-typocap,
.smjbg-applycap{color:var(--color-text-tertiary)}
.smjbg-subrow .smjbg-selval{color:var(--color-text-tertiary)}
/* --- primary action: the one solid fill ------------------------------- */
.smjbg-act-pri,.smjbg-act-pri:link{background:var(--color-action-primary);
border-color:var(--color-action-primary);color:var(--color-on-primary)}
.smjbg-act-pri:hover{background:var(--color-action-primary-hover);
border-color:var(--color-action-primary-hover)}
.smjbg-act-pri:active{background:var(--color-action-primary-active);
border-color:var(--color-action-primary-active)}
/* --- secondary action: white, brand text, quiet brand border ---------- */
.smjbg-act-sec{background:var(--color-surface);
border-color:var(--color-action-secondary-border);
color:var(--color-action-secondary-text)}
.smjbg-act-sec:hover{background:var(--color-action-secondary-hover);
border-color:var(--color-action-primary);color:var(--color-action-secondary-text)}
/* --- tertiary / icon actions: fully neutral --------------------------- */
.smjbg-act{background:var(--color-surface);border-color:var(--color-border-default);
color:var(--color-text-secondary)}
.smjbg-act:hover{background:var(--color-state-hover);
border-color:var(--color-state-hover-border);color:var(--color-text-primary)}
.smjbg-act.on{background:var(--color-state-selected);
border-color:var(--color-state-selected-quiet);
color:var(--color-state-selected-text)}
.smjbg-appbar .smjbg-undo,.smjbg-appbar .smjbg-pmcaret{
color:var(--color-text-secondary);border-color:var(--color-border-default)}
.smjbg-appbar .smjbg-undo:hover:not(:disabled),
.smjbg-appbar .smjbg-pmcaret:hover{background:var(--color-state-hover);
color:var(--color-text-primary)}
.smjbg-genmenu{background:var(--color-surface);
border-color:var(--color-border-default);
box-shadow:0 12px 32px color-mix(in srgb,var(--color-shadow) 20%,transparent)}
.smjbg-genmenu button{color:var(--color-text-primary)}
.smjbg-genmenu button span{color:var(--color-text-tertiary)}
.smjbg-genmenu button:hover{background:var(--color-state-selected)}
/* --- the pricing mode is a MODE, not an action: the teal voice -------- */
.smjbg-appbar .smjbg-tgl{border-color:var(--color-border-default);
background:var(--color-surface)}
.smjbg-appbar .smjbg-tgl .tt{color:var(--color-text-secondary)}
.smjbg-appbar .smjbg-tgl .sw{background:var(--n-300)}
.smjbg-appbar .smjbg-tgl.on{border-color:var(--a-200);background:var(--a-050)}
.smjbg-appbar .smjbg-tgl.on .tt{color:var(--a-700)}
.smjbg-appbar .smjbg-tgl input:checked ~ .sw{background:var(--a-600)}
/* --- section switches: neutral until on, then the quiet brand tint ---- */
.smjbg-secbar .smjbg-secchip{background:var(--color-surface);
border-color:transparent}
.smjbg-secbar .smjbg-secchip b{color:var(--color-text-secondary)}
.smjbg-secbar .smjbg-secchip i{background:var(--n-300)}
.smjbg-secbar .smjbg-secchip:hover{background:var(--color-state-hover);
border-color:var(--color-border-default)}
.smjbg-secbar .smjbg-secchip.on{background:var(--color-state-selected);
border-color:var(--color-state-selected-quiet)}
.smjbg-secbar .smjbg-secchip.on b{color:var(--color-state-selected-text)}
.smjbg-secbar .smjbg-secchip.on i{background:var(--color-action-primary)}
/* --- rail ------------------------------------------------------------- */
.smjbg-mo{color:var(--color-text-secondary);background:none;
border-color:transparent}
.smjbg-mo:hover{background:var(--color-state-hover);
color:var(--color-text-primary)}
.smjbg-mo.on{background:var(--color-state-selected);
color:var(--color-state-selected-text);
box-shadow:inset 2px 0 0 var(--color-state-selected-border)}
/* --- option tiles ----------------------------------------------------- */
.smjbg-subrow .smjbg-tile,.smjbg-applybtn{background:var(--color-surface);
border-color:var(--color-border-default);color:var(--color-text-secondary)}
.smjbg-subrow .smjbg-tile:hover,.smjbg-applybtn:hover{
border-color:var(--color-state-hover-border);background:var(--color-state-hover)}
.smjbg-subrow .smjbg-tile.sel,.smjbg-applybtn.on{
background:var(--color-state-selected);
border-color:var(--color-state-selected-border);box-shadow:none}
.smjbg-subrow .smjbg-tile.sel .smjbg-tl,.smjbg-applybtn.on{
color:var(--color-state-selected-text)}
.smjbg-subrow .smjbg-tile.sel::after{background-color:var(--color-action-primary)}
.smjbg-subrow .smjbg-tl{color:var(--color-text-primary)}
/* --- layout thumbnails: neutral paper, brand only when chosen --------- */
.smjbg-subrow .smjbg-lopv,.smjbg-subrow .smjbg-thpv{
background:var(--color-surface);border-color:var(--color-border-default)}
.smjbg-subrow .smjbg-lopv .img,
.smjbg-subrow .smjbg-lopv.gen .i1{background:var(--n-200);background-image:none}
.smjbg-subrow .smjbg-lopv.gen .i2{background:var(--n-100);background-image:none}
.smjbg-subrow .smjbg-lopv .hd,.smjbg-subrow .smjbg-lopv.gen .hd{background:var(--n-400)}
.smjbg-subrow .smjbg-lopv .tx,.smjbg-subrow .smjbg-lopv.gen .h2{background:var(--n-300)}
.smjbg-subrow .smjbg-lopv.ca .rw .k{background:var(--n-300)}
.smjbg-subrow .smjbg-lopv.ca .rw .v{background:var(--n-400)}
.smjbg-subrow .smjbg-lopv .tag,.smjbg-subrow .smjbg-lopv.gen .tg,
.smjbg-subrow .smjbg-lopv.gen .tt{background:var(--p-200);opacity:1}
.smjbg-subrow .smjbg-lopv.gen .sp{background:var(--n-200)}
.smjbg-subrow .smjbg-lopv.gen .hl{background:var(--n-050);
border-color:var(--color-border-default)}
.smjbg-subrow .smjbg-lopv.gen .pr{background:var(--color-surface);
border-color:var(--color-border-default)}
.smjbg-subrow .smjbg-lopv.gen .ft{background:var(--n-100)}
.smjbg-subrow .smjbg-tile.sel .smjbg-lopv,
.smjbg-subrow .smjbg-tile.sel .smjbg-thpv{border-color:var(--p-200)}
.smjbg-subrow .smjbg-tile.sel .smjbg-lopv.gen{outline-color:var(--p-200)}
.smjbg-subrow .smjbg-tile.sel .smjbg-lopv .tag,
.smjbg-subrow .smjbg-tile.sel .smjbg-lopv.gen .tg,
.smjbg-subrow .smjbg-tile.sel .smjbg-lopv.gen .tt{
background:var(--color-action-primary)}
/* --- empty state: a page waiting to be filled ------------------------- */
.smjbg-prevcol .smjbg-prevempty{background:var(--color-surface);
border-color:var(--color-border-default);color:var(--color-text-primary)}
.smjbg-pe-sub{color:var(--color-text-tertiary)}
/* three distinct greys, so the skeleton still reads as image/heading/text */
.smjbg-pe-skel{background:var(--color-surface-subtle);
border-color:var(--color-border-default)}
.smjbg-pe-skel i{background:var(--n-100)}
.smjbg-pe-skel .im{background:var(--n-200)}
.smjbg-pe-skel .h{background:var(--n-300)}
.smjbg-pe-skel .l{background:var(--n-100)}
.smjbg-pe-skel .tg{background:var(--p-100)}
/* --- popup and preview overlay --------------------------------------- */
.smjbg-app[data-fs] .smjbg-fs,.smjbg-pv{
background:color-mix(in srgb,var(--n-900) 55%,transparent)}
.smjbg-fs-dlg{background:var(--color-surface);
border-color:var(--color-border-default);
box-shadow:0 20px 52px color-mix(in srgb,var(--color-shadow) 32%,transparent)}
.smjbg-fs-hd,.smjbg-pv-bar{background:var(--color-surface);
border-color:var(--color-border-default)}
.smjbg-fs-t,.smjbg-pv-bar b{color:var(--color-text-tertiary)}
.smjbg-fs-back,.smjbg-pv-bar button{background:var(--color-surface);
border-color:var(--color-border-default);color:var(--color-text-secondary)}
.smjbg-fs-back:hover,.smjbg-pv-bar button:hover{background:var(--color-state-hover);
border-color:var(--color-state-hover-border);color:var(--color-text-primary)}
.smjbg-fs-done{background:var(--color-action-primary);
border-color:var(--color-action-primary);color:var(--color-on-primary)}
.smjbg-fs-done:hover{background:var(--color-action-primary-hover);
border-color:var(--color-action-primary-hover)}
.smjbg-fs-pane .smjbg-lbl{color:var(--color-text-tertiary)}
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-bgthumb{
border-color:var(--color-border-strong);background:var(--color-surface-subtle)}
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-bgthumb:hover{
border-color:var(--color-action-primary);
background:var(--color-action-secondary-hover)}
/* --- zoom dock -------------------------------------------------------- */
.smjbg-zoombar{background:var(--color-surface);
border-color:var(--color-border-default)}
.smjbg-zoombar button{color:var(--color-text-secondary)}
.smjbg-zoombar button:hover{background:var(--color-state-hover);
color:var(--color-text-primary)}
}
/* --- status roles: one shape for all four, at every width --------------- */
.smjbg-demo{border-color:var(--color-warning-border);
background:var(--color-warning-bg)}
.smjbg-demo-badge{background:var(--color-warning);color:var(--wa-900)}
.smjbg-toast{background:var(--color-surface-inverse);color:var(--color-text-inverse)}
.smjbg-toast.ok{background:var(--color-success)}
.smjbg-toast.warn{background:var(--color-warning-text)}
.smjbg-toast.err{background:var(--color-error)}
.smjbg-x{color:var(--color-error)}
.smjbg-x:hover{background:var(--color-error-bg);
border-color:var(--color-error-border)}
.smjbg-items .del:hover{border-color:var(--color-error);color:var(--color-error)}
/* --- form controls: fill carries the affordance, focus is the indicator - */
.smjbg-app input[type=text],.smjbg-app input[type=number],.smjbg-app input[type=date],
.smjbg-app input[type=email],.smjbg-app input[type=tel],.smjbg-app select,
.smjbg-app textarea{background:var(--color-surface);
border-color:var(--color-border-strong);color:var(--color-text-primary)}
.smjbg-app input::placeholder,.smjbg-app textarea::placeholder{
color:var(--color-text-placeholder)}
.smjbg-app input:hover:not(:focus),.smjbg-app select:hover:not(:focus),
.smjbg-app textarea:hover:not(:focus){border-color:var(--color-border-control)}
.smjbg-app input:focus,.smjbg-app select:focus,.smjbg-app textarea:focus{
border-color:var(--color-focus-ring);
box-shadow:0 0 0 3px color-mix(in srgb,var(--color-focus-ring) 20%,transparent)}
/* a 5:1 focus indicator on every interactive element, keyboard only */
.smjbg-app :focus-visible{outline:2px solid var(--color-focus-ring);
outline-offset:2px}
/* --- disabled: one treatment everywhere ------------------------------- */
.smjbg-app button:disabled,.smjbg-app input:disabled,.smjbg-app select:disabled,
.smjbg-app textarea:disabled,.smjbg-app .smjbg-b[disabled]{
background:var(--color-disabled-bg);border-color:var(--color-disabled-border);
color:var(--color-disabled-text);cursor:not-allowed;opacity:1}
.smjbg-app .smjbg-act-pri:disabled{background:var(--color-disabled-bg);
border-color:var(--color-disabled-border);color:var(--color-disabled-text)}
::selection{background:var(--color-state-selected-quiet);
color:var(--color-text-primary)}
/* ==========================================================================
Option tiles inside the popups (Background, Image 1, Image 2).
These panes inherited the mobile one-line strip, so rows like Background
Pattern and Card Style ran past the dialog edge with nothing to scroll.
In a 460px dialog there is room to wrap, so they wrap — every option
visible, no hidden horizontal scroll.
========================================================================== */
@media(min-width:1024px){
.smjbg-fs-body{overflow-x:hidden}
.smjbg-fs-pane[data-fs] .smjbg-tg{display:block;width:100%;height:auto;margin:0 0 16px}
/* [data-fs] is on the selector deliberately: the per-popup rules further up
(.smjbg-fs-pane[data-fs="bgimg"] .smjbg-tiles etc.) set display:flex with an
attribute selector, so a plain .smjbg-fs-pane descendant selector loses to
them and the rows kept their un-scrollable single line. */
.smjbg-fs-pane[data-fs] .smjbg-tiles,
.smjbg-fs-pane[data-fs] .smjbg-toggles,
.smjbg-fs-pane[data-fs] .smjbg-colr{display:grid;height:auto;width:100%;
max-width:100%;min-width:0;flex:0 0 auto;
grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:7px;
align-items:stretch;overflow:visible;white-space:normal;flex-wrap:wrap;
padding-bottom:0}
.smjbg-fs-pane[data-fs] .smjbg-tile,
.smjbg-fs-pane[data-fs] .smjbg-toggles .smjbg-tgl{width:auto;height:auto;min-width:0;
flex:0 0 auto;gap:6px;padding:8px 5px;justify-content:flex-start;
overflow:hidden}
.smjbg-fs-pane[data-fs] .smjbg-tile>*:not(.smjbg-tl){width:100%;height:auto;
flex:0 0 auto}
.smjbg-fs-pane[data-fs] .smjbg-tile .smjbg-tl{margin-top:auto;font-size:10.5px;
line-height:1.2;max-height:none;white-space:normal}
/* the preview band keeps one height across a row, whatever it draws */
.smjbg-fs-pane[data-fs] .smjbg-swpv,.smjbg-fs-pane[data-fs] .smjbg-cdpv,
.smjbg-fs-pane[data-fs] .smjbg-sppv,.smjbg-fs-pane[data-fs] .smjbg-alpv,
.smjbg-fs-pane[data-fs] .smjbg-ptpv{width:100%;height:36px;margin:0}
.smjbg-fs-pane[data-fs] .smjbg-thpv,.smjbg-fs-pane[data-fs] .smjbg-lopv{
width:38px;height:56px;margin:0 auto}
.smjbg-fs-pane[data-fs] .smjbg-fpv{min-height:30px;font-size:14px}
.smjbg-fs-pane[data-fs] .smjbg-cpv{height:30px}
/* the effect/card-style groups carry their own heading inside a popup */
.smjbg-fs-pane .smjbg-photofx{padding:0;margin:0 0 16px;border:0;background:none;
height:auto;width:100%}
.smjbg-fs-pane .smjbg-photofx>h4{display:block;margin:0 0 8px;
font-family:"Barlow Condensed","Oswald",sans-serif;font-size:13px;
font-weight:600;letter-spacing:.08em;text-transform:uppercase;
color:var(--color-text-tertiary)}
.smjbg-fs-pane .smjbg-photofx>p{display:block;margin:0 0 10px;font-size:12.5px;
line-height:1.45;color:var(--color-text-tertiary)}
/* sliders and their captions span the dialog */
.smjbg-fs-pane input[type=range]{width:100%}
.smjbg-fs-pane .smjbg-sharp,.smjbg-fs-pane .smjbg-sharp-hd{width:100%;
display:block}
}
/* ==========================================================================
The popup stepper: walk the brochure's content sections without closing.
A footer, so it reads as "where am I in the sequence" rather than as
another action competing with Done.
========================================================================== */
.smjbg-fs-nav{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
gap:10px;padding:10px 12px;border-top:1px solid var(--color-border-subtle);
background:var(--color-surface-subtle)}
.smjbg-fs-nav[hidden]{display:none}
.smjbg-fs-step{display:inline-flex;align-items:center;gap:5px;height:32px;
padding:0 12px;border:1px solid var(--color-border-default);
border-radius:var(--rad);background:var(--color-surface);
color:var(--color-text-secondary);font:inherit;font-size:13px;font-weight:500;
line-height:1;cursor:pointer;white-space:nowrap;
transition:border-color .12s ease,background-color .12s ease,color .12s ease}
.smjbg-fs-step i{font-style:normal}
.smjbg-fs-step svg{width:15px;height:15px;flex:0 0 auto;fill:none;
stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.smjbg-fs-step:hover:not(:disabled){border-color:var(--color-state-hover-border);
background:var(--color-state-hover);color:var(--color-text-primary)}
.smjbg-fs-step:disabled{background:var(--color-disabled-bg);
border-color:var(--color-disabled-border);color:var(--color-disabled-text);
cursor:not-allowed}
.smjbg-fs-count{flex:1 1 auto;min-width:0;text-align:center;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:500;
color:var(--color-text-tertiary)}
@media(max-width:520px){
.smjbg-fs-step i{display:none}
.smjbg-fs-step{padding:0 10px}
}
/* ==========================================================================
Density + selection pass.
Selection is carried by the object itself — tint, border, text colour —
never by a mark stamped inside it. Single-select tiles therefore drop the
corner check entirely; the multi-select cards (Other Elements) keep their
checkbox, because there the box is the control, not a selection badge.
Everything is tightened so more fits in the panel height, and every option
container is a grid: the column scrolls vertically and nothing scrolls
sideways.
========================================================================== */
@media(min-width:1024px){
/* --- vertical only, one scroller ------------------------------------- */
.smjbg-subrow{overflow-x:hidden;overflow-y:auto;padding:10px 12px 20px}
.smjbg-sub.on,.smjbg-sub{overflow:visible;white-space:normal}
.smjbg-subrow .smjbg-tiles,.smjbg-subrow .smjbg-colr,
.smjbg-subrow .smjbg-toggles,.smjbg-typorow .smjbg-tiles,
.smjbg-applybar,.smjbg-typorows,.smjbg-typonav,.smjbg-typogrid{
overflow:visible;touch-action:auto}
/* --- no indicator inside a single-select option ---------------------- */
.smjbg-subrow .smjbg-tile.sel::after,
.smjbg-typorow .smjbg-tile.sel::after,
.smjbg-fs-pane[data-fs] .smjbg-tile.sel::after,
.smjbg-applybtn.on::after{content:none;display:none}
/* the state is the object: tint + border + text, one step at a time */
.smjbg-subrow .smjbg-tile,.smjbg-typorow .smjbg-tile,
.smjbg-fs-pane[data-fs] .smjbg-tile,.smjbg-applybtn{
background:var(--color-surface);border:1px solid var(--color-border-default);
color:var(--color-text-secondary);box-shadow:none;
transition:background-color .12s ease,border-color .12s ease,color .12s ease}
.smjbg-subrow .smjbg-tile:hover,.smjbg-typorow .smjbg-tile:hover,
.smjbg-fs-pane[data-fs] .smjbg-tile:hover,.smjbg-applybtn:hover{
background:var(--color-state-hover);
border-color:var(--color-state-hover-border);
color:var(--color-text-primary);box-shadow:none}
.smjbg-subrow .smjbg-tile.sel,.smjbg-typorow .smjbg-tile.sel,
.smjbg-fs-pane[data-fs] .smjbg-tile.sel,.smjbg-applybtn.on{
background:var(--color-state-selected);
border-color:var(--color-state-selected-border);
color:var(--color-state-selected-text);box-shadow:none}
.smjbg-subrow .smjbg-tile.sel .smjbg-tl,
.smjbg-typorow .smjbg-tile.sel .smjbg-tl,
.smjbg-fs-pane[data-fs] .smjbg-tile.sel .smjbg-tl{
color:var(--color-state-selected-text);font-weight:600}
/* --- compact panel rhythm -------------------------------------------- */
.smjbg-subrow .smjbg-tg{margin:0 0 12px}
.smjbg-subrow .smjbg-tg>b,.smjbg-subrow .smjbg-lbl,
.smjbg-typocap,.smjbg-applycap,.smjbg-mogrp{font-size:11px;letter-spacing:.09em;
margin-bottom:5px;line-height:1}
.smjbg-subrow .smjbg-tiles,
.smjbg-subrow .smjbg-tiles.g-md,
.smjbg-subrow .smjbg-tiles.g-lg{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.smjbg-subrow .smjbg-tiles.g-sm{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.smjbg-subrow .smjbg-tile{gap:4px;padding:5px 4px}
.smjbg-subrow .smjbg-tl{font-size:10px;line-height:1.15}
.smjbg-subrow .smjbg-lopv,.smjbg-subrow .smjbg-thpv{width:38px;height:56px;
padding:3px;gap:2px}
.smjbg-subrow .smjbg-selval{font-size:11px;margin:5px 2px 0}
.smjbg-mainrow{padding:6px 6px 14px}
.smjbg-mogrp{padding:11px 10px 4px}
.smjbg-mo{padding:6px 10px;font-size:13px}
/* --- typography: same rhythm, every row on one line ------------------ */
.smjbg-typogrid{gap:10px}
.smjbg-applybar{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.smjbg-applybtn{padding:6px 3px;gap:3px;font-size:10px;line-height:1.1}
.smjbg-applybtn svg{width:15px;height:15px}
.smjbg-typonav,.smjbg-typorows{gap:10px}
.smjbg-typocell{gap:4px}
.smjbg-typorow .smjbg-tile{padding:5px 3px;gap:3px}
.smjbg-typorow .smjbg-tile .smjbg-tl{font-size:9.5px}
/* fonts: four to a row */
.smjbg-typorow .smjbg-tg[data-tg="dFont"] .smjbg-tiles{
grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.smjbg-typorow .smjbg-tg[data-tg="dFont"] .smjbg-tile>.smjbg-fpv{height:22px}
.smjbg-typorow .smjbg-fpv b{font-size:15px}
.smjbg-typorow .smjbg-tg[data-tg="dFont"] .smjbg-tl{font-size:9px}
/* weight and size: all seven steps on one line, no wrap */
.smjbg-typorow .smjbg-tg[data-tg="dFontWeight"] .smjbg-tiles,
.smjbg-typorow .smjbg-tg[data-tg="dFontSize"] .smjbg-tiles{
grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.smjbg-typorow .smjbg-tg[data-tg="dFontWeight"] .smjbg-tile,
.smjbg-typorow .smjbg-tg[data-tg="dFontSize"] .smjbg-tile{padding:5px 1px}
.smjbg-typorow .smjbg-tg[data-tg="dFontWeight"] .smjbg-tl,
.smjbg-typorow .smjbg-tg[data-tg="dFontSize"] .smjbg-tl{font-size:9.5px}
/* colour: seven swatches to a row. A tint cannot show selection on a
swatch, so the ring sits OUTSIDE the button — nothing is drawn on top
of the colour the user is choosing. */
.smjbg-typorow .smjbg-tg[data-tg="dTypoColour"] .smjbg-tiles{
grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.smjbg-typorow .smjbg-tg[data-tg="dTypoColour"] .smjbg-tile{padding:2px;
aspect-ratio:1/1;background:var(--color-surface)}
.smjbg-typorow .smjbg-tg[data-tg="dTypoColour"] .smjbg-tile.sel{
background:var(--color-surface);border-color:var(--color-surface);
outline:2px solid var(--color-action-primary);outline-offset:1px}
.smjbg-typorow .smjbg-tg[data-tg="dTypoColour"] .smjbg-tile>.smjbg-xpv{
border-radius:2px}
/* --- popups follow the same density ---------------------------------- */
.smjbg-fs-body{padding:12px}
.smjbg-fs-pane[data-fs] .smjbg-tg{margin:0 0 12px}
.smjbg-fs-pane[data-fs] .smjbg-tiles,
.smjbg-fs-pane[data-fs] .smjbg-toggles,
.smjbg-fs-pane[data-fs] .smjbg-colr{
grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:5px}
.smjbg-fs-pane[data-fs] .smjbg-tile{padding:5px 4px;gap:4px}
.smjbg-fs-pane[data-fs] .smjbg-tile .smjbg-tl{font-size:10px}
.smjbg-fs-pane[data-fs] .smjbg-swpv,.smjbg-fs-pane[data-fs] .smjbg-cdpv,
.smjbg-fs-pane[data-fs] .smjbg-sppv,.smjbg-fs-pane[data-fs] .smjbg-alpv,
.smjbg-fs-pane[data-fs] .smjbg-ptpv{height:30px}
.smjbg-fs-pane[data-fs] .smjbg-thpv,.smjbg-fs-pane[data-fs] .smjbg-lopv{
width:32px;height:48px}
.smjbg-fs-pane>*{margin:0 0 12px}
/* the multi-select cards keep their checkbox: there the box IS the control */
.smjbg-subrow .smjbg-toggles{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.smjbg-subrow .smjbg-toggles .smjbg-tgl{width:auto;height:auto;padding:7px 5px;
gap:5px}
}
/* the editor is the whole page: nothing renders below it at any width >=1024 */
@media(min-width:1024px){
.smjbg-app .smjbg-formcol,.smjbg-app .smjbg-hd,.smjbg-app .smjbg-steps{display:none}
}
/* the heading above each photograph in the shared Images panel */
.smjbg-imghd{font-family:"Barlow Condensed","Oswald",sans-serif;font-size:11px;
font-weight:600;letter-spacing:.09em;text-transform:uppercase;
color:var(--color-text-tertiary);line-height:1;margin:0 0 6px;padding-top:2px}
.smjbg-imghd + *{margin-top:0}
.smjbg-sub[data-opt="images"] .smjbg-imghd ~ .smjbg-imghd{margin-top:14px}
@media(min-width:1024px){
/* Background and Images are panels now: their blocks size to the column and
stack, so nothing sits in a blank right-hand area. */
.smjbg-sub[data-opt="images"],.smjbg-sub[data-opt="bgimg"]{display:none}
.smjbg-sub[data-opt="images"].on,.smjbg-sub[data-opt="bgimg"].on{display:block}
.smjbg-sub[data-opt="images"]>*,.smjbg-sub[data-opt="bgimg"]>*{
width:100%;max-width:100%;min-width:0;margin:0 0 12px}
.smjbg-sub[data-opt="images"] .smjbg-up,
.smjbg-sub[data-opt="bgimg"] .smjbg-bgimg{width:100%;max-width:100%}
/* the upload box: a compact drop target that fills the column */
.smjbg-sub[data-opt="images"] .smjbg-sbox,
.smjbg-sub[data-opt="bgimg"] .smjbg-bgthumb{width:100%;height:auto;
aspect-ratio:4/3;min-height:0}
.smjbg-sub[data-opt="images"] .smjbg-uprow{display:block}
.smjbg-sub[data-opt="images"] .smjbg-uprow>*{width:100%;margin:0 0 8px}
/* effects and pattern tiles follow the panel's grid, never a strip */
.smjbg-sub[data-opt="images"] .smjbg-tiles,
.smjbg-sub[data-opt="bgimg"] .smjbg-tiles,
.smjbg-sub[data-opt="bgimg"] .smjbg-colr{display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;overflow:visible;
white-space:normal;height:auto;width:100%}
.smjbg-sub[data-opt="bgimg"] .smjbg-colr{
grid-template-columns:repeat(6,minmax(0,1fr))}
.smjbg-sub[data-opt="images"] input[type=range],
.smjbg-sub[data-opt="bgimg"] input[type=range]{width:100%}
.smjbg-sub[data-opt="images"] .smjbg-photofx{padding:0;border:0;background:none;
width:100%;height:auto;margin:0 0 12px}
.smjbg-sub[data-opt="images"] .smjbg-photofx>h4{display:block;margin:0 0 6px;
font-family:"Barlow Condensed","Oswald",sans-serif;font-size:11px;
font-weight:600;letter-spacing:.09em;text-transform:uppercase;
color:var(--color-text-tertiary)}
.smjbg-sub[data-opt="images"] .smjbg-photofx>p{display:block;margin:0 0 8px;
font-size:12px;line-height:1.4;color:var(--color-text-tertiary)}
}
/* ==========================================================================
Preview: the brochure edge to edge, top to bottom.
The overlay is mounted on (see openPreview) so it is always the size
of the viewport, and it is styled outside the >=1024px block so the full
screen behaves the same at every width. The bar floats over the sheet
instead of taking a row off the top, and the stage has no padding — the
sheet is portrait, so height is the only dimension that limits it.
========================================================================== */
.smjbg-pv{display:none;position:fixed;top:0;right:0;bottom:0;left:0;
width:100vw;height:100vh;height:100dvh;z-index:2147483000;margin:0;padding:0;
background:color-mix(in srgb,#282c2f 72%,transparent)}
.smjbg-pv.on{display:block}
.smjbg-pv-stage{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;
align-items:center;justify-content:center;padding:0;margin:0}
.smjbg-pv-stage img{width:100%;height:100%;max-width:100%;max-height:100%;
object-fit:contain;display:block;box-shadow:none}
/* floating bar: only as wide as its contents, so it never crops the sheet */
.smjbg-pv-bar{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;
align-items:center;justify-content:space-between;gap:12px;height:auto;
padding:10px 14px;background:none;border:0;pointer-events:none}
.smjbg-pv-bar b,.smjbg-pv-bar button{pointer-events:auto}
.smjbg-pv-bar b{font-family:"Barlow Condensed","Oswald",sans-serif;font-size:15px;
font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;
text-shadow:0 1px 3px rgba(0,0,0,.5)}
.smjbg-pv-bar button{height:32px;padding:0 14px;border:1px solid rgba(255,255,255,.35);
border-radius:4px;background:rgba(20,22,25,.55);color:#fff;font-size:13px;
font-weight:500;line-height:1;cursor:pointer;
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.smjbg-pv-bar button:hover{background:rgba(20,22,25,.8);
border-color:rgba(255,255,255,.6)}
@media(min-width:1024px){
/* override the earlier flex-column version of this overlay */
.smjbg-pv{display:none;flex-direction:unset}
.smjbg-pv.on{display:block}
.smjbg-pv-bar{height:auto;padding:10px 16px;background:none;
border-bottom:0}
.smjbg-pv-bar b{color:#fff}
.smjbg-pv-stage{padding:0}
}
/* ==========================================================================
Footer and the document reader.
The footer is a real footer: it sits after the editor and the page scrolls
to reach it. That means unpinning the shell, which is done at >=1024px
ONLY — on a phone the fixed shell is what keeps the browser's address bar
from clipping the controls, so it stays exactly as it was.
========================================================================== */
.smjbg-foot{order:99;width:100%;background:var(--color-surface);
border-top:1px solid var(--color-border-default)}
.smjbg-foot-in{display:flex;flex-wrap:wrap;align-items:center;
justify-content:space-between;gap:10px 20px;max-width:1200px;margin:0 auto;
padding:12px 20px}
.smjbg-foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px}
.smjbg-foot-links button{border:0;background:none;padding:5px 8px;
border-radius:var(--rad);font:inherit;font-size:13px;font-weight:500;
color:var(--color-text-secondary);cursor:pointer;
transition:background-color .12s ease,color .12s ease}
.smjbg-foot-links button:hover{background:var(--color-state-hover);
color:var(--color-text-primary)}
.smjbg-foot-copy{margin:0;font-size:12px;color:var(--color-text-tertiary)}
/* --- the reader ------------------------------------------------------------ */
.smjbg-doc{display:none;position:fixed;top:0;right:0;bottom:0;left:0;
width:100vw;height:100vh;height:100dvh;z-index:2147483001;
align-items:center;justify-content:center;padding:20px;
background:color-mix(in srgb,#282c2f 62%,transparent)}
.smjbg-doc.on{display:flex}
.smjbg-doc-dlg{display:flex;flex-direction:column;width:100%;max-width:660px;
max-height:100%;min-height:0;background:var(--color-surface);
border:1px solid var(--color-border-default);border-radius:var(--rad);
overflow:hidden;box-shadow:0 20px 52px color-mix(in srgb,#282c2f 34%,transparent)}
.smjbg-doc-hd{flex:0 0 auto;display:flex;align-items:center;
justify-content:space-between;gap:12px;padding:12px 16px;
border-bottom:1px solid var(--color-border-default)}
.smjbg-doc-hd b{font-family:"Barlow Condensed","Oswald",sans-serif;font-size:19px;
font-weight:600;letter-spacing:.03em;color:var(--color-text-primary)}
.smjbg-doc-hd button{height:32px;padding:0 14px;border:1px solid var(--color-border-default);
border-radius:var(--rad);background:var(--color-surface);
color:var(--color-text-secondary);font:inherit;font-size:13px;font-weight:500;
cursor:pointer}
.smjbg-doc-hd button:hover{background:var(--color-state-hover);
border-color:var(--color-state-hover-border);color:var(--color-text-primary)}
.smjbg-doc-body{flex:1 1 auto;min-height:0;overflow-y:auto;
overscroll-behavior:contain;padding:18px 20px 24px}
.smjbg-doc-body:focus-visible{outline:2px solid var(--color-focus-ring);
outline-offset:-2px}
.smjbg-doc-body h4{margin:18px 0 5px;font-family:"Barlow Condensed","Oswald",sans-serif;
font-size:15px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
color:var(--color-text-tertiary)}
.smjbg-doc-body h4:first-child{margin-top:0}
.smjbg-doc-body p{margin:0 0 10px;font-size:14px;line-height:1.6;
color:var(--color-text-secondary);text-wrap:pretty}
.smjbg-doc-body b{color:var(--color-text-primary);font-weight:600}
.smjbg-doc-note{margin:0 0 16px !important;padding:8px 11px;font-size:12.5px !important;
background:var(--color-warning-bg);border:1px solid var(--color-warning-border);
border-radius:var(--rad);color:var(--color-warning-text) !important}
@media(min-width:1024px){
/* the shell is no longer pinned, so the footer can follow the editor and the
page scrolls to it; the editor itself still fills the first screenful */
.smjbg-app{position:static;height:auto;min-height:0;overflow:visible}
/* the overlays carry -app only to inherit the tokens — they must keep their
own fixed, full-viewport geometry, so they win on specificity */
.smjbg-doc.smjbg-app,.smjbg-pv.smjbg-app{position:fixed;top:0;right:0;bottom:0;
left:0;width:100vw;height:100vh;height:100dvh;overflow:hidden}
.smjbg-shellmain{height:calc(100vh - var(--top));flex:0 0 auto}
.smjbg-foot{order:0}
.smjbg-foot-in{padding:14px 24px}
.smjbg-foot-links button{font-size:13.5px;padding:6px 10px}
}
/* ==========================================================================
The Insert layer.
The overlay is pinned to the display canvas (its box is set in INS.paint),
so handles sit on the sheet at any zoom. It draws nothing that appears in
the export — the objects themselves are painted on the canvas by
drawInserts(); everything here is selection furniture.
========================================================================== */
.smjbg-inslayer{position:absolute;left:0;top:0;z-index:6;pointer-events:none;
touch-action:none;transform-origin:center center;
/* matches the display canvas's own transition so the sheet and its handles
move together rather than the handles arriving a frame late */
transition:transform .08s}
.smjbg-inslayer > *{pointer-events:auto}
.smjbg-insbox{position:absolute;box-sizing:border-box;cursor:move;
border:1px dashed transparent;transform-origin:50% 50%}
.smjbg-insbox:hover{border-color:color-mix(in srgb,var(--color-action-primary) 55%,transparent)}
.smjbg-insbox.on{border:1px solid var(--color-action-primary);
border-style:solid;background:color-mix(in srgb,var(--color-action-primary) 6%,transparent)}
/* eight handles, plus the rotate grip above the box */
.smjbg-insbox .g{position:absolute;width:11px;height:11px;box-sizing:border-box;
background:var(--color-surface);border:1.5px solid var(--color-action-primary);
border-radius:2px;margin:-6px 0 0 -6px}
.smjbg-insbox .g.nw{left:0;top:0;cursor:nwse-resize}
.smjbg-insbox .g.n{left:50%;top:0;cursor:ns-resize}
.smjbg-insbox .g.ne{left:100%;top:0;cursor:nesw-resize}
.smjbg-insbox .g.e{left:100%;top:50%;cursor:ew-resize}
.smjbg-insbox .g.se{left:100%;top:100%;cursor:nwse-resize}
.smjbg-insbox .g.s{left:50%;top:100%;cursor:ns-resize}
.smjbg-insbox .g.sw{left:0;top:100%;cursor:nesw-resize}
.smjbg-insbox .g.w{left:0;top:50%;cursor:ew-resize}
.smjbg-insbox .rot{position:absolute;left:50%;top:-26px;width:13px;height:13px;
margin-left:-7px;box-sizing:border-box;border-radius:50%;
background:var(--color-action-primary);border:2px solid var(--color-surface);
box-shadow:0 1px 3px color-mix(in srgb,var(--color-shadow) 40%,transparent);
cursor:grab}
.smjbg-insbox .rot::after{content:"";position:absolute;left:50%;top:11px;
width:1px;height:14px;margin-left:-.5px;
background:var(--color-action-primary);opacity:.7}
/* --- the panel ---------------------------------------------------------- */
.smjbg-insseg{display:grid;grid-template-columns:1fr 1fr;gap:4px;
padding:3px;margin:0 0 8px;background:var(--color-surface-sunken);
border-radius:var(--rad)}
.smjbg-insseg button{border:1px solid transparent;background:none;padding:6px 4px;
border-radius:var(--rad);font:inherit;font-size:12.5px;font-weight:500;
color:var(--color-text-secondary);cursor:pointer}
.smjbg-insseg button:hover{color:var(--color-text-primary)}
.smjbg-insseg button.on{background:var(--color-surface);
border-color:var(--color-border-default);color:var(--color-text-primary);
font-weight:600}
.smjbg-insadd{display:block;width:100%;margin:0 0 10px;padding:8px 10px;
border:1px solid var(--color-action-primary);border-radius:var(--rad);
background:var(--color-action-primary);color:var(--color-on-primary);
font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.smjbg-insadd:hover{background:var(--color-action-primary-hover);
border-color:var(--color-action-primary-hover)}
.smjbg-insadd.alt{background:var(--color-surface);
border-color:var(--color-action-secondary-border);
color:var(--color-action-secondary-text)}
.smjbg-insadd.alt:hover{background:var(--color-action-secondary-hover)}
.smjbg-insempty{margin:0 0 10px;font-size:12px;color:var(--color-text-tertiary)}
.smjbg-inslist{display:flex;flex-direction:column;gap:3px;margin:0 0 12px}
.smjbg-inslrow{display:flex;align-items:center;gap:6px;padding:5px 5px 5px 8px;
border:1px solid var(--color-border-default);border-radius:var(--rad);
background:var(--color-surface);cursor:pointer}
.smjbg-inslrow:hover{background:var(--color-state-hover)}
.smjbg-inslrow.on{background:var(--color-state-selected);
border-color:var(--color-state-selected-border)}
.smjbg-inslrow b{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;font-size:12.5px;font-weight:500;
color:var(--color-text-primary)}
.smjbg-inslrow.on b{color:var(--color-state-selected-text);font-weight:600}
.smjbg-inslrow .acts{display:flex;gap:1px;flex:0 0 auto}
.smjbg-inslrow .acts button{width:22px;height:22px;display:flex;align-items:center;
justify-content:center;border:0;background:none;border-radius:3px;
color:var(--color-text-tertiary);font-size:10px;line-height:1;cursor:pointer}
.smjbg-inslrow .acts button:hover{background:var(--color-state-pressed);
color:var(--color-text-primary)}
.smjbg-inslrow .acts button[data-rm]{font-size:14px}
.smjbg-inslrow .acts button[data-rm]:hover{background:var(--color-error-bg);
color:var(--color-error)}
.smjbg-insprops{border-top:1px solid var(--color-border-subtle);padding-top:10px}
.smjbg-insrow{margin:0 0 10px}
.smjbg-insrow > span{display:block;margin-bottom:4px;
font-family:"Barlow Condensed","Oswald",sans-serif;font-size:11px;
font-weight:600;letter-spacing:.09em;text-transform:uppercase;
color:var(--color-text-tertiary)}
.smjbg-insrow textarea{width:100%;box-sizing:border-box;padding:6px 8px;
border:1px solid var(--color-border-strong);border-radius:var(--rad);
background:var(--color-surface);color:var(--color-text-primary);
font:inherit;font-size:13px;resize:vertical}
.smjbg-insrow input[type=range]{width:100%;margin:0;accent-color:var(--color-action-primary)}
.smjbg-insrow input[type=color]{width:100%;height:30px;padding:2px;
border:1px solid var(--color-border-default);border-radius:var(--rad);
background:var(--color-surface);cursor:pointer}
.smjbg-instiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.smjbg-instile{padding:6px 3px;border:1px solid var(--color-border-default);
border-radius:var(--rad);background:var(--color-surface);font:inherit;
font-size:10.5px;font-weight:500;line-height:1.15;
color:var(--color-text-secondary);cursor:pointer;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap;
transition:background-color .12s ease,border-color .12s ease,color .12s ease}
.smjbg-instile:hover{background:var(--color-state-hover);
border-color:var(--color-state-hover-border);color:var(--color-text-primary)}
.smjbg-instile.sel{background:var(--color-state-selected);
border-color:var(--color-state-selected-border);
color:var(--color-state-selected-text);font-weight:600}
.smjbg-insfoot{display:grid;grid-template-columns:1fr 1fr;gap:4px;
padding-top:4px}
.smjbg-insfoot button{padding:7px 4px;border:1px solid var(--color-border-default);
border-radius:var(--rad);background:var(--color-surface);font:inherit;
font-size:12px;font-weight:500;color:var(--color-text-secondary);cursor:pointer}
.smjbg-insfoot button:hover{background:var(--color-state-hover);
border-color:var(--color-state-hover-border);color:var(--color-text-primary)}
.smjbg-insfoot button.rm{grid-column:1 / -1;color:var(--color-error)}
.smjbg-insfoot button.rm:hover{background:var(--color-error-bg);
border-color:var(--color-error-border);color:var(--color-error-text)}
@media(min-width:1024px){
.smjbg-sub[data-opt="insert"]{display:none}
.smjbg-sub[data-opt="insert"].on{display:block}
}
/* the overlay is absolutely positioned against the preview box */
.smjbg-prev{position:relative}
/* ==========================================================================
Mobile repair.
Everything added to the toolbar over the desktop work — the Preview and
Generate cluster, the onboarding empty state, the rail group headings, the
Insert panel — was styled inside @media(min-width:1024px), but the markup is
built for every width. Below 1024px those elements therefore had NO styling
at all: the Preview icon drew at the SVG's natural size (the large black
shape), and the price-calculation label, squeezed by it, wrapped to one
letter per line. This block gives that same chrome a mobile form. The
existing mobile shell above is not modified.
========================================================================== */
@media(max-width:1023px){
/* --- toolbar: the logo row stays, the two actions take a row of their own -- */
.smjbg-appbar{flex-wrap:wrap;row-gap:6px;padding-bottom:6px}
/* The label must neither wrap per character nor truncate to "Enabl…".
space-between hands a wrapped row's slack to the gaps BETWEEN items, so the
toggle was squeezed to 39px while 167px of the same row sat idle. Packing
the row to the start and letting the toggle grow gives the label the space
that was already there. */
.smjbg-appbar{justify-content:flex-start}
.smjbg-appbar .smjbg-logoimg{margin-right:auto}
.smjbg-appbar .smjbg-pmwrap{flex:1 1 auto;min-width:0}
.smjbg-appbar .smjbg-tgl{flex:1 1 auto;min-width:0;max-width:none}
.smjbg-appbar .smjbg-tgl .tt{flex:1 1 auto;min-width:0;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;font-size:10.5px}
.smjbg-acts{flex:1 0 100%;display:flex;align-items:stretch;gap:6px;
order:9;margin:0;padding:0;border:0}
/* the settings disclosure no longer exists; if an older build injects it, it
has nothing to open on mobile */
.smjbg-acts [data-act="settings"]{display:none}
.smjbg-act{display:inline-flex;align-items:center;justify-content:center;gap:6px;
min-height:38px;padding:0 12px;box-sizing:border-box;
border:1px solid var(--color-border-default);border-radius:var(--rad);
background:var(--color-surface);color:var(--color-text-secondary);
font:inherit;font-size:13px;font-weight:500;line-height:1;white-space:nowrap;
cursor:pointer;-webkit-tap-highlight-color:transparent}
/* the sizing whose absence produced the oversized glyph */
.smjbg-act svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;
stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.smjbg-act i{font-style:normal}
.smjbg-act:active{background:var(--color-state-hover)}
.smjbg-act-sec{flex:0 0 auto;background:var(--color-surface);
border-color:var(--color-action-secondary-border);
color:var(--color-action-secondary-text);font-weight:600}
.smjbg-split{position:relative;flex:1 1 auto;display:flex;align-items:stretch;
min-width:0}
.smjbg-act-pri{flex:1 1 auto;min-width:0;background:var(--color-action-primary);
border-color:var(--color-action-primary);color:var(--color-on-primary);
font-weight:600;font-size:13.5px}
.smjbg-act-pri:active{background:var(--color-action-primary-active);
border-color:var(--color-action-primary-active)}
.smjbg-act-car{flex:0 0 auto;width:34px;padding:0;margin-left:-1px}
.smjbg-genmenu{position:absolute;top:calc(100% + 6px);right:0;left:auto;z-index:90;
min-width:min(280px,86vw);display:flex;flex-direction:column;padding:4px;
background:var(--color-surface);border:1px solid var(--color-border-default);
border-radius:var(--rad);box-shadow:0 12px 30px rgba(16,24,40,.22)}
.smjbg-genmenu[hidden]{display:none}
.smjbg-genmenu button{border:0;background:none;text-align:left;padding:10px;
border-radius:var(--rad);cursor:pointer;color:var(--color-text-primary)}
.smjbg-genmenu button b{display:block;font-size:13.5px;font-weight:600}
.smjbg-genmenu button span{display:block;font-size:11.5px;
color:var(--color-text-tertiary);margin-top:1px}
.smjbg-genmenu button:active{background:var(--color-state-selected)}
/* --- the onboarding empty state: a column, not a run of inline text ----- */
.smjbg-prevcol .smjbg-prevempty{display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:0;
padding:22px 16px;margin:auto;max-width:340px;
background:var(--color-surface);border:1px solid var(--color-border-default);
border-radius:var(--rad);color:var(--color-text-primary);text-align:center}
.smjbg-prevcol .smjbg-prevempty>b{display:block;margin-top:14px;font-size:19px;
font-weight:700;line-height:1.2}
.smjbg-pe-sub{display:block;margin-top:5px;font-size:13px;line-height:1.5;
color:var(--color-text-tertiary)}
.smjbg-pe-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
margin-top:16px}
.smjbg-pe-btns .smjbg-act{min-height:40px}
.smjbg-pe-skel{display:flex;flex-direction:column;gap:5px;width:74px;height:104px;
padding:8px;box-sizing:border-box;background:var(--color-surface-subtle);
border:1px solid var(--color-border-default)}
.smjbg-pe-skel i{display:block;background:var(--n-100)}
.smjbg-pe-skel .im{height:38px;background:var(--n-200)}
.smjbg-pe-skel .h{height:6px;width:78%;background:var(--n-300)}
.smjbg-pe-skel .l{height:4px;width:92%}
.smjbg-pe-skel .l.s{width:64%}
.smjbg-pe-skel .tg{height:8px;width:34%;margin-top:auto;background:var(--p-100)}
.smjbg-pe-skel .tg.t{width:52%;margin-top:0}
/* --- the control strip is a horizontal scroller on mobile (by design), so a
group heading must be a compact inline divider — a full-width one would
leave a screen-wide gap between groups inside the scroller ---------- */
.smjbg-mogrp{flex:0 0 auto;display:inline-flex;align-items:center;
width:auto;margin:0 0 0 2px;padding:0 8px 0 6px;
border-left:1px solid var(--color-border-default);
font-family:"Barlow Condensed","Oswald",sans-serif;font-size:9px;
font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--color-text-tertiary);line-height:1;white-space:nowrap}
.smjbg-mogrp:first-child{margin-left:0;padding-left:0;border-left:0}
.smjbg-app.noimg .smjbg-mogrp[data-grp="media"],
.smjbg-app.noimg [data-opt-go="images"]{display:none}
/* --- Images and Insert panels: full width, nothing sideways -------------- */
.smjbg-sub[data-opt="images"]>*,.smjbg-sub[data-opt="bgimg"]>*,
.smjbg-sub[data-opt="insert"]>*{max-width:100%;min-width:0}
.smjbg-imghd{font-size:10px;margin:6px 0 4px}
.smjbg-insseg,.smjbg-insadd,.smjbg-inslist,.smjbg-insprops{max-width:100%}
.smjbg-instiles{grid-template-columns:repeat(4,minmax(0,1fr))}
.smjbg-insadd{min-height:40px}
.smjbg-inslrow .acts button{width:26px;height:26px}
/* --- Images, Background and Insert are panels now, not popups ------------
Every other tab is a short horizontal strip of tiles, which suits a row of
choices but not an upload box, a set of effect sliders or the Insert
properties list. These three get a taller panel that scrolls vertically
instead. */
.smjbg-app[data-opt="images"],.smjbg-app[data-opt="bgimg"]{--smjbg-panel:240px}
.smjbg-app[data-opt="insert"]{--smjbg-panel:250px}
.smjbg-sub[data-opt="images"].on,.smjbg-sub[data-opt="bgimg"].on,
.smjbg-sub[data-opt="insert"].on{display:block;gap:0;
overflow-x:hidden;overflow-y:auto;touch-action:pan-y;
overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;
padding:8px 10px 12px}
.smjbg-sub[data-opt="images"]>*,.smjbg-sub[data-opt="bgimg"]>*,
.smjbg-sub[data-opt="insert"]>*{max-width:100%;min-width:0;width:100%;
margin:0 0 10px}
.smjbg-sub[data-opt="images"] .smjbg-tiles,
.smjbg-sub[data-opt="bgimg"] .smjbg-tiles,
.smjbg-sub[data-opt="bgimg"] .smjbg-colr{display:grid;height:auto;width:100%;
grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;overflow:visible;
flex-wrap:wrap;white-space:normal}
.smjbg-sub[data-opt="bgimg"] .smjbg-colr{grid-template-columns:repeat(6,minmax(0,1fr))}
.smjbg-sub[data-opt="images"] .smjbg-tile,
.smjbg-sub[data-opt="bgimg"] .smjbg-tile{width:auto;height:auto;min-width:0;
flex:0 0 auto}
.smjbg-sub[data-opt="images"] .smjbg-sbox,
.smjbg-sub[data-opt="bgimg"] .smjbg-bgthumb{width:100%;height:auto;
aspect-ratio:4/3;min-height:0}
.smjbg-sub[data-opt="images"] .smjbg-uprow{display:block}
.smjbg-sub[data-opt="images"] input[type=range],
.smjbg-sub[data-opt="bgimg"] input[type=range]{width:100%}
.smjbg-sub[data-opt="images"] .smjbg-photofx{width:100%;height:auto;padding:0;
border:0;background:none;margin:0 0 10px}
/* --- the footer ---------------------------------------------------------
The mobile shell is a fixed, non-scrolling column, so every row the footer
takes is a row the brochure loses. It stays present and tappable but is
compressed to one wrapping line with the copyright inline. */
.smjbg-foot{flex:0 0 auto;order:99;
padding-bottom:env(safe-area-inset-bottom,0px)}
.smjbg-foot-in{flex-direction:column;align-items:stretch;gap:4px;padding:6px 8px}
/* Two per row at a 44px target: these are compliance links on a phone, and at
30px tall with 2px between them adjacent targets were a mis-tap away from
each other. Two rows of two costs about 30px of height and buys a real
target with a visible divider between columns. */
.smjbg-foot-links{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px;
justify-content:stretch}
.smjbg-foot-links button{min-height:44px;padding:6px 8px;font-size:12.5px;
text-align:center;border-radius:var(--rad)}
.smjbg-foot-links button:active{background:var(--color-state-hover)}
.smjbg-foot-copy{text-align:center;font-size:10.5px;margin:0}
/* the document reader fills a phone screen */
.smjbg-doc{padding:0}
.smjbg-doc-dlg{max-width:none;height:100%;border:0;border-radius:0}
.smjbg-doc-body{padding:16px 16px 28px}
}
/* very narrow handsets */
@media(max-width:380px){
/* No max-width on the toggle here: an earlier version of this block re-imposed
max-width:50%, which undid the fix above — at 360px that left 67px for a
111px label. The row has the room (the wrapper is 256px of 360px), so the
toggle is simply allowed to use it, and the full label fits down to 320px
without shortening or truncation. */
.smjbg-appbar .smjbg-tgl{max-width:none}
.smjbg-act-sec{padding:0 10px}
}
/* ==========================================================================
The footer's mobile menu.
Desktop is untouched: the trigger is display:none above 1023px and the link
row keeps its existing layout. On a phone the same list becomes a sheet, so
the four required pages cost one 44px row instead of two rows of buttons —
and the brochure keeps the ~80px that bought.
========================================================================== */
.smjbg-foot-burger{display:none}
@media(max-width:1023px){
/* With the trigger in the top bar and the links in a sheet, the footer keeps
no height of its own on a phone — it is purely the sheet's positioning
context, anchored to the app so the sheet can hang under the bar. */
.smjbg-foot{position:static;flex:0 0 auto;order:99;padding:0;border:0}
.smjbg-app{position:fixed}
.smjbg-app .smjbg-foot-in{position:absolute}
/* --- the trigger: three lines, a label, and a full-width tap target ----- */
/* In the top bar it is an icon button, not a full-width row: the label would
take space the logo and the price toggle need. The name still reaches a
screen reader through aria-label. */
.smjbg-foot-burger{display:flex;align-items:center;justify-content:center;
gap:0;flex:0 0 auto;order:-1;width:44px;height:44px;min-height:44px;
padding:0;box-sizing:border-box;border:0;border-radius:var(--rad);
background:none;color:var(--color-text-secondary);font:inherit;
cursor:pointer;-webkit-tap-highlight-color:transparent}
.smjbg-foot-burger span{display:none}
.smjbg-foot-burger i{display:block;width:17px;height:1.5px;flex:0 0 auto;
background:currentColor;border-radius:1px;
transition:transform .16s ease,opacity .16s ease}
/* the three bars sit as one stack, so they read as a menu mark, not a list */
.smjbg-foot-burger i{width:18px}
.smjbg-foot-burger i:nth-of-type(1){margin-right:-18px;transform:translateY(-5.5px)}
.smjbg-foot-burger i:nth-of-type(2){margin-right:-18px}
.smjbg-foot-burger i:nth-of-type(3){transform:translateY(5.5px)}
.smjbg-foot-burger:active{background:var(--color-state-hover)}
.smjbg-foot-burger:focus-visible{outline:2px solid var(--color-focus-ring);
outline-offset:-2px}
/* open: the mark becomes a cross, so the button plainly closes what it opened */
.smjbg-app.smjbg-footopen .smjbg-foot-burger i:nth-of-type(1){
transform:translateY(0) rotate(45deg)}
.smjbg-app.smjbg-footopen .smjbg-foot-burger i:nth-of-type(2){opacity:0}
.smjbg-app.smjbg-footopen .smjbg-foot-burger i:nth-of-type(3){
transform:translateY(0) rotate(-45deg)}
/* --- the sheet: the same links, above the trigger ---------------------- */
/* the sheet hangs from the top bar now; JS sets its top to the bar's bottom */
.smjbg-foot-in{display:none;position:absolute;left:0;right:0;top:0;bottom:auto;
z-index:60;flex-direction:column;align-items:stretch;gap:2px;
padding:6px;margin:0;background:var(--color-surface);
border-bottom:1px solid var(--color-border-default);
box-shadow:0 12px 28px color-mix(in srgb,var(--color-shadow) 18%,transparent)}
.smjbg-app.smjbg-footopen .smjbg-foot-in{display:flex}
/* one link per row at a full 46px target — no adjacent-target hazard at all */
.smjbg-foot-links{display:flex;flex-direction:column;gap:2px}
.smjbg-foot-links button{display:flex;align-items:center;width:100%;
min-height:46px;padding:0 12px;box-sizing:border-box;border:0;
border-radius:var(--rad);background:none;font:inherit;font-size:14px;
font-weight:500;color:var(--color-text-primary);text-align:left;
cursor:pointer}
.smjbg-foot-links button:active{background:var(--color-state-selected)}
.smjbg-foot-copy{padding:8px 12px 4px;margin:0;text-align:left;font-size:11px;
color:var(--color-text-tertiary);
border-top:1px solid var(--color-border-subtle)}
}
/* ==========================================================================
Mobile toolbar, compacted.
The project name is dropped and Preview takes its place on the first row;
Generate is removed entirely — on a phone the brochure already redraws as
the visitor types, and Sample Data is offered by the empty state, so the
button only cost a row. The bar goes from three rows to two.
Desktop is untouched: every rule here is inside the mobile query.
========================================================================== */
@media(max-width:1023px){
/* the name is the one thing in the bar that carries no action */
.smjbg-appbar .smjbg-proj{display:none}
/* explicit order, so the row reads: menu · logo · Preview ---------------- */
.smjbg-foot-burger{order:-2}
.smjbg-appbar .smjbg-logoimg{order:-1;margin-right:0}
.smjbg-acts{order:0;flex:0 0 auto;width:auto;margin-left:auto}
.smjbg-appbar .smjbg-pmwrap{order:1}
.smjbg-appbar .smjbg-undo{order:2}
.smjbg-appbar .smjbg-redo{order:3}
/* Generate, its caret and its menu are not part of the mobile toolbar */
.smjbg-acts .smjbg-split{display:none}
/* Preview alone, sized as a proper target and aligned to the right edge */
.smjbg-acts .smjbg-act-sec{flex:0 0 auto;min-height:40px;padding:0 14px;
font-size:13.5px}
/* row two is now just the toggle and the undo pair, so it can breathe */
.smjbg-appbar{row-gap:4px;padding:6px 10px}
.smjbg-appbar .smjbg-tgl{margin:0}
}
/* ==========================================================================
Phones: Images, Background and Insert are popups again.
The panel treatment those three were given is withdrawn below 1024px — the
rules only ever applied to .smjbg-sub[data-opt=…], and on a phone their
blocks now live in .smjbg-fs-pane instead, so the popup styling above
governs them. What is left here is the popup's own mobile sizing.
Desktop is untouched.
========================================================================== */
@media(max-width:1023px){
/* the tab row goes back to its shared height for these three: nothing is
parked in their sub-rows any more, so the tall vertical panel is not
needed and would only reserve empty space */
.smjbg-app[data-opt="images"],.smjbg-app[data-opt="bgimg"],
.smjbg-app[data-opt="insert"]{--smjbg-panel:110px}
.smjbg-sub[data-opt="images"],.smjbg-sub[data-opt="bgimg"],
.smjbg-sub[data-opt="insert"]{display:none!important}
/* --- the popup body on a phone --------------------------------------- */
.smjbg-fs-pane[data-fs="images"] .smjbg-tiles,
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-tiles,
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-colr{display:grid;height:auto;
width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;
overflow:visible;white-space:normal;flex-wrap:wrap}
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-colr{
grid-template-columns:repeat(5,minmax(0,1fr))}
.smjbg-fs-pane[data-fs="images"] .smjbg-sbox,
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-bgthumb{width:100%;height:auto;
aspect-ratio:4/3;min-height:0}
.smjbg-fs-pane[data-fs="images"] .smjbg-uprow{display:block}
.smjbg-fs-pane[data-fs="images"] .smjbg-uprow>*{width:100%;margin:0 0 12px}
.smjbg-fs-pane[data-fs="images"] .smjbg-photofx{width:100%;height:auto;
padding:0;border:0;background:none;margin:0 0 14px}
.smjbg-fs-pane[data-fs="images"] .smjbg-photofx>h4{display:block;margin:0 0 7px;
font-family:"Barlow Condensed","Oswald",sans-serif;font-size:12px;
font-weight:600;letter-spacing:.08em;text-transform:uppercase;
color:var(--color-text-tertiary)}
.smjbg-fs-pane[data-fs="images"] input[type=range],
.smjbg-fs-pane[data-fs="bgimg"] input[type=range]{width:100%}
/* the Insert panel fills the popup and scrolls with it */
.smjbg-fs-pane[data-fs="insert"]{display:none}
.smjbg-fs-pane[data-fs="insert"].on{display:block}
.smjbg-fs-pane[data-fs="insert"] .smjbg-instiles{
grid-template-columns:repeat(4,minmax(0,1fr))}
/* Touch has no right button, so the properties footer is the ONLY route to
Make Background, Move Forward, Move Backward and Delete — primary
controls here, not secondary ones. They were left out of this rule and
inherited a 33px height from the base padding. */
.smjbg-fs-pane[data-fs="insert"] .smjbg-insadd,
.smjbg-fs-pane[data-fs="insert"] .smjbg-inslrow,
.smjbg-fs-pane[data-fs="insert"] .smjbg-insfoot button{min-height:44px}
.smjbg-fs-pane[data-fs="insert"] .smjbg-insfoot{gap:6px 8px}
/* the per-row arrows and cross are the same three actions again */
.smjbg-fs-pane[data-fs="insert"] .smjbg-inslrow .acts{gap:4px}
.smjbg-fs-pane[data-fs="insert"] .smjbg-inslrow .acts button{width:38px;height:38px}
/* Duplicate sat alone in a two-column row; Forward and Backward pair, then
Duplicate and Delete pair, so no cell is left empty */
.smjbg-fs-pane[data-fs="insert"] .smjbg-insfoot button.rm{grid-column:auto}
.smjbg-fs-pane[data-fs="insert"] .smjbg-instile{min-height:36px}
}
/* ==========================================================================
Field rows: two columns minimum, more where there is room.
One rule for both mobile and desktop instead of a per-popup list. The track
floor is min(150px, 50% of the row): below ~300px of content the 50% term
wins and the row is exactly two columns; above it the 150px term wins and
auto-fit adds a third and fourth column as the space appears. So a phone
never drops to a single stacked field, and a wide dialog is not held at two.
========================================================================== */
.smjbg-row{display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(150px,calc(50% - 5px)),1fr));
gap:8px 10px;align-items:start}
.smjbg-row>.smjbg-f{flex:0 1 auto;min-width:0;margin:0}
/* a field that needs the whole line still gets it — both modifiers, since
.w100 was written for the old flex row and does nothing in a grid */
.smjbg-row>.smjbg-f.wide,.smjbg-row>.smjbg-f.w100{grid-column:1 / -1}
/* the label above its input, unchanged */
.smjbg-row>.smjbg-f{display:flex;flex-direction:column;gap:4px}
.smjbg-row>.smjbg-f>span{font-size:11.5px;font-weight:600;line-height:1.25;
color:var(--color-text-tertiary)}
.smjbg-row>.smjbg-f input,.smjbg-row>.smjbg-f textarea,
.smjbg-row>.smjbg-f select{width:100%;min-width:0;box-sizing:border-box}
/* the same inside every popup, overriding the one-per-line rules above */
.smjbg-fs-pane .smjbg-row{margin:0 0 10px!important}
.smjbg-fs-pane label.smjbg-f,.smjbg-fs-pane .smjbg-f{display:flex}
.smjbg-fs-pane .smjbg-row>.smjbg-f{margin:0}
@media(min-width:1024px){
/* the dialog is widened so the extra columns have somewhere to go: at 460px
a third column would have been 137px, too narrow for a labelled field */
.smjbg-fs-dlg{max-width:640px}
/* compact rows: the fields are shorter than the popup's default spacing */
.smjbg-fs-pane .smjbg-row{gap:8px 12px}
.smjbg-fs-pane .smjbg-row>.smjbg-f>span{font-size:11.5px}
.smjbg-fs-pane input[type=text],.smjbg-fs-pane input[type=tel],
.smjbg-fs-pane input[type=email],.smjbg-fs-pane input[type=number],
.smjbg-fs-pane textarea{font-size:13.5px;padding:7px 9px}
/* the desktop panels' own field rows follow the same grid */
.smjbg-subrow .smjbg-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 8px}
}
@media(max-width:1023px){
/* 16px keeps iOS from zooming the page when a field is focused */
.smjbg-fs-pane .smjbg-row>.smjbg-f input,
.smjbg-fs-pane .smjbg-row>.smjbg-f textarea{font-size:16px;padding:8px 10px}
.smjbg-fs-pane .smjbg-row>.smjbg-f>span{font-size:11px}
}
/* The per-popup rules further up pin these five to exactly two columns
(grid-template-columns:1fr 1fr) and outrank the shared .smjbg-row rule by
specificity, so the wider dialog was still held at two. Restated here with
the same per-pane specificity so the shared track applies: two columns on a
phone, three in the 640px dialog. */
.smjbg-fs-pane[data-fs="head"] .smjbg-row,
.smjbg-fs-pane[data-fs="tags"] .smjbg-row,
.smjbg-fs-pane[data-fs="specs"] .smjbg-row,
.smjbg-fs-pane[data-fs="hl"] .smjbg-row,
.smjbg-fs-pane[data-fs="biz"] .smjbg-row,
.smjbg-fs-pane[data-fs="text"] .smjbg-row,
.smjbg-fs-pane[data-fs="price"] .smjbg-row{
grid-template-columns:repeat(auto-fit,minmax(min(150px,calc(50% - 5px)),1fr));
gap:8px 10px;align-items:start}
/* .w100 belongs to the old flex row; in a grid it needs the span */
.smjbg-fs-pane[data-fs="biz"] .smjbg-row .smjbg-f.w100,
.smjbg-fs-pane[data-fs="head"] .smjbg-row .smjbg-f.w100,
.smjbg-fs-pane[data-fs="tags"] .smjbg-row .smjbg-f.w100,
.smjbg-fs-pane[data-fs="specs"] .smjbg-row .smjbg-f.w100,
.smjbg-fs-pane[data-fs="hl"] .smjbg-row .smjbg-f.w100,
.smjbg-fs-pane[data-fs="price"] .smjbg-row .smjbg-f.w100{grid-column:1 / -1}
/* ==========================================================================
Per-popup column counts, the same on desktop and mobile.
These three are pinned rather than left to auto-fit: Tags reads as two pairs,
Highlight is a label and its value side by side, and Business is a name and
phone above a full-width address. The remaining popups keep the auto-fit
track and still gain a third column in the wide desktop dialog.
========================================================================== */
.smjbg-fs-pane[data-fs="tags"] .smjbg-row,
.smjbg-fs-pane[data-fs="hl"] .smjbg-row,
.smjbg-fs-pane[data-fs="biz"] .smjbg-row{
grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;align-items:start}
/* Highlight: the value sat on its own line — side by side makes it two columns */
.smjbg-fs-pane[data-fs="hl"] .smjbg-row .smjbg-f.wide{grid-column:auto}
/* Business: the address is the one field that needs the whole line */
.smjbg-fs-pane[data-fs="biz"] .smjbg-row .smjbg-f.w100{grid-column:1 / -1}
/* ==========================================================================
Key specifications: the same Label / Value / remove row on a phone as on a
desktop. The popup row-grid further up was written for the "text" and
"price" panes only, so the Specifications pane fell through to the
max-width:640px rules that stack every cell into its own block — which is
why one field sat per line on mobile. Stated for [data-fs="specs"] at every
width, and the header row is kept on the same track so LABEL and VALUE line
up over their columns exactly as they do on desktop.
========================================================================== */
.smjbg-fs-pane[data-fs="specs"] .smjbg-items{width:100%;border-collapse:collapse}
.smjbg-fs-pane[data-fs="specs"] .smjbg-items thead,
.smjbg-fs-pane[data-fs="specs"] .smjbg-items tbody{display:block}
.smjbg-fs-pane[data-fs="specs"] .smjbg-items thead{display:block}
.smjbg-fs-pane[data-fs="specs"] .smjbg-items tr{display:grid;
grid-template-columns:1fr 1fr 34px;gap:6px;align-items:center;
margin:0 0 8px;border:0;border-radius:0;padding:0;background:none}
.smjbg-fs-pane[data-fs="specs"] .smjbg-items th{padding:0 0 4px;font-size:10.5px;
font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--color-text-tertiary);text-align:left}
.smjbg-fs-pane[data-fs="specs"] .smjbg-items td{display:block;padding:0;border:0;
background:none;flex:none;min-width:0;width:auto!important;max-width:100%}
/* the stacked layout's injected cell captions would repeat the header */
.smjbg-fs-pane[data-fs="specs"] .smjbg-items td::before{display:none}
.smjbg-fs-pane[data-fs="specs"] .smjbg-items input{width:100%;height:38px;
min-width:0;box-sizing:border-box}
.smjbg-fs-pane[data-fs="specs"] .smjbg-items .del{width:34px;height:34px;padding:0;
border:0;background:none;color:var(--color-text-tertiary);font-size:20px;
line-height:1;cursor:pointer;display:flex;align-items:center;
justify-content:center;border-radius:var(--rad);
-webkit-tap-highlight-color:transparent}
.smjbg-fs-pane[data-fs="specs"] .smjbg-items .del:active{
background:var(--color-state-hover);color:var(--color-text-primary)}
.smjbg-fs-pane[data-fs="specs"] .smjbg-items .del.addrow{
border:1.5px dashed var(--color-border-default);
color:var(--color-text-primary);font-size:19px}
@media(max-width:1023px){
/* 16px so focusing a cell does not zoom the page on iOS */
.smjbg-fs-pane[data-fs="specs"] .smjbg-items input{font-size:16px;height:40px}
.smjbg-fs-pane[data-fs="specs"] .smjbg-items .del{width:32px;height:36px}
.smjbg-fs-pane[data-fs="specs"] .smjbg-items tr{grid-template-columns:1fr 1fr 32px;
gap:5px}
}
/* ==========================================================================
Phones: the style settings inside the three media popups scroll sideways.
These groups are rows of equal thumbnails, so a wrapping grid made the
popup tall enough to cover the brochure it is meant to be styling. One
swipeable row per group keeps the popup short. Text fields, sliders and
colour inputs are untouched — only the tile groups scroll. Every rule is
inside the mobile query; desktop keeps its wrapping grids.
========================================================================== */
@media(max-width:1023px){
.smjbg-fs-pane[data-fs="images"] .smjbg-tiles,
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-tiles,
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-colr,
.smjbg-fs-pane[data-fs="insert"] .smjbg-instiles{
display:flex;flex-wrap:nowrap;gap:6px;
overflow-x:auto;overflow-y:hidden;
touch-action:pan-x;overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
/* the row bleeds to the popup's edges so the last tile is plainly cut off
and reads as "there is more this way" */
margin:0 -12px;padding:2px 12px 6px;width:auto;
scrollbar-width:none}
.smjbg-fs-pane[data-fs="images"] .smjbg-tiles::-webkit-scrollbar,
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-tiles::-webkit-scrollbar,
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-colr::-webkit-scrollbar,
.smjbg-fs-pane[data-fs="insert"] .smjbg-instiles::-webkit-scrollbar{
height:0;display:none}
/* fixed-width tiles: a flex row must not shrink them to fit */
.smjbg-fs-pane[data-fs="images"] .smjbg-tiles>.smjbg-tile,
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-tiles>.smjbg-tile{
flex:0 0 auto;width:76px;height:auto;min-width:0;scroll-snap-align:start}
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-colr>*{flex:0 0 auto;width:44px;
scroll-snap-align:start}
.smjbg-fs-pane[data-fs="insert"] .smjbg-instiles>.smjbg-instile{
flex:0 0 auto;width:72px;min-height:34px;scroll-snap-align:start}
/* the group's own label stays put above its row */
.smjbg-fs-pane[data-fs="images"] .smjbg-tg,
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-tg{margin:0 0 10px}
.smjbg-fs-pane[data-fs="images"] .smjbg-lbl,
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-lbl,
.smjbg-fs-pane[data-fs="insert"] .smjbg-insrow>span{margin-bottom:3px;
font-size:10.5px}
/* --- and the popup itself stays small ---------------------------------
Docked to the bottom at a capped height, so the brochure above it is
still visible while its style is being changed. */
.smjbg-app[data-fs="images"] .smjbg-fs,
.smjbg-app[data-fs="bgimg"] .smjbg-fs,
.smjbg-app[data-fs="insert"] .smjbg-fs{align-items:flex-end;padding:0}
.smjbg-app[data-fs="images"] .smjbg-fs-dlg,
.smjbg-app[data-fs="bgimg"] .smjbg-fs-dlg,
.smjbg-app[data-fs="insert"] .smjbg-fs-dlg{
width:100%;max-width:none;height:auto;max-height:62vh;max-height:62dvh;
border-radius:0;border-left:0;border-right:0;border-bottom:0}
.smjbg-app[data-fs="images"] .smjbg-fs-hd,
.smjbg-app[data-fs="bgimg"] .smjbg-fs-hd,
.smjbg-app[data-fs="insert"] .smjbg-fs-hd{height:44px;padding:0 10px}
.smjbg-app[data-fs="images"] .smjbg-fs-body,
.smjbg-app[data-fs="bgimg"] .smjbg-fs-body,
.smjbg-app[data-fs="insert"] .smjbg-fs-body{padding:10px 12px 14px}
/* the upload box is the tallest thing in these popups, so it is capped
rather than left to its 4:3 aspect */
.smjbg-fs-pane[data-fs="images"] .smjbg-sbox,
.smjbg-fs-pane[data-fs="bgimg"] .smjbg-bgthumb{aspect-ratio:auto;
height:120px;min-height:0}
}
@media(max-width:1023px){
/* the rows above bleed 12px past the pane so the last tile is visibly cut;
the pane and the popup body must clip that bleed rather than becoming
horizontal scrollers themselves */
.smjbg-app[data-fs="images"] .smjbg-fs-body,
.smjbg-app[data-fs="bgimg"] .smjbg-fs-body,
.smjbg-app[data-fs="insert"] .smjbg-fs-body,
.smjbg-fs-pane[data-fs="images"],
.smjbg-fs-pane[data-fs="bgimg"],
.smjbg-fs-pane[data-fs="insert"]{overflow-x:hidden}
}
/* ==========================================================================
The Insert picker: sixteen categories, twenty presets each.
A compact thumbnail grid rather than a list, because the thumbnail is the
only honest label for a shape or a line. Search sits above everything and
cuts across all categories at once.
========================================================================== */
.smjbg-inssearch{position:relative;margin:0 0 8px}
.smjbg-inssearch input{width:100%;box-sizing:border-box;height:34px;
padding:0 28px 0 10px;border:1px solid var(--color-border-strong);
border-radius:var(--rad);background:var(--color-surface);
color:var(--color-text-primary);font:inherit;font-size:13px}
.smjbg-inssearch input::-webkit-search-cancel-button{display:none}
.smjbg-inssearch button{position:absolute;right:2px;top:2px;width:30px;height:30px;
border:0;background:none;color:var(--color-text-tertiary);font-size:16px;
line-height:1;cursor:pointer;border-radius:var(--rad)}
.smjbg-inssearch button:hover{background:var(--color-state-hover);
color:var(--color-text-primary)}
/* the sixteen categories */
.smjbg-inscats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;
margin:0 0 10px}
.smjbg-inscats button{display:flex;flex-direction:column;align-items:center;gap:3px;
padding:6px 4px;border:1px solid var(--color-border-default);
border-radius:var(--rad);background:var(--color-surface);cursor:pointer;
position:relative;transition:border-color .12s ease,background-color .12s ease}
.smjbg-inscats button:hover{border-color:var(--color-state-hover-border);
background:var(--color-state-hover)}
.smjbg-inscats canvas{display:block;width:52px;height:38px}
.smjbg-inscats i{font-style:normal;font-size:11px;font-weight:600;line-height:1.15;
text-align:center;color:var(--color-text-primary)}
.smjbg-inscats em{position:absolute;top:3px;right:4px;font-style:normal;
font-size:9px;font-weight:700;color:var(--color-text-tertiary)}
/* the open category */
.smjbg-insback{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.smjbg-insback button{display:inline-flex;align-items:center;gap:3px;height:28px;
padding:0 8px 0 4px;border:1px solid var(--color-border-default);
border-radius:var(--rad);background:var(--color-surface);font:inherit;
font-size:12px;font-weight:500;color:var(--color-text-secondary);cursor:pointer}
.smjbg-insback button:hover{background:var(--color-state-hover);
color:var(--color-text-primary)}
.smjbg-insback button svg{width:14px;height:14px;fill:none;stroke:currentColor;
stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.smjbg-insback b{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;font-family:"Barlow Condensed","Oswald",sans-serif;
font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
color:var(--color-text-tertiary)}
.smjbg-insback em{font-style:normal;font-size:10.5px;font-weight:600;
color:var(--color-text-tertiary)}
/* the preset grid */
.smjbg-insgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;
margin:0 0 10px}
.smjbg-insopt{display:flex;flex-direction:column;align-items:center;gap:2px;
padding:4px 2px 5px;border:1px solid var(--color-border-default);
border-radius:var(--rad);background:var(--color-surface);cursor:pointer;
overflow:hidden;transition:border-color .12s ease,background-color .12s ease}
.smjbg-insopt:hover{border-color:var(--color-action-primary);
background:var(--color-state-selected)}
.smjbg-insopt canvas{display:block;width:100%;height:auto;max-width:60px;
aspect-ratio:60/44}
.smjbg-insopt i{font-style:normal;font-size:9.5px;line-height:1.1;text-align:center;
color:var(--color-text-tertiary);white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;max-width:100%}
/* what is already on the brochure */
.smjbg-inslisthd,.smjbg-inspropshd{display:flex;align-items:center;gap:6px;
margin:0 0 5px;font-family:"Barlow Condensed","Oswald",sans-serif;font-size:11px;
font-weight:600;letter-spacing:.09em;text-transform:uppercase;
color:var(--color-text-tertiary)}
.smjbg-inslisthd em{font-style:normal;font-size:10px;font-weight:700}
.smjbg-inslrow .ct{flex:0 0 auto;font-size:9px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:var(--color-text-tertiary)}
.smjbg-inspropshd{padding-top:8px;border-top:1px solid var(--color-border-subtle)}
.smjbg-insemoji{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.smjbg-insemoji button{padding:3px 0;border:1px solid transparent;
border-radius:var(--rad);background:none;font-size:17px;line-height:1.1;
cursor:pointer}
.smjbg-insemoji button:hover{background:var(--color-state-hover)}
.smjbg-insemoji button.sel{border-color:var(--color-action-primary);
background:var(--color-state-selected)}
.smjbg-insfoot{grid-template-columns:1fr 1fr}
@media(min-width:1024px){
.smjbg-inscats{grid-template-columns:repeat(2,minmax(0,1fr))}
.smjbg-insgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1023px){
/* in the bottom-docked popup the grid gets more columns and scrolls with the
popup body, so the brochure above stays visible */
.smjbg-fs-pane[data-fs="insert"] .smjbg-inscats{grid-template-columns:repeat(4,minmax(0,1fr))}
.smjbg-fs-pane[data-fs="insert"] .smjbg-insgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
.smjbg-fs-pane[data-fs="insert"] .smjbg-inscats canvas{width:44px;height:32px}
.smjbg-fs-pane[data-fs="insert"] .smjbg-inscats i{font-size:10px}
.smjbg-fs-pane[data-fs="insert"] .smjbg-insopt i{font-size:9px}
.smjbg-fs-pane[data-fs="insert"] .smjbg-inssearch input{font-size:16px;height:38px}
/* the picker grids are wrapping grids, not the sideways rows the other two
media popups use — 320 options cannot be swiped through one row at a time */
.smjbg-fs-pane[data-fs="insert"] .smjbg-inscats,
.smjbg-fs-pane[data-fs="insert"] .smjbg-insgrid{display:grid;flex-wrap:wrap;
overflow:visible;margin-left:0;margin-right:0;padding:0}
}
/* the right-click menu for an inserted element. Mounted on , like the
preview and reader overlays, so a transformed ancestor cannot contain it. */
.smjbg-insmenu{position:fixed;z-index:2147483002;min-width:186px;padding:4px;
display:flex;flex-direction:column;gap:1px;
background:var(--color-surface,#fff);
border:1px solid var(--color-border-default,#d9dde1);border-radius:4px;
box-shadow:0 12px 30px rgba(40,44,47,.24);
font-family:Barlow,system-ui,sans-serif}
.smjbg-insmenu button{display:block;width:100%;text-align:left;border:0;
background:none;padding:8px 10px;border-radius:3px;font:inherit;font-size:13px;
font-weight:500;color:var(--color-text-primary,#282c2f);cursor:pointer;
white-space:nowrap}
.smjbg-insmenu button:hover{background:var(--color-state-selected,#f1f8ff);
color:var(--color-state-selected-text,#1d52bb)}
.smjbg-insmenu button.rm{color:var(--color-error,#bf3e43)}
.smjbg-insmenu button.rm:hover{background:var(--color-error-bg,#fff4f3);
color:var(--color-error-text,#9e2b32)}
/* the element the menu belongs to keeps its selection outline while it is open */
.smjbg-insfoot button.wide{grid-column:1 / -1}
/* the header above a selected element's settings: the way back to the picker,
then what is being edited */
.smjbg-insback.sel{padding-bottom:8px;margin-bottom:10px;
border-bottom:1px solid var(--color-border-subtle)}
.smjbg-insback.sel b{flex:0 0 auto;color:var(--color-text-primary)}
.smjbg-insback.sel em{flex:1 1 auto;min-width:0;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap;text-align:right;
font-size:11.5px;font-weight:500;color:var(--color-text-tertiary)}
/* the settings now open the panel, so the first group needs no top rule */
.smjbg-insback.sel + .smjbg-insprops .smjbg-inspropshd{display:none}
.smjbg-insprops > .smjbg-insrow:first-child{margin-top:0}
@media(max-width:1023px){
.smjbg-fs-pane[data-fs="insert"] .smjbg-insback.sel button{min-height:38px}
}
/* The section strip under the toolbar is gone — three of its switches were
deleted and the other three moved into their own tabs. Each surviving switch
now sits at the right of the heading it governs, so the control is with the
fields it affects. */
.smjbg-secbar{display:none !important}
.smjbg-sechd{display:flex;align-items:center;gap:8px}
.smjbg-sechd > span{flex:1 1 auto;min-width:0}
.smjbg-sechd .smjbg-secchip{flex:0 0 auto;margin:0}
/* Delete, beside the heading of the fields it removes. Quiet until hovered —
it sits next to text fields, not among the primary actions. */
.smjbg-secdel{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;
height:26px;padding:0 8px;border:1px solid var(--color-border-default);
border-radius:var(--rad);background:var(--color-surface);
font:inherit;font-size:11.5px;font-weight:500;
color:var(--color-text-tertiary);cursor:pointer;
transition:border-color .12s ease,background-color .12s ease,color .12s ease}
.smjbg-secdel svg{width:13px;height:13px;fill:none;stroke:currentColor;
stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.smjbg-secdel:hover{border-color:var(--color-error);background:var(--color-error-bg);
color:var(--color-error-text)}
.smjbg-secdel:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}
/* What the panel shows in place of the fields once the element is deleted: one
row, in the same block, so no second window is ever opened. */
.smjbg-secback{display:none;align-items:center;gap:10px;flex-wrap:wrap;
padding:10px 0 2px}
.smjbg-secback p{margin:0;flex:1 1 auto;min-width:0;
font-size:12.5px;color:var(--color-text-tertiary)}
.smjbg-secback button{flex:0 0 auto;min-height:32px;padding:0 12px;
border:1px solid var(--color-action-primary);border-radius:var(--rad);
background:var(--color-surface);font:inherit;font-size:12.5px;font-weight:600;
color:var(--color-action-primary);cursor:pointer}
.smjbg-secback button:hover{background:var(--color-state-selected)}
.smjbg-secback button:focus-visible{outline:2px solid var(--color-focus-ring);
outline-offset:2px}
/* deleted: the fields go, the row appears, and the Delete button has nothing to do */
.smjbg-g.gone > .smjbg-row,
.smjbg-g.gone > table,
.smjbg-g.gone > .smjbg-hint{display:none}
.smjbg-g.gone > .smjbg-secback{display:flex}
.smjbg-g.gone .smjbg-secdel{display:none}
@media(max-width:1023px){
/* 44px minimum on touch. The fixed height had to go, not just be raised —
it wins over min-height, so setting min-height alone would have left the
destructive control at 34px. */
.smjbg-secdel{height:auto;min-height:44px;font-size:12px;padding:0 12px}
.smjbg-secback button{min-height:44px}
}
/* ==========================================================================
Text & Details: one panel holding all four elements.
Four tabs each held one or two rows of fields in a column sized for the
largest panel in the app, so each looked mostly empty. Together they fill it,
and the spacing below is tightened so all four fit without scrolling on a
normal desktop height.
========================================================================== */
.smjbg-sub[data-opt="text"] .smjbg-g{margin:0;padding:8px 0 10px;
border-top:1px solid var(--color-border-subtle)}
.smjbg-sub[data-opt="text"] .smjbg-g:first-child{border-top:0;padding-top:0}
.smjbg-sub[data-opt="text"] .smjbg-g > .smjbg-row{margin-top:0 !important;gap:6px 8px}
.smjbg-sub[data-opt="text"] .smjbg-sechd{margin:0 0 5px}
.smjbg-sub[data-opt="text"] .smjbg-sechd > span{
font-family:"Barlow Condensed","Oswald",sans-serif;font-size:12px;font-weight:600;
letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-tertiary)}
.smjbg-sub[data-opt="text"] .smjbg-f > span{font-size:10.5px;margin-bottom:2px}
.smjbg-sub[data-opt="text"] .smjbg-f input{height:32px;font-size:13px}
.smjbg-sub[data-opt="text"] .smjbg-hint{margin:4px 0 0;font-size:11px}
/* the specs table loses its outer padding and its header row: two labelled
columns need no second set of headings above them */
.smjbg-sub[data-opt="text"] .smjbg-items{margin:0}
.smjbg-sub[data-opt="text"] .smjbg-items th{padding:0 0 3px;font-size:10.5px}
.smjbg-sub[data-opt="text"] .smjbg-items td{padding:2px 0}
.smjbg-sub[data-opt="text"] .smjbg-items input{height:32px;font-size:13px}
/* the element the next Delete applies to */
.smjbg-sub[data-opt="text"] .smjbg-g.focus .smjbg-sechd > span{
color:var(--color-action-primary)}
.smjbg-sub[data-opt="text"] .smjbg-g.focus .smjbg-secdel{
border-color:var(--color-border-strong);color:var(--color-text-secondary)}
@media(max-width:1023px){
/* the popup keeps comfortable field heights — only the desktop panel is tightened */
.smjbg-fs-pane[data-fs] .smjbg-f input,
.smjbg-fs-pane[data-fs] .smjbg-items input{height:42px;font-size:16px}
}
@media(max-width:1023px){
/* the merged block's own compacting is a desktop-panel rule; inside the popup
the four blocks stack full width and scroll vertically like every other pane */
.smjbg-fs-pane[data-fs="text"] .smjbg-g{margin:0;padding:10px 0 12px;
border-top:1px solid var(--color-border-subtle)}
.smjbg-fs-pane[data-fs="text"] .smjbg-g:first-child{border-top:0;padding-top:0}
.smjbg-fs-pane[data-fs="text"] .smjbg-g > .smjbg-row{margin-top:0 !important}
.smjbg-fs-pane[data-fs="text"]{display:block;overflow-x:hidden}
}
/* ==========================================================================
The four text popups: room for their fields.
The dialog sized itself to its content, so a two-field element gave a dialog
barely taller than its own header — and a Specs list with many rows had no
scroll of its own and pushed Previous/Next off. A floor and a ceiling fix
both: never shorter than its fields, never taller than the window, and the
body scrolls vertically in between.
========================================================================== */
.smjbg-app[data-fs="head"] .smjbg-fs-dlg,
.smjbg-app[data-fs="tags"] .smjbg-fs-dlg,
.smjbg-app[data-fs="specs"] .smjbg-fs-dlg,
.smjbg-app[data-fs="hl"] .smjbg-fs-dlg{max-height:82vh;max-height:82dvh}
.smjbg-app[data-fs="head"] .smjbg-fs-body,
.smjbg-app[data-fs="tags"] .smjbg-fs-body,
.smjbg-app[data-fs="specs"] .smjbg-fs-body,
.smjbg-app[data-fs="hl"] .smjbg-fs-body{
min-height:132px;
overflow-y:auto;overflow-x:hidden;
/* vertical only: the fields are a two-column grid that wraps, never a wide row */
overscroll-behavior:contain}
/* the fields themselves, whichever popup they are in */
.smjbg-fs-pane[data-fs="head"] .smjbg-g,
.smjbg-fs-pane[data-fs="tags"] .smjbg-g,
.smjbg-fs-pane[data-fs="specs"] .smjbg-g,
.smjbg-fs-pane[data-fs="hl"] .smjbg-g{display:block;margin:0}
.smjbg-fs-pane[data-fs="head"] .smjbg-row,
.smjbg-fs-pane[data-fs="tags"] .smjbg-row,
.smjbg-fs-pane[data-fs="specs"] .smjbg-row,
.smjbg-fs-pane[data-fs="hl"] .smjbg-row{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;
margin-top:0 !important}
.smjbg-fs-pane[data-fs="head"] .smjbg-f,
.smjbg-fs-pane[data-fs="tags"] .smjbg-f,
.smjbg-fs-pane[data-fs="specs"] .smjbg-f,
.smjbg-fs-pane[data-fs="hl"] .smjbg-f{min-width:0}
.smjbg-fs-pane[data-fs="head"] .smjbg-f.w100,
.smjbg-fs-pane[data-fs="hl"] .smjbg-f.w100,
.smjbg-fs-pane[data-fs="specs"] .smjbg-f.w100{grid-column:1 / -1}
/* the specs table keeps its two columns and scrolls with the body, not sideways */
.smjbg-fs-pane[data-fs="specs"] .smjbg-items{width:100%;margin:0;table-layout:fixed}
.smjbg-fs-pane[data-fs="specs"] .smjbg-items input{width:100%;box-sizing:border-box}
/* the item Previous / Next is on, marked so the counter and the field agree */
.smjbg-f.fsitem > span{color:var(--color-action-primary)}
.smjbg-f.fsitem input,.smjbg-f.fsitem textarea,
tr.fsitem input{border-color:var(--color-action-primary);
box-shadow:0 0 0 2px var(--color-state-selected)}
/* ==========================================================================
Section card style: thirty presets in a scrollable three-column gallery.
The group keeps the existing tile design and the existing blue selection.
Capping the height is a separate concern, carried by .capped: a gallery that
asks for it shows two rows and opens the rest behind Show all, and one that does
not shows every option at once. Border style and Ribbon design do not ask.
========================================================================== */
.smjbg-tg.cardgal .smjbg-tiles{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;
padding-right:2px}
.smjbg-tg.cardgal .smjbg-tiles.capped{
max-height:196px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.smjbg-tg.cardgal .smjbg-tiles.capped.open{max-height:420px}
.smjbg-tg.cardgal .smjbg-tiles::-webkit-scrollbar{width:6px}
.smjbg-tg.cardgal .smjbg-tiles::-webkit-scrollbar-thumb{
background:var(--color-border-strong);border-radius:3px}
.smjbg-tg.cardgal .smjbg-tile{padding:5px 4px 6px}
.smjbg-tg.cardgal .smjbg-tile b{font-size:10px;line-height:1.15}
/* the miniature card itself */
.smjbg-tg.cardgal .smjbg-cdpv{display:block;width:100%;height:38px;
padding:6px 7px;box-sizing:border-box}
.smjbg-tg.cardgal .smjbg-cdpv .h{display:block;height:4px;width:58%;border-radius:2px}
.smjbg-tg.cardgal .smjbg-cdpv .t{display:block;height:2.5px;width:82%;margin-top:4px;
border-radius:2px}
.smjbg-tg.cardgal .smjbg-cdpv .t.s{width:64%}
/* the toggle under the gallery, beside "Selected: …" */
.smjbg-cardmore{display:inline-flex;align-items:center;gap:4px;margin-left:8px;
border:0;background:none;padding:0;font:inherit;font-size:11.5px;font-weight:600;
color:var(--color-action-primary);cursor:pointer}
.smjbg-cardmore:hover{text-decoration:underline}
.smjbg-cardmore:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}
@media(max-width:1023px){
.smjbg-tg.cardgal .smjbg-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
.smjbg-tg.cardgal .smjbg-tiles.capped{max-height:210px}
.smjbg-tg.cardgal .smjbg-tiles.capped.open{max-height:none}
}
/* The cap above lost to the panel's own .smjbg-tiles rule, so the gallery grew to
thirty thumbnails tall. Stated at the panel's own specificity instead. */
.smjbg-sub .smjbg-tg.cardgal .smjbg-tiles,
.smjbg-fs-pane .smjbg-tg.cardgal .smjbg-tiles{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.smjbg-sub .smjbg-tg.cardgal .smjbg-tiles.capped,
.smjbg-fs-pane .smjbg-tg.cardgal .smjbg-tiles.capped{
max-height:196px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.smjbg-sub .smjbg-tg.cardgal .smjbg-tiles.capped.open,
.smjbg-fs-pane .smjbg-tg.cardgal .smjbg-tiles.capped.open{max-height:420px}
@media(max-width:1023px){
.smjbg-fs-pane .smjbg-tg.cardgal .smjbg-tiles{
grid-template-columns:repeat(4,minmax(0,1fr))}
.smjbg-fs-pane .smjbg-tg.cardgal .smjbg-tiles.capped{max-height:210px}
.smjbg-fs-pane .smjbg-tg.cardgal .smjbg-tiles.capped.open{max-height:none}
}
/* tg()'s last argument lands on the TILES box, not the group — which is why the
two rules above never matched. Stated on the box, where the class actually is. */
.smjbg-tiles.cardgal{
display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:6px;padding-right:2px}
.smjbg-tiles.cardgal.capped{max-height:200px;overflow-y:auto;overflow-x:hidden;
overscroll-behavior:contain}
.smjbg-tiles.cardgal.capped.open{max-height:430px}
.smjbg-tiles.cardgal::-webkit-scrollbar{width:6px}
.smjbg-tiles.cardgal::-webkit-scrollbar-thumb{
background:var(--color-border-strong);border-radius:3px}
.smjbg-tiles.cardgal .smjbg-tile{padding:5px 4px 6px}
.smjbg-tiles.cardgal .smjbg-tile b{font-size:10px;line-height:1.15}
.smjbg-tiles.cardgal .smjbg-cdpv{display:block;width:100%;height:38px;
padding:6px 7px;box-sizing:border-box}
.smjbg-tiles.cardgal .smjbg-cdpv .h{display:block;height:4px;width:58%;border-radius:2px}
.smjbg-tiles.cardgal .smjbg-cdpv .t{display:block;height:2.5px;width:82%;margin-top:4px;
border-radius:2px}
.smjbg-tiles.cardgal .smjbg-cdpv .t.s{width:64%}
@media(max-width:1023px){
.smjbg-tiles.cardgal{grid-template-columns:repeat(4,minmax(0,1fr)) !important;
max-height:220px}
.smjbg-tiles.cardgal.open{max-height:none}
}
/* the border-style gallery reuses the card gallery's scroll cap and columns;
only the miniature sheet inside each tile differs */
.smjbg-tiles.bordgal .smjbg-bdpv{display:block;width:100%;height:38px}
/* the ribbon gallery reuses the card gallery's scroll cap and columns */
.smjbg-tiles.rbgal .smjbg-rbtile{height:34px}
/* Typography now also holds Spacing. park() appends blocks in source order, in
which the spacing tiles come first, so the panel is ordered here: the type
controls read before the rhythm control that follows from them. */
/* .on is REQUIRED on this selector. Panels are shown by ".smjbg-sub{display:none}"
plus ".smjbg-sub.on{display:block}", so a display on the plain attribute selector
outranks the none — it kept the Typography panel laid out and on screen behind
every other tab. Ordering needs flex, so it is applied only when this panel is
the open one. */
.smjbg-sub[data-opt="typo"].on{display:flex;flex-direction:column}
.smjbg-sub[data-opt="typo"] > #typoGrid{order:1}
.smjbg-sub[data-opt="typo"] > [data-tg="xSpacing"]{order:2;margin-top:14px;
padding-top:12px;border-top:1px solid var(--color-border-subtle)}
/* Typography holds the three things that act on text: the type controls, the
alignment and the spacing rhythm. park() appends blocks in source order, so
the reading order is set here — what the type looks like, then how it sits. */
.smjbg-sub[data-opt="typo"] > [data-tg="xAlign"]{order:2}
.smjbg-sub[data-opt="typo"] > [data-tg="xSpacing"]{order:3}
.smjbg-sub[data-opt="typo"] > [data-tg="xAlign"],
.smjbg-sub[data-opt="typo"] > [data-tg="xSpacing"]{margin-top:14px;padding-top:12px;
border-top:1px solid var(--color-border-subtle)}
/* ==========================================================================
Size / Format — one group of cards per platform. Each card carries the shape
itself, so a format is recognised before its numbers are read.
========================================================================== */
#sizeBlock{display:flex;flex-direction:column;gap:12px}
.smjbg-szgrp{display:flex;flex-direction:column;gap:5px}
.smjbg-szgrp > b{font-family:"Barlow Condensed","Oswald",sans-serif;font-size:11px;
font-weight:600;letter-spacing:.09em;text-transform:uppercase;
color:var(--color-text-tertiary)}
.smjbg-szgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.smjbg-szc{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
padding:7px 8px 8px;border:1px solid var(--color-border-default);
border-radius:var(--rad);background:var(--color-surface);cursor:pointer;
text-align:left;min-width:0;
transition:border-color .12s ease,background-color .12s ease}
.smjbg-szc:hover{border-color:var(--color-state-hover-border);
background:var(--color-state-hover)}
.smjbg-szc:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}
.smjbg-szc.sel{border-color:var(--color-action-primary);
background:var(--color-state-selected);box-shadow:inset 0 0 0 1px var(--color-action-primary)}
.smjbg-szsh{display:flex;align-items:flex-end;height:28px;margin-bottom:3px}
.smjbg-szsh i{display:block;border:1.5px solid var(--color-text-tertiary);
border-radius:1px;background:var(--color-bg-workspace)}
.smjbg-szc.sel .smjbg-szsh i{border-color:var(--color-action-primary)}
.smjbg-szc > b{font-size:11.5px;font-weight:600;line-height:1.2;
color:var(--color-text-primary);white-space:normal;overflow-wrap:anywhere}
.smjbg-szpx{font-size:10px;color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}
.smjbg-szar{font-size:9.5px;font-weight:600;letter-spacing:.04em;
color:var(--color-text-tertiary)}
.smjbg-szc.sel .smjbg-szar{color:var(--color-action-primary)}
/* the custom fields open only when the custom size is the chosen one */
.smjbg-szcust{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 8px;
margin-top:6px}
.smjbg-szcust.on{display:grid}
.smjbg-szcust .smjbg-hint{grid-column:1 / -1;margin:0}
.smjbg-szcust .smjbg-f input,.smjbg-szcust .smjbg-f select{height:32px;font-size:13px}
@media(max-width:1023px){
/* The two grids are listed together so they cannot drift apart: the cards go
three-up here, and the fields under them have to follow, or the field
columns stop landing on the card columns. Matching the gutter alone was not
enough — a 2-column grid and a 3-column one never align at any gutter. */
.smjbg-szgrid,.smjbg-szcust.on{grid-template-columns:repeat(3,minmax(0,1fr))}
/* the sheet note spans the row whatever the column count is */
.smjbg-szcust .smjbg-hint{grid-column:1 / -1}
.smjbg-szc{min-height:44px}
.smjbg-szcust .smjbg-f input,.smjbg-szcust .smjbg-f select{height:42px;font-size:16px}
}
/* the size panel's caution: a statement about the shape, not an error */
.smjbg-szwarn{margin:2px 0 0;padding:7px 9px;border-radius:var(--rad);
background:var(--color-warning-bg,#fff8ec);
border:1px solid var(--color-warning-border,#f0d9ae);
color:var(--color-warning-text,#7a5312);font-size:11.5px;line-height:1.35}
/* Insert · brochure sections — one row each, the action stated on the button
rather than as a switch, since adding and removing is what the tab does. */
#insSecs{margin:0 0 12px;padding:0 0 12px;
border-bottom:1px solid var(--color-border-subtle)}
.smjbg-inssec{display:flex;align-items:center;gap:8px;padding:5px 0}
.smjbg-inssec + .smjbg-inssec{border-top:1px solid var(--color-border-subtle)}
.smjbg-inssec-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.smjbg-inssec-t b{font-size:12.5px;font-weight:600;color:var(--color-text-primary)}
.smjbg-inssec-t i{font-style:normal;font-size:10.5px;color:var(--color-text-tertiary);
line-height:1.25}
.smjbg-inssec button{flex:0 0 auto;min-width:64px;height:28px;padding:0 10px;
border:1px solid var(--color-action-primary);border-radius:var(--rad);
background:var(--color-surface);font:inherit;font-size:11.5px;font-weight:600;
color:var(--color-action-primary);cursor:pointer;
transition:border-color .12s ease,background-color .12s ease,color .12s ease}
.smjbg-inssec button:hover{background:var(--color-state-selected)}
.smjbg-inssec button:focus-visible{outline:2px solid var(--color-focus-ring);
outline-offset:2px}
/* on the brochure: the action offered is removal, so it reads as the quiet one */
.smjbg-inssec button.rm{border-color:var(--color-border-default);
color:var(--color-text-tertiary)}
.smjbg-inssec button.rm:hover{border-color:var(--color-error);
background:var(--color-error-bg);color:var(--color-error-text)}
/* a removed section is stated as absent rather than merely unstyled */
.smjbg-inssec:not(.on) .smjbg-inssec-t b{color:var(--color-text-tertiary)}
@media(max-width:1023px){
.smjbg-inssec{padding:7px 0}
.smjbg-inssec button{height:44px;min-width:76px}
}
/* The custom-size fields sit under the preset cards, so they share the cards'
grid exactly — same two columns, same 5px gutter. They had an 8px gutter of
their own, which pushed the second column off the card edge above it. */
.smjbg-szcust{gap:6px 5px}
/* A select's text was being clipped at the baseline: the 32px height was fixed
while the control kept the browser's own line box and padding, so the glyphs
had nowhere to sit. Height comes from the line box and padding instead. */
.smjbg-szcust .smjbg-f select,
.smjbg-szcust .smjbg-f input{height:auto;min-height:32px;padding:5px 8px;
line-height:20px}
.smjbg-szcust .smjbg-f select{padding-right:22px}
@media(max-width:1023px){
.smjbg-szcust .smjbg-f select,
.smjbg-szcust .smjbg-f input{height:auto;min-height:44px;line-height:24px}
}
/* "Place freely on the canvas" — the one action that takes a photo out of the
layout's hands, so it sits above the styling tiles rather than among them. */
.smjbg-freebtn{display:inline-flex;align-items:center;gap:6px;margin:0 0 12px;
min-height:32px;padding:0 11px;border:1px solid var(--color-action-primary);
border-radius:var(--rad);background:var(--color-surface);font:inherit;
font-size:12px;font-weight:600;color:var(--color-action-primary);cursor:pointer;
transition:background-color .12s ease}
.smjbg-freebtn svg{width:15px;height:15px;fill:none;stroke:currentColor;
stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.smjbg-freebtn:hover{background:var(--color-state-selected)}
.smjbg-freebtn:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}
@media(max-width:1023px){ .smjbg-freebtn{min-height:44px;font-size:13px} }
/* ==========================================================================
On-canvas image editing: the Crop control sits on the selection itself, so
cropping never sends the user to a panel. It hangs just below the box so it
cannot cover the picture being trimmed.
========================================================================== */
.smjbg-inscrop{position:absolute;left:50%;top:100%;transform:translate(-50%,8px);
display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 9px;
border:1px solid var(--color-action-primary);border-radius:var(--rad);
background:var(--color-surface);font:inherit;font-size:11.5px;font-weight:600;
color:var(--color-action-primary);cursor:pointer;white-space:nowrap;
pointer-events:auto;box-shadow:0 2px 6px rgba(40,44,47,.18);z-index:3}
.smjbg-inscrop svg{width:13px;height:13px;fill:none;stroke:currentColor;
stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.smjbg-inscrop:hover{background:var(--color-state-selected)}
.smjbg-inscrop:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}
/* while cropping the button is the way out, so it reads as the active state */
.smjbg-inscrop.on{background:var(--color-action-primary);color:#fff;
border-color:var(--color-action-primary)}
.smjbg-inscrop.reset{left:auto;right:0;transform:translate(0,8px);
border-color:var(--color-border-default);color:var(--color-text-tertiary);
box-shadow:none}
.smjbg-inscrop.reset:hover{border-color:var(--color-action-primary);
color:var(--color-action-primary);background:var(--color-surface)}
/* a cropping selection is marked out from an ordinary one: the handles are
trimming the picture, not resizing the frame */
.smjbg-insbox.cropping{outline:2px dashed var(--color-action-primary);
outline-offset:0}
.smjbg-insbox.cropping > .g{background:var(--color-action-primary);
border-color:#fff;border-radius:0}
@media(max-width:1023px){
.smjbg-inscrop{height:38px;font-size:13px;padding:0 12px}
.smjbg-inscrop svg{width:15px;height:15px}
}
/* A selection at the foot of the sheet has nowhere to hang its controls: #out
clips them. They move inside the box instead, over the picture's lower edge,
where a shadow keeps them legible against any photograph. */
.smjbg-inscrop.inside{top:auto;bottom:8px;transform:translate(-50%,0);
box-shadow:0 2px 10px rgba(40,44,47,.35)}
.smjbg-inscrop.reset.inside{top:auto;bottom:8px;transform:translate(0,0);
background:var(--color-surface)}
/* Trimming is a state of the selection, not a floating control: the outline
turns to a cut line, the handles read as corner marks, and one line of text
says what the gesture does. */
.smjbg-insbox.cropping{outline-style:dashed;outline-width:2px}
.smjbg-insbox.cropping .g{border-radius:0;width:14px;height:14px}
.smjbg-crophint{position:absolute;left:50%;top:-28px;transform:translateX(-50%);
white-space:nowrap;pointer-events:none;
padding:3px 8px;border-radius:var(--rad);
background:var(--color-text-primary,#282c2f);color:#fff;
font-family:Barlow,system-ui,sans-serif;font-size:10.5px;font-style:normal;
font-weight:500;letter-spacing:.01em;box-shadow:0 2px 8px rgba(40,44,47,.3)}
/* at the top of the sheet the line has nowhere above to sit */
.smjbg-insbox.cropping[style*="top:0"] .smjbg-crophint,
.smjbg-insbox.cropping[style*="top:1%"] .smjbg-crophint,
.smjbg-insbox.cropping[style*="top:2%"] .smjbg-crophint{top:auto;bottom:-28px}
/* A handle says what it does: the corners are round knobs that scale the
picture, the edge handles are flat bars lying along the side they trim. */
.smjbg-insbox .g.crop{border-radius:1px;background:#fff;
border:2px solid var(--color-action-primary,#2667e7)}
.smjbg-insbox .g.n.crop,.smjbg-insbox .g.s.crop{width:26px;height:7px;margin-left:-13px}
.smjbg-insbox .g.e.crop,.smjbg-insbox .g.w.crop{width:7px;height:26px;margin-top:-13px}
/* the cut boundary, shown for the length of the trim */
.smjbg-insbox.cropping{outline-style:dashed;outline-width:2px}
.smjbg-insbox.cropping::after{content:"";position:absolute;inset:0;
pointer-events:none;
box-shadow:0 0 0 1px rgba(255,255,255,.9) inset,0 0 0 9999px rgba(40,44,47,.22)}
/* Background remover: the action and its undo sit together, above the slider
that re-cuts at a different tolerance. */
.smjbg-bgrm{display:flex;gap:6px;align-items:stretch;margin:0 0 8px}
.smjbg-bgrm > .smjbg-insadd{flex:1 1 auto;margin:0}
.smjbg-bgrm > .smjbg-instile{flex:0 0 auto;padding:0 10px;white-space:nowrap}
/* the menu's rule between the image actions and the ones every element has */
.smjbg-insmenu hr{height:1px;margin:3px 4px;border:0;
background:var(--color-border-subtle,#e6e9ec)}
@media(max-width:1023px){
.smjbg-bgrm{flex-wrap:wrap}
.smjbg-bgrm > .smjbg-instile{min-height:44px}
}
/* ==========================================================================
Locked elements. Appended, so nothing above is edited: a locked box keeps
its existing outline and hover treatment and only loses the affordance it no
longer has. Handles are not rendered for it at all (see INS.paint), so there
is nothing here to hide — only the cursor, which would otherwise promise a
drag that cannot happen.
========================================================================== */
.smjbg-insbox.locked{cursor:default}
.smjbg-insbox.locked.on{border-style:dashed}
/* ==========================================================================
Editing text on the sheet. The box sits exactly over the element and takes
its type from it, so what is typed reads as the finished words rather than
as a form field laid on top. Appended, so nothing above is altered.
========================================================================== */
.smjbg-insedit{box-sizing:border-box;margin:0;padding:0;border:0;resize:none;
background:transparent;overflow:hidden;z-index:9;
outline:2px solid var(--color-action-primary);outline-offset:2px;border-radius:3px;
-webkit-appearance:none;appearance:none}
.smjbg-insedit:focus{outline:2px solid var(--color-action-primary)}
/* ==========================================================================
Price Breakdown — a compact settings panel, not a standalone page.
Sized for the width the side panel actually has: the table is laid out in
proportions rather than fixed pixels, so no column can push the Actions
buttons out of view however narrow the panel gets. Appended, so every rule
above is untouched.
========================================================================== */
.smjbg-pricecard{background:var(--color-bg-100,#fff);
border:1px solid var(--color-border-300,#e6e8ec);border-radius:10px;
box-shadow:0 1px 2px rgba(16,24,40,.05);padding:12px}
/* header */
.smjbg-prhd{display:flex;gap:9px;align-items:center;margin:0 0 10px}
.smjbg-prhd-ic{flex:0 0 auto;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
background:color-mix(in srgb,var(--color-action-primary) 10%,transparent)}
.smjbg-prhd-ic svg{width:15px;height:15px;fill:none;stroke:var(--color-action-primary);
stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.smjbg-prhd-ic svg circle{fill:var(--color-action-primary);stroke:none}
.smjbg-prhd-t{min-width:0}
.smjbg-prhd-t h3{margin:0;font-size:14px;line-height:1.25;font-weight:700}
.smjbg-prhd-t i{display:block;font-style:normal;font-size:11px;line-height:1.35;margin-top:1px;
color:var(--color-text-tertiary)}
/* the two choices: radio and title on one line, note beneath */
.smjbg-pricecard .smjbg-seg{display:grid;grid-template-columns:1fr 1fr;gap:7px;
background:none;border:0;padding:0;margin:0 0 10px}
.smjbg-pricecard .smjbg-seg>button{display:block;text-align:left;position:relative;
padding:6px 7px 6px 21px;border:1px solid var(--color-border-300,#e6e8ec);
border-radius:8px;background:var(--color-bg-100,#fff);cursor:pointer;min-width:0;
transition:border-color .15s,background .15s}
.smjbg-pricecard .smjbg-seg>button:hover{border-color:color-mix(in srgb,var(--color-action-primary) 45%,transparent)}
.smjbg-pricecard .smjbg-seg>button::before{content:"";position:absolute;left:7px;top:9px;
width:11px;height:11px;border-radius:50%;border:1.5px solid var(--color-border-300,#c9ced6);
background:var(--color-bg-100,#fff);box-sizing:border-box}
.smjbg-pricecard .smjbg-seg>button.on{border-color:var(--color-action-primary);
background:color-mix(in srgb,var(--color-action-primary) 7%,transparent)}
.smjbg-pricecard .smjbg-seg>button.on::before{border-color:var(--color-action-primary);
box-shadow:inset 0 0 0 2.5px var(--color-bg-100,#fff);background:var(--color-action-primary)}
.smjbg-pricecard .smjbg-seg>button b{display:block;font-size:11px;font-weight:700;
line-height:1.25;margin:0;overflow-wrap:break-word}
.smjbg-pricecard .smjbg-seg>button.on b{color:var(--color-action-primary)}
.smjbg-pricecard .smjbg-seg>button.on b::after{content:none}
.smjbg-pricecard .smjbg-seg>button span{display:block;font-size:10px;line-height:1.3;
margin-top:1px;color:var(--color-text-tertiary)}
/* section heading */
.smjbg-prhead{margin:0}
.smjbg-prhead>span:first-child{font-size:11.5px;font-weight:600;margin-bottom:3px;display:block}
.smjbg-prcount{position:relative;display:block}
.smjbg-prcount input{width:100%;padding:6px 40px 6px 8px;font-size:12px;border-radius:7px}
.smjbg-prcount i{position:absolute;right:8px;top:50%;transform:translateY(-50%);
font-style:normal;font-size:10px;color:var(--color-text-tertiary);pointer-events:none}
/* the rows — proportional columns, so nothing can overflow the panel */
.smjbg-prtable{width:100%;table-layout:fixed;margin-top:9px;border-collapse:separate;border-spacing:0;
border:1px solid var(--color-border-300,#e6e8ec);border-radius:8px;overflow:hidden}
.smjbg-prtable thead th{background:var(--color-bg-200,#f6f7f9);font-size:9.5px;font-weight:700;
letter-spacing:.02em;text-transform:uppercase;color:var(--color-text-tertiary);text-align:left;
padding:5px 4px;border-bottom:1px solid var(--color-border-300,#e6e8ec);white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
/* Proportions, not pixels, so nothing can be pushed out of view however narrow
the panel is. Label and Amount take the room; Type is a single button now, so
it needs almost none, and Actions sits immediately beside it with no gap. */
.smjbg-prtable th.num,.smjbg-prtable td.num{width:8%;text-align:center;padding-left:1px;padding-right:1px}
.smjbg-prtable th.amt,.smjbg-prtable td.amt{width:33%}
.smjbg-prtable th.typ,.smjbg-prtable td.typ{width:13%;text-align:center;
padding-left:2px;padding-right:2px}
/* one button, so the column only needs room for one */
.smjbg-prtable th.act,.smjbg-prtable td.act{width:13%;text-align:center;
padding-left:0;padding-right:2px}
.smjbg-prtable tbody td{padding:5px 4px;border-bottom:1px solid var(--color-border-200,#eef0f3);
vertical-align:middle}
.smjbg-prtable tbody tr:last-child td{border-bottom:0}
.smjbg-prtable td.num span{display:inline-grid;place-items:center;width:16px;height:18px;
border-radius:5px;background:var(--color-bg-200,#f1f3f6);font-size:10px;font-weight:700;
color:var(--color-text-secondary)}
.smjbg-prtable td input[type=text],.smjbg-prtable td input[type=number]{width:100%;min-width:0;
box-sizing:border-box;font-size:11.5px;padding:6px 7px;border-radius:7px;height:auto;
border:1px solid var(--color-border-300,#dfe3e8);background:var(--color-bg-100,#fff)}
.smjbg-prtable td input[type=text]:focus,.smjbg-prtable td input[type=number]:focus{
border-color:var(--color-action-primary)}
/* Addition / Subtraction: one button that says which it is. Blue and a plus for
money added, red and a minus for money taken off, so a discount row is
recognisable at a glance rather than by reading a dropdown. */
.smjbg-tybtn{display:grid;place-items:center;width:25px;height:25px;margin:0 auto;padding:0;
cursor:pointer;border-radius:7px;
border:1px solid color-mix(in srgb,var(--color-action-primary) 40%,transparent);
background:color-mix(in srgb,var(--color-action-primary) 9%,transparent);
color:var(--color-action-primary)}
.smjbg-tybtn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;
stroke-linecap:round}
.smjbg-tybtn:hover{background:color-mix(in srgb,var(--color-action-primary) 16%,transparent)}
.smjbg-tybtn.neg{border-color:color-mix(in srgb,#d93025 40%,transparent);
background:color-mix(in srgb,#d93025 9%,transparent);color:#d93025}
.smjbg-tybtn.neg:hover{background:color-mix(in srgb,#d93025 16%,transparent)}
.smjbg-tybtn.neg svg .v{display:none} /* a minus is the same mark without its upright */
/* The base stylesheet sizes .smjbg-items .del at 38x42, and that selector is
more specific than a class-plus-element one — which is why this button kept
bursting out of its column. Matched here with enough specificity to settle it. */
.smjbg-prtable .smjbg-pract{display:inline-flex;justify-content:center}
.smjbg-prtable .smjbg-pract .del{width:25px;height:25px;min-width:0;display:grid;
place-items:center;padding:0;flex:0 0 auto;font-size:0;line-height:0;
border:1px solid color-mix(in srgb,#d93025 35%,transparent);border-radius:7px;
background:color-mix(in srgb,#d93025 8%,transparent);color:#d93025;cursor:pointer}
.smjbg-prtable .smjbg-pract .del svg{width:12px;height:12px;fill:none;stroke:currentColor;
stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.smjbg-prtable .smjbg-pract .del:hover{background:color-mix(in srgb,#d93025 16%,transparent);
border-color:#d93025}
/* add another row */
.smjbg-praddrow{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;
margin-top:7px;padding:6px;border:1px dashed color-mix(in srgb,var(--color-action-primary) 45%,transparent);
border-radius:7px;background:color-mix(in srgb,var(--color-action-primary) 4%,transparent);
color:var(--color-action-primary);font-size:11.5px;font-weight:600;cursor:pointer}
.smjbg-praddrow:hover{background:color-mix(in srgb,var(--color-action-primary) 9%,transparent);
border-style:solid}
.smjbg-praddrow svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round}
/* the total summary */
.smjbg-prtot{margin-top:10px;padding:9px;border-radius:9px;
background:var(--color-bg-200,#f6f7f9);border:1px solid var(--color-border-300,#e6e8ec)}
.smjbg-prsum{display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:0 0 7px;margin:0 0 8px;border-bottom:1px solid var(--color-border-300,#e6e8ec)}
.smjbg-prsum span{font-size:11.5px;font-weight:600;color:var(--color-text-secondary)}
.smjbg-prsum b{font-size:13px;font-weight:800}
/* label and amount share the row; the button sits under both */
.smjbg-prtot .smjbg-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:0}
.smjbg-prtot .smjbg-f{margin:0;min-width:0}
.smjbg-prtot .smjbg-f>span{font-size:10.5px;margin-bottom:2px;display:block}
.smjbg-prtot .smjbg-f.wide{grid-column:1/-1}
.smjbg-prtot .smjbg-f input{width:100%;box-sizing:border-box;font-size:11.5px;padding:6px 7px;
border-radius:6px}
.smjbg-prtot #autoTotal{padding:6px;font-size:11px;border-radius:6px;min-height:0;height:auto}
.smjbg-prtot .smjbg-tot{margin-top:9px;padding:9px 10px;border-radius:8px;border-top:0;
background:color-mix(in srgb,var(--color-action-primary) 8%,transparent);
border:1px solid color-mix(in srgb,var(--color-action-primary) 18%,transparent)}
.smjbg-prtot .smjbg-tot .g{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
border:0;padding:0;margin:0}
.smjbg-prtot .smjbg-tot .g b:first-child{font-size:11.5px;font-weight:700;color:var(--color-text-secondary)}
.smjbg-prtot .smjbg-tot .g b:last-child{font-size:17px;font-weight:800;
color:var(--color-action-primary);line-height:1.15}
.smjbg-prtot .smjbg-tot .w{display:block;margin-top:2px;font-size:10.5px;
color:var(--color-text-tertiary)}
/* generate */
.smjbg-pricecard .smjbg-btns{margin-top:10px}
.smjbg-prgen{width:100%;padding:9px 12px;border-radius:8px;font-size:13px;font-weight:700;
gap:7px;min-height:0;height:auto;white-space:nowrap}
.smjbg-prgen svg{width:15px;height:15px}
/* on a phone the table stacks into labelled lines, so the proportions are dropped */
@media (max-width:1023px){
.smjbg-prtable,.smjbg-prtable th.num,.smjbg-prtable td.num,.smjbg-prtable th.amt,
.smjbg-prtable td.amt,.smjbg-prtable th.typ,.smjbg-prtable td.typ,
.smjbg-prtable th.act,.smjbg-prtable td.act{width:auto;table-layout:auto}
.smjbg-prtable{border:0;border-radius:0}
.smjbg-prtable td.act{text-align:left}
.smjbg-pract{justify-content:flex-start}
.smjbg-prtable .smjbg-pract .del{width:28px;height:28px}
.smjbg-tybtn{width:28px;height:28px;margin:0}
}
/* ==========================================================================
Price Breakdown, edge to edge. The section sat inside a bordered, rounded,
padded card of its own, inside the panel — a frame around a frame. The panel
is already the container, so the card's own box is dropped and the content
uses the full width. Rules are separated by lines rather than by boxes: the
nesting was costing width on every side and giving nothing back.
Appended last, so it settles the question rather than fighting earlier rules.
========================================================================== */
.smjbg-pricecard{background:none;border:0;border-radius:0;box-shadow:none;
padding:0;margin:0}
/* header sits on the content edge like everything else */
.smjbg-prhd{margin:0 0 9px}
/* the two choices keep their own outline — that outline is what shows which is
chosen, so it is doing a job rather than decorating */
.smjbg-pricecard .smjbg-seg{margin:0 0 9px}
/* the table loses its frame and keeps only the lines that separate rows */
.smjbg-prtable{border:0;border-radius:0;margin-top:8px}
.smjbg-prtable thead th{padding-left:0;padding-right:4px}
.smjbg-prtable th.num,.smjbg-prtable td.num{padding-left:0}
.smjbg-prtable th.act,.smjbg-prtable td.act{padding-right:0}
.smjbg-prtable tbody td{padding-left:0;padding-right:4px}
.smjbg-prtable tbody td.amt,.smjbg-prtable tbody td.typ,
.smjbg-prtable tbody td.act{padding-left:4px}
/* add another row: a full-width line, not a floating box */
.smjbg-praddrow{margin-top:0;border-left:0;border-right:0;border-top:0;border-radius:0;
padding:8px 0;background:none}
.smjbg-praddrow:hover{background:color-mix(in srgb,var(--color-action-primary) 7%,transparent)}
/* totals: a section under a rule, not a card inside a card */
.smjbg-prtot{margin-top:0;padding:10px 0 0;border:0;border-top:1px solid var(--color-border-300,#e6e8ec);
border-radius:0;background:none}
.smjbg-prsum{padding:0 0 9px;margin:0 0 9px}
.smjbg-prtot .smjbg-tot{margin-top:10px;padding:9px 0 0;border:0;border-radius:0;
border-top:1px solid var(--color-border-300,#e6e8ec);background:none}
/* the one button that still wants a shape */
.smjbg-pricecard .smjbg-btns{margin:10px 0 0;padding:0}
/* ==========================================================================
Price Breakdown: square corners. One rule for the whole section rather than
an edit per control, so anything added later is square too and cannot drift
back. Scoped to this panel, so the rest of the editor keeps its own corners.
Marked important on purpose. Several controls here are styled by two- and
three-class selectors that a blanket rule cannot outrank however it is
written, and without this the inputs, the delete button, the choice cards and
the total would all quietly keep their corners — which is exactly what a
plain override did on the first attempt.
========================================================================== */
.smjbg-pricecard,
.smjbg-pricecard *,
.smjbg-pricecard *::before,
.smjbg-pricecard *::after{border-radius:0 !important}
/* The radio mark stays a circle. It is not a corner — it is what tells one kind
of control from another, and a square one would read as a checkbox. */
.smjbg-pricecard .smjbg-seg>button::before{border-radius:50% !important}
/* ---- confirmation modal ------------------------------------------------------
The editor's own confirmation, in place of the browser's. Same shape as the
colour picker popup: a centred card over a dimmed page, compact, with the
primary action on the right and the buttons stacking on a narrow screen. */
.smjbg-cfm{position:fixed;top:0;right:0;bottom:0;left:0;z-index:95;display:none;
background:rgba(16,24,40,.48);align-items:center;justify-content:center;
padding:calc(16px + env(safe-area-inset-top,0px)) 16px
calc(16px + env(safe-area-inset-bottom,0px))}
.smjbg-cfm.on{display:flex}
.smjbg-cfm-dlg{width:100%;max-width:380px;max-height:100%;overflow-y:auto;
background:#fff;border-radius:16px;padding:20px 20px 16px;
box-shadow:0 18px 48px rgba(16,24,40,.32)}
.smjbg-cfm-dlg h4{margin:0 0 8px;font-size:17px;line-height:1.25;font-weight:800;color:var(--ink)}
.smjbg-cfm-dlg p{margin:0 0 18px;font-size:13.5px;line-height:1.5;color:var(--sub)}
.smjbg-cfm-btns{display:flex;gap:10px;justify-content:flex-end}
.smjbg-cfm-btns .smjbg-b{padding:9px 16px;font-size:14px;border-radius:10px;flex:0 0 auto}
@media(max-width:420px){
.smjbg-cfm-dlg{padding:18px 16px 14px}
.smjbg-cfm-btns{flex-direction:column-reverse}
.smjbg-cfm-btns .smjbg-b{width:100%}
}
/* ---- the selection frame ------------------------------------------------------
The handles live in their own frame, laid over the element boxes rather than
inside one of them, so the selected element's handles are reachable even where
something in front overlaps it. The frame carries no fill and does not take
presses itself: only its handles do, so the boxes underneath keep ordinary
front-to-back hit testing and a click still picks the topmost element. */
.smjbg-insbox.smjbg-inschrome{background:none;pointer-events:none;cursor:default}
.smjbg-insbox.smjbg-inschrome .g,
.smjbg-insbox.smjbg-inschrome .rot{pointer-events:auto}
/* The group's frame IS the group, so the whole of it answers to the pointer —
including the gaps between its members, which otherwise let a press fall
through to the sheet and the drag simply did not start there. Its handles keep
their own cursors; the body says "move". */
/* A background fills the whole card, so as an ordinary box it sat under every
press and took the ones meant for the elements on top of it, and its hover
outline drew a line around the entire sheet. Inert while it is not the
selection; selected deliberately from the panel it is an ordinary box again. */
.smjbg-insbox.smjbg-bgel{pointer-events:none;cursor:default;border-color:transparent}
.smjbg-insbox.smjbg-bgel:hover{border-color:transparent}
.smjbg-insbox.smjbg-inschrome.smjbg-insgroup{pointer-events:auto;cursor:move}
/* ---- the editor's own surround, kept off the design -------------------------
Everything in this block is editor chrome: the well the sheet used to sit in
and the elevation cast under it. Neither was ever part of the render, and the
export is now cut to the card's own rectangle (see cardOnly), so the two can
never meet — what is styled here cannot reach a shared or downloaded file.
Written last so it settles the desktop rules above without editing them, and
it touches nothing inside the card: no background, size, position or content. */
.smjbg-prevcol{background:transparent}
.smjbg-prevcol #out,
.smjbg-prevcol #out .smjbg-prev{background:none;border:0;box-shadow:none;border-radius:0}
.smjbg-prevcol #out .smjbg-prev img,
.smjbg-prevcol #out .smjbg-prev canvas{box-shadow:none;border:0}
/* ---- background removal in progress -----------------------------------------
Drawn inside the element's own box in the overlay layer (see paint()), so it
follows the picture's position, size and rotation. It takes no pointer
events, touches no pixels and is never part of the canvas or an export. */
.smjbg-bgbusy{position:absolute;inset:0;pointer-events:none;display:flex;
align-items:center;justify-content:center;overflow:hidden;
background:rgba(255,255,255,.26)}
.smjbg-bgbusy i{display:block;width:26%;min-width:18px;max-width:46px;aspect-ratio:1/1;
box-sizing:border-box;border-radius:50%;
border:3px solid rgba(17,17,17,.18);border-top-color:var(--color-action-primary,#1f5fa8);
box-shadow:0 0 0 3px rgba(255,255,255,.55);
animation:smjbg-bgspin .8s linear infinite}
@keyframes smjbg-bgspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
.smjbg-bgbusy i{animation-duration:2.4s}
}
/* ==========================================================================
The Insert library (2.93): groups, sections, search, recents, drag & drop.
Laid over the picker rules above; the grid now fills the panel's width, and
anything that carries words gets a wide tile so the design can be read.
========================================================================== */
.smjbg-inssearch .ico{position:absolute;left:9px;top:50%;width:15px;height:15px;
transform:translateY(-50%);fill:none;stroke:var(--color-text-tertiary);stroke-width:2;
stroke-linecap:round;pointer-events:none}
.smjbg-inssearch input{padding-left:31px;height:38px;border-radius:10px}
.smjbg-inssearch button{top:4px}
.smjbg-instabs{display:flex;gap:4px;overflow-x:auto;margin:0 -2px 10px;padding:2px;
scrollbar-width:none;-webkit-overflow-scrolling:touch}
.smjbg-instabs::-webkit-scrollbar{display:none}
.smjbg-instabs button{flex:0 0 auto;height:30px;padding:0 11px;border:1px solid var(--color-border-default);
border-radius:999px;background:var(--color-surface);font:inherit;font-size:12px;font-weight:600;
color:var(--color-text-secondary);cursor:pointer;white-space:nowrap}
.smjbg-instabs button:hover{background:var(--color-state-hover);color:var(--color-text-primary)}
.smjbg-instabs button.on{background:var(--color-action-primary);border-color:var(--color-action-primary);color:#fff}
.smjbg-inschips{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 10px}
.smjbg-inschips button{height:26px;padding:0 10px;border:1px solid var(--color-border-default);
border-radius:999px;background:var(--color-surface);font:inherit;font-size:11.5px;
color:var(--color-text-secondary);cursor:pointer}
.smjbg-inschips.recent button::before{content:"\21BA ";color:var(--color-text-tertiary)}
.smjbg-inschips button:hover{background:var(--color-state-hover);color:var(--color-text-primary)}
.smjbg-insnone{display:flex;flex-direction:column;gap:6px;padding:18px 4px;text-align:center}
.smjbg-insnone b{font-size:13px;color:var(--color-text-primary)}
.smjbg-insnone span{font-size:12px;color:var(--color-text-tertiary)}
.smjbg-insnone .smjbg-inschips{justify-content:center}
.smjbg-insquick{display:flex;flex-direction:column;gap:5px;margin:0 0 12px}
.smjbg-insquick button{display:block;width:100%;text-align:left;padding:9px 12px;
border:1px solid var(--color-border-default);border-radius:10px;background:var(--color-surface);
color:var(--color-text-primary);cursor:pointer;font-family:"Montserrat","Inter",sans-serif;
-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.smjbg-insquick button:hover{border-color:var(--color-action-primary);background:var(--color-state-hover)}
.smjbg-insquick .h1{font-size:19px;font-weight:800}
.smjbg-insquick .h2{font-size:14.5px;font-weight:600}
.smjbg-insquick .h3{font-size:12px;font-weight:400;font-family:"Lato","Inter",sans-serif}
.smjbg-libsec{display:block;margin:0 0 12px}
.smjbg-libhd{display:flex;align-items:center;gap:6px;margin:0 0 6px}
.smjbg-libhd b{flex:1 1 auto;font-size:12.5px;font-weight:700;color:var(--color-text-primary)}
.smjbg-libhd em{font-style:normal;font-size:10.5px;font-weight:600;color:var(--color-text-tertiary)}
.smjbg-libhd button{border:0;background:none;padding:2px 4px;font:inherit;font-size:11.5px;
font-weight:600;color:var(--color-action-primary);cursor:pointer;border-radius:6px}
.smjbg-libhd button:hover{background:var(--color-state-hover)}
.smjbg-insgrid,
.smjbg-fs-pane[data-fs="insert"] .smjbg-insgrid{display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 6px}
.smjbg-insopt{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
border-radius:10px;padding:5px 3px 5px;touch-action:auto}
.smjbg-insopt canvas{max-width:none;width:100%;aspect-ratio:60/44}
.smjbg-insopt.wide{grid-column:span 2}
.smjbg-insopt.wide canvas{aspect-ratio:132/58}
.smjbg-insopt:active{transform:scale(.98)}
.smjbg-insopt.dragging{opacity:.45}
.smjbg-insopt:focus-visible,.smjbg-instabs button:focus-visible,.smjbg-insquick button:focus-visible{
outline:2px solid var(--color-action-primary);outline-offset:2px}
.smjbg-insmedia{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 12px}
.smjbg-insmedia button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;
padding:6px 8px;border:1px solid var(--color-border-default);border-radius:10px;
background:var(--color-surface);font:inherit;font-size:12px;font-weight:600;
color:var(--color-text-primary);cursor:pointer}
.smjbg-insmedia button:hover{background:var(--color-state-hover)}
.smjbg-insmedia button.pri{grid-column:1 / -1;background:var(--color-action-primary);
border-color:var(--color-action-primary);color:#fff}
.smjbg-insmedia button.pri:hover{background:var(--color-action-primary-hover)}
.smjbg-insmedia.mini button.pri{grid-column:auto}
.smjbg-insmedia svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round}
.smjbg-insimgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;margin:0 0 12px}
.smjbg-insimgs button{aspect-ratio:1;padding:3px;border:1px solid var(--color-border-default);
border-radius:8px;background:repeating-conic-gradient(#eef0f3 0 25%,#fff 0 50%) 0 0/12px 12px;cursor:pointer}
.smjbg-insimgs img{display:block;width:100%;height:100%;object-fit:contain}
/* the picture that follows the pointer while dragging, and where it will land */
.smjbg-insghost{position:fixed;left:0;top:0;z-index:2147483003;pointer-events:none;
padding:4px;border-radius:10px;background:#fff;box-shadow:0 8px 24px rgba(16,24,40,.22);
opacity:.92;transition:opacity .1s}
.smjbg-insghost.over{opacity:.55}
.smjbg-insghost canvas{display:block}
.smjbg-inslayer.smjbg-insdrop{outline:2px dashed var(--color-action-primary);outline-offset:-2px}
.smjbg-insfoot-mark{position:absolute;box-sizing:border-box;pointer-events:none;
border:1.5px solid var(--color-action-primary);border-radius:3px;
background:color-mix(in srgb,var(--color-action-primary) 12%,transparent)}
@media(max-width:1023px){
.smjbg-fs-pane[data-fs="insert"] .smjbg-instabs button{height:34px}
.smjbg-fs-pane[data-fs="insert"] .smjbg-insopt{min-height:64px}
}
/* the floating toolbar beside a selection, and the drag-selection box */
.smjbg-instb{position:fixed;z-index:2147483001;display:flex;align-items:center;gap:2px;
max-width:calc(100vw - 8px);overflow-x:auto;scrollbar-width:none;
padding:4px;border:1px solid var(--color-border-default,#dfe3e8);border-radius:12px;
background:var(--color-surface,#fff);box-shadow:0 6px 22px rgba(16,24,40,.16);
font-family:"Inter",system-ui,sans-serif}
.smjbg-instb::-webkit-scrollbar{display:none}
.smjbg-instb button{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:32px;height:32px;
padding:0;border:0;border-radius:8px;background:none;color:var(--color-text-primary,#1d1f20);cursor:pointer}
.smjbg-instb button:hover{background:var(--color-state-hover,#f1f3f5)}
.smjbg-instb button.on{background:var(--color-state-selected,#e8f0fe);color:var(--color-action-primary,#2667e7)}
.smjbg-instb button[data-tb="del"]:hover{color:var(--color-error,#d92d20)}
.smjbg-instb button:focus-visible{outline:2px solid var(--color-action-primary,#2667e7);outline-offset:1px}
.smjbg-instb svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round}
.smjbg-instb button[data-tb="more"] svg{fill:currentColor;stroke:none}
.smjbg-instb .sep{width:1px;height:20px;margin:0 3px;background:var(--color-border-default,#dfe3e8)}
.smjbg-instb .col{position:relative;display:block;width:28px;height:28px;margin:0 2px;border-radius:50%;
overflow:hidden;border:1px solid var(--color-border-default,#dfe3e8);cursor:pointer}
.smjbg-instb .col input{position:absolute;inset:-6px;width:40px;height:40px;padding:0;border:0;cursor:pointer}
@media (pointer:coarse){ .smjbg-instb button{width:38px;height:38px} }
.smjbg-insmarq{position:fixed;z-index:2147483000;pointer-events:none;
border:1px solid var(--color-action-primary,#2667e7);
background:color-mix(in srgb,var(--color-action-primary,#2667e7) 10%,transparent)}
.smjbg-inscols{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.smjbg-inslrow .acts button svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.smjbg-inslrow .acts button.on{color:var(--color-action-primary)}
.smjbg-insfoot button[data-act]{font-size:12px}
/* Dragging from the phone Insert sheet: the sheet steps down to a strip and the
backdrop stops catching the finger, so the brochure is visible and is where
the drop lands. Restored the moment the drag ends. */
.smjbg-app.smjbg-fsdnd[data-fs] .smjbg-fs{background:transparent;pointer-events:none;
transition:background .15s}
.smjbg-app.smjbg-fsdnd[data-fs] .smjbg-fs-dlg{transform:translateY(calc(100% - 52px)) !important;
opacity:.94;transition:transform .18s ease-out}
@media (prefers-reduced-motion:reduce){
.smjbg-app.smjbg-fsdnd[data-fs] .smjbg-fs-dlg{transition:none}}
/* a virtualised library list: chunks are grids of their own, stacked with the
same gap the grid uses; an empty chunk keeps its height and shows nothing */
.smjbg-insvg{display:flex;flex-direction:column;gap:6px;margin:0 0 6px}
.smjbg-insvg>.smjbg-insgrid,
.smjbg-fs-pane[data-fs="insert"] .smjbg-insvg>.smjbg-insgrid{margin:0}
.smjbg-insvg>.smjbg-insvc{contain:strict;visibility:hidden}
/* 2.97: the remover's stage under the spinner (first-run download, analysing) */
.smjbg-bgbusy{flex-direction:column;gap:8px}
.smjbg-bgbusy b{display:block;max-width:92%;padding:3px 8px;border-radius:999px;
background:rgba(255,255,255,.88);color:#1b1b1b;font:600 11px/1.3 system-ui,sans-serif;
text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smjbg-bgbusy b:empty{display:none}
/* 2.98: Insert → Insert Image (three buttons) and the Image tab's picture list */
.smjbg-insmedia.mini{grid-template-columns:repeat(3,1fr)}
.smjbg-insmedia.mini button{font-size:12px;padding:0 6px}
.smjbg-linkbtn{display:inline;padding:0;margin:0;border:0;background:none;font:inherit;
color:var(--color-action-primary,#1f5fa8);text-decoration:underline;cursor:pointer}
.smjbg-insimgs button.on{outline:2px solid var(--color-action-primary,#1f5fa8);outline-offset:1px}
.smjbg-imgpick{margin:0 0 10px}
.smjbg-imgpick .smjbg-insimgs{margin-bottom:0}
/* ==========================================================================
2.99 — Insert, canvas-first properties, one colour control
Overrides only; every rule above keeps working where these do not reach.
========================================================================== */
.smjbg-inshost,#imgFreeHost{--r:12px;--gap:8px}
/* search: a soft pill */
.smjbg-inshost .smjbg-inssearch input{height:40px;border-radius:999px;padding-left:36px;
background:var(--color-surface-subtle,#f5f6f8);border:1px solid transparent;font-size:13.5px;
transition:border-color .15s,background .15s,box-shadow .15s}
.smjbg-inshost .smjbg-inssearch input:focus{background:var(--color-surface,#fff);
border-color:var(--color-action-primary,#2563eb);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-action-primary,#2563eb) 18%,transparent);outline:0}
.smjbg-inshost .smjbg-inssearch .ico{left:13px}
/* group tabs: one scrollable row of chips */
.smjbg-inshost .smjbg-instabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
margin:0 0 12px;padding:2px 0 4px;-webkit-overflow-scrolling:touch}
.smjbg-inshost .smjbg-instabs::-webkit-scrollbar{display:none}
.smjbg-inshost .smjbg-instabs button{flex:0 0 auto;height:32px;padding:0 13px;border-radius:999px;
border:1px solid var(--color-border-default,#e4e7ec);background:var(--color-surface,#fff);
font-size:12.5px;font-weight:600;color:var(--color-text-secondary,#475467)}
.smjbg-inshost .smjbg-instabs button.on{background:var(--color-text-primary,#101828);
border-color:var(--color-text-primary,#101828);color:#fff}
/* library sections and tiles */
.smjbg-inshost .smjbg-libsec{margin:0 0 16px}
.smjbg-inshost .smjbg-insopt,.smjbg-inshost .smjbg-inscats button{border-radius:var(--r);
border-color:var(--color-border-subtle,#eef0f3);transition:transform .12s,box-shadow .15s,border-color .15s}
.smjbg-inshost .smjbg-insopt:hover,.smjbg-inshost .smjbg-inscats button:hover{transform:translateY(-1px);
border-color:var(--color-border-default,#d0d5dd);box-shadow:0 4px 14px rgba(16,24,40,.08)}
.smjbg-inshost .smjbg-insquick button{border-radius:var(--r)}
/* selected element: header, canvas hint, groups */
.smjbg-insback.sel{position:sticky;top:0;z-index:2;background:var(--color-surface,#fff);
padding:2px 0 8px;margin:0 0 4px}
.smjbg-insprops{border-top:0;padding-top:0}
.smjbg-canvashint{margin:0 0 10px;padding:8px 10px;border-radius:10px;font-size:11.5px;line-height:1.4;
color:var(--color-text-secondary,#475467);background:var(--color-surface-subtle,#f5f6f8)}
.smjbg-canvashint b{letter-spacing:1px}
.smjbg-pgtop{margin:0 0 10px}
.smjbg-pgrp{border-top:1px solid var(--color-border-subtle,#eef0f3)}
.smjbg-pgrp:last-child{border-bottom:1px solid var(--color-border-subtle,#eef0f3)}
.smjbg-pgrp>summary{list-style:none;display:flex;align-items:center;gap:6px;min-height:42px;cursor:pointer;
font-size:12.5px;font-weight:700;color:var(--color-text-primary,#101828);user-select:none}
.smjbg-pgrp>summary::-webkit-details-marker{display:none}
.smjbg-pgrp>summary em{font-style:normal;font-size:11px;font-weight:600;color:var(--color-text-tertiary,#98a2b3)}
.smjbg-pgrp>summary svg{width:16px;height:16px;margin-left:auto;fill:none;stroke:currentColor;stroke-width:2;
color:var(--color-text-tertiary,#98a2b3);transition:transform .18s}
.smjbg-pgrp[open]>summary svg{transform:rotate(180deg)}
.smjbg-pgbody{padding:0 0 12px}
.smjbg-layers{margin-top:14px}
.smjbg-layers .smjbg-inslist{margin:0 0 4px}
/* rows: label and control on one line where the control is compact */
.smjbg-insprops .smjbg-insrow{margin:0 0 12px}
.smjbg-insprops .smjbg-insrow>span{font-family:inherit;font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;
color:var(--color-text-secondary,#475467)}
.smjbg-insprops .smjbg-instiles{grid-template-columns:repeat(auto-fit,minmax(58px,1fr))}
.smjbg-insprops .smjbg-insrow:has(> .smjbg-csw){display:flex;align-items:center;justify-content:space-between;gap:10px}
.smjbg-insprops .smjbg-insrow:has(> .smjbg-csw)>span{margin:0}
.smjbg-insprops textarea,.smjbg-insselect{width:100%;box-sizing:border-box;border-radius:10px;
border:1px solid var(--color-border-default,#d0d5dd);background:var(--color-surface,#fff);
font:inherit;font-size:13px;padding:8px 10px}
.smjbg-insselect{height:38px;padding:0 10px}
.smjbg-insprops .smjbg-instiles{gap:4px;padding:3px;border-radius:10px;background:var(--color-surface-subtle,#f5f6f8)}
.smjbg-insprops .smjbg-instile{border:0;border-radius:8px;background:transparent;min-height:32px;font-size:12px;font-weight:600}
.smjbg-insprops .smjbg-instile.sel{background:var(--color-surface,#fff);color:var(--color-text-primary,#101828);
box-shadow:0 1px 3px rgba(16,24,40,.12)}
.smjbg-insprops input[type=range]{height:22px}
.smjbg-insprops .smjbg-inscols{display:flex;gap:8px}
/* ---- the one colour control -------------------------------------------- */
.smjbg-cpnat{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;
pointer-events:none!important;border:0!important;padding:0!important;margin:0!important;overflow:hidden}
.smjbg-csw{--sw:#000;flex:0 0 auto;width:34px;height:34px;padding:0;border-radius:10px;cursor:pointer;
border:1px solid var(--color-border-default,#d0d5dd);
background:linear-gradient(var(--sw),var(--sw)),repeating-conic-gradient(#e4e7ec 0 25%,#fff 0 50%) 0 0/10px 10px;
box-shadow:inset 0 0 0 2px #fff;transition:transform .12s,box-shadow .15s}
.smjbg-csw:hover{transform:scale(1.06)}
.smjbg-csw:focus-visible{outline:2px solid var(--color-action-primary,#2563eb);outline-offset:2px}
.smjbg-colr label .smjbg-csw{width:40px;height:40px}
.smjbg-instb .col{overflow:visible}
.smjbg-instb .col button.smjbg-csw{position:absolute;inset:0;width:28px;height:28px;border-radius:50%;padding:0;
background:linear-gradient(var(--sw),var(--sw));
box-shadow:inset 0 0 0 3px #fff;border:1px solid var(--color-border-default,#d0d5dd)}
/* the popover: anchored on a wide screen, a bottom sheet on a phone */
.smjbg-app[data-cp-at] .smjbg-cp{background:transparent;align-items:flex-start;justify-content:flex-start}
.smjbg-app[data-cp-at] .smjbg-cp-dlg{position:fixed;width:300px;max-width:300px;max-height:min(620px,calc(100vh - 16px));
border-radius:16px;box-shadow:0 18px 50px rgba(16,24,40,.22),0 2px 6px rgba(16,24,40,.08);
border:1px solid var(--color-border-subtle,#eef0f3)}
.smjbg-cp-dlg{border-radius:16px;overflow:hidden}
.smjbg-cp-hd{position:relative;padding:12px 44px 8px 14px!important}
.smjbg-cp-x{position:absolute;right:8px;top:6px;width:32px;height:32px;border:0;border-radius:8px;
background:transparent;font-size:20px;line-height:1;cursor:pointer;color:var(--color-text-secondary,#475467)}
.smjbg-cp-x:hover{background:var(--color-state-hover,#f2f4f7)}
.smjbg-cp-body{padding:0 14px 6px!important}
.smjbg-cp-sethd{margin:10px 0 6px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--color-text-tertiary,#98a2b3)}
.smjbg-cp-presets{grid-template-columns:repeat(8,1fr)!important;gap:6px!important;margin-top:0!important}
.smjbg-cp-c{border-radius:50%!important;border:1px solid rgba(16,24,40,.14)!important;cursor:pointer}
.smjbg-cp-c.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--color-text-primary,#101828)}
.smjbg-cp-area{height:130px!important;border-radius:12px!important}
.smjbg-cp-hue{height:12px!important;border-radius:999px!important;margin-top:12px!important}
.smjbg-cp-row{flex-wrap:nowrap;gap:6px!important;margin-top:12px!important}
.smjbg-cp-row .smjbg-cp-sw{width:32px;height:32px;border-radius:50%;flex:0 0 auto}
.smjbg-cp-hexwrap,.smjbg-cp-rgb{display:flex!important;flex-direction:column;gap:2px;margin:0!important}
.smjbg-cp-hexwrap span,.smjbg-cp-rgb span{font-size:9.5px!important;font-weight:700;color:var(--color-text-tertiary,#98a2b3)}
.smjbg-cp-hexwrap input{width:78px!important;height:30px!important;border-radius:8px!important;font-size:12px!important;padding:0 7px!important}
.smjbg-cp-rgb input{width:44px;height:30px;box-sizing:border-box;border:1px solid var(--color-border-default,#d0d5dd);
border-radius:8px;padding:0 4px;font:inherit;font-size:12px;text-align:center;-moz-appearance:textfield}
.smjbg-cp-rgb input::-webkit-inner-spin-button,.smjbg-cp-rgb input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.smjbg-cp-acts{padding:10px 14px 14px!important}
.smjbg-cp-apply{border-radius:10px!important;height:36px;padding:0 20px}
@media (max-width:699px){
.smjbg-app[data-cp] .smjbg-cp{align-items:flex-end}
.smjbg-cp-dlg{max-width:none!important;width:100%!important;border-radius:18px 18px 0 0!important;
max-height:86vh}
.smjbg-cp-presets{grid-template-columns:repeat(8,1fr)!important}
.smjbg-csw{width:40px;height:40px}
}
/* ---- smart guides on the sheet ------------------------------------------- */
.smjbg-guide{position:absolute;pointer-events:none;z-index:30;background:#ff2d87}
.smjbg-guide.v{top:0;bottom:0;width:1px;margin-left:-.5px}
.smjbg-guide.h{left:0;right:0;height:1px;margin-top:-.5px}
/* touch: comfortable targets */
@media (pointer:coarse){
.smjbg-insprops .smjbg-instile{min-height:38px}
.smjbg-pgrp>summary{min-height:48px}
}
.smjbg-cp-row .smjbg-cp-sw{display:none}
.smjbg-cp-row{justify-content:space-between}
.smjbg-cp .smjbg-cp-hexwrap input{width:84px!important;font-size:12.5px!important}
.smjbg-cp .smjbg-cp-rgb input{width:50px!important;font-size:12.5px!important;height:30px!important;padding:0 2px!important}
/* ==========================================================================
3.0 — compact editor: slimmer side panels, more room for the brochure
========================================================================== */
@media(min-width:1024px){
/* the workspace starts right under the toolbar (there is no section strip),
so it fills the whole remaining height instead of leaving a band below */
.smjbg-app{--top:var(--bar,56px);--railw:148px;--panw:280px}
.smjbg-shellmain{position:relative;
grid-template-columns:var(--railw) minmax(0,1fr) var(--panw)!important}
.smjbg-app[data-panel="off"] .smjbg-shellmain{grid-template-columns:var(--railw) minmax(0,1fr) 0!important}
.smjbg-app[data-panel="off"] .smjbg-subrow{display:none!important}
/* left rail: narrower, tighter, still an easy target */
.smjbg-mainrow{padding:8px 6px 12px!important;gap:2px!important}
.smjbg-mo{min-height:34px;padding:7px 10px!important;font-size:13px!important;line-height:1.25!important;
border-radius:8px!important}
/* right panel: less padding, compact headings and tiles */
.smjbg-subrow{padding:10px 12px 20px!important}
.smjbg-subrow .smjbg-tg{margin-bottom:12px}
.smjbg-subrow .smjbg-tg>b,.smjbg-subrow .smjbg-lbl{font-size:12px!important;margin-bottom:6px}
.smjbg-subrow .smjbg-tile{padding:5px 4px!important}
.smjbg-inshost .smjbg-inssearch{margin:0 0 6px}
.smjbg-inshost .smjbg-inssearch input{height:36px}
.smjbg-inshost .smjbg-instabs{margin:0 0 8px}
.smjbg-inshost .smjbg-instabs button{height:28px;padding:0 11px;font-size:12px}
.smjbg-inshost .smjbg-insquick button{padding:7px 10px;margin-bottom:5px}
.smjbg-inshost .smjbg-libsec{margin:0 0 12px}
.smjbg-inshost .smjbg-insgrid{gap:4px}
.smjbg-inshost .smjbg-insopt{padding:4px 3px}
.smjbg-inshost .smjbg-insopt i{font-size:9px}
/* canvas: the card gets the space. The Share button above it is gone — the
toolbar's Share opens the same menu — and the bar it sat in takes no room. */
.smjbg-prevcol{padding:10px 14px 8px!important}
.smjbg-prevcol #mShare{display:none!important}
.smjbg-prevcol .smjbg-mbar{height:0;min-height:0;margin:0!important;padding:0!important;
overflow:visible;max-width:none!important;border:0}
.smjbg-prevcol .smjbg-mshare{position:static}
.smjbg-prevcol #out{max-width:min(100%,1100px)!important}
.smjbg-zoombar{margin-top:8px!important}
/* fold / unfold the right panel */
.smjbg-pantog{position:absolute;top:10px;right:calc(var(--panw) - 1px);z-index:12;
width:20px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;
border:1px solid var(--line,#e4e7ec);border-right:0;border-radius:8px 0 0 8px;
background:var(--card,#fff);color:var(--sub,#475467);cursor:pointer;
box-shadow:-2px 2px 6px rgba(16,24,40,.06)}
.smjbg-pantog:hover{color:var(--ink,#101828);background:var(--brand-050,#eff4ff)}
.smjbg-pantog svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;
stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.smjbg-app[data-panel="off"] .smjbg-pantog{right:0}
.smjbg-app[data-panel="off"] .smjbg-pantog svg{transform:rotate(180deg)}
}
/* narrow laptops: both panels slimmer still */
@media(min-width:1024px) and (max-width:1279px){
.smjbg-app{--railw:128px;--panw:264px}
.smjbg-mo{font-size:12.5px!important;padding:7px 8px!important}
}
/* below 1200px the right panel becomes a drawer over the canvas edge, so the
brochure keeps the full width between the rail and the window edge */
@media(min-width:1024px) and (max-width:1199px){
.smjbg-shellmain,.smjbg-app[data-panel="off"] .smjbg-shellmain{
grid-template-columns:var(--railw) minmax(0,1fr)!important;grid-template-areas:"rail canvas"!important}
.smjbg-subrow{position:absolute!important;top:0;right:0;bottom:0;grid-area:auto!important;
width:var(--panw);z-index:11;box-shadow:-10px 0 28px rgba(16,24,40,.14)}
}
/* large monitors: the brochure grows, the panels only a little */
@media(min-width:1600px){
.smjbg-app{--railw:168px;--panw:304px}
}
/* ==========================================================================
3.1 — ONE UI SYSTEM FOR THE WHOLE EDITOR
A single set of tokens and a single definition per control. Every section
(Layout, Background, Colour Theme, Typography, Border, Ribbon, Image, Price
Calculation, Insert), every popup and dialog, the toolbar and the canvas
controls use these. Presentation only: no markup, id, attribute or behaviour
is changed, so every existing feature works exactly as before.
The brochure itself is drawn on canvas and reads none of this.
========================================================================== */
.smjbg-app,.smjbg-instb,.smjbg-insmenu,.smjbg-insghost{
/* type */
--ui-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;
--ui-fs-2xs:10.5px;--ui-fs-xs:11.5px;--ui-fs-sm:12.5px;--ui-fs-md:13.5px;--ui-fs-lg:15px;
--ui-fw-r:450;--ui-fw-m:550;--ui-fw-sb:620;--ui-fw-b:700;
/* shape */
--ui-r-xs:6px;--ui-r-sm:8px;--ui-r:10px;--ui-r-lg:14px;--ui-r-xl:18px;--ui-r-pill:999px;
/* size */
--ui-h-sm:28px;--ui-h:34px;--ui-h-lg:40px;--ui-ico:16px;
--ui-s1:4px;--ui-s2:8px;--ui-s3:12px;--ui-s4:16px;
/* colour roles (mapped onto the editor's existing ramps) */
--ui-ink:var(--n-900,#1c2024);--ui-sub:var(--n-700,#565b61);--ui-muted:var(--n-500,#81878d);
--ui-line:var(--n-200,#d9dde1);--ui-line-soft:var(--n-100,#eaedf0);--ui-line-strong:var(--n-300,#c0c5ca);
--ui-surface:#fff;--ui-subtle:var(--n-050,#f6f7f9);--ui-hover:var(--n-100,#eaedf0);
--ui-accent:var(--p-600,#2667e7);--ui-accent-hi:var(--p-700,#1d52bb);
--ui-accent-soft:var(--p-050,#f1f8ff);--ui-accent-line:var(--p-200,#c0ddff);
--ui-danger:var(--er-600,#bf3e43);--ui-danger-soft:var(--er-050,#fff4f3);
--ui-ring:0 0 0 3px color-mix(in srgb,var(--ui-accent) 22%,transparent);
/* depth */
--ui-sh-1:0 1px 2px rgba(16,24,40,.06);
--ui-sh-2:0 2px 6px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
--ui-sh-3:0 12px 32px rgba(16,24,40,.14),0 2px 6px rgba(16,24,40,.06);
--ui-t:.14s ease;
}
/* ---- typography: one family, a small set of sizes ------------------------ */
.smjbg-app,.smjbg-instb,.smjbg-insmenu{font-family:var(--ui-font)!important;color:var(--ui-ink);
-webkit-font-smoothing:antialiased}
.smjbg-app :is(button,input,select,textarea,label){font-family:var(--ui-font)}
.smjbg-app :is(h2,h3,h4),.smjbg-app .smjbg-proj{font-family:var(--ui-font)!important;letter-spacing:-.01em}
.smjbg-app .smjbg-proj{font-size:16px!important;font-weight:var(--ui-fw-b)}
.smjbg-app .smjbg-prhd-t h3{font-size:var(--ui-fs-md)!important;font-weight:var(--ui-fw-b)!important;text-transform:none;letter-spacing:0}
/* section headings inside panels: small caps-style labels */
.smjbg-app :is(.smjbg-tg>b,.smjbg-lbl,.smjbg-card>h3,.smjbg-sechd,.smjbg-applycap,.smjbg-g[data-sect]::before){
font-family:var(--ui-font)!important;font-size:var(--ui-fs-2xs)!important;font-weight:var(--ui-fw-b)!important;
letter-spacing:.07em!important;text-transform:uppercase;color:var(--ui-muted)!important;line-height:1.3}
.smjbg-app .smjbg-hint,.smjbg-app .smjbg-selval{font-size:var(--ui-fs-xs)!important;color:var(--ui-muted)!important;line-height:1.45}
.smjbg-app .smjbg-f>span{font-size:var(--ui-fs-xs)!important;font-weight:var(--ui-fw-sb)!important;color:var(--ui-sub)!important;
text-transform:none!important;letter-spacing:0!important}
/* ---- buttons ------------------------------------------------------------ */
.smjbg-app :is(.smjbg-b,.smjbg-act,.smjbg-mb,.smjbg-mini,.smjbg-insadd.alt,.smjbg-zoombar button,.smjbg-fs-hd .smjbg-b,.smjbg-cp-apply){
min-height:var(--ui-h);height:auto;padding:0 14px;border-radius:var(--ui-r-sm)!important;
border:1px solid var(--ui-line)!important;background:var(--ui-surface);color:var(--ui-ink);
font-size:var(--ui-fs-md);font-weight:var(--ui-fw-sb);letter-spacing:0;line-height:1;
box-shadow:var(--ui-sh-1);transition:background var(--ui-t),border-color var(--ui-t),box-shadow var(--ui-t),color var(--ui-t);
cursor:pointer}
.smjbg-app :is(.smjbg-b,.smjbg-act,.smjbg-mb,.smjbg-mini,.smjbg-insadd.alt,.smjbg-zoombar button):hover:not(:disabled){
background:var(--ui-subtle);border-color:var(--ui-line-strong)!important}
.smjbg-app :is(.smjbg-b.pri,.smjbg-act-pri,.smjbg-mb.pri,.smjbg-insadd:not(.alt),.smjbg-cp-apply,.smjbg-insmedia .pri){
background:var(--ui-accent)!important;border-color:var(--ui-accent)!important;color:#fff!important}
.smjbg-app :is(.smjbg-b.pri,.smjbg-act-pri,.smjbg-mb.pri,.smjbg-insadd:not(.alt),.smjbg-cp-apply,.smjbg-insmedia .pri):hover:not(:disabled){
background:var(--ui-accent-hi)!important;border-color:var(--ui-accent-hi)!important}
.smjbg-app :is(button,[role=button],a):focus-visible{outline:none;box-shadow:var(--ui-ring)!important}
.smjbg-app :is(button,input,select,textarea):disabled{opacity:.45;cursor:not-allowed}
.smjbg-app .smjbg-insadd{border-radius:var(--ui-r-sm)!important;min-height:var(--ui-h);font-weight:var(--ui-fw-sb);font-size:var(--ui-fs-md)}
/* toolbar buttons keep their compact height */
.smjbg-app .smjbg-appbar :is(.smjbg-act,.smjbg-b,.smjbg-undo button){min-height:34px}
.smjbg-app .smjbg-act-car{padding:0 8px!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important}
.smjbg-app .smjbg-split>.smjbg-act:first-child{border-top-right-radius:0!important;border-bottom-right-radius:0!important}
.smjbg-app .smjbg-undo button{border-radius:var(--ui-r-sm)!important;border:1px solid var(--ui-line)!important;background:var(--ui-surface)}
/* icon buttons */
.smjbg-app :is(.smjbg-b,.smjbg-act,.smjbg-mb) svg{width:var(--ui-ico);height:var(--ui-ico)}
/* destructive */
.smjbg-app :is(.rm,[data-rm],.smjbg-del){color:var(--ui-danger)}
/* ---- text, number, search inputs; textareas ---------------------------- */
.smjbg-app :is(input[type=text],input[type=number],input[type=email],input[type=tel],input[type=url],input[type=search],input[type=password],input:not([type]),textarea,select):not(.smjbg-insedit):not(.smjbg-cpnat){
box-sizing:border-box;min-height:var(--ui-h);border:1px solid var(--ui-line)!important;border-radius:var(--ui-r-sm)!important;
background-color:var(--ui-surface);color:var(--ui-ink);font-size:var(--ui-fs-md)!important;font-weight:var(--ui-fw-r);
padding-left:10px;padding-right:10px;box-shadow:var(--ui-sh-1);outline:none;
transition:border-color var(--ui-t),box-shadow var(--ui-t),background-color var(--ui-t)}
.smjbg-app :is(input,textarea,select):not(.smjbg-insedit):not(.smjbg-cpnat):not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]):hover{
border-color:var(--ui-line-strong)!important}
.smjbg-app :is(input,textarea,select):not(.smjbg-insedit):not(.smjbg-cpnat):not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]):focus{
border-color:var(--ui-accent)!important;box-shadow:var(--ui-ring)!important}
.smjbg-app textarea:not(.smjbg-insedit){padding-top:8px;padding-bottom:8px;line-height:1.45;resize:vertical}
.smjbg-app ::placeholder{color:var(--ui-muted);opacity:1}
/* compact dropdowns */
.smjbg-app select:not(.smjbg-insedit){-webkit-appearance:none;appearance:none;padding-right:30px;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23565b61' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 9px center;background-size:14px 14px;height:var(--ui-h)}
/* number spinners out of the way */
.smjbg-app input[type=number]{-moz-appearance:textfield}
.smjbg-app input[type=number]::-webkit-inner-spin-button,.smjbg-app input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* dense table inputs (price rows) */
.smjbg-app :is(.smjbg-prtable,.smjbg-items) :is(input,select){min-height:30px!important;height:30px;font-size:var(--ui-fs-sm)!important;padding-left:8px;padding-right:8px}
.smjbg-app :is(.smjbg-prtable,.smjbg-items) :is(button){border-radius:var(--ui-r-xs)!important}
/* ---- toggle switch ------------------------------------------------------ */
.smjbg-app .smjbg-tgl{border-radius:var(--ui-r)!important;border:1px solid var(--ui-line)!important;background:var(--ui-surface);
box-shadow:var(--ui-sh-1);gap:10px;transition:border-color var(--ui-t),background var(--ui-t)}
.smjbg-app .smjbg-tgl:hover{border-color:var(--ui-line-strong)!important}
.smjbg-app .smjbg-tgl.on{background:var(--ui-surface)!important;border-color:var(--ui-line)!important}
.smjbg-app .smjbg-tgl .sw{width:34px!important;height:20px!important;border-radius:var(--ui-r-pill)!important;
background:var(--ui-line-strong)!important;transform:none!important;transition:background var(--ui-t)}
.smjbg-app .smjbg-tgl .sw::after{top:2px!important;left:2px!important;width:16px!important;height:16px!important;
border-radius:50%!important;background:#fff!important;box-shadow:0 1px 3px rgba(16,24,40,.25);transition:left var(--ui-t)}
.smjbg-app .smjbg-tgl.on .sw{background:var(--ui-accent)!important}
.smjbg-app .smjbg-tgl.on .sw::after{left:16px!important}
.smjbg-app .smjbg-tgl:has(input:focus-visible) .sw{box-shadow:var(--ui-ring)}
.smjbg-app .smjbg-tgl .tt{font-size:var(--ui-fs-sm)!important;font-weight:var(--ui-fw-sb)!important;color:var(--ui-ink)!important;
text-transform:none!important;letter-spacing:0!important}
.smjbg-app .smjbg-appbar .smjbg-tgl{height:34px;padding:0 12px!important;border-radius:var(--ui-r-pill)!important}
.smjbg-app .smjbg-appbar .smjbg-tgl .tt{font-size:var(--ui-fs-sm)!important}
/* the option cards that are toggles underneath (Show sections etc.) */
.smjbg-app .smjbg-sub .smjbg-toggles .smjbg-tgl{border-radius:var(--ui-r)!important}
.smjbg-app .smjbg-sub .smjbg-toggles .smjbg-tgl::before{border-radius:5px!important}
.smjbg-app .smjbg-sub .smjbg-toggles .smjbg-tgl.on{border-color:var(--ui-accent)!important;background:var(--ui-accent-soft)!important}
/* ---- checkboxes and radios --------------------------------------------- */
.smjbg-app input[type=checkbox]:not([hidden]):not(.smjbg-tgl input):not([style*="opacity"]),
.smjbg-app input[type=radio]:not([hidden]):not([style*="opacity"]){
-webkit-appearance:none;appearance:none;flex:0 0 auto;width:16px;height:16px;margin:0;vertical-align:middle;cursor:pointer;
border:1.5px solid var(--ui-line-strong);background:var(--ui-surface) center/12px 12px no-repeat;
transition:background-color var(--ui-t),border-color var(--ui-t),box-shadow var(--ui-t)}
.smjbg-app input[type=checkbox]:not([hidden]):not(.smjbg-tgl input){border-radius:5px}
.smjbg-app input[type=radio]:not([hidden]){border-radius:50%}
.smjbg-app input[type=checkbox]:not([hidden]):not(.smjbg-tgl input):checked{background-color:var(--ui-accent);border-color:var(--ui-accent);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.smjbg-app input[type=radio]:not([hidden]):checked{border-color:var(--ui-accent);box-shadow:inset 0 0 0 4px var(--ui-surface);background-color:var(--ui-accent)}
.smjbg-app :is(input[type=checkbox],input[type=radio]):focus-visible{box-shadow:var(--ui-ring)}
/* ---- sliders ------------------------------------------------------------ */
.smjbg-app input[type=range]{-webkit-appearance:none;appearance:none;height:20px;background:transparent;cursor:pointer;
--pct:50%}
.smjbg-app input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:var(--ui-line)}
.smjbg-app input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:var(--ui-line)}
.smjbg-app input[type=range]::-moz-range-progress{height:4px;border-radius:4px;background:var(--ui-accent)}
.smjbg-app input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;
background:#fff;border:2px solid var(--ui-accent);box-shadow:0 1px 3px rgba(16,24,40,.2);transition:transform var(--ui-t)}
.smjbg-app input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--ui-accent)}
.smjbg-app input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}
.smjbg-app input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:var(--ui-ring)}
/* ---- option tiles (layouts, themes, fonts, borders, patterns…) --------- */
.smjbg-app .smjbg-tile{border-radius:var(--ui-r)!important;border:1px solid var(--ui-line)!important;background:var(--ui-surface)!important;
box-shadow:none;transition:border-color var(--ui-t),box-shadow var(--ui-t),background var(--ui-t),transform var(--ui-t)}
.smjbg-app .smjbg-tile:hover{border-color:var(--ui-line-strong)!important;box-shadow:var(--ui-sh-2)}
.smjbg-app .smjbg-tile.sel{border-color:var(--ui-accent)!important;background:var(--ui-accent-soft)!important;
box-shadow:0 0 0 1px var(--ui-accent) inset!important}
.smjbg-app .smjbg-tile.sel::after{border-radius:50%!important}
.smjbg-app .smjbg-tile .smjbg-tl{font-size:var(--ui-fs-2xs)!important;font-weight:var(--ui-fw-sb)!important;color:var(--ui-sub)}
.smjbg-app .smjbg-tile.sel .smjbg-tl{color:var(--ui-accent-hi)!important}
.smjbg-app :is(.smjbg-lopv,.smjbg-thpv,.smjbg-bgthumb,.smjbg-cdpv){border-radius:var(--ui-r-xs)!important}
/* colour preset tiles: round swatches */
.smjbg-app .smjbg-tg[data-tg*="Colour"] .smjbg-tile,.smjbg-app .smjbg-tg[data-tg*="Color"] .smjbg-tile{border-radius:var(--ui-r)!important}
/* ---- segmented controls ------------------------------------------------- */
.smjbg-app .smjbg-seg{gap:4px!important;padding:3px;border-radius:var(--ui-r)!important;background:var(--ui-subtle);border:1px solid var(--ui-line-soft)}
.smjbg-app .smjbg-seg>button{border-radius:var(--ui-r-sm)!important;border:1px solid transparent!important;background:transparent!important;
box-shadow:none!important;transition:background var(--ui-t),box-shadow var(--ui-t)}
.smjbg-app .smjbg-seg>button:is(.on,.sel,[aria-pressed=true],[aria-checked=true]){background:var(--ui-surface)!important;
border-color:var(--ui-line)!important;box-shadow:var(--ui-sh-2)!important}
.smjbg-app .smjbg-seg>button b{font-size:var(--ui-fs-sm)!important;font-weight:var(--ui-fw-b)!important}
.smjbg-app .smjbg-seg>button span{font-size:var(--ui-fs-2xs)!important;color:var(--ui-muted)!important}
/* the Price Details / Total Price switch and similar two-way choices */
.smjbg-app .smjbg-applybtn{border-radius:var(--ui-r-sm)!important;border:1px solid var(--ui-line)!important;background:var(--ui-surface);
min-height:var(--ui-h);font-size:var(--ui-fs-md)!important;font-weight:var(--ui-fw-sb)!important}
.smjbg-app .smjbg-applybtn :is(b){font-weight:var(--ui-fw-sb)!important;font-size:var(--ui-fs-md)!important}
.smjbg-app .smjbg-applybtn:is(.on,.sel,[aria-pressed=true]){border-color:var(--ui-accent)!important;background:var(--ui-accent-soft)!important;color:var(--ui-accent-hi)!important}
/* chip rows (Apply to…, section chips) */
.smjbg-app :is(.smjbg-chip,.smjbg-pill,.smjbg-secchip){border-radius:var(--ui-r-pill)!important}
/* ---- left rail as modern tabs ------------------------------------------ */
.smjbg-app .smjbg-mo{border-radius:var(--ui-r-sm)!important;font-weight:var(--ui-fw-m)!important;color:var(--ui-sub)!important;
box-shadow:none!important;border:1px solid transparent!important}
.smjbg-app .smjbg-mo:hover:not(.on){background:var(--ui-subtle)!important;color:var(--ui-ink)!important}
.smjbg-app .smjbg-mo.on{background:var(--ui-accent-soft)!important;color:var(--ui-accent-hi)!important;font-weight:var(--ui-fw-sb)!important}
/* ---- cards and panels --------------------------------------------------- */
.smjbg-app :is(.smjbg-card,.smjbg-pricecard,.smjbg-photofx){border-radius:var(--ui-r-lg)!important;border-color:var(--ui-line-soft)!important}
.smjbg-app .smjbg-subrow{background:var(--ui-surface)}
.smjbg-app .smjbg-subrow .smjbg-tg{border-radius:0}
/* ---- upload controls ---------------------------------------------------- */
.smjbg-app :is(.smjbg-drop,.smjbg-sbox,.smjbg-sbox-empty,.smjbg-bgempty){border-radius:var(--ui-r-lg)!important;
border:1.5px dashed var(--ui-line-strong)!important;background:var(--ui-subtle)!important;transition:border-color var(--ui-t),background var(--ui-t)}
.smjbg-app :is(.smjbg-drop,.smjbg-sbox,.smjbg-sbox-empty,.smjbg-bgempty):hover{border-color:var(--ui-accent)!important;background:var(--ui-accent-soft)!important}
/* ---- menus and popovers ------------------------------------------------- */
:is(.smjbg-app .smjbg-mmenu,.smjbg-app .smjbg-genmenu,.smjbg-app .smjbg-pmmenu,.smjbg-insmenu){
border-radius:var(--ui-r-lg)!important;border:1px solid var(--ui-line-soft)!important;box-shadow:var(--ui-sh-3)!important;
padding:6px!important;background:var(--ui-surface)!important}
:is(.smjbg-app .smjbg-mmenu,.smjbg-app .smjbg-genmenu,.smjbg-app .smjbg-pmmenu,.smjbg-insmenu) button{
border-radius:var(--ui-r-xs)!important;min-height:32px;font-size:var(--ui-fs-md)!important;font-weight:var(--ui-fw-m)!important;
border:0!important;background:transparent;text-align:left}
:is(.smjbg-app .smjbg-mmenu,.smjbg-app .smjbg-genmenu,.smjbg-app .smjbg-pmmenu,.smjbg-insmenu) button:hover{background:var(--ui-subtle)!important}
.smjbg-insmenu hr{border:0;border-top:1px solid var(--ui-line-soft);margin:5px 4px}
.smjbg-insmenu button.rm{color:var(--ui-danger)!important}
/* the floating element toolbar */
.smjbg-instb{border-radius:var(--ui-r-lg)!important;border:1px solid var(--ui-line-soft)!important;box-shadow:var(--ui-sh-3)!important;padding:4px!important}
.smjbg-instb button{border-radius:var(--ui-r-xs)!important;width:32px;height:32px}
.smjbg-instb button:hover{background:var(--ui-subtle)!important}
.smjbg-instb button.on{background:var(--ui-accent-soft)!important;color:var(--ui-accent-hi)!important}
/* ---- dialogs ------------------------------------------------------------ */
.smjbg-app :is(.smjbg-fs-dlg,.smjbg-cfm>div,.smjbg-cp-dlg){border-radius:var(--ui-r-xl)!important;box-shadow:var(--ui-sh-3)!important;
border:1px solid var(--ui-line-soft)}
.smjbg-app .smjbg-fs-hd{border-bottom:1px solid var(--ui-line-soft)!important}
.smjbg-app .smjbg-fs-hd>span,.smjbg-app #mFsT{font-family:var(--ui-font)!important;font-size:var(--ui-fs-md)!important;
font-weight:var(--ui-fw-b)!important;letter-spacing:.02em!important}
/* ---- canvas controls ---------------------------------------------------- */
.smjbg-app .smjbg-zoombar{border-radius:var(--ui-r-pill)!important;border:1px solid var(--ui-line-soft)!important;
box-shadow:var(--ui-sh-2)!important;padding:4px 6px!important;gap:4px!important}
.smjbg-app .smjbg-zoombar button{min-height:26px!important;height:26px;width:26px;padding:0!important;border-radius:var(--ui-r-pill)!important;
box-shadow:none!important;border-color:transparent!important;background:transparent}
.smjbg-app .smjbg-zoombar button:hover{background:var(--ui-subtle)!important}
.smjbg-app .smjbg-zoombar button[data-zoom="fit"]{width:auto;padding:0 10px!important;font-size:var(--ui-fs-2xs)!important}
.smjbg-app .smjbg-zoombar span{font-size:var(--ui-fs-sm)!important}
.smjbg-app .smjbg-insbox.on{border-color:var(--ui-accent)}
.smjbg-app .smjbg-insbox .g{border-radius:3px!important;border-color:var(--ui-accent)!important}
.smjbg-app .smjbg-pantog{border-radius:var(--ui-r-sm) 0 0 var(--ui-r-sm)!important}
/* ---- the colour trigger: always recognisable as a colour picker --------
The current colour sits in the middle of a small spectrum ring, so even a
black or white value reads as "choose a colour", never as a plain square. */
.smjbg-csw{--sw:#000;width:30px!important;height:30px!important;border-radius:50%!important;padding:0!important;
border:0!important;box-shadow:0 0 0 1px rgba(16,24,40,.08),var(--ui-sh-1,0 1px 2px rgba(16,24,40,.06))!important;
background:
radial-gradient(circle at center,var(--sw) 0 calc(50% - 5px),#fff calc(50% - 5px) calc(50% - 3px),transparent calc(50% - 3px)),
conic-gradient(from 0deg,#ff3b30,#ff9500,#ffcc00,#34c759,#00c7be,#007aff,#5856d6,#af52de,#ff2d55,#ff3b30)!important}
.smjbg-csw:hover{transform:scale(1.08)}
.smjbg-app .smjbg-colr label .smjbg-csw{width:36px!important;height:36px!important}
.smjbg-instb .col button.smjbg-csw{width:26px!important;height:26px!important;inset:1px!important}
.smjbg-instb .col{border:0!important;overflow:visible!important}
/* the popover follows the same system */
.smjbg-app .smjbg-cp-dlg{font-family:var(--ui-font)!important}
.smjbg-app .smjbg-cp-hd>span{font-size:var(--ui-fs-md)!important;font-weight:var(--ui-fw-b)!important}
.smjbg-app .smjbg-cp-for{font-size:var(--ui-fs-xs)!important;color:var(--ui-muted)!important;text-transform:none!important}
/* ---- phones: the same system, touch-sized -------------------------------- */
@media (max-width:1023px),(pointer:coarse){
.smjbg-app{--ui-h:40px;--ui-h-sm:34px}
.smjbg-app input[type=range]::-webkit-slider-thumb{width:20px;height:20px;margin-top:-8px}
.smjbg-app :is(input[type=checkbox],input[type=radio]):not([hidden]){width:20px;height:20px}
}
/* one typeface for all editor chrome — every older rule that named a display
face for labels and headings falls under this; font previews (which carry
their own family inline), the canvas and the on-sheet text editor are left alone */
.smjbg-app *:not(canvas):not(svg):not(svg *):not([style*="font-family"]):not(.smjbg-fpv *):not(.smjbg-insedit){font-family:var(--ui-font)!important}
.smjbg-app .smjbg-typocap,.smjbg-app .smjbg-imghd,.smjbg-app .smjbg-szgrp>b,.smjbg-app .smjbg-mogrp{
font-size:var(--ui-fs-2xs)!important;font-weight:var(--ui-fw-b)!important;letter-spacing:.07em!important;
text-transform:uppercase;color:var(--ui-muted)!important}
.smjbg-app .smjbg-colr label{gap:10px;align-items:center}
.smjbg-app .smjbg-colr label>span{font-size:var(--ui-fs-sm)!important;font-weight:var(--ui-fw-sb)!important;color:var(--ui-ink)!important}
.smjbg-app .smjbg-freebtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;
min-height:var(--ui-h);padding:0 12px;border-radius:var(--ui-r-sm)!important;border:1px solid var(--ui-line)!important;
background:var(--ui-surface);color:var(--ui-ink);font-size:var(--ui-fs-md)!important;font-weight:var(--ui-fw-sb)!important;
box-shadow:var(--ui-sh-1);cursor:pointer}
.smjbg-app .smjbg-freebtn:hover{background:var(--ui-subtle);border-color:var(--ui-line-strong)!important}
.smjbg-app .smjbg-freebtn svg{width:15px;height:15px}
.smjbg-app .smjbg-freebtn span{font-size:inherit!important}
.smjbg-app .smjbg-inssearch input{padding-left:36px!important;border-radius:var(--ui-r-pill)!important}
.smjbg-app label:has(>input[type=color])>span,.smjbg-app #cBgWrap>span{font-size:var(--ui-fs-sm)!important;
font-weight:var(--ui-fw-sb)!important;color:var(--ui-ink)!important}
.smjbg-app label:has(>input[type=color]){display:inline-flex;align-items:center;gap:10px}
.smjbg-app select:not(.smjbg-insedit){padding-top:0!important;padding-bottom:0!important;line-height:1.2!important;height:var(--ui-h)!important}
/* 3.1.1 — full-height page: the workspace takes what the window leaves after the
toolbar and the footer (measured in smjbg.js as --smjbg-work), so the footer
sits on the bottom edge; a short window falls back to a minimum and scrolls */
@media(min-width:1024px){
.smjbg-shellmain{height:var(--smjbg-work,calc(100vh - var(--top)))!important;min-height:520px}
body.smjbg-standalone{min-height:100vh;min-height:100dvh}
.smjbg-split>.smjbg-act:only-child{border-radius:var(--ui-r-sm,8px)!important}
}
@media(min-width:1024px){
.smjbg-app .smjbg-foot{margin-top:0!important;border-top:1px solid var(--ui-line-soft,#eaedf0)}
.smjbg-app .smjbg-main{padding-bottom:0!important;margin-bottom:0!important;row-gap:0!important;gap:0!important}
}
/* ==========================================================================
3.1.2 — compact colour picker
A small design-tool popover: square swatches, one tight grid per section,
a short spectrum and slim hue bar, compact HEX/RGB fields. The selected
colour is shown by a ring around its swatch, never by a mark inside it.
========================================================================== */
.smjbg-app .smjbg-cp-dlg{width:236px!important;max-width:236px!important;padding:0!important;border-radius:12px!important;
box-shadow:0 10px 30px rgba(16,24,40,.16),0 1px 3px rgba(16,24,40,.08)!important;border:1px solid var(--ui-line-soft,#eaedf0)!important}
.smjbg-app[data-cp-at] .smjbg-cp-dlg{width:236px!important;max-width:236px!important;max-height:calc(100vh - 16px)!important}
.smjbg-app .smjbg-cp-hd{padding:8px 34px 4px 10px!important;min-height:0!important;gap:6px!important;align-items:center!important;border:0!important}
.smjbg-app .smjbg-cp-hd>span{font-size:12px!important;font-weight:700!important;letter-spacing:0!important}
.smjbg-app .smjbg-cp-for{font-size:10.5px!important;font-weight:600!important;margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.smjbg-app .smjbg-cp-x{top:4px!important;right:4px!important;width:24px!important;height:24px!important;font-size:16px!important;border-radius:6px!important;min-height:0!important}
.smjbg-app .smjbg-cp-body{padding:0 10px 4px!important;overflow:visible!important;max-height:none!important}
.smjbg-app .smjbg-cp-sethd{margin:6px 0 3px!important;font-size:9px!important;font-weight:700!important;letter-spacing:.08em!important;
color:var(--ui-muted,#81878d)!important}
.smjbg-app .smjbg-cp-presets{display:grid!important;grid-template-columns:repeat(10,18px)!important;gap:4px!important;margin:0!important}
.smjbg-app .smjbg-cp-c{width:18px!important;height:18px!important;min-height:0!important;aspect-ratio:auto!important;padding:0!important;
border-radius:4px!important;border:0!important;box-shadow:inset 0 0 0 1px rgba(16,24,40,.12)!important;cursor:pointer;
transition:transform .1s ease,box-shadow .1s ease}
.smjbg-app .smjbg-cp-c:hover{transform:scale(1.12)}
.smjbg-app .smjbg-cp-c.on{box-shadow:inset 0 0 0 1px rgba(16,24,40,.12),0 0 0 2px #fff,0 0 0 3.5px var(--ui-accent,#2667e7)!important;transform:none}
/* spectrum + hue */
.smjbg-app .smjbg-cp-area{height:92px!important;border-radius:6px!important;margin-top:2px}
.smjbg-app .smjbg-cp-dot{width:12px!important;height:12px!important;margin:-6px 0 0 -6px!important;border:2px solid #fff!important;
box-shadow:0 0 0 1px rgba(16,24,40,.35),0 1px 3px rgba(16,24,40,.3)!important}
.smjbg-app .smjbg-cp-hue{height:8px!important;margin-top:8px!important;border-radius:999px!important}
.smjbg-app .smjbg-cp-hdot{width:12px!important;height:12px!important;margin:-6px 0 0 -6px!important;border:2px solid #fff!important;
box-shadow:0 0 0 1px rgba(16,24,40,.35),0 1px 3px rgba(16,24,40,.3)!important;background:transparent!important}
/* HEX / RGB */
.smjbg-app .smjbg-cp-row{display:flex!important;gap:4px!important;margin-top:8px!important;align-items:flex-end!important}
.smjbg-app .smjbg-cp-hexwrap,.smjbg-app .smjbg-cp-rgb{gap:1px!important}
.smjbg-app .smjbg-cp-hexwrap span,.smjbg-app .smjbg-cp-rgb span{font-size:8.5px!important;letter-spacing:.06em}
.smjbg-app .smjbg-cp .smjbg-cp-hexwrap input{width:70px!important;height:24px!important;min-height:0!important;font-size:11px!important;padding:0 6px!important;border-radius:6px!important;box-shadow:none!important}
.smjbg-app .smjbg-cp .smjbg-cp-rgb input{width:40px!important;height:24px!important;min-height:0!important;font-size:11px!important;padding:0 2px!important;border-radius:6px!important;box-shadow:none!important}
/* footer */
.smjbg-app .smjbg-cp-acts{padding:8px 10px 10px!important;border:0!important}
.smjbg-app .smjbg-cp-apply{min-height:0!important;height:26px!important;padding:0 14px!important;font-size:12px!important;border-radius:6px!important}
@media (max-width:699px){
.smjbg-app .smjbg-cp-dlg{width:100%!important;max-width:none!important;border-radius:14px 14px 0 0!important}
.smjbg-app .smjbg-cp-presets{grid-template-columns:repeat(10,1fr)!important}
.smjbg-app .smjbg-cp-c{width:100%!important;height:auto!important;aspect-ratio:1/1!important}
.smjbg-app .smjbg-cp-area{height:110px!important}
.smjbg-app .smjbg-cp .smjbg-cp-hexwrap input{width:84px!important}
.smjbg-app .smjbg-cp .smjbg-cp-rgb input{width:52px!important}
}
/* ---- the colour trigger: a softly rounded square of the current colour with
a small spectrum corner, so it reads as a colour control at a glance ---- */
.smjbg-csw{position:relative!important;width:26px!important;height:26px!important;border-radius:6px!important;
background:var(--sw)!important;border:0!important;padding:0!important;overflow:visible!important;
box-shadow:inset 0 0 0 1px rgba(16,24,40,.14),0 1px 2px rgba(16,24,40,.06)!important;transform:none}
.smjbg-csw::after{content:"";position:absolute;right:-3px;bottom:-3px;width:11px;height:11px;border-radius:3px;
background:conic-gradient(from 200deg,#ff3b30,#ffcc00,#34c759,#00c7be,#007aff,#af52de,#ff2d55,#ff3b30);
box-shadow:0 0 0 1.5px #fff,0 1px 2px rgba(16,24,40,.25);pointer-events:none}
.smjbg-csw:hover{transform:none;box-shadow:inset 0 0 0 1px rgba(16,24,40,.24),0 0 0 3px color-mix(in srgb,var(--ui-accent,#2667e7) 18%,transparent)!important}
.smjbg-app .smjbg-colr label .smjbg-csw,.smjbg-app label:has(>input[type=color]) .smjbg-csw{width:28px!important;height:28px!important}
.smjbg-instb .col button.smjbg-csw{width:22px!important;height:22px!important;inset:3px!important;border-radius:5px!important}
.smjbg-instb .col button.smjbg-csw::after{width:9px;height:9px;right:-2px;bottom:-2px;border-radius:2px}
@media (max-width:1023px),(pointer:coarse){ .smjbg-csw{width:30px!important;height:30px!important} }
/* ==========================================================================
3.2 — accounts, the profile menu and My Creations
Mounted on (outside the editor), so they carry the same tokens here.
========================================================================== */
.smjbg-acm,.smjbg-acmenu{--ui-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
--ui-ink:#1c2024;--ui-sub:#565b61;--ui-muted:#81878d;--ui-line:#d9dde1;--ui-line-soft:#eaedf0;
--ui-subtle:#f6f7f9;--ui-accent:#2667e7;--ui-accent-hi:#1d52bb;--ui-accent-soft:#f1f8ff;--ui-danger:#bf3e43;
font-family:var(--ui-font);color:var(--ui-ink);-webkit-font-smoothing:antialiased}
.smjbg-acm *,.smjbg-acmenu *{box-sizing:border-box;font-family:inherit}
/* modal */
.smjbg-acm{position:fixed;inset:0;z-index:2147483100;display:none;align-items:center;justify-content:center;
padding:16px;background:rgba(16,24,40,.42);backdrop-filter:blur(2px)}
.smjbg-acm.on{display:flex}
.smjbg-acm-dlg{width:100%;max-width:380px;max-height:calc(100vh - 32px);overflow:auto;background:#fff;border-radius:16px;
box-shadow:0 24px 60px rgba(16,24,40,.25),0 2px 8px rgba(16,24,40,.08);padding:18px 18px 16px}
.smjbg-acm-dlg.wide{max-width:880px}
.smjbg-acm-hd{display:flex;align-items:flex-start;gap:12px;margin:0 0 12px}
.smjbg-acm-hd>div{flex:1 1 auto;min-width:0}
.smjbg-acm-hd b{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em}
.smjbg-acm-hd span{display:block;margin-top:3px;font-size:12.5px;color:var(--ui-sub);line-height:1.4}
.smjbg-acm-x{flex:0 0 auto;width:30px;height:30px;border:0;border-radius:8px;background:transparent;font-size:20px;
line-height:1;color:var(--ui-sub);cursor:pointer}
.smjbg-acm-x:hover{background:var(--ui-subtle)}
.smjbg-acm-tabs{display:flex;gap:4px;padding:3px;margin:0 0 14px;border-radius:10px;background:var(--ui-subtle)}
.smjbg-acm-tabs button{flex:1 1 0;height:32px;border:0;border-radius:8px;background:transparent;font-size:13px;font-weight:600;
color:var(--ui-sub);cursor:pointer}
.smjbg-acm-tabs button.on{background:#fff;color:var(--ui-ink);box-shadow:0 1px 3px rgba(16,24,40,.12)}
.smjbg-acm-form{display:flex;flex-direction:column;gap:10px;margin:0}
.smjbg-acm-form label{display:flex;flex-direction:column;gap:5px}
.smjbg-acm-form label>span{font-size:12px;font-weight:600;color:var(--ui-sub)}
.smjbg-acm-form input[type=text],.smjbg-acm-form input[type=email],.smjbg-acm-form input[type=password],.smjbg-acc-q{
width:100%;height:38px;padding:0 11px;border:1px solid var(--ui-line);border-radius:9px;font-size:14px;color:var(--ui-ink);
background:#fff;outline:none;transition:border-color .14s,box-shadow .14s}
.smjbg-acm-form input:focus,.smjbg-acc-q:focus{border-color:var(--ui-accent);box-shadow:0 0 0 3px rgba(38,103,231,.18)}
.smjbg-acm-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px}
.smjbg-acm-row .chk{flex-direction:row!important;align-items:center;gap:7px!important;color:var(--ui-sub);font-weight:500}
.smjbg-acm-row a{color:var(--ui-accent);text-decoration:none;font-weight:600}
.smjbg-acm-err{margin:0;padding:8px 10px;border-radius:8px;background:#fff4f3;color:var(--ui-danger);font-size:12.5px;line-height:1.4}
.smjbg-acm-form button[type=submit],.smjbg-acm-acts button,.smjbg-acc-bar button{height:38px;padding:0 16px;border-radius:9px;
border:1px solid var(--ui-line);background:#fff;color:var(--ui-ink);font-size:13.5px;font-weight:600;cursor:pointer;
transition:background .14s,border-color .14s}
.smjbg-acm .pri{background:var(--ui-accent)!important;border-color:var(--ui-accent)!important;color:#fff!important}
.smjbg-acm .pri:hover:not(:disabled){background:var(--ui-accent-hi)!important}
.smjbg-acm .pri.danger{background:var(--ui-danger)!important;border-color:var(--ui-danger)!important}
.smjbg-acm button:disabled{opacity:.6;cursor:progress}
.smjbg-acm-or{display:flex;align-items:center;gap:10px;color:var(--ui-muted);font-size:12px}
.smjbg-acm-or::before,.smjbg-acm-or::after{content:"";flex:1;height:1px;background:var(--ui-line-soft)}
.smjbg-acm-g{display:flex;align-items:center;justify-content:center;height:38px;border:1px solid var(--ui-line);border-radius:9px;
color:var(--ui-ink);text-decoration:none;font-size:13.5px;font-weight:600}
.smjbg-acm-g:hover{background:var(--ui-subtle)}
.smjbg-acm-msg{margin:0 0 14px;font-size:13.5px;line-height:1.5;color:var(--ui-sub)}
.smjbg-acm-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
/* My Creations */
.smjbg-acc-bar{display:flex;gap:8px;margin:0 0 14px}
.smjbg-acc-bar .smjbg-acc-q{flex:1 1 auto;max-width:320px;margin-left:auto}
.smjbg-acc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.smjbg-acc-card{display:flex;flex-direction:column;border:1px solid var(--ui-line-soft);border-radius:12px;overflow:hidden;background:#fff;
transition:box-shadow .15s,border-color .15s}
.smjbg-acc-card:hover{border-color:var(--ui-line);box-shadow:0 6px 18px rgba(16,24,40,.09)}
.smjbg-acc-card.cur{border-color:var(--ui-accent);box-shadow:0 0 0 1px var(--ui-accent) inset}
.smjbg-acc-th{position:relative;display:block;width:100%;aspect-ratio:4/3;padding:8px;border:0;background:var(--ui-subtle);cursor:pointer}
.smjbg-acc-th img{display:block;width:100%;height:100%;object-fit:contain;border-radius:4px;box-shadow:0 1px 3px rgba(16,24,40,.15)}
.smjbg-acc-th i{display:block;width:100%;height:100%;border-radius:4px;background:repeating-linear-gradient(45deg,#eef0f3 0 8px,#f6f7f9 8px 16px)}
.smjbg-acc-th em{position:absolute;left:8px;top:8px;padding:2px 8px;border-radius:999px;background:var(--ui-accent);color:#fff;
font-style:normal;font-size:10.5px;font-weight:700}
.smjbg-acc-meta{padding:9px 10px 4px;min-width:0}
.smjbg-acc-meta b{display:block;font-size:13px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smjbg-acc-meta span{display:block;margin-top:2px;font-size:11.5px;color:var(--ui-muted)}
.smjbg-acc-acts{display:flex;gap:4px;padding:6px 8px 9px}
.smjbg-acc-ib{flex:0 0 auto;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ui-line-soft);
border-radius:8px;background:#fff;color:var(--ui-sub);cursor:pointer}
.smjbg-acc-ib svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.smjbg-acc-ib:hover{background:var(--ui-subtle);color:var(--ui-ink)}
.smjbg-acc-ib.pri{flex:1 1 auto;width:auto;gap:6px;font-size:12.5px;font-weight:600;line-height:1}
.smjbg-acc-ib.pri span{font-weight:600}
.smjbg-acc-ib.danger:hover{background:#fff4f3!important;color:var(--ui-danger)!important;border-color:#ffcecb!important}
.smjbg-acc-empty{margin:24px 0;text-align:center;font-size:13.5px;color:var(--ui-sub);line-height:1.6}
.smjbg-acc-empty b:first-child{display:block;color:var(--ui-ink)}
.smjbg-acc-empty b{color:var(--ui-ink)}
/* profile menu */
.smjbg-acmenu{position:fixed;z-index:2147483050;min-width:240px;max-width:300px;padding:6px;background:#fff;border:1px solid var(--ui-line-soft);
border-radius:14px;box-shadow:0 14px 36px rgba(16,24,40,.16),0 2px 6px rgba(16,24,40,.06)}
.smjbg-acmenu button{display:block;width:100%;min-height:34px;padding:0 10px;border:0;border-radius:8px;background:transparent;text-align:left;
font-size:13.5px;font-weight:550;color:var(--ui-ink);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smjbg-acmenu button:hover{background:var(--ui-subtle)}
.smjbg-acmenu button.pri{background:var(--ui-accent);color:#fff;text-align:center;margin:4px 0}
.smjbg-acmenu button.pri:hover{background:var(--ui-accent-hi)}
.smjbg-acmenu hr{border:0;border-top:1px solid var(--ui-line-soft);margin:5px 4px}
.smjbg-acmenu-u{display:flex;align-items:center;gap:10px;padding:8px 8px 10px}
.smjbg-acmenu-u i{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:var(--ui-accent-soft);color:var(--ui-accent-hi);font-style:normal;font-weight:700}
.smjbg-acmenu-u div,.smjbg-acmenu-g{min-width:0}
.smjbg-acmenu-u b,.smjbg-acmenu-g b{display:block;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smjbg-acmenu-u span,.smjbg-acmenu-g span{display:block;font-size:12px;color:var(--ui-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smjbg-acmenu-g{padding:8px 8px 4px}
.smjbg-acmenu-g span{white-space:normal}
/* the toolbar Save button and the signed-in Profile item */
.smjbg-app .smjbg-act-save svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.smjbg-app .smjbg-act-save.saved::after{content:"";width:6px;height:6px;margin-left:2px;border-radius:50%;background:#12b76a}
.smjbg-app [data-nav="profile"].in svg{color:var(--ui-accent,#2667e7)}
@media (max-width:640px){
.smjbg-acm{align-items:flex-end;padding:0}
.smjbg-acm-dlg,.smjbg-acm-dlg.wide{max-width:none;border-radius:18px 18px 0 0;max-height:92vh}
.smjbg-acc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.smjbg-acc-bar{flex-wrap:wrap}.smjbg-acc-bar .smjbg-acc-q{max-width:none;margin:0}
}
/* the panel fold toggle only exists in the side-by-side layout */
@media (max-width:1023px){ .smjbg-app .smjbg-pantog{display:none!important} }
/* ==========================================================================
3.3 — Template library (Browse). Mounted on , like the account screens.
========================================================================== */
.smjbg-tlib{--ui-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
--ui-ink:#1c2024;--ui-sub:#565b61;--ui-muted:#81878d;--ui-line:#d9dde1;--ui-line-soft:#eaedf0;
--ui-subtle:#f6f7f9;--ui-accent:#2667e7;--ui-accent-hi:#1d52bb;--ui-accent-soft:#f1f8ff;
position:fixed;inset:0;z-index:2147483000;display:none;align-items:center;justify-content:center;padding:20px;
background:rgba(16,24,40,.46);backdrop-filter:blur(2px);font-family:var(--ui-font);color:var(--ui-ink);-webkit-font-smoothing:antialiased}
.smjbg-tlib.on{display:flex}
html.smjbg-tl-lock,html.smjbg-tl-lock body{overflow:hidden}
.smjbg-tlib *{box-sizing:border-box;font-family:inherit}
.smjbg-tlib button{font:inherit;color:inherit}
.smjbg-tl-box{position:relative;width:100%;max-width:1240px;height:min(860px,calc(100vh - 40px));display:flex;flex-direction:column;
background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 28px 70px rgba(16,24,40,.28),0 2px 8px rgba(16,24,40,.08)}
.smjbg-tl-hd{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:14px 16px 14px 20px;border-bottom:1px solid var(--ui-line-soft)}
.smjbg-tl-ttl{flex:0 0 auto;min-width:0}
.smjbg-tl-ttl b{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em}
.smjbg-tl-ttl span{display:block;margin-top:2px;font-size:12px;color:var(--ui-sub)}
.smjbg-tl-search{flex:1 1 auto;display:flex;align-items:center;gap:8px;height:40px;max-width:560px;margin:0 auto;padding:0 12px;
border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-subtle);transition:border-color .14s,box-shadow .14s,background .14s}
.smjbg-tl-search:focus-within{background:#fff;border-color:var(--ui-accent);box-shadow:0 0 0 3px rgba(38,103,231,.18)}
.smjbg-tl-search svg{flex:0 0 auto;width:17px;height:17px;fill:none;stroke:var(--ui-muted);stroke-width:2;stroke-linecap:round}
.smjbg-tl-search input{flex:1 1 auto;min-width:0;height:100%;border:0;outline:none;background:transparent;font-size:14px;color:var(--ui-ink)}
.smjbg-tl-x{flex:0 0 auto;width:34px;height:34px;border:0;border-radius:9px;background:transparent;font-size:22px;line-height:1;color:var(--ui-sub);cursor:pointer}
.smjbg-tl-x:hover{background:var(--ui-subtle)}
.smjbg-tl-body{flex:1 1 auto;min-height:0;display:flex}
.smjbg-tl-side{flex:0 0 250px;overflow:auto;padding:12px 10px 16px;border-right:1px solid var(--ui-line-soft);background:#fbfbfc}
.smjbg-tl-side h6{margin:16px 10px 6px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ui-muted)}
.smjbg-tl-side button{display:flex;align-items:center;gap:9px;width:100%;min-height:34px;padding:6px 10px;border:0;border-radius:9px;background:transparent;
font-size:13px;font-weight:550;text-align:left;cursor:pointer;color:var(--ui-ink);line-height:1.25}
.smjbg-tl-side button i{flex:0 0 20px;font-style:normal;text-align:center;font-size:14px}
.smjbg-tl-side button em{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--ui-muted);font-weight:600}
.smjbg-tl-side button:hover{background:#f0f2f5}
.smjbg-tl-side button.on{background:var(--ui-accent-soft);color:var(--ui-accent-hi);font-weight:650}
.smjbg-tl-side button.on em{color:var(--ui-accent)}
.smjbg-tl-main{position:relative;flex:1 1 auto;min-width:0;overflow:auto;padding:14px 18px 24px;overscroll-behavior:contain}
.smjbg-tl-bar{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.smjbg-tl-count{flex:1 1 auto;min-width:0}
.smjbg-tl-count b{font-size:15px;font-weight:700;margin-right:8px}
.smjbg-tl-count span{font-size:12.5px;color:var(--ui-sub)}
.smjbg-tl-bar select{height:34px;padding:0 30px 0 10px;border:1px solid var(--ui-line);border-radius:9px;background:#fff;font-size:13px;color:var(--ui-ink);cursor:pointer}
.smjbg-tl-indsel{display:none}
.smjbg-tl-cats{display:flex;gap:6px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none}
.smjbg-tl-cats::-webkit-scrollbar{display:none}
.smjbg-tl-cats button{flex:0 0 auto;height:32px;padding:0 13px;border:1px solid var(--ui-line);border-radius:999px;background:#fff;
font-size:12.5px;font-weight:600;color:var(--ui-sub);cursor:pointer;white-space:nowrap}
.smjbg-tl-cats button:hover{border-color:#b9c0c7;color:var(--ui-ink)}
.smjbg-tl-cats button.on{background:var(--ui-ink);border-color:var(--ui-ink);color:#fff}
.smjbg-tl-grid{columns:4 200px;column-gap:14px}
.smjbg-tl-card{position:relative;break-inside:avoid;margin:0 0 16px;display:block}
.smjbg-tl-th{display:block;width:100%;padding:0;border:1px solid var(--ui-line-soft);border-radius:12px;overflow:hidden;cursor:pointer;
background:linear-gradient(110deg,#f1f3f5 30%,#f8f9fa 50%,#f1f3f5 70%) 0 0/200% 100%;animation:smjbgTlShim 1.4s linear infinite;
transition:box-shadow .16s,transform .16s}
.smjbg-tl-th img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s}
.smjbg-tl-th img.ok,.smjbg-tl-th img[src]:not([data-src]){opacity:1}
@keyframes smjbgTlShim{to{background-position:-200% 0}}
.smjbg-tl-card:hover .smjbg-tl-th{box-shadow:0 10px 26px rgba(16,24,40,.16);transform:translateY(-2px)}
.smjbg-tl-meta{padding:7px 2px 0}
.smjbg-tl-meta b{display:block;font-size:12.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smjbg-tl-meta span{display:block;margin-top:1px;font-size:11.5px;color:var(--ui-muted)}
.smjbg-tl-fav{position:absolute;top:8px;right:8px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
border:0;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 1px 4px rgba(16,24,40,.18);cursor:pointer;opacity:0;transition:opacity .15s,transform .15s}
.smjbg-tl-fav svg,.smjbg-tl-fav2 svg{width:17px;height:17px;fill:none;stroke:#5b6168;stroke-width:2}
.smjbg-tl-fav.on,.smjbg-tl-card:hover .smjbg-tl-fav,.smjbg-tl-fav:focus-visible{opacity:1}
.smjbg-tl-fav.on svg,.smjbg-tl-fav2.on svg{fill:#e11d48;stroke:#e11d48}
.smjbg-tl-fav:hover{transform:scale(1.08)}
.smjbg-tl-ov{position:absolute;left:8px;right:8px;display:flex;gap:6px;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s;pointer-events:none;
bottom:calc(8px + 2.9em)}
.smjbg-tl-card:hover .smjbg-tl-ov,.smjbg-tl-card:focus-within .smjbg-tl-ov{opacity:1;transform:none;pointer-events:auto}
.smjbg-tl-ov button{flex:1 1 0;height:34px;border:0;border-radius:9px;background:rgba(255,255,255,.95);font-size:12.5px;font-weight:650;cursor:pointer;
box-shadow:0 2px 8px rgba(16,24,40,.18)}
.smjbg-tl-ov button.pri,.smjbg-tl-pvacts .pri{background:var(--ui-accent);color:#fff}
.smjbg-tl-ov button.pri:hover,.smjbg-tl-pvacts .pri:hover{background:var(--ui-accent-hi)}
.smjbg-tl-empty{margin:60px auto;max-width:320px;text-align:center;font-size:13px;color:var(--ui-sub);line-height:1.5}
.smjbg-tl-empty b{display:block;margin-bottom:4px;font-size:15px;color:var(--ui-ink)}
.smjbg-tl-load{position:absolute;inset:60px 0 auto;text-align:center;font-size:13px;color:var(--ui-sub)}
.smjbg-tl-load[hidden]{display:none}
.smjbg-tl-sent{height:1px}
/* preview */
.smjbg-tl-pv{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(15,20,28,.72)}
.smjbg-tl-pv[hidden]{display:none}
.smjbg-tl-pvbox{position:relative;display:flex;gap:26px;align-items:stretch;width:100%;max-width:1060px;max-height:100%;padding:22px 24px;background:#fff;border-radius:16px}
.smjbg-tl-pvbox>.smjbg-tl-x{position:absolute;top:10px;right:10px}
.smjbg-tl-pvimg{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;background:#f3f4f6;border-radius:12px;padding:16px;min-height:300px}
.smjbg-tl-pvimg img{display:block;max-width:100%;max-height:calc(100vh - 180px);width:auto;height:auto;border-radius:6px;box-shadow:0 8px 30px rgba(16,24,40,.18)}
.smjbg-tl-pvside{flex:0 0 280px;display:flex;flex-direction:column;gap:10px;padding-top:18px}
.smjbg-tl-kick{font-size:12px;font-weight:650;color:var(--ui-accent)}
.smjbg-tl-pvside>b{font-size:21px;font-weight:750;letter-spacing:-.015em;line-height:1.2}
.smjbg-tl-pvside dl{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:2px 0;font-size:12.5px}
.smjbg-tl-pvside dt{color:var(--ui-muted)}.smjbg-tl-pvside dd{margin:0;font-weight:550}
.smjbg-tl-pvside p{margin:0;font-size:12.5px;line-height:1.5;color:var(--ui-sub)}
.smjbg-tl-pvacts{display:flex;gap:8px;margin-top:6px}
.smjbg-tl-pvacts button{height:42px;border-radius:10px;border:1px solid var(--ui-line);background:#fff;font-size:14px;font-weight:650;cursor:pointer}
.smjbg-tl-pvacts .pri{flex:1 1 auto;border-color:var(--ui-accent)}
.smjbg-tl-fav2{display:flex;align-items:center;gap:6px;padding:0 13px}
.smjbg-tl-fav2 span{font-size:13px}
.smjbg-tl-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.smjbg-tl-tags button{height:26px;padding:0 10px;border:0;border-radius:999px;background:var(--ui-subtle);font-size:11.5px;color:var(--ui-sub);cursor:pointer}
.smjbg-tl-tags button:hover{background:var(--ui-line-soft);color:var(--ui-ink)}
.smjbg-tl-nav{position:absolute;top:50%;width:40px;height:40px;margin-top:-20px;border:0;border-radius:50%;background:#fff;
box-shadow:0 2px 10px rgba(16,24,40,.2);font-size:26px;line-height:1;cursor:pointer;z-index:2}
.smjbg-tl-nav.prev{left:-18px}.smjbg-tl-nav.next{right:-18px}
@media (max-width:1100px){ .smjbg-tl-grid{columns:3 180px} }
@media (max-width:900px){
.smjbg-tlib{padding:0;align-items:stretch}
.smjbg-tl-box{max-width:none;height:100%;border-radius:0}
.smjbg-tl-side{display:none}
.smjbg-tl-indsel{display:block;max-width:46%}
.smjbg-tl-hd{flex-wrap:wrap;gap:8px 10px;padding:10px 12px}
.smjbg-tl-ttl{flex:1 1 auto}
.smjbg-tl-search{order:3;flex:1 1 100%;max-width:none;margin:0}
.smjbg-tl-main{padding:10px 12px 20px}
.smjbg-tl-bar{flex-wrap:wrap}
.smjbg-tl-count{flex:1 1 100%}
.smjbg-tl-grid{columns:2 140px;column-gap:10px}
.smjbg-tl-ov{display:none}
.smjbg-tl-fav{opacity:1;width:30px;height:30px}
.smjbg-tl-pv{padding:0;align-items:stretch}
.smjbg-tl-pvbox{flex-direction:column;gap:12px;border-radius:0;padding:52px 14px 16px;overflow:auto}
.smjbg-tl-pvimg{min-height:0;flex:0 0 auto}
.smjbg-tl-pvimg img{max-height:55vh}
.smjbg-tl-pvside{flex:0 0 auto;padding-top:0}
.smjbg-tl-nav{top:34%}.smjbg-tl-nav.prev{left:6px}.smjbg-tl-nav.next{right:6px}
}
/* the side list's views on a phone */
@media (max-width:900px){
.smjbg-tl-cats{padding-bottom:10px}
}
.smjbg-tl-cats .smjbg-tl-mv{display:none}
@media (max-width:900px){ .smjbg-tl-cats .smjbg-tl-mv{display:inline-flex;align-items:center}
.smjbg-tl-cats .smjbg-tl-mv.on{background:var(--ui-accent);border-color:var(--ui-accent);color:#fff} }
/* 3.4 — a large catalogue: a regular grid (cards never move as more load in) */
.smjbg-tl-grid{columns:auto!important;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px 14px}
.smjbg-tl-card{margin:0}
.smjbg-tl-th{aspect-ratio:4 / 5;display:flex;align-items:center;justify-content:center;padding:10px;background-color:#f1f3f5}
.smjbg-tl-th.wide{aspect-ratio:4 / 5}
.smjbg-tl-th img{width:auto!important;height:auto!important;max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;box-shadow:0 2px 10px rgba(16,24,40,.14)}
.smjbg-tl-ov{bottom:calc(8px + 2.9em)}
.smjbg-tl-cats button em{margin-left:6px;font-style:normal;font-size:11px;font-weight:700;opacity:.6}
.smjbg-tl-cats button.on em{opacity:.85}
.smjbg-tl-more{margin:18px 0 0;text-align:center;font-size:12px;color:var(--ui-muted)}
.smjbg-tl-more:empty{display:none}
@media (max-width:900px){ .smjbg-tl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px} .smjbg-tl-th{padding:6px} }
/* ---- Font Theme tiles: the pairing written in its own faces ---- */
.smjbg-ftpv{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;min-height:96px;
padding:9px 9px 7px;box-sizing:border-box;text-align:left;color:var(--ink);line-height:1.12;overflow:hidden;
background:var(--soft,#f6f7f9);border-radius:8px}
.smjbg-ftpv b{font-size:19px;white-space:nowrap}
.smjbg-ftpv i{font-style:normal;font-size:13px;white-space:nowrap}
.smjbg-ftpv em{font-style:normal;font-size:11px;opacity:.78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.smjbg-ftpv u{text-decoration:none;font-size:15px;color:var(--ac)}
.smjbg-ftpv small{font-family:inherit;font-size:9.5px;line-height:1.25;letter-spacing:.02em;opacity:.65;white-space:normal;max-width:100%;margin-top:2px}
.smjbg-tiles.g-ft{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.smjbg-subrow .smjbg-tiles.g-ft .smjbg-tile{min-width:0}
@media(max-width:1023px){ .smjbg-tiles.g-ft .smjbg-tile{min-width:150px} }
/* ---- theme libraries (Color Theme · Font Theme): search, categories, cards ---- */
.smjbg-lib{display:flex;flex-direction:column;gap:8px;margin:4px 0 10px;min-width:0}
.smjbg-libsearch{display:flex;align-items:center;gap:7px;height:36px;padding:0 10px;border:1px solid var(--line,#dfe3e8);
border-radius:9px;background:#fff;color:var(--ink,#111);cursor:text}
.smjbg-libsearch:focus-within{border-color:var(--ac,#2563eb);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.smjbg-libsearch svg{flex:0 0 16px;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;opacity:.5}
.smjbg-libq{flex:1;min-width:0;height:34px;border:0!important;outline:0;background:transparent!important;box-shadow:none!important;
padding:0!important;font:inherit;font-size:13px;color:inherit}
.smjbg-libq::-webkit-search-cancel-button{cursor:pointer}
.smjbg-libcats{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:1px 1px 5px;scrollbar-width:thin;
overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.smjbg-libcat{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border:1px solid var(--line,#dfe3e8);
border-radius:999px;background:#fff;color:var(--ink,#111);font:inherit;font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer;
transition:background .12s,border-color .12s,color .12s}
.smjbg-libcat:hover{border-color:var(--ac,#2563eb)}
.smjbg-libcat em{font-style:normal;font-weight:500;font-size:11px;opacity:.55}
.smjbg-libcat.on{background:var(--ac,#2563eb);border-color:var(--ac,#2563eb);color:#fff}
.smjbg-libcat.on em{opacity:.85}
.smjbg-libcat.empty{opacity:.45}
.smjbg-libcount{font-size:11.5px;color:var(--muted,#6b7280);min-height:14px}
.smjbg-libg .smjbg-tiles{max-height:min(64vh,660px);overflow-y:auto;overflow-x:hidden;align-content:start;padding:3px 3px 10px;
scrollbar-width:thin;overscroll-behavior:contain}
.smjbg-tiles.g-lib{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
.smjbg-tiles.g-lib.g-font{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.smjbg-libg .smjbg-tile{position:relative}
/* colour card */
.smjbg-rcpv{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:5px;width:100%}
.smjbg-rcmini{position:relative;display:block;width:100%;box-sizing:border-box;flex:0 0 auto;height:64px;border:1px solid;border-radius:7px;overflow:hidden}
.smjbg-rcmini i{position:absolute;display:block;border-radius:2px}
.smjbg-rcmini .k{left:8px;top:8px;width:16px;height:3px}
.smjbg-rcmini .h{left:8px;top:14px;width:54%;height:6px}
.smjbg-rcmini .m{left:8px;top:24px;width:38%;height:3px;opacity:.85}
.smjbg-rcmini .im{right:7px;top:7px;width:30%;height:30px;border:1px solid;border-radius:4px}
.smjbg-rcmini .im b{position:absolute;left:28%;top:24%;width:44%;height:52%;border-radius:50%}
.smjbg-rcmini .ct{left:8px;bottom:19px;width:34%;height:8px;border-radius:4px}
.smjbg-rcmini .pr{left:0;right:0;bottom:0;height:13px;border-radius:0}
.smjbg-rcsw{display:flex;gap:3px;width:100%;flex:0 0 auto}
.smjbg-rcsw i{flex:1;height:10px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
/* font card: five lines, each in its own face */
.smjbg-libg .smjbg-ftpv{position:relative;gap:2px;min-height:108px}
.smjbg-ftpv b{font-size:16px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.smjbg-ftpv i{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.smjbg-ftpv u{font-size:16px}
/* favourite heart */
.smjbg-fav{position:absolute;top:4px;right:4px;z-index:2;width:22px;height:22px;display:flex;align-items:center;justify-content:center;
border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 1px 3px rgba(0,0,0,.18);color:#a1a7ae;font-size:12px;line-height:1;
font-style:normal;cursor:pointer;opacity:0;transition:opacity .15s,color .15s,transform .15s}
.smjbg-tile:hover .smjbg-fav,.smjbg-tile:focus-visible .smjbg-fav,.smjbg-fav:focus,.smjbg-fav.on{opacity:1}
.smjbg-fav:hover{transform:scale(1.1)}
.smjbg-fav.on{color:#e11d48}
@media(hover:none){.smjbg-fav{opacity:.9}}
/* the libraries' own chrome wins over the panel's generic button and label rules;
the search field keeps the editor's standard input box, with the icon inside it */
.smjbg-tg.smjbg-libg .smjbg-libcat{font-size:12px!important;line-height:1!important;letter-spacing:0!important;text-transform:none!important}
.smjbg-tg.smjbg-libg .smjbg-libcat em{font-size:10.5px!important}
.smjbg-tg.smjbg-libg .smjbg-libsearch{position:relative;display:block;height:auto;padding:0;border:0;background:none;box-shadow:none}
.smjbg-tg.smjbg-libg .smjbg-libsearch:focus-within{box-shadow:none}
.smjbg-tg.smjbg-libg .smjbg-libsearch svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);pointer-events:none;z-index:1}
.smjbg-tg.smjbg-libg input.smjbg-libq{display:block;width:100%;height:36px;padding-left:32px!important;font-size:13px!important}
.smjbg-tg.smjbg-libg .smjbg-tile .smjbg-tl{display:block;font-size:11px;font-weight:700;line-height:1.2;text-align:left;
width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.smjbg-tg.smjbg-libg .smjbg-tile{align-items:stretch;gap:5px;padding:6px}
/* phones and tablets: a taller sheet, the search and chips above one strip of cards
(the same treatment the Insert panel gets) */
@media(max-width:1023px){
.smjbg-app[data-opt="theme"],.smjbg-app[data-opt="ftheme"]{--smjbg-panel:236px}
.smjbg-sub[data-opt="theme"].on,.smjbg-sub[data-opt="ftheme"].on{display:block;gap:0;overflow:hidden;padding:8px 10px 6px}
.smjbg-sub .smjbg-tg.smjbg-libg{display:flex;flex-direction:column;height:100%;width:100%;min-width:0}
.smjbg-sub .smjbg-tg.smjbg-libg>.smjbg-lbl,.smjbg-sub .smjbg-tg.smjbg-libg>.smjbg-selval,.smjbg-sub .smjbg-libg .smjbg-libcount{display:none}
.smjbg-sub .smjbg-libg .smjbg-lib{flex:0 0 auto;width:100%;margin:0 0 6px;gap:6px}
.smjbg-sub .smjbg-libg .smjbg-tiles{flex:1 1 auto;display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overflow-y:hidden;
max-height:none;height:auto;min-height:0;padding:2px 2px 6px}
.smjbg-sub .smjbg-libg .smjbg-tile{flex:0 0 auto;width:118px;height:auto;min-height:0}
.smjbg-sub .smjbg-libg .smjbg-tiles.g-font .smjbg-tile{width:172px}
.smjbg-sub .smjbg-libg .smjbg-tile>*:not(.smjbg-tl){height:auto;width:100%}
.smjbg-sub .smjbg-libg .smjbg-ftpv{min-height:96px}
}
/* ---- 3.8: the element toolbar docked in a fixed bar above the canvas ----------
The bar keeps its height whether or not anything is selected, so selecting never
moves or resizes the canvas, and nothing is ever drawn over the design. */
.smjbg-tbdock{flex:0 0 auto;position:relative;z-index:6;display:flex;align-items:center;justify-content:center;
height:52px;min-height:52px;margin:0 auto 10px;padding:0 4px;box-sizing:border-box;width:100%;max-width:100%}
.smjbg-tbhint{display:flex;align-items:center;height:40px;padding:0 16px;border:1px dashed var(--ui-line,#d9dde1);border-radius:10px;
font-size:12.5px;color:var(--ui-muted,#81878d);background:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.smjbg-tbdock.has .smjbg-tbhint{display:none}
.smjbg-tbdock .smjbg-instb.docked{position:static!important;z-index:auto;left:auto!important;top:auto!important;max-width:100%;
overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;height:46px;box-sizing:border-box;background:#fff;
box-shadow:0 1px 2px rgba(16,24,40,.06),0 2px 6px rgba(16,24,40,.06)!important;scrollbar-width:none}
.smjbg-app .smjbg-prevcol .smjbg-tbdock .smjbg-instb select.fam{flex:0 0 auto;width:136px;height:32px!important;min-height:0!important;
margin:0 4px 0 2px;padding:0 24px 0 10px!important;font-size:13px!important;border:1px solid var(--ui-line,#d9dde1)!important;
border-radius:8px!important;background-color:#fff;box-shadow:none!important;cursor:pointer}
.smjbg-tbdock .smjbg-instb .sz{flex:0 0 auto;display:inline-flex;align-items:center;gap:0;margin:0 2px;
border:1px solid var(--ui-line,#d9dde1);border-radius:8px;overflow:hidden;height:32px}
.smjbg-tbdock .smjbg-instb .sz button{width:28px!important;height:30px!important;border-radius:0!important}
.smjbg-tbdock .smjbg-instb .sz svg{width:14px;height:14px}
.smjbg-app .smjbg-prevcol .smjbg-tbdock .smjbg-instb .sz input[data-tbs]{width:40px;height:30px!important;min-height:0!important;padding:0!important;
border:0!important;border-left:1px solid var(--ui-line,#d9dde1)!important;border-right:1px solid var(--ui-line,#d9dde1)!important;
border-radius:0!important;box-shadow:none!important;text-align:center;font-size:13px!important;font-weight:600;-moz-appearance:textfield;background:#fff}
.smjbg-tbdock .smjbg-instb .sz input::-webkit-outer-spin-button,.smjbg-tbdock .smjbg-instb .sz input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
@media(max-width:1023px){
.smjbg-tbdock{height:50px;min-height:50px;margin:0 0 6px;justify-content:flex-start}
.smjbg-tbdock .smjbg-instb.docked{width:100%;justify-content:flex-start}
.smjbg-tbhint{margin:0 auto}
}
/* ---- 3.8: Uploads — the media library in the right-side panel ---- */
.smjbg-mdrop{display:flex;flex-direction:column;align-items:center;gap:6px;margin:4px 0 10px;padding:18px 14px;text-align:center;cursor:pointer;
border:1.5px dashed var(--ui-line,#d9dde1);border-radius:12px;background:var(--ui-subtle,#f6f7f9);color:var(--ui-sub,#565b61)}
.smjbg-mdrop:hover,.smjbg-mdrop:focus-visible{border-color:var(--ui-accent,#2667e7);background:var(--ui-accent-soft,#f1f8ff);outline:0}
.smjbg-mdrop svg{width:26px;height:26px;fill:none;stroke:var(--ui-accent,#2667e7);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.smjbg-mdrop b{font-size:13px;color:var(--ui-ink,#1c2024)}
.smjbg-mdrop span{font-size:11.5px;line-height:1.4}
.smjbg-mkinds{display:flex;gap:5px;overflow-x:auto;padding:0 0 6px;scrollbar-width:thin}
.smjbg-app .smjbg-mkinds button{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px;border:1px solid var(--ui-line,#d9dde1);
border-radius:999px;background:#fff;font-size:11.5px!important;font-weight:600;color:var(--ui-ink,#1c2024);cursor:pointer}
.smjbg-app .smjbg-mkinds button em{font-style:normal;font-weight:500;opacity:.55;font-size:10.5px}
.smjbg-app .smjbg-mkinds button.on{background:var(--ui-accent,#2667e7);border-color:var(--ui-accent,#2667e7);color:#fff}
.smjbg-mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;margin:2px 0 8px}
.smjbg-mtile{position:relative;display:flex;flex-direction:column;gap:3px;padding:4px;border:1px solid var(--ui-line-soft,#eaedf0);border-radius:9px;
background:#fff;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;transition:border-color .12s,box-shadow .12s}
.smjbg-mtile:hover{border-color:var(--ui-line,#d9dde1);box-shadow:0 1px 4px rgba(16,24,40,.08)}
.smjbg-mtile.on{border-color:var(--ui-accent,#2667e7);box-shadow:0 0 0 2px rgba(38,103,231,.18)}
.smjbg-mtile:focus-visible{outline:2px solid var(--ui-accent,#2667e7);outline-offset:1px}
.smjbg-mtile.dragging{opacity:.45}
.smjbg-mtile .th{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;border-radius:6px;overflow:hidden;background:var(--ui-subtle,#f6f7f9)}
.smjbg-mtile .th.chk{background-color:#fff;background-image:linear-gradient(45deg,#eceff2 25%,transparent 25%),linear-gradient(-45deg,#eceff2 25%,transparent 25%),
linear-gradient(45deg,transparent 75%,#eceff2 75%),linear-gradient(-45deg,transparent 75%,#eceff2 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0}
.smjbg-mtile .th img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none;display:block}
.smjbg-mtile .nm{font-size:10.5px;line-height:1.2;color:var(--ui-sub,#565b61);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smjbg-app .smjbg-mtile .x{position:absolute;top:2px;right:2px;width:20px!important;height:20px!important;min-height:0!important;padding:0!important;border:0!important;
border-radius:50%!important;background:rgba(16,24,40,.62)!important;color:#fff!important;font-size:13px!important;line-height:20px;opacity:0;cursor:pointer;transition:opacity .12s}
.smjbg-mtile:hover .x,.smjbg-mtile.on .x,.smjbg-mtile .x:focus-visible{opacity:1}
@media(hover:none){.smjbg-app .smjbg-mtile .x{opacity:.85}}
.smjbg-mact{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px;min-height:32px}
.smjbg-mact span{font-size:11.5px;color:var(--ui-muted,#81878d)}
.smjbg-app .smjbg-mact button{height:32px;padding:0 12px;border:1px solid var(--ui-line,#d9dde1);border-radius:8px;background:#fff;
font-size:12.5px!important;font-weight:600;color:var(--ui-ink,#1c2024);cursor:pointer}
.smjbg-app .smjbg-mact button.pri{background:var(--ui-accent,#2667e7);border-color:var(--ui-accent,#2667e7);color:#fff}
.smjbg-mdrag{outline:2px dashed var(--ui-accent,#2667e7);outline-offset:-4px;border-radius:12px;background:var(--ui-accent-soft,#f1f8ff)}
.smjbg-insghost.img{padding:4px;background:#fff;border-radius:10px;box-shadow:0 6px 20px rgba(16,24,40,.22)}
.smjbg-insmedia button[data-media="vehicle"] svg{stroke-linejoin:round}
/* ---- 3.8.1: Custom Size — top-left control, strip and canvas resize mode ---- */
.smjbg-app .smjbg-cszbtn{position:absolute;left:4px;top:50%;transform:translateY(-50%);z-index:2;display:inline-flex;align-items:center;gap:6px;
height:36px;padding:0 12px 0 10px;border:1px solid var(--ui-line,#d9dde1);border-radius:9px;background:#fff;color:var(--ui-ink,#1c2024);
font-size:12.5px!important;font-weight:600;cursor:pointer;white-space:nowrap;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.smjbg-app .smjbg-cszbtn:hover{border-color:var(--ui-accent,#2667e7)}
.smjbg-app .smjbg-cszbtn.on{background:var(--ui-accent,#2667e7);border-color:var(--ui-accent,#2667e7);color:#fff}
.smjbg-cszbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.smjbg-cszstrip{display:flex;align-items:center;gap:6px;height:44px;padding:0 6px 0 12px;border:1px solid var(--ui-line-soft,#eaedf0);border-radius:12px;
background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.06),0 2px 6px rgba(16,24,40,.06);white-space:nowrap;max-width:calc(100% - 150px);overflow-x:auto;scrollbar-width:none}
.smjbg-cszstrip[hidden]{display:none!important}
.smjbg-cszt{font-size:12px;font-weight:700;color:var(--ui-sub,#565b61);margin-right:2px}
.smjbg-cszf{display:inline-flex;align-items:center;gap:5px}
.smjbg-cszf span{font-size:11px;font-weight:700;color:var(--ui-muted,#81878d)}
.smjbg-app .smjbg-cszstrip .smjbg-cszf input{width:74px;height:32px!important;min-height:0!important;padding:0 8px!important;font-size:13px!important;
font-weight:600;border-radius:8px!important;box-shadow:none!important;text-align:right}
.smjbg-app .smjbg-cszstrip select#cszU{width:auto;height:32px!important;min-height:0!important;padding:0 24px 0 8px!important;font-size:12.5px!important;
border-radius:8px!important;box-shadow:none!important}
.smjbg-cszx{color:var(--ui-muted,#81878d);font-size:13px}
.smjbg-cszpx{font-size:11.5px;color:var(--ui-muted,#81878d);padding:0 4px;min-width:84px;text-align:center;font-variant-numeric:tabular-nums}
.smjbg-app .smjbg-cszstrip .smjbg-cszapply{height:32px;padding:0 14px;border:0;border-radius:8px;background:var(--ui-accent,#2667e7);color:#fff;
font-size:12.5px!important;font-weight:700;cursor:pointer}
.smjbg-app .smjbg-cszstrip .smjbg-cszclose{width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--ui-sub,#565b61);
font-size:18px!important;line-height:1;cursor:pointer}
.smjbg-app .smjbg-cszstrip .smjbg-cszclose:hover{background:var(--ui-subtle,#f6f7f9)}
/* in the mode the bar is the strip: no element toolbar, no hint */
.smjbg-tbdock.csz .smjbg-instb,.smjbg-tbdock.csz .smjbg-tbhint{display:none!important}
/* the canvas frame: the whole page is what is selected */
.smjbg-cszframe{position:absolute;z-index:40;box-sizing:border-box;border:2px solid var(--ui-accent,#2667e7);pointer-events:none;
box-shadow:0 0 0 9999px rgba(16,24,40,.05);border-radius:1px}
.smjbg-cszframe.drag{background:rgba(38,103,231,.06)}
.smjbg-cszlbl{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:1;padding:3px 9px;border-radius:6px;background:var(--ui-accent,#2667e7);color:#fff;
font:600 11.5px/1.4 var(--ui-font,Inter,system-ui,sans-serif);white-space:nowrap;font-variant-numeric:tabular-nums;box-shadow:0 2px 6px rgba(16,24,40,.2)}
.smjbg-cszh{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;background:#fff;border:2px solid var(--ui-accent,#2667e7);border-radius:3px;
box-sizing:border-box;pointer-events:auto;touch-action:none;box-shadow:0 1px 3px rgba(16,24,40,.25)}
.smjbg-cszh[data-csz="n"],.smjbg-cszh[data-csz="s"]{width:26px;height:10px;margin:-5px 0 0 -13px;border-radius:5px}
.smjbg-cszh[data-csz="e"],.smjbg-cszh[data-csz="w"]{width:10px;height:26px;margin:-13px 0 0 -5px;border-radius:5px}
.smjbg-cszh[data-csz="nw"]{left:0;top:0;cursor:nwse-resize}.smjbg-cszh[data-csz="ne"]{left:100%;top:0;cursor:nesw-resize}
.smjbg-cszh[data-csz="se"]{left:100%;top:100%;cursor:nwse-resize}.smjbg-cszh[data-csz="sw"]{left:0;top:100%;cursor:nesw-resize}
.smjbg-cszh[data-csz="n"]{left:50%;top:0;cursor:ns-resize}.smjbg-cszh[data-csz="s"]{left:50%;top:100%;cursor:ns-resize}
.smjbg-cszh[data-csz="e"]{left:100%;top:50%;cursor:ew-resize}.smjbg-cszh[data-csz="w"]{left:0;top:50%;cursor:ew-resize}
@media (pointer:coarse){ .smjbg-cszh{width:22px;height:22px;margin:-11px 0 0 -11px} }
/* element chrome never shows with the canvas selected */
.smjbg-cszon .smjbg-inschrome,.smjbg-cszon .smjbg-insbox.on{visibility:hidden}
@media(max-width:1023px){
.smjbg-app .smjbg-cszbtn{position:static;transform:none;flex:0 0 auto;height:34px;padding:0 10px;margin-right:6px}
.smjbg-cszbtn span{display:none}
.smjbg-cszstrip{max-width:none;flex:1 1 auto;padding:0 4px 0 8px}
.smjbg-cszt{display:none}
.smjbg-app .smjbg-cszstrip .smjbg-cszf input{width:62px}
.smjbg-cszpx{display:none}
}
/* ==========================================================================
3.10 — Layers panel: a drawer docked to the right edge of the canvas area
========================================================================== */
.smjbg-app{--lyw:312px}
.smjbg-app .smjbg-lyrbtn{position:absolute;right:4px;top:50%;transform:translateY(-50%);z-index:2;display:inline-flex;align-items:center;gap:6px;
height:36px;padding:0 10px;border:1px solid var(--ui-line,#d9dde1);border-radius:9px;background:#fff;color:var(--ui-ink,#1c2024);
font-size:12.5px!important;font-weight:600;cursor:pointer;white-space:nowrap;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.smjbg-app .smjbg-lyrbtn:hover{border-color:var(--ui-accent,#2667e7)}
.smjbg-app .smjbg-lyrbtn.on{background:var(--ui-accent-soft,#eef4ff);border-color:var(--ui-accent,#2667e7);color:var(--ui-accent,#2667e7)}
.smjbg-lyrbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
.smjbg-lyrbtn em{font-style:normal;font-size:10.5px;font-weight:700;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--ui-subtle,#f1f3f5);
color:var(--ui-sub,#565b61);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
.smjbg-lyrbtn.on em{background:#fff}
/* the canvas makes room while the drawer is open, and gets it all back when closed */
.smjbg-app[data-layers="on"] .smjbg-prevcol{padding-right:calc(var(--lyw) + 12px)!important}
.smjbg-prevcol{transition:padding-right .18s ease}
.smjbg-lyr{position:absolute;top:0;right:0;bottom:0;width:var(--lyw);z-index:30;display:flex;flex-direction:column;min-width:248px;max-width:560px;
background:#fff;border-left:1px solid var(--ui-line-soft,#eaedf0);box-sizing:border-box;transform:translateX(12px);opacity:0;visibility:hidden;
transition:transform .18s ease,opacity .18s ease,visibility 0s linear .18s;font-family:var(--ui-font,Inter,system-ui,sans-serif)}
.smjbg-lyr.open{transform:none;opacity:1;visibility:visible;transition:transform .18s ease,opacity .18s ease}
.smjbg-lyr.sizing,.smjbg-lyr.sizing *{cursor:ew-resize!important;user-select:none}
.smjbg-lygrip{position:absolute;left:-4px;top:0;bottom:0;width:8px;cursor:ew-resize;z-index:2}
.smjbg-lygrip::after{content:"";position:absolute;left:3px;top:50%;width:2px;height:36px;margin-top:-18px;border-radius:2px;background:var(--ui-line,#d9dde1);opacity:0;transition:opacity .12s}
.smjbg-lygrip:hover::after,.smjbg-lygrip:focus-visible::after,.smjbg-lyr.sizing .smjbg-lygrip::after{opacity:1;background:var(--ui-accent,#2667e7)}
.smjbg-lyhd{display:flex;align-items:center;gap:8px;height:46px;padding:0 30px 0 14px;flex:0 0 auto}
.smjbg-lyhd b{font-size:13.5px;font-weight:700;color:var(--ui-ink,#1c2024)}
.smjbg-lyhd em{font-style:normal;font-size:11px;font-weight:600;color:var(--ui-muted,#81878d)}
.smjbg-lyhd .sp{flex:1}
.smjbg-app .smjbg-lyhd .x{width:28px;height:28px;border:0;border-radius:7px;background:transparent;color:var(--ui-sub,#565b61);font-size:18px!important;line-height:1;cursor:pointer}
.smjbg-app .smjbg-lyhd .x:hover{background:var(--ui-subtle,#f6f7f9)}
.smjbg-lysearch{position:relative;display:block;margin:0 12px 8px;flex:0 0 auto}
.smjbg-lysearch svg{position:absolute;left:10px;top:50%;width:15px;height:15px;transform:translateY(-50%);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;opacity:.45;pointer-events:none}
.smjbg-app .smjbg-lyr input.smjbg-lyq{display:block;width:100%;height:32px!important;min-height:0!important;padding-left:30px!important;font-size:12.5px!important;border-radius:8px!important;box-shadow:none!important}
.smjbg-lylist{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:2px 6px 8px;outline:0!important;box-shadow:none!important;border:0!important;scrollbar-width:thin;overscroll-behavior:contain}
.smjbg-lyrow{position:relative;display:flex;align-items:center;gap:6px;height:38px;padding:0 4px 0 2px;margin:1px 0;border-radius:8px;cursor:default;
user-select:none;-webkit-user-select:none;touch-action:pan-y;transition:background .1s}
.smjbg-lyrow:hover{background:var(--ui-subtle,#f5f6f8)}
.smjbg-lyrow.on{background:var(--ui-accent-soft,#eaf1ff);box-shadow:inset 0 0 0 1px rgba(38,103,231,.35)}
.smjbg-lyrow.ing{padding-left:22px}
.smjbg-lyrow.ing::before{content:"";position:absolute;left:13px;top:0;bottom:0;width:1px;background:var(--ui-line,#d9dde1)}
.smjbg-lyrow.hid .th,.smjbg-lyrow.hid .nm{opacity:.42}
.smjbg-lyrow.dragging{opacity:.4}
.smjbg-lyr.dragging .smjbg-lyrow:hover{background:transparent}
.smjbg-lyrow .dh{flex:0 0 14px;display:flex;align-items:center;justify-content:center;height:24px;color:var(--ui-muted,#81878d);cursor:grab;opacity:0;transition:opacity .1s}
.smjbg-lyrow:hover .dh,.smjbg-lyrow.on .dh{opacity:.8}
.smjbg-lyrow .dh svg{width:14px;height:14px;fill:currentColor}
.smjbg-lyrow .th{flex:0 0 28px;width:28px;height:28px;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;
background:var(--ui-subtle,#f1f3f5);box-shadow:inset 0 0 0 1px rgba(16,24,40,.06)}
.smjbg-lyrow .th.img{background-color:#fff;background-image:linear-gradient(45deg,#eceff2 25%,transparent 25%),linear-gradient(-45deg,#eceff2 25%,transparent 25%),
linear-gradient(45deg,transparent 75%,#eceff2 75%),linear-gradient(-45deg,transparent 75%,#eceff2 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}
.smjbg-lyrow .th img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.smjbg-lyrow .th.txt b{font-size:15px;font-weight:800;line-height:1}
.smjbg-lyrow .th.shp i{width:16px;height:16px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(16,24,40,.12)}
.smjbg-lyrow .th.gl{font-size:15px}
.smjbg-lyrow .th.grp{background:transparent;box-shadow:none;color:var(--ui-sub,#565b61)}
.smjbg-lyrow .th.grp svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.smjbg-lyrow .nm{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px;line-height:1.15}
.smjbg-lyrow .nm .n{font-size:12.5px;font-weight:600;color:var(--ui-ink,#1c2024);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smjbg-lyrow .nm em{font-style:normal;font-size:10.5px;color:var(--ui-muted,#81878d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smjbg-app .smjbg-lyrow input.ren{height:26px!important;min-height:0!important;padding:0 6px!important;font-size:12.5px!important;border-radius:6px!important;
box-shadow:0 0 0 2px rgba(38,103,231,.25)!important;width:100%}
.smjbg-app .smjbg-lyrow .ic{flex:0 0 26px;width:26px;height:26px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--ui-sub,#565b61);
display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .1s,background .1s}
.smjbg-lyrow:hover .ic,.smjbg-lyrow.on .ic,.smjbg-lyrow .ic:focus-visible,.smjbg-lyrow .ic.off,.smjbg-lyrow .ic.lk.on{opacity:1}
.smjbg-app .smjbg-lyrow .ic:hover{background:rgba(16,24,40,.06);color:var(--ui-ink,#1c2024)}
.smjbg-lyrow .ic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.smjbg-lyrow .ic.mo svg{fill:currentColor;stroke:none}
.smjbg-lyrow .ic.lk.on{color:var(--ui-accent,#2667e7)}
.smjbg-app .smjbg-lyrow .tw{flex:0 0 18px;width:18px;height:22px;padding:0;margin-left:-4px;border:0;background:transparent;color:var(--ui-sub,#565b61);cursor:pointer;display:flex;align-items:center;justify-content:center}
.smjbg-lyrow .tw svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .15s}
.smjbg-lyrow .tw.open svg{transform:rotate(90deg)}
.smjbg-lypage{display:flex;align-items:center;gap:8px;height:30px;margin:4px 2px;padding:0 10px;border-radius:8px;border:1px dashed var(--ui-line,#d9dde1);
color:var(--ui-muted,#81878d);font-size:11px;font-weight:600;letter-spacing:.02em}
.smjbg-lypage svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
.smjbg-lyline{position:absolute;left:8px;right:8px;height:2px;border-radius:2px;background:var(--ui-accent,#2667e7);pointer-events:none;z-index:3;
box-shadow:0 0 0 2px rgba(38,103,231,.15)}
.smjbg-lyline::before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--ui-accent,#2667e7)}
.smjbg-lyempty{margin:18px 10px;font-size:12px;line-height:1.5;color:var(--ui-muted,#81878d);text-align:center}
.smjbg-lyfoot{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:8px 10px;border-top:1px solid var(--ui-line-soft,#eaedf0);background:var(--ui-subtle,#f8f9fa)}
.smjbg-lyfoot[hidden]{display:none}
.smjbg-lyfoot span{font-size:11.5px;font-weight:700;color:var(--ui-ink,#1c2024);margin-right:auto}
.smjbg-app .smjbg-lyfoot button{height:26px;padding:0 8px;border:1px solid var(--ui-line,#d9dde1);border-radius:6px;background:#fff;font-size:11.5px!important;font-weight:600;cursor:pointer;color:var(--ui-ink,#1c2024)}
.smjbg-app .smjbg-lyfoot button:hover{border-color:var(--ui-accent,#2667e7)}
.smjbg-app .smjbg-lyfoot button.rm{color:#c01d1d}
.smjbg-lytip{flex:0 0 auto;margin:0;padding:6px 12px 10px;font-size:10.5px;line-height:1.4;color:var(--ui-muted,#81878d)}
/* the ⋯ menu */
.smjbg-lymenu{position:fixed;z-index:2147483100;min-width:196px;padding:5px;border:1px solid var(--ui-line-soft,#eaedf0);border-radius:10px;background:#fff;
box-shadow:0 8px 24px rgba(16,24,40,.14);font-family:var(--ui-font,Inter,system-ui,sans-serif)}
.smjbg-lymenu button{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;height:30px;padding:0 10px;border:0;border-radius:6px;background:transparent;
font:500 12.5px/1 var(--ui-font,Inter,system-ui,sans-serif);color:var(--ui-ink,#1c2024);text-align:left;cursor:pointer}
.smjbg-lymenu button:hover,.smjbg-lymenu button:focus-visible{background:var(--ui-subtle,#f3f4f6);outline:0}
.smjbg-lymenu button.rm{color:#c01d1d}
.smjbg-lymenu kbd{font:500 10.5px/1 var(--ui-font,Inter,system-ui,sans-serif);color:var(--ui-muted,#81878d)}
.smjbg-lymenu hr{border:0;border-top:1px solid var(--ui-line-soft,#eaedf0);margin:4px 2px}
/* the pointer in the Insert panel */
.smjbg-app .smjbg-lyopen{display:flex;align-items:center;gap:8px;width:100%;height:40px;margin:10px 0 4px;padding:0 12px;border:1px solid var(--ui-line,#d9dde1);
border-radius:10px;background:#fff;cursor:pointer;color:var(--ui-ink,#1c2024);font-size:12.5px!important;font-weight:600}
.smjbg-lyopen svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
.smjbg-lyopen em{font-style:normal;font-size:11px;color:var(--ui-muted,#81878d)}
.smjbg-lyopen b{margin-left:auto;font-size:11.5px;color:var(--ui-accent,#2667e7)}
/* a locked layer stays visible but is not picked up from the canvas; the Layers
panel selects and unlocks it */
.smjbg-insbox.locked:not(.on){pointer-events:none!important}
/* phones and tablets: the drawer is a sheet over the lower part of the screen */
@media(max-width:1023px){
.smjbg-app[data-layers="on"] .smjbg-prevcol{padding-right:0!important}
.smjbg-lyr{position:fixed;left:0;right:0;top:auto;bottom:0;width:auto!important;max-width:none;height:min(70vh,560px);border-left:0;
border-top:1px solid var(--ui-line-soft,#eaedf0);border-radius:16px 16px 0 0;box-shadow:0 -8px 30px rgba(16,24,40,.18);transform:translateY(24px);z-index:2147482000}
.smjbg-lygrip{display:none}
.smjbg-lyrow{height:44px}
.smjbg-app .smjbg-lyrow .ic,.smjbg-lyrow .dh{opacity:1}
.smjbg-lytip{display:none}
.smjbg-app .smjbg-lyrbtn{position:static;transform:none;flex:0 0 auto;height:34px;margin-left:6px;order:3}
.smjbg-lyrbtn span{display:none}
}
/* the element toolbar keeps clear of the two corner buttons of the bar; when the
bar gets narrow (the Layers drawer is open, or a small window) the buttons
drop their words and keep their icons */
@media(min-width:1024px){
.smjbg-tbdock{container-type:inline-size}
.smjbg-tbdock .smjbg-instb.docked,.smjbg-tbdock .smjbg-tbhint{max-width:calc(100% - 272px)!important}
@container (max-width:760px){
.smjbg-app .smjbg-cszbtn span,.smjbg-app .smjbg-lyrbtn span{display:none}
.smjbg-app .smjbg-cszbtn{padding:0 10px}
.smjbg-tbdock .smjbg-instb.docked,.smjbg-tbdock .smjbg-tbhint{max-width:calc(100% - 150px)!important}
}
}
.smjbg-lyrbtn{transition:none}
/* ==========================================================================
3.12 — Left navigation: sectioned text slices
Three quiet section labels (Create, Design, Style) with a hairline, and the
tools under them as clean text inside soft rounded slices: full rail width,
lightly tinted, evenly spaced. Hover deepens the tint a touch; the active
slice has a stronger tint, primary-coloured text and a thin accent on its
left edge. Text only: no icons, borders or shadows.
========================================================================== */
.smjbg-app{--rail-slice:#f4f5f8;--rail-slice-h:#eceef3;--rail-on:#e8efff;--rail-ac:var(--ui-accent,#2667e7)}
.smjbg-app .smjbg-mainrow .smjbg-mo{
position:relative;width:100%!important;max-width:100%;align-self:stretch;flex:0 0 auto;
min-height:0!important;height:auto!important;padding:8px 12px!important;margin:0!important;
border:0!important;border-radius:9px!important;background:var(--rail-slice)!important;box-shadow:none!important;
color:var(--ui-ink,#1f2733)!important;font-family:var(--ui-font,Inter,system-ui,sans-serif)!important;
font-size:13px!important;font-weight:500!important;line-height:1.35!important;letter-spacing:-.005em;
text-align:left;white-space:normal;overflow-wrap:break-word;cursor:pointer;overflow:hidden;
transition:background-color .14s ease,color .14s ease!important;-webkit-tap-highlight-color:transparent}
.smjbg-app .smjbg-mainrow .smjbg-mo::before{content:"";display:block!important;position:absolute;left:0;top:0;bottom:0;width:3px;
background:var(--rail-ac);opacity:0;transition:opacity .14s ease}
.smjbg-app .smjbg-mainrow .smjbg-mo:hover:not(.on){background:var(--rail-slice-h)!important;color:var(--ui-ink,#101828)!important}
.smjbg-app .smjbg-mainrow .smjbg-mo.on{background:var(--rail-on)!important;color:var(--ui-accent-hi,#1d4fd7)!important;font-weight:600!important}
.smjbg-app .smjbg-mainrow .smjbg-mo.on::before{opacity:1}
.smjbg-app .smjbg-mainrow .smjbg-mo:focus-visible{outline:2px solid var(--rail-ac)!important;outline-offset:1px}
/* section labels: small spaced capitals with a hairline running to the edge */
.smjbg-app .smjbg-mainrow .smjbg-mogrp{display:flex!important;align-items:center;gap:10px;margin:0!important;padding:14px 2px 4px!important;
border:0!important;font-family:var(--ui-font,Inter,system-ui,sans-serif)!important;font-size:10.5px!important;font-weight:600!important;
letter-spacing:.14em!important;text-transform:uppercase;color:var(--ui-muted,#8a919c)!important;line-height:1!important;background:none!important}
.smjbg-app .smjbg-mainrow .smjbg-mogrp::after{content:"";flex:1 1 auto;height:1px;background:var(--ui-line-soft,#e6e8ec)}
.smjbg-app .smjbg-mainrow .smjbg-mogrp:first-child{padding-top:2px!important}
@media(min-width:1024px){
.smjbg-app{--railw:152px}
.smjbg-app .smjbg-mainrow{padding:16px 12px 14px!important;gap:5px!important;background:var(--ui-surface,#fff)!important;
border-right:1px solid var(--ui-line-soft,#eef0f2)!important;box-shadow:none!important}
}
@media(min-width:1024px) and (max-width:1279px){
.smjbg-app{--railw:140px}
.smjbg-app .smjbg-mainrow{padding:14px 10px!important}
.smjbg-app .smjbg-mainrow .smjbg-mo{font-size:12.5px!important;padding:7px 10px!important}
}
@media(min-width:1600px){
.smjbg-app{--railw:164px}
.smjbg-app .smjbg-mainrow .smjbg-mo{font-size:13.5px!important;padding:9px 13px!important}
}
/* phones: the rail is a sideways strip — the same tinted slices, no labels */
@media(max-width:1023px){
.smjbg-app .smjbg-mainrow .smjbg-mogrp{display:none!important}
.smjbg-app .smjbg-mainrow .smjbg-mo{width:auto!important;align-self:center;padding:7px 12px!important;white-space:nowrap}
}
/* ==========================================================================
3.13 — Template library sidebar: the same text slices as the editor rail
========================================================================== */
.smjbg-tlib .smjbg-tl-side{flex:0 0 236px!important;padding:16px 14px 18px!important;background:#fff!important;
border-right:1px solid var(--ui-line-soft,#eef0f2)!important;display:flex;flex-direction:column;gap:5px;scrollbar-width:thin}
.smjbg-tlib .smjbg-tl-inds{display:flex;flex-direction:column;gap:5px}
.smjbg-tlib .smjbg-tl-side h6{display:flex;align-items:center;gap:10px;margin:14px 2px 4px!important;padding:0!important;
font-family:var(--ui-font,Inter,system-ui,sans-serif)!important;font-size:10.5px!important;font-weight:600!important;
letter-spacing:.14em!important;text-transform:uppercase;color:var(--ui-muted,#8a919c)!important;line-height:1!important}
.smjbg-tlib .smjbg-tl-side h6:first-child{margin-top:2px!important}
.smjbg-tlib .smjbg-tl-side h6::after{content:"";flex:1 1 auto;height:1px;background:var(--ui-line-soft,#e6e8ec)}
.smjbg-tlib .smjbg-tl-side button{position:relative;display:flex!important;align-items:center;gap:10px;width:100%!important;min-height:0!important;
height:auto!important;margin:0!important;padding:8px 12px!important;border:0!important;border-radius:9px!important;
background:#f4f5f8!important;box-shadow:none!important;overflow:hidden;cursor:pointer;text-align:left;
color:var(--ui-ink,#1f2733)!important;font-family:var(--ui-font,Inter,system-ui,sans-serif)!important;font-size:13px!important;
font-weight:500!important;line-height:1.35!important;letter-spacing:-.005em;transition:background-color .14s ease,color .14s ease}
.smjbg-tlib .smjbg-tl-side button span{flex:1 1 auto;min-width:0}
.smjbg-tlib .smjbg-tl-side button i{display:none!important}
.smjbg-tlib .smjbg-tl-side button em{flex:0 0 auto;margin-left:auto;font-style:normal;font-size:11px!important;font-weight:500!important;
color:var(--ui-muted,#8a919c)!important;font-variant-numeric:tabular-nums}
.smjbg-tlib .smjbg-tl-side button em:empty{display:none}
.smjbg-tlib .smjbg-tl-side button::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ui-accent,#2667e7);opacity:0;transition:opacity .14s ease}
.smjbg-tlib .smjbg-tl-side button:hover:not(.on){background:#eceef3!important;color:#101828!important}
.smjbg-tlib .smjbg-tl-side button.on{background:#e8efff!important;color:var(--ui-accent-hi,#1d4fd7)!important;font-weight:600!important}
.smjbg-tlib .smjbg-tl-side button.on::before{opacity:1}
.smjbg-tlib .smjbg-tl-side button.on em{color:var(--ui-accent,#2667e7)!important}
.smjbg-tlib .smjbg-tl-side button:focus-visible{outline:2px solid var(--ui-accent,#2667e7)!important;outline-offset:1px}
.smjbg-tlib .smjbg-tl-side>*,.smjbg-tlib .smjbg-tl-inds>*{flex-shrink:0!important}
.smjbg-tlib .smjbg-tl-inds{flex:0 0 auto}
/* ==========================================================================
3.14 — Compact Layers panel: dense single-line rows, tight header, help
in an (i) popover. The list takes nearly all of the drawer's height.
========================================================================== */
.smjbg-lyhd{height:38px!important;padding:0 30px 0 12px!important;gap:6px!important}
.smjbg-lyhd b{font-size:13px!important}
.smjbg-lyhd em{font-size:11px!important}
.smjbg-app .smjbg-lyhd .hlp{flex:0 0 auto;width:16px;height:16px;padding:0;margin-left:2px;border:1px solid var(--ui-line,#cfd4da);border-radius:50%;
background:transparent;color:var(--ui-muted,#81878d);font:italic 700 10px/14px Georgia,serif!important;text-align:center;cursor:pointer}
.smjbg-app .smjbg-lyhd .hlp:hover,.smjbg-app .smjbg-lyhd .hlp[aria-expanded="true"]{border-color:var(--ui-accent,#2667e7);color:var(--ui-accent,#2667e7)}
.smjbg-app .smjbg-lyhd .x{width:24px!important;height:24px!important;font-size:16px!important}
.smjbg-lyhelp{position:absolute;top:36px;left:10px;right:10px;z-index:5;padding:10px 12px;border:1px solid var(--ui-line-soft,#eaedf0);border-radius:10px;
background:#fff;box-shadow:0 8px 24px rgba(16,24,40,.12);font-size:11.5px;line-height:1.4;color:var(--ui-sub,#565b61)}
.smjbg-lyhelp[hidden]{display:none}
.smjbg-lyhelp b{display:block;margin-bottom:6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ui-muted,#81878d)}
.smjbg-lyhelp ul{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.smjbg-lyhelp li{display:flex;justify-content:space-between;gap:10px}
.smjbg-lyhelp li span{color:var(--ui-ink,#1c2024);font-weight:600}
.smjbg-lytip{display:none!important}
.smjbg-lysearch{margin:0 8px 4px!important}
.smjbg-lysearch svg{left:8px!important;width:13px!important;height:13px!important}
.smjbg-app .smjbg-lyr input.smjbg-lyq{height:28px!important;padding:0 8px 0 26px!important;font-size:12px!important;border-radius:7px!important}
.smjbg-lylist{padding:0 4px 4px!important}
.smjbg-lyrow{height:30px!important;min-height:30px;margin:0!important;padding:0 2px 0 0!important;gap:5px!important;border-radius:6px!important}
.smjbg-lyrow.ing{padding-left:16px!important}
.smjbg-lyrow.ing::before{left:9px!important}
.smjbg-lyrow .dh{flex:0 0 12px!important;height:20px!important}
.smjbg-lyrow .dh svg{width:12px!important;height:12px!important}
.smjbg-lyrow .th{flex:0 0 20px!important;width:20px!important;height:20px!important;border-radius:4px!important}
.smjbg-lyrow .th.txt b{font-size:11px!important}
.smjbg-lyrow .th.shp i{width:12px!important;height:12px!important;border-radius:3px!important}
.smjbg-lyrow .th.gl{font-size:12px!important}
.smjbg-lyrow .th.grp svg{width:15px!important;height:15px!important}
.smjbg-lyrow .nm{flex-direction:row!important;justify-content:flex-start!important;align-items:baseline;text-align:left;gap:6px!important;min-width:0;overflow:hidden;white-space:nowrap}
.smjbg-lyrow .nm .n{flex:0 1 auto;min-width:0;font-size:12px!important;font-weight:500!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.smjbg-lyrow.on .nm .n{font-weight:600!important}
.smjbg-lyrow .nm em{flex:0 0 auto;max-width:42%;min-width:0;font-size:10.5px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.smjbg-app .smjbg-lyrow .ic{flex:0 0 22px!important;width:22px!important;height:22px!important;border-radius:5px!important}
.smjbg-lyrow .ic svg{width:13px!important;height:13px!important}
.smjbg-app .smjbg-lyrow .tw{flex:0 0 14px!important;width:14px!important;height:20px!important;margin-left:-2px!important}
.smjbg-app .smjbg-lyrow input.ren{height:22px!important;font-size:12px!important}
.smjbg-lypage{height:22px!important;margin:3px 2px!important;padding:0 8px!important;gap:6px!important;border-radius:6px!important;font-size:10.5px!important}
.smjbg-lypage svg{width:12px!important;height:12px!important}
.smjbg-lyfoot{padding:6px 8px!important;gap:3px!important}
.smjbg-app .smjbg-lyfoot button{height:24px!important;padding:0 7px!important;font-size:11px!important}
.smjbg-lyempty{margin:12px 8px!important;font-size:11.5px!important}
@media(max-width:1023px){
.smjbg-lyrow{height:38px!important}
.smjbg-lyrow .th{flex-basis:24px!important;width:24px!important;height:24px!important}
}
/* 3.15 — while Layers holds the editor folded, the columns slide rather than jump */
@media(min-width:1024px){
.smjbg-shellmain{transition:grid-template-columns .2s ease}
.smjbg-app[data-lyhold] .smjbg-subrow{visibility:hidden}
}
/* 1024–1199px: the editor floats over the right edge of the canvas area, so the
bar above the canvas (element toolbar, Layers button) stops short of it and of
its fold toggle instead of sliding underneath; the canvas itself is unchanged */
@media(min-width:1024px) and (max-width:1199px){
.smjbg-app:not([data-panel="off"]) .smjbg-tbdock{width:calc(100% - var(--panw) - 26px)!important;max-width:none!important;margin-left:0!important;margin-right:auto!important}
}
@media(min-width:1024px){ .smjbg-app[data-panel="off"] .smjbg-lysearch{margin-right:28px!important} }
/* ==========================================================================
3.16 — Layer drag: grab anywhere on a row, floating ghost, bold insertion line
========================================================================== */
.smjbg-lyrow{cursor:grab}
.smjbg-lyrow .ic,.smjbg-lyrow .tw{cursor:pointer}
html.smjbg-lygrabbing,html.smjbg-lygrabbing *{cursor:grabbing!important;user-select:none!important;-webkit-user-select:none!important}
.smjbg-lyrow.dragging{opacity:.35!important;background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(38,103,231,.05) 6px 12px)!important}
.smjbg-lyr.dragging .smjbg-lyrow:not(.dragging):hover{background:transparent!important}
.smjbg-lyr.dragging .smjbg-lyrow .ic,.smjbg-lyr.dragging .smjbg-lyrow .dh{opacity:0!important}
/* the insertion line: thick, bright, with an end cap, never hidden by rows */
.smjbg-lyline{position:absolute;left:6px!important;right:6px!important;height:3px!important;margin-top:-1px;border-radius:3px!important;
background:var(--ui-accent,#2667e7)!important;box-shadow:0 0 0 3px rgba(38,103,231,.18)!important;z-index:6!important;pointer-events:none;
transition:top .06s linear,left .1s ease}
.smjbg-lyline::before{content:""!important;position:absolute;left:-5px!important;top:-4px!important;width:11px!important;height:11px!important;border-radius:50%!important;
background:#fff!important;border:3px solid var(--ui-accent,#2667e7);box-sizing:border-box}
.smjbg-lyline.into{left:26px!important}
.smjbg-lyline.noop{opacity:.35}
/* the ghost that follows the pointer */
.smjbg-lyghost{position:fixed;z-index:2147483200;pointer-events:none;will-change:transform;border-radius:8px;background:#fff;
box-shadow:0 10px 28px rgba(16,24,40,.18),0 0 0 1px rgba(38,103,231,.35);opacity:.92}
.smjbg-lyghost .smjbg-lyrow{margin:0!important;background:rgba(38,103,231,.06)!important;cursor:grabbing}
.smjbg-lyghost .smjbg-lyrow .ic{display:none!important}
.smjbg-lyghost .smjbg-lyrow .dh{opacity:1!important;color:var(--ui-accent,#2667e7)}
.smjbg-lyghost>b.n{position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--ui-accent,#2667e7);
color:#fff;font:700 11px/20px var(--ui-font,Inter,system-ui,sans-serif);text-align:center;box-sizing:border-box;box-shadow:0 2px 6px rgba(16,24,40,.2)}
/* after the drop: a short highlight on the moved layer(s) */
@keyframes smjbgLyDrop{0%{background:rgba(38,103,231,.28)}100%{background:rgba(38,103,231,.08)}}
.smjbg-lyrow.dropped{animation:smjbgLyDrop .9s ease-out}
/* 3.17 — Uploads: one full-width Upload Files button, a one-line description,
and a compact empty state under Your uploads */
#imgFreeHost .smjbg-insmedia:not(.mini){display:block!important}
.smjbg-app #imgFreeHost .smjbg-insmedia:not(.mini) button[data-media="upload"]{width:100%!important;height:42px;justify-content:center}
.smjbg-mdesc{margin:8px 2px 14px;font-size:12px;line-height:1.45;color:var(--ui-muted,#81878d)}
#imgFreeHost .smjbg-mdrop{padding:14px 12px!important;gap:4px!important}
#imgFreeHost .smjbg-mdrop svg{width:20px!important;height:20px!important}
#imgFreeHost .smjbg-mdrop b{font-size:12.5px!important}
#imgFreeHost .smjbg-mdrop span{font-size:11.5px!important}
/* 3.18 — Ribbon text: a small field above the ribbon styles */
.smjbg-app .smjbg-rbtext{display:block!important;margin:0 0 14px!important;max-width:none!important}
.smjbg-app .smjbg-rbtext>span{display:flex!important;align-items:baseline;justify-content:space-between;margin:0 0 5px!important;
font-size:12px!important;font-weight:600!important;color:var(--ui-ink,#1c2024)!important;text-transform:none!important;letter-spacing:0!important}
.smjbg-rbcount{font-style:normal;font-size:11px;font-weight:500;color:var(--ui-muted,#81878d);font-variant-numeric:tabular-nums}
.smjbg-app .smjbg-rbtext input{width:100%!important;height:34px!important;min-height:0!important;padding:0 10px!important;font-size:13px!important;
border-radius:8px!important;box-sizing:border-box;text-transform:uppercase}
.smjbg-rbhint{display:block;margin-top:5px;font-size:11px;line-height:1.35;color:var(--ui-muted,#81878d)}
@media(max-width:1023px){
/* phones: the ribbon tab is one sideways strip; the field stays pinned at its
left edge while the styles scroll past */
.smjbg-app .smjbg-sub[data-opt="ribbon"] .smjbg-rbtext{position:sticky;left:0;z-index:3;flex:0 0 142px!important;width:142px!important;min-width:0!important;margin:0 8px 0 0!important;
align-self:center;padding:8px 8px 8px 2px;background:var(--ui-surface,#fff);box-shadow:8px 0 10px -8px rgba(16,24,40,.18)}
.smjbg-app .smjbg-rbtext>span{font-size:11px!important;margin-bottom:4px!important}
.smjbg-app .smjbg-rbtext input{height:32px!important;font-size:12px!important;padding:0 8px!important}
.smjbg-rbhint{display:none}
}
/* ==========================================================================
3.19 — Pages: a compact bar under the canvas, beside (not inside) the zoom dial
========================================================================== */
.smjbg-cvfoot{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:8px;position:sticky;bottom:0;z-index:5}
.smjbg-cvfoot .smjbg-zoombar{margin-top:0!important;position:static!important}
.smjbg-pgbar{display:inline-flex;align-items:center;gap:2px;padding:4px;border:1px solid var(--ui-line-soft,#e6e8ec);border-radius:999px;
background:var(--ui-surface,#fff);box-shadow:0 1px 2px rgba(16,24,40,.06),0 2px 6px rgba(16,24,40,.05)}
.smjbg-app .smjbg-pgbar button{height:28px;min-height:0!important;padding:0 12px!important;border:0!important;border-radius:999px!important;background:transparent!important;
box-shadow:none!important;color:var(--ui-ink,#1c2024)!important;font:600 12px/1 var(--ui-font,Inter,system-ui,sans-serif)!important;cursor:pointer;white-space:nowrap}
.smjbg-app .smjbg-pgbar button:hover:not(:disabled){background:var(--ui-subtle,#f1f3f5)!important}
.smjbg-app .smjbg-pgbar button:disabled{color:var(--ui-muted,#a0a6ad)!important;cursor:not-allowed}
.smjbg-app .smjbg-pgbar button[data-pg="remove"]:hover:not(:disabled){color:#c01d1d!important;background:#fdf0f0!important}
.smjbg-app .smjbg-pgbar button:focus-visible{outline:2px solid var(--ui-accent,#2667e7)!important;outline-offset:1px}
.smjbg-pgnav{display:inline-flex;align-items:center;gap:0}
.smjbg-pgnav[hidden]{display:none!important}
.smjbg-app .smjbg-pgnav button{width:26px;padding:0!important;font-size:15px!important}
.smjbg-pgnav span{font:600 11.5px/1 var(--ui-font,Inter,system-ui,sans-serif);color:var(--ui-sub,#565b61);padding:0 4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.smjbg-pgnav i{width:1px;height:16px;background:var(--ui-line,#d9dde1);margin:0 4px}
.smjbg-pgpop{position:fixed;z-index:2147483300;padding:10px 12px;border:1px solid var(--ui-line-soft,#e6e8ec);border-radius:10px;background:#fff;
box-shadow:0 8px 24px rgba(16,24,40,.14);font-family:var(--ui-font,Inter,system-ui,sans-serif)}
.smjbg-pgpop b{display:block;font-size:12.5px;margin-bottom:8px;color:#1c2024}
.smjbg-pgpop div{display:flex;gap:6px;justify-content:flex-end}
.smjbg-pgpop button{height:28px;padding:0 12px;border:1px solid var(--ui-line,#d9dde1);border-radius:7px;background:#fff;font:600 12px/1 inherit;cursor:pointer}
.smjbg-pgpop button.rm{background:#d92d20;border-color:#d92d20;color:#fff}
@media(max-width:1023px){
.smjbg-cvfoot{margin:6px 0 4px;position:static}
.smjbg-pgbar{flex-wrap:wrap;justify-content:center;max-width:calc(100% - 16px);border-radius:14px}
.smjbg-pgnav:not([hidden]){flex-basis:100%;justify-content:center;padding-bottom:2px;border-bottom:1px solid var(--ui-line-soft,#eef0f2);margin-bottom:2px}
.smjbg-pgnav i{display:none}
.smjbg-app .smjbg-pgbar button{padding:0 9px!important;font-size:11.5px!important}
}
/* ==========================================================================
3.20 — Insert: one asset library inside the right-side panel
========================================================================== */
.smjbg-iacats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:2px 0 12px}
.smjbg-app .smjbg-iacat{display:flex;flex-direction:column;align-items:stretch;gap:0;min-width:0;padding:0!important;border:1px solid var(--ui-line-soft,#e6e8ec)!important;
border-radius:12px!important;background:#fff!important;box-shadow:none!important;cursor:pointer;overflow:hidden;text-align:left;transition:border-color .14s,box-shadow .14s,transform .14s}
.smjbg-app .smjbg-iacat:hover{border-color:var(--ui-accent,#2667e7)!important;box-shadow:0 4px 14px rgba(16,24,40,.08)!important}
.smjbg-app .smjbg-iacat:focus-visible{outline:2px solid var(--ui-accent,#2667e7)!important;outline-offset:1px}
.smjbg-iacat .pv{display:flex;align-items:center;justify-content:center;gap:4px;height:66px;background:var(--ui-subtle,#f4f5f8);overflow:hidden;padding:6px;box-sizing:border-box}
.smjbg-iacat .pv img{max-height:100%;max-width:34%;object-fit:contain;display:block;min-width:0}
.smjbg-iacat .pv.tpl img{max-width:32%;height:100%;object-fit:cover;border-radius:4px;box-shadow:0 1px 3px rgba(16,24,40,.18)}
.smjbg-iacat .pv.mockups img{max-width:48%}
.smjbg-iacat .pv.svg svg{width:92%;height:100%}
.smjbg-iacat .pv.ic svg{width:30px;height:30px;fill:none;stroke:var(--ui-sub,#565b61);stroke-width:1.6}
.smjbg-iacat b{display:block;padding:7px 10px 0;font:600 12.5px/1.2 var(--ui-font,Inter,system-ui,sans-serif);color:var(--ui-ink,#1c2024)}
.smjbg-iacat em{display:block;padding:1px 10px 8px;font:500 10.5px/1.2 var(--ui-font,Inter,system-ui,sans-serif);font-style:normal;color:var(--ui-muted,#8a919c)}
.smjbg-iacat b:last-child{padding-bottom:8px}
/* the open library */
.smjbg-iahd{display:flex;align-items:center;gap:8px;margin:0 0 8px;min-width:0}
.smjbg-app .smjbg-iahd button{display:inline-flex;align-items:center;gap:2px;height:28px;padding:0 9px 0 5px!important;border:1px solid var(--ui-line,#d9dde1)!important;
border-radius:8px!important;background:#fff!important;box-shadow:none!important;font:600 12px/1 var(--ui-font,Inter,system-ui,sans-serif)!important;color:var(--ui-ink,#1c2024)!important;cursor:pointer;flex:0 0 auto}
.smjbg-app .smjbg-iahd button:hover{border-color:var(--ui-accent,#2667e7)!important}
.smjbg-iahd button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.smjbg-iahd b{font:700 13px/1.2 var(--ui-font,Inter,system-ui,sans-serif);color:var(--ui-ink,#1c2024);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.smjbg-iahd em{margin-left:auto;font:500 11px/1 var(--ui-font,Inter,system-ui,sans-serif);font-style:normal;color:var(--ui-muted,#8a919c)}
.smjbg-iabody{min-width:0}
.smjbg-iasearch{margin:0 0 8px!important}
.smjbg-iasel{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:6px;margin:0 0 8px}
.smjbg-app .smjbg-iasel select{width:100%;min-width:0;height:30px!important;min-height:0!important;padding:0 22px 0 8px!important;font-size:12px!important;border-radius:8px!important;box-shadow:none!important}
.smjbg-iachips{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;margin:0 0 8px;padding-bottom:2px}
.smjbg-iachips::-webkit-scrollbar{display:none}
.smjbg-app .smjbg-iachips button{flex:0 0 auto;height:26px;padding:0 10px!important;border:1px solid var(--ui-line,#d9dde1)!important;border-radius:999px!important;background:#fff!important;
box-shadow:none!important;font:500 11.5px/1 var(--ui-font,Inter,system-ui,sans-serif)!important;color:var(--ui-ink,#1c2024)!important;cursor:pointer;white-space:nowrap}
.smjbg-app .smjbg-iachips button.on{background:var(--ui-ink,#1c2024)!important;border-color:var(--ui-ink,#1c2024)!important;color:#fff!important}
.smjbg-iagrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.smjbg-iagrid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.smjbg-app .smjbg-iatile{position:relative;display:flex;flex-direction:column;min-width:0;padding:0!important;border:1px solid var(--ui-line-soft,#e6e8ec)!important;border-radius:10px!important;
background:#fff!important;box-shadow:none!important;cursor:grab;overflow:hidden;transition:border-color .14s,box-shadow .14s}
.smjbg-app .smjbg-iatile:hover{border-color:var(--ui-accent,#2667e7)!important;box-shadow:0 3px 10px rgba(16,24,40,.08)!important}
.smjbg-iatile>span{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;padding:8px;box-sizing:border-box;
background:#fff linear-gradient(45deg,#f3f5f8 25%,transparent 25%,transparent 75%,#f3f5f8 75%) 0 0/12px 12px}
.smjbg-iatile img{max-width:100%;max-height:100%;object-fit:contain;display:block;pointer-events:none}
.smjbg-iatile i{display:block;padding:4px 6px 6px;font:500 10.5px/1.25 var(--ui-font,Inter,system-ui,sans-serif);font-style:normal;color:var(--ui-sub,#565b61);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.smjbg-iatile.busy::after,.smjbg-iatcard.busy::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%232667e7' stroke-width='3' stroke-dasharray='40 20'/%3E%3C/svg%3E") center/22px no-repeat}
/* templates */
.smjbg-iacount{margin:0 0 6px;font:500 11px/1 var(--ui-font,Inter,system-ui,sans-serif);color:var(--ui-muted,#8a919c)}
.smjbg-iatpl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.smjbg-app .smjbg-iatcard{position:relative;display:flex;flex-direction:column;min-width:0;padding:0!important;border:1px solid var(--ui-line-soft,#e6e8ec)!important;border-radius:10px!important;
background:#fff!important;box-shadow:none!important;cursor:pointer;overflow:hidden;text-align:left;transition:border-color .14s,box-shadow .14s}
.smjbg-app .smjbg-iatcard:hover{border-color:var(--ui-accent,#2667e7)!important;box-shadow:0 4px 12px rgba(16,24,40,.1)!important}
.smjbg-iatcard>span{display:flex;align-items:center;justify-content:center;aspect-ratio:3/4;background:var(--ui-subtle,#f1f3f6);padding:6px;box-sizing:border-box}
.smjbg-iatcard img{max-width:100%;max-height:100%;object-fit:contain;display:block;border-radius:3px;box-shadow:0 1px 4px rgba(16,24,40,.16);pointer-events:none}
.smjbg-iatcard b{display:block;padding:6px 8px 0;font:600 11.5px/1.25 var(--ui-font,Inter,system-ui,sans-serif);color:var(--ui-ink,#1c2024);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smjbg-iatcard i{display:block;padding:1px 8px 7px;font:500 10.5px/1.2 var(--ui-font,Inter,system-ui,sans-serif);font-style:normal;color:var(--ui-muted,#8a919c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smjbg-app .smjbg-iamore{display:block;width:100%;height:34px;margin:10px 0 4px;border:1px solid var(--ui-line,#d9dde1)!important;border-radius:9px!important;background:#fff!important;
font:600 12px/1 var(--ui-font,Inter,system-ui,sans-serif)!important;color:var(--ui-ink,#1c2024)!important;cursor:pointer}
.smjbg-iaempty{margin:14px 4px;font-size:12px;color:var(--ui-muted,#8a919c);text-align:center}
/* nothing in the library may push the panel wider */
.smjbg-inshost,.smjbg-iabody,.smjbg-iares{max-width:100%;overflow-x:hidden}
/* 3.20: the header's Browse (templates) moved into Insert */
.smjbg-app [data-nav="browse"]{display:none!important}
/* fixed preview boxes: a tall asset never stretches its tile */
.smjbg-iatile>span,.smjbg-iatcard>span{position:relative;display:block!important;aspect-ratio:auto!important;height:0;padding:0!important;padding-bottom:100%!important}
.smjbg-iatcard>span{padding-bottom:128%!important}
.smjbg-iatile>span img,.smjbg-iatcard>span img{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);max-width:none;max-height:none;object-fit:contain}
.smjbg-iatcard>span img{box-shadow:none;filter:drop-shadow(0 1px 3px rgba(16,24,40,.18))}
/* the way back stays in reach however far the library is scrolled */
.smjbg-iahd{position:sticky;top:0;z-index:4;background:var(--ui-surface,#fff);padding:6px 0;margin-top:-6px!important;box-shadow:0 6px 8px -8px rgba(16,24,40,.2)}
@media(max-width:1023px){
.smjbg-iagrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.smjbg-iatpl{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* 3.22 — price calculation: header toggle gone; the component lives in Insert */
.smjbg-app .smjbg-pmwrap,.smjbg-app #pmCaret{display:none!important}
.smjbg-app .smjbg-insgrid .smjbg-pctile{grid-column:1/-1!important;padding:8px 8px 6px!important}
.smjbg-app .smjbg-pctile canvas{width:100%!important;height:auto!important;aspect-ratio:240/170;display:block}
.smjbg-pcrows{display:flex;gap:6px;flex-wrap:wrap}
.smjbg-app .smjbg-pcrows button{height:30px;padding:0 10px!important;border:1px solid var(--ui-line,#d9dde1)!important;border-radius:8px!important;background:#fff!important;
box-shadow:none!important;font:600 12px/1 var(--ui-font,Inter,system-ui,sans-serif)!important;color:var(--ui-ink,#1c2024)!important;cursor:pointer}
.smjbg-app .smjbg-pcrows button:hover{border-color:var(--ui-accent,#2667e7)!important}
/* ==========================================================================
3.23 — Edge-to-edge desktop editor: no header, status bar at the bottom,
typography under Custom Size, brand at the foot of the left navigation
========================================================================== */
@media(min-width:1024px){
html.smjbg-edgepage,html.smjbg-edgepage body{overflow:hidden!important;height:100%!important;margin:0!important}
.smjbg-app.smjbg-edge{position:fixed!important;top:var(--wp-admin--admin-bar--height,0px)!important;left:0!important;right:0!important;bottom:0!important;
z-index:99990;width:auto!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
box-shadow:none!important;overflow:hidden;background:var(--ui-surface,#fff);--top:0px}
.smjbg-edge .smjbg-appbar{display:none!important}
.smjbg-edge .smjbg-main{margin:0!important;padding:0!important;height:100%;display:flex!important;flex-direction:column}
.smjbg-edge .smjbg-shellmain{position:relative;flex:1 1 auto;height:auto!important;min-height:0!important}
/* the brand at the foot of the left navigation; the rail scrolls above it */
.smjbg-edge .smjbg-mainrow{padding-bottom:112px!important}
.smjbg-edge .smjbg-railbrand{grid-area:rail;align-self:end;z-index:3;display:flex;flex-direction:column;gap:3px;margin:0;padding:10px 12px 10px;
background:var(--ui-surface,#fff);border-top:1px solid var(--ui-line-soft,#eef0f2);border-right:1px solid var(--ui-line-soft,#eef0f2);box-sizing:border-box;min-width:0}
.smjbg-railbrand .smjbg-logoimg{height:20px!important;width:auto!important;max-width:100%;margin:0 0 2px!important;object-fit:contain;object-position:left}
.smjbg-railbrand>b{font:700 11.5px/1.25 var(--ui-font,Inter,system-ui,sans-serif);color:var(--ui-ink,#1c2024)}
.smjbg-railbrand .lk{display:flex;flex-wrap:wrap;gap:2px 8px;margin-top:2px}
.smjbg-app .smjbg-railbrand .lk button,.smjbg-app .smjbg-railbrand .lk a{padding:0!important;border:0!important;background:none!important;box-shadow:none!important;min-height:0!important;height:auto!important;
font:500 10px/1.5 var(--ui-font,Inter,system-ui,sans-serif)!important;color:var(--ui-muted,#8a919c)!important;cursor:pointer;text-align:left;white-space:nowrap}
.smjbg-app .smjbg-railbrand .lk button:hover,.smjbg-app .smjbg-railbrand .lk a:hover{color:var(--ui-accent,#2667e7)!important}
.smjbg-railbrand small{font:500 9.5px/1.3 var(--ui-font,Inter,system-ui,sans-serif);color:var(--ui-muted,#a0a6ad)}
/* the status bar replaces the footer strip */
.smjbg-edge .smjbg-foot{flex:0 0 auto;order:99;margin:0!important;padding:0!important;border:0!important;border-top:1px solid var(--ui-line-soft,#e6e8ec)!important;background:var(--ui-surface,#fff)!important;position:relative!important}
.smjbg-edge .smjbg-foot-in,.smjbg-edge .smjbg-foot-burger{display:none!important}
.smjbg-sbar{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;box-sizing:border-box;min-width:0}
.smjbg-sbar .sb-l,.smjbg-sbar .sb-c,.smjbg-sbar .sb-r{display:flex;align-items:center;gap:8px;min-width:0}
.smjbg-sbar .sb-l{flex:1 1 0;justify-content:flex-start}
.smjbg-sbar .sb-c{flex:0 0 auto;justify-content:center}
.smjbg-sbar .sb-r{flex:1 1 0;justify-content:flex-end}
.smjbg-sbdims{font:500 11.5px/1 var(--ui-font,Inter,system-ui,sans-serif);color:var(--ui-sub,#565b61);white-space:nowrap;font-variant-numeric:tabular-nums}
.smjbg-sbar .smjbg-pgbar,.smjbg-sbar .smjbg-zoombar{position:static!important;margin:0!important;box-shadow:none!important;padding:2px!important;border-color:var(--ui-line-soft,#e6e8ec)!important}
.smjbg-app .smjbg-sbar .smjbg-pgbar button{height:26px!important;padding:0 10px!important;font-size:11.5px!important}
.smjbg-sbar .smjbg-zoombar{display:flex!important}
.smjbg-sbar .sb-grp{display:inline-flex;gap:4px}
.smjbg-app .smjbg-sbar .smjbg-undo{width:30px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ui-line,#d9dde1);border-radius:8px;
background:#fff;color:var(--ui-ink,#1c2024);cursor:pointer}
.smjbg-sbar .smjbg-undo svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.smjbg-app .smjbg-sbar .smjbg-undo:hover:not(:disabled){border-color:var(--ui-accent,#2667e7)}
.smjbg-sbar .smjbg-undo:disabled{opacity:.4;cursor:default}
.smjbg-sbar .smjbg-acts{display:inline-flex!important;gap:6px;margin:0!important;padding:0!important;border:0!important;position:static!important}
.smjbg-app .smjbg-sbar .smjbg-act{height:28px!important;min-height:0!important;padding:0 12px!important;font-size:12px!important;border-radius:8px!important}
.smjbg-app .smjbg-sbar .smjbg-act svg{width:15px;height:15px}
.smjbg-sbar .smjbg-appnav{position:static!important;display:inline-flex!important;height:auto!important;gap:2px;margin:0 0 0 4px!important;padding:0 0 0 8px!important;
border:0!important;border-left:1px solid var(--ui-line-soft,#e6e8ec)!important;background:none!important;box-shadow:none!important;width:auto!important;grid-template-columns:none!important}
.smjbg-app .smjbg-sbar .smjbg-appnav button{height:28px!important;min-height:0!important;width:auto!important;padding:0 8px!important;display:inline-flex!important;flex-direction:row!important;align-items:center;gap:5px;
border-radius:8px!important;font-size:11.5px!important}
.smjbg-sbar .smjbg-appnav button svg{width:15px!important;height:15px!important;margin:0!important}
.smjbg-sbar .smjbg-appnav button i{font-style:normal;font-size:11.5px!important;line-height:1}
/* the area under the canvas stays clear: its bar moved into the status bar */
.smjbg-edge .smjbg-cvfoot{display:none!important}
/* top of the workspace: Custom Size and Layers on one row, the element toolbar
on the row under Custom Size — shown only while something is selected, its
row kept so the canvas never jumps */
.smjbg-edge .smjbg-prevcol{padding-top:8px!important}
.smjbg-edge .smjbg-tbdock{display:grid!important;grid-template-columns:auto 1fr auto;grid-template-rows:36px 40px;row-gap:4px;column-gap:8px;
height:auto!important;min-height:0!important;margin:0 0 6px!important;padding:0 4px!important;align-items:center;justify-items:start}
.smjbg-app.smjbg-edge .smjbg-cszbtn{position:static!important;transform:none!important;grid-row:1;grid-column:1;height:34px}
.smjbg-app.smjbg-edge .smjbg-lyrbtn{position:static!important;transform:none!important;grid-row:1;grid-column:3;justify-self:end;height:34px}
.smjbg-edge .smjbg-tbdock .smjbg-instb.docked,.smjbg-edge .smjbg-tbdock .smjbg-cszstrip{grid-row:2;grid-column:1/-1;justify-self:start;max-width:100%!important;height:40px}
.smjbg-edge .smjbg-tbdock .smjbg-tbhint{display:none!important}
}
/* 3.23.1 — the workspace always spans the window: a wide canvas (e.g. a large
custom px size) must scale down inside it, never widen the grid past the
window and push the right panel off-screen */
@media(min-width:1024px){
.smjbg-edge .smjbg-main{align-items:stretch!important;width:100%!important;min-width:0!important}
.smjbg-edge .smjbg-shellmain{width:100%!important;max-width:none!important;min-width:0!important;align-self:stretch!important;
grid-template-columns:var(--railw) minmax(0,1fr) var(--panw)!important}
.smjbg-app.smjbg-edge[data-panel="off"] .smjbg-shellmain{grid-template-columns:var(--railw) minmax(0,1fr) 0!important}
.smjbg-edge .smjbg-prevcol{min-width:0!important;overflow:hidden}
.smjbg-edge .smjbg-prevcol #out{max-width:100%!important}
.smjbg-edge .smjbg-foot{width:100%!important}
}
@media(min-width:1024px) and (max-width:1199px){
.smjbg-edge .smjbg-shellmain,.smjbg-app.smjbg-edge[data-panel="off"] .smjbg-shellmain{grid-template-columns:var(--railw) minmax(0,1fr)!important}
}
/* ==========================================================================
3.24 — Footer as it was, with pages / size / zoom in its centre; document
actions as two compact icon rows in the top-left corner
========================================================================== */
@media(min-width:1024px){
/* the original footer, unchanged: links on the left, copyright on the right */
.smjbg-edge .smjbg-foot-in{display:flex!important}
.smjbg-edge .smjbg-foot{border-top:1px solid var(--color-border-default,#e6e8ec)!important}
.smjbg-edge .smjbg-foot-in{flex-wrap:nowrap!important;max-width:none!important}
.smjbg-edge .smjbg-foot-links,.smjbg-edge .smjbg-foot-copy{flex:0 0 auto}
/* its centre: pages, page size, zoom — icons with tooltips */
.smjbg-fmid{flex:0 1 auto;display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;padding:0 12px;
border-left:1px solid var(--ui-line-soft,#e6e8ec);border-right:1px solid var(--ui-line-soft,#e6e8ec)}
.smjbg-fmid .smjbg-pgbar,.smjbg-fmid .smjbg-zoombar{position:static!important;margin:0!important;box-shadow:none!important;padding:2px!important;border-color:var(--ui-line-soft,#e6e8ec)!important;display:inline-flex!important}
.smjbg-app .smjbg-fmid .smjbg-pgbar button{width:28px;height:28px!important;padding:0!important;display:inline-flex;align-items:center;justify-content:center}
.smjbg-app .smjbg-fmid .smjbg-pgbar button>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.smjbg-fmid .smjbg-pgbar button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.smjbg-app .smjbg-fmid .smjbg-pgnav button{width:22px}
.smjbg-fmid .smjbg-pgnav span{font-size:11px}
.smjbg-fmid .smjbg-sbdims{font:500 11px/1 var(--ui-font,Inter,system-ui,sans-serif);color:var(--ui-muted,#8a919c);white-space:nowrap;font-variant-numeric:tabular-nums}
.smjbg-app .smjbg-fmid .smjbg-zoombar button[data-zoom="fit"]{width:26px!important;padding:0!important;display:inline-flex;align-items:center;justify-content:center}
.smjbg-fmid .smjbg-zoombar button[data-zoom="fit"] span{display:none}
.smjbg-fmid .smjbg-zoombar button[data-zoom="fit"] svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.smjbg-fmid .smjbg-zoombar span{font-size:11.5px!important}
/* the left navigation starts below the corner controls and ends above the brand */
.smjbg-edge .smjbg-mainrow{padding-top:90px!important;padding-bottom:64px!important}
.smjbg-edge .smjbg-railbrand{padding:8px 12px!important;gap:2px!important}
.smjbg-edge .smjbg-topctl{grid-area:rail;align-self:start;z-index:4;display:flex;flex-direction:column;gap:5px;padding:10px 10px 9px;
background:var(--ui-surface,#fff);border-right:1px solid var(--ui-line-soft,#eef0f2);border-bottom:1px solid var(--ui-line-soft,#eef0f2);box-sizing:border-box;min-width:0}
.smjbg-topctl .r{display:flex;align-items:center;justify-content:space-between;gap:4px}
.smjbg-app .smjbg-topctl button{position:relative;flex:0 0 auto;width:30px!important;height:30px!important;min-height:0!important;min-width:0!important;padding:0!important;margin:0!important;
display:inline-flex!important;align-items:center!important;justify-content:center!important;border:1px solid var(--ui-line,#d9dde1)!important;border-radius:8px!important;
background:#fff!important;box-shadow:none!important;color:var(--ui-ink,#1c2024)!important;font-size:0!important;line-height:0!important;cursor:pointer;flex-direction:row!important}
.smjbg-app .smjbg-topctl button:hover:not(:disabled){border-color:var(--ui-accent,#2667e7)!important;color:var(--ui-accent,#2667e7)!important}
.smjbg-app .smjbg-topctl button:disabled{opacity:.4;cursor:default}
.smjbg-topctl button svg{width:16px!important;height:16px!important;margin:0!important;flex:0 0 auto}
.smjbg-topctl button i,.smjbg-topctl button b,.smjbg-topctl button span{display:none!important}
.smjbg-app .smjbg-topctl .smjbg-act-save.saved::after{position:absolute;top:3px;right:3px;margin:0;width:6px;height:6px}
/* the 3.23 status bar is gone */
.smjbg-edge .smjbg-sbar{display:none!important}
}
@media(min-width:1024px){
/* the moved containers lay their buttons out as the corner rows */
.smjbg-topctl .r .smjbg-appnav,.smjbg-topctl .r .smjbg-acts{position:static!important;display:flex!important;flex:1 1 auto;justify-content:space-between;align-items:center;gap:4px;
width:auto!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;grid-template-columns:none!important}
.smjbg-topctl .r .smjbg-acts{flex:0 0 auto;justify-content:flex-start}
.smjbg-topctl .r .smjbg-acts .smjbg-act:not(.smjbg-act-save){order:-1}
.smjbg-topctl .r:first-child{justify-content:flex-start}
.smjbg-topctl .r .smjbg-appnav{justify-content:flex-start;gap:5px}
/* narrower windows: the footer's own items tighten so the centre still fits on one line */
}
@media(min-width:1024px) and (max-width:1359px){
.smjbg-edge .smjbg-foot-in{padding:12px 14px!important;gap:8px 10px!important}
.smjbg-edge .smjbg-foot-links button{padding:5px 6px!important;font-size:12px!important}
.smjbg-edge .smjbg-foot-copy{font-size:11px!important;max-width:150px;line-height:1.3}
.smjbg-fmid{padding:0 8px!important;gap:6px!important}
.smjbg-fmid .smjbg-sbdims{display:none}
}
@media(min-width:1024px) and (max-width:1199px){
.smjbg-edge .smjbg-foot-links{flex-wrap:wrap!important;max-width:250px}
.smjbg-edge .smjbg-foot-links button{padding:2px 5px!important;font-size:11.5px!important}
}
@media(min-width:1024px){
.smjbg-topctl .smjbg-undo svg{fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round;stroke-linejoin:round}
.smjbg-topctl .r{gap:3px!important}
.smjbg-app .smjbg-topctl button{width:29px!important;height:29px!important}
.smjbg-edge .smjbg-topctl{padding:9px 8px 8px!important}
}
/* ==========================================================================
3.25 — The editor header returns as a toolbar, the same height as the footer
========================================================================== */
@media(min-width:1024px){
.smjbg-app.smjbg-edge{--ebar:56px}
.smjbg-ehead{flex:0 0 var(--ebar);order:-1;display:flex;align-items:center;gap:10px;height:var(--ebar);min-height:var(--ebar);padding:0 14px;box-sizing:border-box;
background:var(--ui-surface,#fff);border-bottom:1px solid var(--color-border-default,#e6e8ec);min-width:0;position:relative;z-index:20}
.smjbg-ehead .eh-l,.smjbg-ehead .eh-r{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.smjbg-ehead .eh-c{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;height:100%}
.smjbg-ehead .eh-sep{width:1px;height:22px;background:var(--ui-line-soft,#e6e8ec);margin:0 2px;flex:0 0 auto}
/* the footer: same height, its items untouched */
.smjbg-edge .smjbg-foot{flex:0 0 var(--ebar)!important;height:var(--ebar)!important;min-height:var(--ebar)!important;display:flex;align-items:center}
.smjbg-edge .smjbg-foot-in{height:100%;padding-top:0!important;padding-bottom:0!important;box-sizing:border-box;width:100%}
/* one look for every header button */
.smjbg-app .smjbg-ehead .smjbg-cszbtn,.smjbg-app .smjbg-ehead .smjbg-lyrbtn,.smjbg-app .smjbg-ehead .smjbg-undo,.smjbg-app .smjbg-ehead .smjbg-act,
.smjbg-app .smjbg-ehead .smjbg-appnav button{position:static!important;transform:none!important;display:inline-flex!important;flex-direction:row!important;align-items:center!important;
justify-content:center;gap:6px;height:34px!important;min-height:0!important;min-width:0!important;width:auto!important;margin:0!important;padding:0 11px!important;
border:1px solid var(--ui-line,#d9dde1)!important;border-radius:9px!important;background:#fff!important;box-shadow:none!important;color:var(--ui-ink,#1c2024)!important;
font:600 12.5px/1 var(--ui-font,Inter,system-ui,sans-serif)!important;white-space:nowrap;cursor:pointer}
.smjbg-app .smjbg-ehead .smjbg-undo{width:34px!important;padding:0!important}
.smjbg-app .smjbg-ehead button:hover:not(:disabled){border-color:var(--ui-accent,#2667e7)!important}
.smjbg-app .smjbg-ehead .smjbg-undo:disabled{opacity:.4;cursor:default}
.smjbg-app .smjbg-ehead .smjbg-cszbtn.on,.smjbg-app .smjbg-ehead .smjbg-lyrbtn.on{background:var(--ui-accent-soft,#eef4ff)!important;border-color:var(--ui-accent,#2667e7)!important;color:var(--ui-accent,#2667e7)!important}
.smjbg-ehead button svg{width:16px!important;height:16px!important;margin:0!important;flex:0 0 auto}
.smjbg-ehead .smjbg-undo svg{fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round;stroke-linejoin:round}
.smjbg-ehead .smjbg-appnav button i{font-style:normal;font-size:12.5px!important;line-height:1}
.smjbg-ehead .smjbg-acts{display:flex!important;gap:6px;margin:0!important;padding:0!important;border:0!important;position:static!important;background:none!important}
.smjbg-ehead .smjbg-acts .smjbg-act:not(.smjbg-act-save){order:-1}
.smjbg-ehead .smjbg-appnav{position:static!important;display:flex!important;gap:6px;width:auto!important;height:auto!important;margin:0!important;padding:0!important;
border:0!important;background:none!important;box-shadow:none!important;grid-template-columns:none!important}
.smjbg-ehead .smjbg-appnav [data-nav="profile"]{order:-1}
.smjbg-app .smjbg-ehead .smjbg-appnav button.on{border-color:var(--ui-line,#d9dde1)!important;color:var(--ui-ink,#1c2024)!important}
/* the element toolbar in the centre, in the header's own height */
.smjbg-edge .smjbg-ehead .smjbg-tbdock{display:flex!important;align-items:center;justify-content:center;width:100%!important;max-width:100%!important;height:100%!important;
min-height:0!important;margin:0!important;padding:0!important;grid-template-columns:none!important;grid-template-rows:none!important;container-type:normal}
.smjbg-edge .smjbg-ehead .smjbg-tbdock .smjbg-instb.docked{height:42px!important;max-width:100%!important;box-shadow:none!important;border:1px solid var(--ui-line-soft,#e6e8ec)!important;grid-row:auto;grid-column:auto;justify-self:auto}
.smjbg-edge .smjbg-ehead .smjbg-tbdock .smjbg-cszstrip{height:42px;max-width:100%!important;box-shadow:none!important;grid-row:auto;grid-column:auto}
.smjbg-edge .smjbg-ehead .smjbg-tbhint{display:flex!important;height:34px;border:0;background:none;padding:0 8px;font-size:12px;color:var(--ui-muted,#8a919c)}
.smjbg-edge .smjbg-ehead .smjbg-tbdock.has .smjbg-tbhint,.smjbg-edge .smjbg-ehead .smjbg-tbdock.csz .smjbg-tbhint{display:none!important}
/* the workspace under it: no row above the canvas any more */
.smjbg-edge .smjbg-prevcol{padding-top:14px!important}
.smjbg-edge .smjbg-topctl{display:none!important}
.smjbg-edge .smjbg-mainrow{padding-top:14px!important}
}
/* narrower windows: header buttons keep their icons and show their names on hover */
@media(min-width:1024px) and (max-width:1535px){
.smjbg-ehead .smjbg-cszbtn span,.smjbg-ehead .smjbg-lyrbtn span,.smjbg-ehead .smjbg-appnav button i{display:none!important}
.smjbg-app .smjbg-ehead .smjbg-cszbtn,.smjbg-app .smjbg-ehead .smjbg-appnav button{width:34px!important;padding:0!important}
.smjbg-app .smjbg-ehead .smjbg-lyrbtn{padding:0 8px!important}
.smjbg-ehead{gap:8px;padding:0 10px}
}
@media(min-width:1024px) and (max-width:1279px){
.smjbg-app .smjbg-ehead .smjbg-act{font-size:0!important;width:34px!important;padding:0!important;gap:0}
.smjbg-app .smjbg-ehead .smjbg-act-save.saved::after{position:absolute;top:4px;right:4px;margin:0}
.smjbg-app .smjbg-ehead .smjbg-act{position:relative!important}
.smjbg-edge .smjbg-ehead .smjbg-tbhint{display:none!important}
}
/* ===== 3.26 — UI reskin (Claude Design) ===== */
@media (min-width:1024px){
/* tokens: radius 8/10/12 · one shadow scale · AA-safe muted text */
.smjbg-app.smjbg-edge{--ui-r-sm:8px;--ui-r:10px;--ui-r-lg:12px;--ui-muted:#676d75;
--ui-sh-1:0 1px 2px rgba(16,24,40,.06);
--ui-sh-2:0 1px 2px rgba(16,24,40,.06),0 4px 12px rgba(16,24,40,.08);
--ui-sh-3:0 2px 4px rgba(16,24,40,.06),0 12px 32px rgba(16,24,40,.14);
--ui-ring:0 0 0 3px color-mix(in srgb,var(--ui-accent) 28%,transparent);
--rsk-grad:linear-gradient(135deg,#2667e7 0%,#3b36c4 100%);
--rsk-grad-hi:linear-gradient(135deg,#1d52bb 0%,#312ba6 100%);
--rsk-canvas:#f2f3f7;--rsk-ink2:#3d434a;--rsk-sub:#4b5159;
--rail-slice:transparent;--rail-slice-h:#f2f3f7;--rail-on:#e8efff}
/* visible keyboard focus everywhere */
.smjbg-app.smjbg-edge :is(button,[role=button],a,summary,select):focus-visible{outline:2px solid var(--ui-accent)!important;outline-offset:2px!important}
/* ---- header: branded gradient, ghost buttons, Share as the one white pill ---- */
.smjbg-app.smjbg-edge .smjbg-ehead{background:linear-gradient(100deg,#2667e7 0%,#3150d8 55%,#3b36c4 100%)!important;border-bottom:0!important;
box-shadow:0 1px 0 rgba(16,24,40,.08),0 2px 10px rgba(40,50,170,.16);color:#fff}
.smjbg-app.smjbg-edge .smjbg-ehead .eh-sep{background:rgba(255,255,255,.28)!important}
.smjbg-app.smjbg-edge .smjbg-ehead :is(.smjbg-cszbtn,.smjbg-lyrbtn,.smjbg-undo,.smjbg-act,.smjbg-appnav button){border:1px solid rgba(255,255,255,.22)!important;border-radius:10px!important;background:rgba(10,18,72,.16)!important;
color:#fff!important;box-shadow:none!important;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease}
.smjbg-app.smjbg-edge .smjbg-ehead :is(.smjbg-cszbtn,.smjbg-lyrbtn,.smjbg-undo,.smjbg-act,.smjbg-appnav button):hover:not(:disabled){background:rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.45)!important}
.smjbg-app.smjbg-edge .smjbg-ehead :is(.smjbg-cszbtn,.smjbg-lyrbtn,.smjbg-undo,.smjbg-act,.smjbg-appnav button):active:not(:disabled){background:rgba(255,255,255,.24)!important}
.smjbg-app.smjbg-edge .smjbg-ehead :is(.smjbg-cszbtn.on,.smjbg-lyrbtn.on,.smjbg-appnav button.on){background:rgba(255,255,255,.24)!important;border-color:#fff!important;color:#fff!important}
.smjbg-app.smjbg-edge .smjbg-ehead :is(.smjbg-cszbtn,.smjbg-lyrbtn,.smjbg-undo,.smjbg-act,.smjbg-appnav button) svg,.smjbg-app.smjbg-edge [data-nav="profile"].in svg{color:inherit!important}
.smjbg-app.smjbg-edge .smjbg-ehead .smjbg-lyrbtn em{background:rgba(255,255,255,.22)!important;color:#fff!important;border-radius:999px}
.smjbg-app.smjbg-edge .smjbg-ehead :is(.smjbg-cszbtn,.smjbg-lyrbtn,.smjbg-undo,.smjbg-act,.smjbg-appnav button):focus-visible{outline:2px solid #fff!important;outline-offset:2px!important;box-shadow:none!important}
.smjbg-app.smjbg-edge .smjbg-ehead .smjbg-appnav button[data-nav="share"]{background:#fff!important;border-color:#fff!important;color:#2a3cc0!important;border-radius:999px!important;
font-weight:700!important;box-shadow:0 1px 2px rgba(10,18,72,.2),0 2px 8px rgba(10,18,72,.18)!important}
.smjbg-app.smjbg-edge .smjbg-ehead .smjbg-appnav button[data-nav="share"]:hover:not(:disabled){background:#eef1ff!important;border-color:#eef1ff!important}
.smjbg-app.smjbg-edge .smjbg-ehead .smjbg-appnav button[data-nav="share"]:focus-visible{outline-color:#fff!important}
.smjbg-app.smjbg-edge .smjbg-ehead .smjbg-tbhint{color:#e9edff!important}
/* element toolbar: a clean white floating pill in the centre */
.smjbg-app.smjbg-edge .smjbg-ehead .smjbg-tbdock :is(.smjbg-instb.docked,.smjbg-cszstrip){background:#fff!important;border:0!important;border-radius:12px!important;
box-shadow:0 1px 2px rgba(10,18,72,.14),0 6px 18px rgba(10,18,72,.2)!important;color:var(--ui-ink)}
.smjbg-app.smjbg-edge .smjbg-instb.docked button{border-radius:8px!important}
/* ---- left rail: icon over label, compact square tiles ---- */
.smjbg-app.smjbg-edge .smjbg-mainrow{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:4px!important;
padding-left:8px!important;padding-right:8px!important}
.smjbg-app.smjbg-edge .smjbg-mainrow .smjbg-mogrp{grid-column:1/-1;padding:12px 4px 4px!important;font-size:10px!important;letter-spacing:.12em!important;color:var(--ui-muted)!important}
.smjbg-app.smjbg-edge .smjbg-mainrow .smjbg-mogrp:first-child{padding-top:2px!important}
.smjbg-app.smjbg-edge .smjbg-mainrow .smjbg-mo{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:6px;
min-height:60px!important;aspect-ratio:1/1;padding:6px 2px!important;border-radius:10px!important;background:transparent!important;
color:var(--rsk-ink2)!important;font-size:10.5px!important;font-weight:600!important;line-height:1.15!important;letter-spacing:0!important;text-align:center!important;
--rsk-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%23000'/%3E%3C/svg%3E")}
.smjbg-app.smjbg-edge .smjbg-mainrow .smjbg-mo::before{content:""!important;position:static!important;display:block!important;flex:0 0 auto;width:22px!important;height:22px!important;
background:currentColor!important;opacity:1!important;border-radius:0!important;
-webkit-mask:var(--rsk-ic) center/contain no-repeat;mask:var(--rsk-ic) center/contain no-repeat;transition:transform .14s ease}
.smjbg-app.smjbg-edge .smjbg-mainrow .smjbg-mo:hover:not(.on){background:var(--rail-slice-h)!important;color:var(--ui-ink)!important}
.smjbg-app.smjbg-edge .smjbg-mainrow .smjbg-mo:hover:not(.on)::before{transform:translateY(-1px)}
.smjbg-app.smjbg-edge .smjbg-mainrow .smjbg-mo.on{background:var(--rail-on)!important;color:var(--ui-accent-hi)!important;font-weight:700!important}
.smjbg-app.smjbg-edge .smjbg-mainrow button.smjbg-mo[data-opt-go="insert"]{--rsk-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E")}
.smjbg-app.smjbg-edge .smjbg-mainrow button.smjbg-mo[data-opt-go="images"]{--rsk-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18a4.5 4.5 0 0 1-.6-8.96A6 6 0 0 1 18 9.5a4 4 0 0 1-.5 8.5'/%3E%3Cpath d='M12 12v8M9 15l3-3 3 3'/%3E%3C/svg%3E")}
.smjbg-app.smjbg-edge .smjbg-mainrow button.smjbg-mo[data-opt-go="price"]{--rsk-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5' fill='%23000'/%3E%3C/svg%3E")}
.smjbg-app.smjbg-edge .smjbg-mainrow button.smjbg-mo[data-opt-go="layout"]{--rsk-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M3 9h18M10 9v12'/%3E%3C/svg%3E")}
.smjbg-app.smjbg-edge .smjbg-mainrow button.smjbg-mo[data-opt-go="bgimg"]{--rsk-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 16l-5-5-9 9'/%3E%3C/svg%3E")}
.smjbg-app.smjbg-edge .smjbg-mainrow button.smjbg-mo[data-opt-go="theme"]{--rsk-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18c1.1 0 2-.8 2-1.8 0-.5-.2-.9-.5-1.2-.3-.3-.5-.7-.5-1.2 0-1 .8-1.8 1.8-1.8H17a4 4 0 0 0 4-4c0-4.4-4-8-9-8z'/%3E%3Ccircle cx='7.5' cy='11.5' r='1.2' fill='%23000' stroke='none'/%3E%3Ccircle cx='10.5' cy='7.5' r='1.2' fill='%23000' stroke='none'/%3E%3Ccircle cx='15.5' cy='8' r='1.2' fill='%23000' stroke='none'/%3E%3C/svg%3E")}
.smjbg-app.smjbg-edge .smjbg-mainrow button.smjbg-mo[data-opt-go="ftheme"]{--rsk-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7V5h16v2M12 5v14M9 19h6'/%3E%3C/svg%3E")}
.smjbg-app.smjbg-edge .smjbg-mainrow button.smjbg-mo[data-opt-go="border"]{--rsk-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Crect x='7.5' y='7.5' width='9' height='9' rx='1.5'/%3E%3C/svg%3E")}
.smjbg-app.smjbg-edge .smjbg-mainrow button.smjbg-mo[data-opt-go="ribbon"]{--rsk-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h18l-3 4 3 4H3l3-4z'/%3E%3C/svg%3E")}
/* ---- Insert: browse-category cards ---- */
.smjbg-app.smjbg-edge .smjbg-iacats{gap:8px!important}
.smjbg-app.smjbg-edge .smjbg-iacat{padding:6px!important;border:1px solid var(--ui-line-soft)!important;border-radius:12px!important;background:#fff!important;text-align:center!important;
transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease!important}
.smjbg-app.smjbg-edge .smjbg-iacat:hover{transform:translateY(-2px);border-color:#cfdaf6!important;box-shadow:var(--ui-sh-2)!important}
.smjbg-app.smjbg-edge .smjbg-iacat:active{transform:translateY(0)}
.smjbg-app.smjbg-edge .smjbg-iacat .pv{height:84px!important;border-radius:8px!important;background:var(--rsk-cat,var(--rsk-canvas))!important;padding:8px!important}
.smjbg-app.smjbg-edge .smjbg-iacat[data-iaopen="templates"]{--rsk-cat:#e7eeff}
.smjbg-app.smjbg-edge .smjbg-iacat[data-iaopen="portraits"]{--rsk-cat:#fdeee4}
.smjbg-app.smjbg-edge .smjbg-iacat[data-iaopen="images"]{--rsk-cat:#e4f5ec}
.smjbg-app.smjbg-edge .smjbg-iacat[data-iaopen="shapes"]{--rsk-cat:#fff3d4}
.smjbg-app.smjbg-edge .smjbg-iacat[data-iaopen="frames"]{--rsk-cat:#eceff6}
.smjbg-app.smjbg-edge .smjbg-iacat[data-iaopen="mockups"]{--rsk-cat:#eee8fd}
.smjbg-app.smjbg-edge .smjbg-iacat[data-iaopen="3d"]{--rsk-cat:#e2f3fa}
.smjbg-app.smjbg-edge .smjbg-iacat[data-iaopen="elements"]{--rsk-cat:#fde8ef}
.smjbg-app.smjbg-edge .smjbg-iacat[data-iaopen="price"]{--rsk-cat:#e9f3e1}
.smjbg-app.smjbg-edge .smjbg-iacat[data-iaopen="graphics"]{--rsk-cat:#fde9e3}
.smjbg-app.smjbg-edge .smjbg-iacat[data-iaopen="designs"]{--rsk-cat:#ebe7fd}
.smjbg-app.smjbg-edge .smjbg-iacat b{padding:8px 4px 0!important;text-align:center;font-size:12.5px!important}
.smjbg-app.smjbg-edge .smjbg-iacat em{padding:2px 4px 4px!important;text-align:center;color:var(--ui-muted)!important}
.smjbg-app.smjbg-edge .smjbg-iacat b:last-child{padding-bottom:4px!important}
/* ---- search: pill with an inner icon ---- */
.smjbg-app.smjbg-edge :is(.smjbg-inssearch,.smjbg-iasearch) input{height:36px!important;border-radius:999px!important;padding-left:36px!important;
background-color:var(--rsk-canvas)!important;border:1px solid transparent!important;font-size:13px!important;transition:background-color .14s,border-color .14s,box-shadow .14s}
.smjbg-app.smjbg-edge :is(.smjbg-inssearch,.smjbg-iasearch) input:hover{background-color:#eceef3!important}
.smjbg-app.smjbg-edge :is(.smjbg-inssearch,.smjbg-iasearch) input:focus{background-color:#fff!important;border-color:var(--ui-accent)!important;box-shadow:var(--ui-ring)!important}
.smjbg-app.smjbg-edge :is(.smjbg-inssearch,.smjbg-iasearch):not(:has(.ico)) input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626870' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;
background-position:13px 50%!important;background-size:16px 16px!important}
.smjbg-app.smjbg-edge .smjbg-inssearch .ico{left:13px!important;stroke:#626870!important}
.smjbg-app.smjbg-edge .smjbg-inssearch button{top:3px!important;border-radius:999px!important}
/* ---- primary actions: solid rounded, gentle gradient ---- */
.smjbg-app.smjbg-edge :is(.smjbg-b.pri,.smjbg-act-pri,.smjbg-mb.pri,.smjbg-insadd:not(.alt),.smjbg-cp-apply,.smjbg-insmedia .pri,#imgFreeHost button[data-media="upload"]){background:var(--rsk-grad)!important;border-color:transparent!important;color:#fff!important;border-radius:10px!important;font-weight:600!important;
box-shadow:0 1px 2px rgba(16,24,40,.08),0 2px 6px rgba(38,103,231,.24)!important;transition:box-shadow .14s ease,transform .14s ease}
.smjbg-app.smjbg-edge :is(.smjbg-b.pri,.smjbg-act-pri,.smjbg-mb.pri,.smjbg-insadd:not(.alt),.smjbg-cp-apply,.smjbg-insmedia .pri,#imgFreeHost button[data-media="upload"]):hover:not(:disabled){background:var(--rsk-grad-hi)!important;box-shadow:0 2px 4px rgba(16,24,40,.1),0 6px 14px rgba(38,103,231,.3)!important}
.smjbg-app.smjbg-edge :is(.smjbg-b.pri,.smjbg-act-pri,.smjbg-mb.pri,.smjbg-insadd:not(.alt),.smjbg-cp-apply,.smjbg-insmedia .pri,#imgFreeHost button[data-media="upload"]):active:not(:disabled){transform:translateY(1px)}
.smjbg-app.smjbg-edge :is(.smjbg-b.pri,.smjbg-act-pri,.smjbg-mb.pri,.smjbg-insadd:not(.alt),.smjbg-cp-apply,.smjbg-insmedia .pri,#imgFreeHost button[data-media="upload"]) svg{color:#fff}
/* ---- canvas workspace ---- */
.smjbg-app.smjbg-edge .smjbg-prevcol{background:var(--rsk-canvas)!important}
.smjbg-app.smjbg-edge .smjbg-prevcol #prev canvas{box-shadow:0 1px 2px rgba(16,24,40,.06),0 6px 16px rgba(16,24,40,.08),0 22px 48px -14px rgba(16,24,40,.22)!important}
.smjbg-app.smjbg-edge .smjbg-pantog{width:28px!important;height:28px!important;right:calc(var(--panw) - 14px)!important;border:1px solid var(--ui-line)!important;border-radius:50%!important;
background:#fff!important;color:var(--rsk-ink2)!important;box-shadow:var(--ui-sh-2)!important;transition:color .14s,border-color .14s,box-shadow .14s}
.smjbg-app.smjbg-edge[data-panel="off"] .smjbg-pantog{right:10px!important}
.smjbg-app.smjbg-edge .smjbg-pantog:hover{color:var(--ui-accent)!important;border-color:var(--ui-accent-line,#c0ddff)!important;box-shadow:var(--ui-sh-3)!important}
/* ---- footer: calm light bar, Canva-style centre groups ---- */
.smjbg-app.smjbg-edge .smjbg-foot{background:#fbfbfd!important;border-top:1px solid #e8eaef!important}
.smjbg-app.smjbg-edge .smjbg-foot-in{background:transparent!important}
.smjbg-app.smjbg-edge .smjbg-foot-links button{color:var(--rsk-sub)!important;background:transparent!important;border-radius:8px!important;transition:background-color .14s,color .14s}
.smjbg-app.smjbg-edge .smjbg-foot-links button:hover{color:var(--ui-ink)!important;background:#eef0f4!important}
.smjbg-app.smjbg-edge .smjbg-foot-copy{color:#5d636a!important}
.smjbg-app.smjbg-edge .smjbg-fmid{border-left-color:transparent!important;border-right-color:transparent!important}
.smjbg-app.smjbg-edge .smjbg-fmid :is(.smjbg-pgbar,.smjbg-zoombar){background:var(--rsk-canvas)!important;border:1px solid #e6e8ee!important;border-radius:10px!important;padding:2px!important;gap:2px!important}
.smjbg-app.smjbg-edge .smjbg-fmid :is(.smjbg-pgbar,.smjbg-zoombar) button{height:28px!important;min-width:28px;border:0!important;border-radius:8px!important;background:transparent!important;
color:var(--rsk-ink2)!important;box-shadow:none!important;transition:background-color .14s,color .14s,box-shadow .14s}
.smjbg-app.smjbg-edge .smjbg-fmid :is(.smjbg-pgbar,.smjbg-zoombar) button:hover:not(:disabled){background:#fff!important;color:var(--ui-ink)!important;box-shadow:0 1px 2px rgba(16,24,40,.12)!important}
.smjbg-app.smjbg-edge .smjbg-fmid .smjbg-pgbar button[data-pg="remove"]:hover:not(:disabled){color:#b42318!important;background:#fef0ef!important}
.smjbg-app.smjbg-edge .smjbg-fmid :is(.smjbg-pgbar,.smjbg-zoombar) button:disabled{color:#a0a6ad!important;background:transparent!important}
.smjbg-app.smjbg-edge .smjbg-fmid .smjbg-pgnav span{color:var(--rsk-ink2)!important}
.smjbg-app.smjbg-edge .smjbg-fmid .smjbg-zoombar #zoomPct{font-weight:600!important;font-size:12px!important;color:var(--ui-ink)!important;font-variant-numeric:tabular-nums;padding:0 4px}
.smjbg-app.smjbg-edge .smjbg-fmid .smjbg-sbdims{line-height:30px!important;padding:0 10px!important;border:1px solid #e6e8ee;border-radius:10px;background:var(--rsk-canvas);color:var(--rsk-sub)!important}
}
@media (min-width:1536px){
.smjbg-app.smjbg-edge .smjbg-ehead .smjbg-appnav button[data-nav="share"]{padding:0 16px!important}
}
@media (min-width:1024px) and (max-width:1279px){
.smjbg-app.smjbg-edge .smjbg-mainrow .smjbg-mo{font-size:10px!important;padding:6px 1px!important}
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce){
.smjbg-app.smjbg-edge :is(.smjbg-iacat,.smjbg-mainrow .smjbg-mo,.smjbg-mainrow .smjbg-mo::before){transition:none!important;transform:none!important}
}
/* ===== end 3.26 ===== */
/* ===== 3.27 — right panel sections: compact, consistent (Claude Design) ===== */
@media (min-width:1024px){
/* rhythm: 12px panel padding, 16px between groups, 8px under a heading */
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-sub.on{padding-left:12px!important;padding-right:12px!important;scrollbar-width:thin;scrollbar-color:#d5d9e0 transparent}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-sub.on::-webkit-scrollbar{width:8px}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-sub.on::-webkit-scrollbar-thumb{background:#d5d9e0;border-radius:8px;border:2px solid #fff}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-tg{margin:0 0 16px!important}
.smjbg-app.smjbg-edge .smjbg-subrow :is(.smjbg-tg>b,.smjbg-lbl,.smjbg-imghd,.smjbg-szgrp>b,.smjbg-typocap,.smjbg-sechd,.smjbg-card>h3){
display:block;margin:0 0 8px!important;font-size:10.5px!important;font-weight:700!important;letter-spacing:.08em!important;
line-height:1.3!important;text-transform:uppercase;color:var(--ui-muted,#676d75)!important}
.smjbg-app.smjbg-edge .smjbg-subrow :is(.smjbg-hint,.smjbg-selval,.smjbg-mdesc,.smjbg-rbhint){font-size:11px!important;line-height:1.45!important;color:var(--ui-muted,#676d75)!important}
.smjbg-app.smjbg-edge .smjbg-subrow :is(.smjbg-libcount,.smjbg-iacount){margin:0 0 8px!important;font-size:11px!important;font-weight:600!important;color:var(--ui-muted,#676d75)!important}
/* one compact field size: 32px, 12.5px text */
.smjbg-app.smjbg-edge .smjbg-subrow :is(input[type=text],input[type=number],input:not([type]),select):not(.smjbg-insedit):not(.smjbg-cpnat):not(.smjbg-libq):not(.smjbg-inssearch input):not(.smjbg-iasearch input){
min-height:32px!important;height:32px!important;font-size:12.5px!important;border-radius:8px!important;box-shadow:none!important}
.smjbg-app.smjbg-edge .smjbg-subrow select:not(.smjbg-insedit){background-position:right 8px center!important;background-size:13px 13px!important;padding-right:26px!important}
/* ---- option tiles (Background pattern, Border, Ribbon …) ---- */
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-tg:not(.smjbg-libg) .smjbg-tiles{gap:6px!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-tg:not(.smjbg-libg) .smjbg-tile{padding:5px 5px 6px!important;gap:5px!important;border-radius:10px!important;
border:1px solid var(--ui-line-soft,#eaedf0)!important;background:#fff!important;box-shadow:none!important;min-height:0!important;height:auto!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-tile:hover:not(.sel){border-color:#c9d3e3!important;background:#f7f9fc!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-tile.sel{border-color:var(--ui-accent)!important;background:var(--ui-accent-soft,#f1f8ff)!important;box-shadow:inset 0 0 0 1px var(--ui-accent)!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-tile:focus-visible{outline:2px solid var(--ui-accent)!important;outline-offset:2px!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-tg:not(.smjbg-libg) .smjbg-tile .smjbg-tl{font-size:11px!important;font-weight:600!important;line-height:1.2!important;
color:var(--rsk-ink2,#3d434a)!important;text-wrap:balance;overflow-wrap:anywhere}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-tile.sel .smjbg-tl{color:var(--ui-accent-hi)!important}
.smjbg-app.smjbg-edge .smjbg-subrow :is(.smjbg-sub[data-opt="bgimg"],.smjbg-sub[data-opt="border"],.smjbg-sub[data-opt="ribbon"]) .smjbg-tg:not(.smjbg-libg) .smjbg-tile>*:not(.smjbg-tl):not(.smjbg-fav){
width:100%!important;height:44px!important;border-radius:6px!important;box-sizing:border-box}
/* ---- Layout · Size / Format cards ---- */
.smjbg-app.smjbg-edge .smjbg-subrow #sizeBlock{gap:16px!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-szgrid{gap:6px!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-szc{padding:8px 10px!important;gap:2px!important;border-radius:10px!important;border-color:var(--ui-line-soft,#eaedf0)!important;background:#fff!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-szc:hover:not(.sel){border-color:#c9d3e3!important;background:#f7f9fc!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-szc.sel{border-color:var(--ui-accent)!important;background:var(--ui-accent-soft,#f1f8ff)!important;box-shadow:inset 0 0 0 1px var(--ui-accent)!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-szsh{height:24px!important;margin-bottom:4px!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-szsh i{border-color:#9aa1a9!important;background:#fff!important;border-radius:2px!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-szc>b{font-size:12px!important;font-weight:600!important;line-height:1.25!important;color:var(--ui-ink)!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-szpx{font-size:10.5px!important;color:var(--ui-muted,#676d75)!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-szar{display:inline-block;margin-top:4px;padding:1px 6px;border-radius:999px;background:#f2f3f7;font-size:10px!important;color:#4b5159!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-szc.sel .smjbg-szar{background:#dbe6ff;color:var(--ui-accent-hi)!important}
/* ---- Background: upload box on top, sharpness under it, full width ---- */
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-sub[data-opt="bgimg"] .smjbg-bgrow{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-sub[data-opt="bgimg"] .smjbg-bgthumb{width:100%!important;height:84px!important;aspect-ratio:auto!important;min-height:0!important;
border:0!important;border-radius:12px!important;background:transparent!important;cursor:pointer}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-sub[data-opt="bgimg"] .smjbg-bgthumb.has{border:1px solid var(--ui-line-soft,#eaedf0)!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-sub[data-opt="bgimg"] .smjbg-bgempty{width:100%;height:100%;box-sizing:border-box;padding:10px 12px!important;gap:2px!important;border-radius:12px!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-sub[data-opt="bgimg"] .smjbg-bgempty:has(svg){display:grid!important;grid-template-columns:auto auto;justify-content:center;align-content:center;column-gap:10px;text-align:left}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-sub[data-opt="bgimg"] .smjbg-bgempty:has(svg) svg{grid-row:1/3;width:22px;height:22px;color:var(--ui-accent)}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-sub[data-opt="bgimg"] .smjbg-bgempty b{font-size:13px!important;font-weight:700!important;color:var(--ui-ink)!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-sub[data-opt="bgimg"] .smjbg-bgempty :is(em,span){font-size:11px!important;color:var(--ui-muted,#676d75)!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-sub[data-opt="bgimg"] .smjbg-bgctl{width:100%!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-sub[data-opt="bgimg"] .smjbg-sharp{max-width:none!important;margin-top:0!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-sub[data-opt="bgimg"] .smjbg-sharp-hd{font-size:12.5px!important;font-weight:600!important;color:var(--ui-ink)!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-colr label .smjbg-csw,.smjbg-app.smjbg-edge .smjbg-subrow label:has(>input[type=color]) .smjbg-csw{width:28px!important;height:28px!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-colr label>span,.smjbg-app.smjbg-edge .smjbg-subrow label:has(>input[type=color])>span{font-size:12.5px!important;font-weight:600!important}
/* ---- Templates / Insert library header, filters and cards ---- */
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-iahd{gap:8px!important;padding:8px 0!important;margin-bottom:8px!important;box-shadow:0 1px 0 var(--ui-line-soft,#eaedf0)!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-iahd button{height:28px!important;padding:0 10px 0 6px!important;border-radius:8px!important;font-size:12px!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-iahd button:hover{background:#f2f3f7!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-iahd b{font-size:14px!important;font-weight:700!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-iahd em{padding:2px 8px;border-radius:999px;background:#f2f3f7;font-size:11px!important;font-weight:600;color:#4b5159!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-iasel{gap:6px!important;margin:0 0 8px!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-iasel select{height:32px!important;min-height:32px!important;font-size:12.5px!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-iatpl{gap:8px!important}
.smjbg-app.smjbg-edge .smjbg-subrow :is(.smjbg-iatcard,.smjbg-iatile){border-radius:10px!important;border-color:var(--ui-line-soft,#eaedf0)!important;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease!important}
.smjbg-app.smjbg-edge .smjbg-subrow :is(.smjbg-iatcard,.smjbg-iatile):hover{transform:translateY(-1px);border-color:#cfdaf6!important;box-shadow:var(--ui-sh-2)!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-iatcard>span{background:#f2f3f7!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-iatcard b{padding:7px 8px 0!important;font-size:12px!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-iatcard i{padding:1px 8px 8px!important;font-size:11px!important;color:var(--ui-muted,#676d75)!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-iatile i{font-size:11px!important;color:#4b5159!important}
/* ---- Colour Theme / Font Theme libraries ---- */
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-lib{gap:8px!important;margin:0 0 8px!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-tg.smjbg-libg input.smjbg-libq{height:36px!important;min-height:36px!important;border-radius:999px!important;padding-left:36px!important;
background-color:#f2f3f7!important;border:1px solid transparent!important;font-size:13px!important;box-shadow:none!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-tg.smjbg-libg input.smjbg-libq:hover{background-color:#eceef3!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-tg.smjbg-libg input.smjbg-libq:focus{background-color:#fff!important;border-color:var(--ui-accent)!important;box-shadow:var(--ui-ring)!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-tg.smjbg-libg .smjbg-libsearch svg{left:13px!important;opacity:1!important;color:#626870}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-libcats{gap:6px!important;padding:1px 1px 4px!important;scrollbar-width:none}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-libcats::-webkit-scrollbar{display:none}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-tg.smjbg-libg .smjbg-libcat{height:28px!important;padding:0 10px!important;border-color:var(--ui-line,#d9dde1)!important;font-size:12px!important;font-weight:600!important;color:var(--rsk-ink2,#3d434a)!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-tg.smjbg-libg .smjbg-libcat:hover:not(.on){background:#f2f3f7!important;border-color:#c9d3e3!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-tg.smjbg-libg .smjbg-libcat.on{background:var(--ui-accent)!important;border-color:var(--ui-accent)!important;color:#fff!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-libg .smjbg-tiles{gap:8px!important;padding:2px 2px 8px!important;scrollbar-width:thin;scrollbar-color:#d5d9e0 transparent}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-tg.smjbg-libg .smjbg-tile{padding:6px!important;gap:6px!important;border-radius:12px!important;border:1px solid var(--ui-line-soft,#eaedf0)!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-libg :is(.smjbg-ftpv,.smjbg-rcmini){border-radius:8px!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-tg.smjbg-libg .smjbg-tile .smjbg-tl{padding:0 4px 2px;font-size:11.5px!important;font-weight:600!important;color:var(--ui-ink)!important}
/* ---- Ribbon text ---- */
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-rbtext{margin:0 0 16px!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-rbtext>span{font-size:12.5px!important;margin:0 0 6px!important}
.smjbg-app.smjbg-edge .smjbg-subrow .smjbg-rbtext input{height:32px!important;min-height:32px!important;font-size:12.5px!important}
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce){
.smjbg-app.smjbg-edge .smjbg-subrow :is(.smjbg-iatcard,.smjbg-iatile){transition:none!important;transform:none!important}
}
/* ===== end 3.27 ===== */
/* ===== 3.28 — Custom Size: icon + label, like Preview (Claude Design) ===== */
@media (min-width:1280px){
.smjbg-app.smjbg-edge .smjbg-ehead .smjbg-cszbtn{width:auto!important;padding:0 11px!important;gap:6px!important}
.smjbg-app.smjbg-edge .smjbg-ehead .smjbg-cszbtn span{display:inline!important;font-size:inherit!important;font-weight:inherit!important;white-space:nowrap}
}
/* ===== end 3.28 ===== */
/* ===== 3.29 — Left rail: one item per row (Claude Design) ===== */
@media (min-width:1024px){
.smjbg-app.smjbg-edge .smjbg-mainrow{grid-template-columns:minmax(0,1fr)!important;gap:2px!important}
.smjbg-app.smjbg-edge .smjbg-mainrow .smjbg-mo{flex-direction:row!important;justify-content:flex-start!important;aspect-ratio:auto!important;
min-height:40px!important;height:auto!important;gap:12px!important;padding:8px 12px!important;text-align:left!important;font-size:13px!important;line-height:1.2!important}
.smjbg-app.smjbg-edge .smjbg-mainrow .smjbg-mo::before{width:20px!important;height:20px!important}
}
@media (min-width:1024px) and (max-width:1279px){
.smjbg-app.smjbg-edge .smjbg-mainrow .smjbg-mo{font-size:12.5px!important;gap:10px!important;padding:8px 10px!important}
}
/* ===== end 3.29 ===== */
/* ===== 3.30 — Rail tiles restored (one per row) · logo moved to header (Claude Design) ===== */
@media (min-width:1024px){
/* one item per row, keeping the box tile: icon above label */
.smjbg-app.smjbg-edge .smjbg-mainrow{grid-template-columns:minmax(0,1fr)!important;gap:4px!important;padding-bottom:12px!important}
.smjbg-app.smjbg-edge .smjbg-mainrow .smjbg-mo{flex-direction:column!important;justify-content:center!important;align-items:center!important;aspect-ratio:auto!important;
min-height:64px!important;height:auto!important;gap:6px!important;padding:8px 6px!important;text-align:center!important;
font-size:11px!important;line-height:1.15!important;border-radius:10px!important}
.smjbg-app.smjbg-edge .smjbg-mainrow .smjbg-mo::before{width:22px!important;height:22px!important}
/* brand removed from the rail foot */
.smjbg-app.smjbg-edge .smjbg-railbrand{display:none!important}
/* logo only, at the start of the header, on a white chip for contrast */
.smjbg-app.smjbg-edge .smjbg-ehead .eh-l{display:flex!important;align-items:center!important}
.smjbg-app.smjbg-edge .smjbg-ehead .eh-l::before{content:"";flex:0 0 auto;width:68px;height:34px;margin-right:8px;border-radius:10px;box-sizing:border-box;
background:#fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOgAAABiCAYAAABagp/GAAAWfmNhQlgAABZ+anVtYgAAAB5qdW1kYzJwYQARABCAAACqADibcQNjMnBhAAAAFlhqdW1iAAAAR2p1bWRjMm1hABEAEIAAAKoAOJtxA3VybjpjMnBhOmYyM2M1YWE0LWRjNDEtNDA0My05ZGFiLTM4NDA4MTE2OTVmMwAAAAOTanVtYgAAAClqdW1kYzJhcwARABCAAACqADibcQNjMnBhLmFzc2VydGlvbnMAAAAAuGp1bWIAAABEanVtZGNib3IAEQAQgAAAqgA4m3ETYzJwYS5pbmdyZWRpZW50LnYzAAAAABhjMnNo3kLm86dtii2ZRfpZ/tIYAwAAAGxjYm9yo2lkYzpmb3JtYXRpaW1hZ2UvcG5namluc3RhbmNlSUR4LHhtcDppaWQ6Zjg0NzU5OTAtMWUwNy00MGYwLThlMDEtNjVhMzZiMTBhNWEybHJlbGF0aW9uc2hpcGhwYXJlbnRPZgAAAeJqdW1iAAAAQWp1bWRjYm9yABEAEIAAAKoAOJtxE2MycGEuYWN0aW9ucy52MgAAAAAYYzJzaB5BQNxLQh3E76fK3JaxRKIAAAGZY2JvcqJnYWN0aW9uc4KiZmFjdGlvbmtjMnBhLm9wZW5lZGpwYXJhbWV0ZXJzoWtpbmdyZWRpZW50c4GiY3VybHgtc2VsZiNqdW1iZj1jMnBhLmFzc2VydGlvbnMvYzJwYS5pbmdyZWRpZW50LnYzZGhhc2hYIAyUlljDpuGBvfK6M9uj86qzE3lmblTf727EdPYHmMG4pGZhY3Rpb254HWNvbS5hbnRocm9waWMuY2xhdWRlLnByb3ZpZGVkanBhcmFtZXRlcnOheB9jb20uYW50aHJvcGljLm9yaWdpbi1jb25maWRlbmNlZ3Vua25vd25rZGVzY3JpcHRpb254ZkNsYXVkZSBwcm92aWRlZCB0aGlzIGZpbGUgYXQgdGhlIHJlcXVlc3Qgb2YgYSB1c2VyIGFuZCBtYXkgaGF2ZSBjcmVhdGVkIG9yIG1vZGlmaWVkIHRoZSBmaWxlIGNvbnRlbnRzLm1zb2Z0d2FyZUFnZW50oWRuYW1lZkNsYXVkZXJhbGxBY3Rpb25zSW5jbHVkZWT1AAAAyGp1bWIAAABAanVtZGNib3IAEQAQgAAAqgA4m3ETYzJwYS5oYXNoLmRhdGEAAAAAGGMyc2jJ26fyyhUdpBeEKIqJ44YuAAAAgGNib3KlY2FsZ2ZzaGEyNTZjcGFkTQAAAAAAAAAAAAAAAABkaGFzaFggfaHbnYYu7jVbmYpaqCroD2B1Zu4+J59ntKPj4ya1y9FkbmFtZW5qdW1iZiBtYW5pZmVzdGpleGNsdXNpb25zgaJlc3RhcnQYIWZsZW5ndGgZFooAAAI+anVtYgAAACdqdW1kYzJjbAARABCAAACqADibcQNjMnBhLmNsYWltLnYyAAAAAg9jYm9ypWNhbGdmc2hhMjU2aXNpZ25hdHVyZXhNc2VsZiNqdW1iZj0vYzJwYS91cm46YzJwYTpmMjNjNWFhNC1kYzQxLTQwNDMtOWRhYi0zODQwODExNjk1ZjMvYzJwYS5zaWduYXR1cmVqaW5zdGFuY2VJRHgseG1wOmlpZDplMTM1YjkxMC01ZDQ5LTQ5YzMtODdkMi00NDBkMWNmOGY5NWVyY3JlYXRlZF9hc3NlcnRpb25zg6JjdXJseC1zZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmluZ3JlZGllbnQudjNkaGFzaFggDJSWWMOm4YG98roz26PzqrMTeWZuVN/vbsR09geYwbiiY3VybHgqc2VsZiNqdW1iZj1jMnBhLmFzc2VydGlvbnMvYzJwYS5hY3Rpb25zLnYyZGhhc2hYII8f+caMLgzwIg9wwPflkthWm/GbN6WlTJGZ20dEzBOBomN1cmx4KXNlbGYjanVtYmY9YzJwYS5hc3NlcnRpb25zL2MycGEuaGFzaC5kYXRhZGhhc2hYIIfjZE1yok9eNuK4tGgF0NcexrqzIlY3uWDocN1g5z3ydGNsYWltX2dlbmVyYXRvcl9pbmZvo2RuYW1lb0FudGhyb3BpYyBGaWxlc2d2ZXJzaW9uZTEuMC4wa3NwZWNWZXJzaW9uZTIuNC4wAAAQOGp1bWIAAAAoanVtZGMyY3MAEQAQgAAAqgA4m3EDYzJwYS5zaWduYXR1cmUAAAAQCGNib3LShFkCEqIBJhghWQIKMIICBjCCAY2gAwIBAgIUQOWgCu7COdC+uIP6BkIFPWdVEwAwCgYIKoZIzj0EAwMwSTEXMBUGA1UEChMOQW50aHJvcGljLCBQQkMxLjAsBgNVBAMTJUFudGhyb3BpYyBDb250ZW50IENyZWRlbnRpYWxzIFJvb3QgQ0EwHhcNMjYwODA3MTg0MzU2WhcNMjgwODA2MTk0MzU2WjBEMRcwFQYDVQQKEw5BbnRocm9waWMsIFBCQzEpMCcGA1UEAxMgQW50aHJvcGljIENsYXVkZSBDb250ZW50IFNpZ25pbmcwWTATBgcqhkjOPQIBBggqhkjOPQMBBwNCAASYegpry1AYBRTVNL1CpTlbROnY3dey+UrsF9C3phYrATN3ZHf93Mo8RQN0KOUuOn19P4oWNFWe5n2/She9N7eTo1gwVjAOBgNVHQ8BAf8EBAMCB4AwFQYDVR0lBA4wDAYKKwYBBAGD6F4CATAMBgNVHRMBAf8EAjAAMB8GA1UdIwQYMBaAFM5R4gSBTmRbI/jjxM+aPpzB11zCMAoGCCqGSM49BAMDA2cAMGQCMDFzHRSeAXrSy1WOzkbhPZ6Km2wGTmZ/2gK18k8BQGXyqz88Rdrz6CTX9flAnYNVxgIwcF9c3fVhqmJKpi+UhasNUMko69cyX6STPfta3Q8EjyzDjzoyrol46FP6VFHhvUcJoWNwYWRZDZ4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA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") center/auto 20px no-repeat;box-shadow:0 1px 2px rgba(10,18,72,.2)}
}
/* ===== end 3.30 ===== */
/* ===== 3.31 — Preview & Save icon-only at all desktop widths (Claude Design) ===== */
@media (min-width:1024px){
.smjbg-app.smjbg-edge .smjbg-ehead .smjbg-acts .smjbg-act{position:relative!important;font-size:0!important;width:34px!important;min-width:34px!important;
padding:0!important;gap:0!important;justify-content:center!important}
.smjbg-app.smjbg-edge .smjbg-ehead .smjbg-acts .smjbg-act svg{width:16px!important;height:16px!important;margin:0!important}
.smjbg-app.smjbg-edge .smjbg-ehead .smjbg-acts .smjbg-act-save.saved::after{position:absolute!important;top:5px!important;right:5px!important;margin:0!important;
box-shadow:0 0 0 1.5px #3150d8}
}
/* ===== end 3.31 ===== */
/* ===== 3.32 — Larger footer centre controls (Claude Design) ===== */
@media (min-width:1024px){
.smjbg-app.smjbg-edge .smjbg-fmid{gap:12px!important}
.smjbg-app.smjbg-edge .smjbg-fmid :is(.smjbg-pgbar,.smjbg-zoombar){height:42px!important;box-sizing:border-box!important;padding:3px!important;gap:4px!important;border-radius:12px!important;align-items:center!important}
.smjbg-app.smjbg-edge .smjbg-fmid :is(.smjbg-pgbar,.smjbg-zoombar) button{height:34px!important;min-height:34px!important;min-width:36px!important;padding:0 8px!important;border-radius:9px!important;font-size:16px!important}
.smjbg-app.smjbg-edge .smjbg-fmid :is(.smjbg-pgbar,.smjbg-zoombar) button svg{width:18px!important;height:18px!important}
.smjbg-app.smjbg-edge .smjbg-fmid .smjbg-zoombar #zoomPct{font-size:14px!important;min-width:52px;text-align:center;padding:0 6px!important}
.smjbg-app.smjbg-edge .smjbg-fmid .smjbg-sbdims{height:42px!important;line-height:40px!important;box-sizing:border-box!important;padding:0 14px!important;border-radius:12px!important;font-size:13px!important}
}
/* ===== end 3.32 ===== */
/* ===== 3.33 — Page thumbnails: compact vertical column + page management (needs smjbg-pages.js 3.35) (Claude Design) ===== */
.smjbg-pgthumbs{display:none}
@media (min-width:1024px){
.smjbg-app.smjbg-edge .smjbg-prevcol{position:relative}
/* Add / Remove Page move to the thumbnails column (desktop only; phones keep them in the footer) */
html body .smjbg-app.smjbg-edge .smjbg-fmid .smjbg-pgbar button:is([data-pg="add"],[data-pg="remove"]),html body .smjbg-app.smjbg-edge .smjbg-pgbar button:is([data-pg="add"],[data-pg="remove"]){display:none!important}
.smjbg-app.smjbg-edge .smjbg-prevcol > .smjbg-pgthumbs{display:flex;flex-direction:column;align-items:center;gap:6px;position:absolute;left:10px;top:10px;z-index:5;
width:52px;max-height:calc(100% - 20px);pointer-events:none}
.smjbg-app.smjbg-edge .smjbg-pgthumbs > *{pointer-events:auto}
.smjbg-app.smjbg-edge .smjbg-pgthumbs-tog{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:3px;width:52px;height:26px;padding:0 4px;box-sizing:border-box;
border:1px solid #e6e8ee;border-radius:999px;background:#fff;color:#3d434a;cursor:pointer;font:600 10.5px/1 var(--ui-font,Inter,system-ui,sans-serif);
box-shadow:0 1px 2px rgba(16,24,40,.06),0 4px 12px rgba(16,24,40,.08);transition:background-color .14s,color .14s,border-color .14s}
.smjbg-app.smjbg-edge .smjbg-pgthumbs-tog em{font-style:normal;font-variant-numeric:tabular-nums}
.smjbg-app.smjbg-edge .smjbg-pgthumbs-tog svg{width:13px;height:13px;flex:0 0 auto}
.smjbg-app.smjbg-edge .smjbg-pgthumb .rm svg{width:10px;height:10px}
.smjbg-app.smjbg-edge .smjbg-pgthumbs-add svg{width:14px;height:14px}
.smjbg-app.smjbg-edge .smjbg-pgthumbs-tog:hover{color:#1c2024;border-color:#cfd5de}
.smjbg-app.smjbg-edge .smjbg-pgthumbs.open .smjbg-pgthumbs-tog{color:var(--ui-accent-hi,#1d52bb);border-color:var(--ui-accent,#2667e7);background:#f4f7ff}
.smjbg-app.smjbg-edge .smjbg-pgthumbs-panel{display:none;flex-direction:column;align-items:center;gap:4px;width:52px;min-height:0;padding:0;box-sizing:border-box;
border:0;border-radius:0;background:transparent;box-shadow:none}
.smjbg-app.smjbg-edge .smjbg-pgthumbs.open .smjbg-pgthumbs-panel{display:flex}
.smjbg-app.smjbg-edge .smjbg-pgthumbs-list{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;padding:2px 0}
.smjbg-app.smjbg-edge .smjbg-pgthumb{position:relative;flex:0 0 auto}
.smjbg-app.smjbg-edge .smjbg-pgthumb .go{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0;padding:4px 5px 2px;border:0;border-radius:8px;background:transparent;cursor:pointer;
color:#4b5159;font:600 9.5px/1 var(--ui-font,Inter,system-ui,sans-serif);transition:background-color .14s,color .14s}
.smjbg-app.smjbg-edge .smjbg-pgthumb .pv{display:block;overflow:hidden;border-radius:2px;background:#fff;box-shadow:0 0 0 1px #d9dde1,0 1px 2px rgba(16,24,40,.08);transition:box-shadow .14s}
.smjbg-app.smjbg-edge .smjbg-pgthumb .pv canvas{display:block}
.smjbg-app.smjbg-edge .smjbg-pgthumb .pv.empty{background:repeating-linear-gradient(135deg,#f6f7f9 0 3px,#eef0f3 3px 6px)}
.smjbg-app.smjbg-edge .smjbg-pgthumb b{font:inherit;font-variant-numeric:tabular-nums}
.smjbg-app.smjbg-edge .smjbg-pgthumb .go:hover{background:rgba(16,24,40,.05);color:#1c2024}
.smjbg-app.smjbg-edge .smjbg-pgthumb .go:hover .pv{box-shadow:0 0 0 1px #aab4c3,0 2px 6px rgba(16,24,40,.12)}
.smjbg-app.smjbg-edge .smjbg-pgthumb.on .go{color:var(--ui-accent-hi,#1d52bb)}
.smjbg-app.smjbg-edge .smjbg-pgthumb.on .pv{box-shadow:0 0 0 2px var(--ui-accent,#2667e7),0 1px 4px rgba(38,103,231,.25)}
.smjbg-app.smjbg-edge .smjbg-pgthumb .rm{position:absolute;top:-2px;right:0;display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;
border:1px solid #e6e8ee;border-radius:50%;background:#fff;color:#b42318;cursor:pointer;opacity:0;box-shadow:0 1px 2px rgba(16,24,40,.12);transition:opacity .14s,background-color .14s}
.smjbg-app.smjbg-edge .smjbg-pgthumb .rm[hidden]{display:none}
.smjbg-app.smjbg-edge .smjbg-pgthumb:hover .rm,.smjbg-app.smjbg-edge .smjbg-pgthumb:focus-within .rm{opacity:1}
.smjbg-app.smjbg-edge .smjbg-pgthumb .rm:hover{background:#fef0ef;border-color:#f5c2bd}
.smjbg-app.smjbg-edge .smjbg-pgthumbs-add{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:34px;height:22px;margin-top:2px;padding:0;
border:1px dashed #b9c2cf;border-radius:8px;background:transparent;color:#3d434a;cursor:pointer;transition:background-color .14s,color .14s,border-color .14s}
.smjbg-app.smjbg-edge .smjbg-pgthumbs-add:hover:not(:disabled){border-color:var(--ui-accent,#2667e7);color:var(--ui-accent-hi,#1d52bb);background:#f4f7ff}
.smjbg-app.smjbg-edge .smjbg-pgthumbs-add:disabled{opacity:.45;cursor:default}
.smjbg-app.smjbg-edge .smjbg-pgthumbs :is(button):focus-visible{outline:2px solid var(--ui-accent,#2667e7);outline-offset:2px}
.smjbg-app.smjbg-edge .smjbg-pgthumb .rm:focus-visible{opacity:1}
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce){
.smjbg-app.smjbg-edge .smjbg-pgthumbs *{transition:none!important}
}
/* ===== end 3.33 ===== */
/* ===== 3.36 — Footer (desktop): page buttons out, one-line copyright, modern look ===== */
/* Footer only. Its box is unchanged: full width, the header's height (--ebar), the same
top line, the same place. Only what sits inside it changes. Phones are not touched. */
@media (min-width:1024px){
/* the bar */
.smjbg-app.smjbg-edge .smjbg-foot{background:#fff!important}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-in{display:grid!important;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr)!important;
align-items:center!important;column-gap:20px!important;row-gap:0!important;flex-wrap:nowrap!important;
width:100%!important;max-width:none!important;height:100%!important;margin:0!important;padding:0 20px!important;box-sizing:border-box!important;background:transparent!important}
/* 1. page buttons: the Pages column beside the canvas does this now. They stay in the
page, hidden, because the Pages column works through them. */
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-fmid .smjbg-pgbar{display:none!important}
/* left: the four links, one row */
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-links{grid-column:1;justify-self:start;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;
gap:2px!important;max-width:none!important;min-width:0;margin:0!important;padding:0!important}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-links button{display:inline-flex!important;align-items:center!important;gap:7px!important;height:32px!important;min-height:0!important;
margin:0!important;padding:0 10px!important;border:0!important;border-radius:8px!important;background:transparent!important;box-shadow:none!important;
color:var(--rsk-sub,#4b5159)!important;font-size:13px!important;font-weight:500!important;line-height:1!important;letter-spacing:0!important;white-space:nowrap!important;
cursor:pointer;transition:background-color .15s ease,color .15s ease}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-links button::before{content:"";flex:0 0 auto;width:15px;height:15px;background:currentColor;opacity:.72;
-webkit-mask:var(--smjbg-fic) center/contain no-repeat;mask:var(--smjbg-fic) center/contain no-repeat;transition:opacity .15s ease}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-links button:hover{background:var(--rsk-canvas,#f2f3f7)!important;color:var(--ui-ink,#1c2024)!important}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-links button:hover::before{opacity:1}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-links button:active{background:#e9ecf1!important}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-links button:focus-visible{outline:2px solid var(--ui-accent,#2667e7)!important;outline-offset:1px!important;box-shadow:none!important}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-links [data-doc="guide"]{--smjbg-fic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7c-1.6-1.3-3.8-2-6.5-2H4v13h1.5c2.7 0 4.9.7 6.5 2 1.6-1.3 3.8-2 6.5-2H20V5h-1.5C15.8 5 13.6 5.7 12 7z'/%3E%3Cpath d='M12 7v13'/%3E%3C/svg%3E")}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-links [data-doc="terms"]{--smjbg-fic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E")}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-links [data-doc="privacy"]{--smjbg-fic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8.3-7 10-4-1.7-7-5.5-7-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-links [data-doc="contact"]{--smjbg-fic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15v-3a8 8 0 0 1 16 0v3'/%3E%3Cpath d='M4 15h3v5H5.5A1.5 1.5 0 0 1 4 18.5zM20 15h-3v5h1.5a1.5 1.5 0 0 0 1.5-1.5z'/%3E%3C/svg%3E")}
/* centre: the page size (when there is room for it) and zoom, as one quiet group */
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-fmid{grid-column:2;justify-self:center;display:flex!important;align-items:center!important;gap:10px!important;
min-width:0;margin:0!important;padding:0!important;border:0!important;background:none!important}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-fmid .smjbg-sbdims{display:inline-flex;align-items:center;gap:6px;height:28px!important;line-height:1!important;margin:0!important;padding:0 2px!important;
border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:var(--ui-muted,#676d75)!important;
font-size:12px!important;font-weight:500!important;font-variant-numeric:tabular-nums;white-space:nowrap}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-fmid .smjbg-sbdims::before{content:"";flex:0 0 auto;width:14px;height:14px;background:currentColor;opacity:.8;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E") center/contain no-repeat}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-fmid .smjbg-zoombar{display:inline-flex!important;align-items:center!important;gap:2px!important;height:36px!important;min-height:0!important;
margin:0!important;padding:3px!important;box-sizing:border-box!important;position:static!important;
border:1px solid #e4e7ec!important;border-radius:10px!important;background:#f6f7f9!important;box-shadow:none!important}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-fmid .smjbg-zoombar button{display:inline-flex!important;align-items:center!important;justify-content:center!important;
width:30px!important;min-width:30px!important;height:28px!important;min-height:28px!important;margin:0!important;padding:0!important;
border:0!important;border-radius:7px!important;background:transparent!important;box-shadow:none!important;
color:var(--rsk-ink2,#3d434a)!important;font-size:15px!important;font-weight:500!important;line-height:1!important;
transition:background-color .15s ease,color .15s ease,box-shadow .15s ease}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-fmid .smjbg-zoombar button:hover:not(:disabled){background:#fff!important;color:var(--ui-ink,#1c2024)!important;
box-shadow:0 1px 2px rgba(16,24,40,.10),0 0 0 1px rgba(16,24,40,.04)!important}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-fmid .smjbg-zoombar button:disabled{color:#b3b9c1!important;background:transparent!important;box-shadow:none!important;opacity:1!important}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-fmid .smjbg-zoombar button:focus-visible{outline:2px solid var(--ui-accent,#2667e7)!important;outline-offset:1px!important;box-shadow:none!important}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-fmid .smjbg-zoombar #zoomPct{min-width:48px!important;padding:0 2px!important;text-align:center;
font-size:12.5px!important;font-weight:600!important;color:var(--ui-ink,#1c2024)!important;font-variant-numeric:tabular-nums;letter-spacing:0}
/* fit sits after a hairline, as its own action */
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-fmid .smjbg-zoombar button[data-zoom="fit"]{position:relative!important;margin-left:5px!important}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-fmid .smjbg-zoombar button[data-zoom="fit"]::before{content:"";position:absolute;left:-4px;top:6px;bottom:6px;width:1px;background:#dfe3e8}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-fmid .smjbg-zoombar button svg{width:15px!important;height:15px!important;margin:0!important}
/* 2. right: the copyright on one line at every desktop width */
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-copy{grid-column:3;justify-self:end;margin:0!important;padding:0!important;max-width:none!important;
white-space:nowrap!important;overflow:visible;text-align:right!important;
color:var(--ui-muted,#676d75)!important;font-size:12.5px!important;font-weight:450!important;line-height:1.2!important;letter-spacing:0!important}
}
/* narrower windows: the same bar, tightened, so everything stays on one line and the
zoom stays centred — the link icons and the page size show only where there is room */
@media (min-width:1024px) and (max-width:1599px){
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-in{column-gap:16px!important;padding:0 16px!important}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-links button{padding:0 8px!important;gap:6px!important}
}
@media (min-width:1024px) and (max-width:1439px){
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-links button::before{display:none}
}
@media (min-width:1024px) and (max-width:1359px){
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-fmid .smjbg-sbdims{display:none!important}
}
@media (min-width:1024px) and (max-width:1279px){
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-in{column-gap:18px!important;padding:0 12px!important}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-links button{padding:0 6px!important;font-size:12px!important}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-copy{font-size:12px!important}
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce){
.smjbg-app.smjbg-edge .smjbg-foot :is(.smjbg-foot-links button,.smjbg-foot-links button::before,.smjbg-zoombar button){transition:none!important}
}
/* ===== end 3.36 ===== */
/* ==========================================================================
3.37 — Edit image. The picture editor (Adjust, Filters, Effects, Crop) shown
in the Images panel, the crop mode on the canvas, and the toolbar's crop bar.
Every rule is scoped to classes that exist only for these, so nothing else in
the editor is restyled.
========================================================================== */
/* Edit image: the panel's own primary button, laid out for its icon */
.smjbg-app .smjbg-ieopen{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 8px}
.smjbg-ieopen svg,.smjbg-ie svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round}
.smjbg-ie svg .f{fill:currentColor;stroke:none}
.smjbg-ie{display:block;color:var(--ui-ink,#1c2024);font-size:12.5px}
.smjbg-ie button{font:inherit}
.smjbg-ie button:focus-visible{outline:2px solid var(--ui-accent,#2667e7);outline-offset:1px}
.smjbg-iehead{display:flex;align-items:center;gap:8px;min-height:36px;margin:0 0 10px}
.smjbg-iehead b{flex:1 1 auto;min-width:0;font-size:14px;font-weight:700;text-align:center;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.smjbg-ieback{display:inline-flex;align-items:center;gap:2px;height:32px;padding:0 10px 0 5px;
border:1px solid var(--ui-line,#d9dde1);border-radius:8px;background:#fff;color:var(--ui-sub,#565b61);
font-size:12.5px;font-weight:600;cursor:pointer}
.smjbg-ieback:hover{background:var(--ui-subtle,#f6f7f9);color:var(--ui-ink,#1c2024)}
.smjbg-iecmp{display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--ui-line,#d9dde1);
border-radius:8px;background:#fff;color:var(--ui-sub,#565b61);cursor:pointer;touch-action:none;user-select:none;
-webkit-user-select:none;-webkit-touch-callout:none}
.smjbg-iecmp:not(:disabled):hover{background:var(--ui-subtle,#f6f7f9);color:var(--ui-ink,#1c2024)}
.smjbg-iecmp:not(:disabled):active{background:var(--ui-accent-soft,#f1f8ff);border-color:var(--ui-accent,#2667e7);color:var(--ui-accent,#2667e7)}
.smjbg-ietabs{display:grid;grid-auto-flow:column;grid-auto-columns:auto;gap:1px;padding:3px;margin:0 0 12px;
border-radius:10px;background:var(--ui-subtle,#f6f7f9)}
.smjbg-ietabs button{min-width:0;min-height:30px;padding:0 4px;border:0;border-radius:8px;background:transparent;
color:var(--ui-sub,#565b61);font-size:11.5px;font-weight:600;letter-spacing:-.01em;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smjbg-ietabs button:hover{color:var(--ui-ink,#1c2024)}
.smjbg-ietabs button.on{background:#fff;color:var(--ui-ink,#1c2024);box-shadow:0 1px 3px rgba(16,24,40,.12)}
.smjbg-iegrp{margin:0;padding:12px 0 2px;border-top:1px solid var(--color-border-subtle,#eef0f3)}
.smjbg-iegrp:first-child{border-top:0;padding-top:0}
.smjbg-iegrp h4{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ui-ink,#1c2024)}
.smjbg-ierow{margin:0 0 10px}
.smjbg-ielab{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 1px;
font-size:11.5px;font-weight:600;color:var(--ui-sub,#565b61)}
.smjbg-ielab span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default;user-select:none;-webkit-user-select:none}
.smjbg-ielab output{flex:0 0 auto;min-width:36px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ui-ink,#1c2024)}
.smjbg-ie input[type=range]{display:block;width:100%;height:22px;margin:0}
.smjbg-ie input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--ui-line,#d9dde1) var(--lo,0%),
var(--ui-accent,#2667e7) var(--lo,0%),var(--ui-accent,#2667e7) var(--hi,0%),var(--ui-line,#d9dde1) var(--hi,0%))}
.smjbg-ie input[type=range]::-moz-range-track{background:linear-gradient(to right,var(--ui-line,#d9dde1) var(--lo,0%),
var(--ui-accent,#2667e7) var(--lo,0%),var(--ui-accent,#2667e7) var(--hi,0%),var(--ui-line,#d9dde1) var(--hi,0%))}
.smjbg-ie input[type=range]::-moz-range-progress{background:transparent}
.smjbg-iebtn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:36px;margin:0 0 10px;
padding:0 10px;border:1px solid var(--ui-line,#d9dde1);border-radius:10px;background:#fff;color:var(--ui-ink,#1c2024);
font-size:12.5px;font-weight:600;cursor:pointer}
.smjbg-iebtn:hover{background:var(--ui-subtle,#f6f7f9)}
.smjbg-iebtn.on{border-color:var(--ui-accent,#2667e7);background:var(--ui-accent-soft,#f1f8ff);color:var(--ui-accent-hi,#1d52bb)}
.smjbg-ieseg{display:grid;grid-auto-flow:column;grid-auto-columns:auto;gap:1px;padding:3px;margin:0 0 10px;
border-radius:10px;background:var(--ui-subtle,#f6f7f9)}
.smjbg-ieseg button{min-width:0;min-height:28px;padding:0 5px;border:0;border-radius:8px;background:transparent;color:var(--ui-sub,#565b61);
font-size:11.5px;font-weight:600;letter-spacing:-.01em;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smjbg-ieseg button:hover{color:var(--ui-ink,#1c2024)}
.smjbg-ieseg button.on{background:#fff;color:var(--ui-ink,#1c2024);box-shadow:0 1px 3px rgba(16,24,40,.12)}
.smjbg-iehint{margin:0 0 10px;font-size:11.5px;line-height:1.45;color:var(--ui-muted,#81878d)}
.smjbg-iebands{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;margin:0 0 6px}
.smjbg-iebands button{position:relative;width:100%;min-height:18px;aspect-ratio:1/1;padding:0;border:2px solid #fff;border-radius:50%;
background:var(--c);box-shadow:0 0 0 1px var(--ui-line,#d9dde1);cursor:pointer}
.smjbg-iebands button.on{box-shadow:0 0 0 2px var(--ui-accent,#2667e7)}
.smjbg-iebands button.set::after{content:"";position:absolute;right:-3px;top:-3px;width:7px;height:7px;border-radius:50%;
background:var(--ui-accent,#2667e7);border:1.5px solid #fff}
.smjbg-iebands + .smjbg-iehint{margin:0 0 6px;font-weight:600;color:var(--ui-sub,#565b61)}
.smjbg-iefilters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px;align-items:start;margin:0 0 12px}
.smjbg-ieft{display:flex;flex-direction:column;align-items:stretch;gap:5px;min-width:0;padding:0;border:0;background:transparent;
color:var(--ui-sub,#565b61);font-size:11px;font-weight:600;text-align:center;cursor:pointer}
.smjbg-ieft canvas{display:block;width:100%;height:auto;aspect-ratio:1/1;border-radius:10px;background:var(--ui-subtle,#f6f7f9);
box-shadow:0 0 0 1px var(--ui-line-soft,#eaedf0);transition:box-shadow .14s ease,transform .14s ease}
.smjbg-ieft:hover canvas{box-shadow:0 0 0 1px var(--ui-line-strong,#c0c5ca)}
.smjbg-ieft.on{color:var(--ui-accent-hi,#1d52bb)}
.smjbg-ieft.on canvas{box-shadow:0 0 0 2px var(--ui-accent,#2667e7)}
.smjbg-ieft span{line-height:1.2;overflow-wrap:anywhere}
.smjbg-ieduo{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0 0 12px}
.smjbg-ieduo button{width:100%;min-height:26px;aspect-ratio:1/1;padding:0;border:0;border-radius:50%;cursor:pointer;
background:linear-gradient(135deg,var(--c0) 0 50%,var(--c1) 50% 100%);box-shadow:0 0 0 1px var(--ui-line,#d9dde1)}
.smjbg-ieduo button.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ui-accent,#2667e7)}
.smjbg-ieduo button.none{display:grid;place-items:center;background:#fff;color:var(--ui-muted,#81878d)}
.smjbg-ieduo button.none svg{width:62%;height:62%}
.smjbg-ie .smjbg-iecol{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.smjbg-ie .smjbg-iecol>span{margin:0;font-family:inherit;font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;
color:var(--ui-sub,#565b61)}
.smjbg-ieratios{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 10px}
.smjbg-ieratios button,.smjbg-ieacts button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
min-width:0;min-height:50px;padding:5px 2px;border:1px solid var(--ui-line,#d9dde1);border-radius:10px;background:#fff;
color:var(--ui-sub,#565b61);font-size:10.5px;font-weight:600;cursor:pointer}
.smjbg-ieratios button:hover,.smjbg-ieacts button:hover{background:var(--ui-subtle,#f6f7f9);color:var(--ui-ink,#1c2024)}
.smjbg-ieratios button.on,.smjbg-ieacts button.on{border-color:var(--ui-accent,#2667e7);background:var(--ui-accent-soft,#f1f8ff);
color:var(--ui-accent-hi,#1d52bb)}
.smjbg-ieratios i{display:block;box-sizing:border-box;border:1.5px solid currentColor;border-radius:2px}
.smjbg-ieratios i.free{width:18px;height:14px;border-style:dashed}
.smjbg-ieratios span,.smjbg-ieacts span{white-space:nowrap}
.smjbg-ieacts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 10px}
.smjbg-ieacts svg{width:19px;height:19px}
.smjbg-ie .smjbg-iego{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;margin:0 0 8px}
.smjbg-iecropon{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.smjbg-iecropon .smjbg-insadd{margin:0 0 8px}
.smjbg-iereset{display:inline-flex;align-items:center;gap:6px;margin:4px 0 2px;padding:6px 2px;border:0;background:transparent;
color:var(--ui-sub,#565b61);font-size:12px;font-weight:600;cursor:pointer}
.smjbg-iereset:not(:disabled):hover{color:var(--ui-accent-hi,#1d52bb)}
.smjbg-app .smjbg-iereset:disabled{background:transparent;border-color:transparent}
.smjbg-iefoot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:12px 0 2px;padding:12px 0 0;
border-top:1px solid var(--color-border-subtle,#eef0f3)}
.smjbg-iefoot button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:48px;
padding:6px 2px;border:1px solid var(--ui-line,#d9dde1);border-radius:10px;background:#fff;color:var(--ui-sub,#565b61);
font-size:10.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.smjbg-iefoot button:not(:disabled):hover{background:var(--ui-subtle,#f6f7f9);color:var(--ui-ink,#1c2024)}
.smjbg-iefoot button.rm:not(:disabled):hover{color:var(--ui-danger,#bf3e43);border-color:color-mix(in srgb,var(--ui-danger,#bf3e43) 40%,#fff)}
.smjbg-iemask{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:8px 10px;border-radius:10px;
background:var(--ui-subtle,#f6f7f9);font-size:11.5px;line-height:1.35;color:var(--ui-sub,#565b61)}
.smjbg-iemask.busy i{flex:0 0 auto;width:14px;height:14px;border-radius:50%;border:2px solid var(--ui-line,#d9dde1);
border-top-color:var(--ui-accent,#2667e7);animation:smjbgIeSpin .8s linear infinite}
.smjbg-iemask button{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:transparent;
color:var(--ui-accent-hi,#1d52bb);font-size:12px;font-weight:650;cursor:pointer}
@keyframes smjbgIeSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .smjbg-iemask.busy i{animation-duration:2.4s} }
/* ---- crop mode on the canvas ------------------------------------------------ */
.smjbg-insbox.smjbg-cropmode{border:1.5px solid #fff;outline:1px solid var(--ui-accent,#2667e7);outline-offset:0;
background:none;pointer-events:auto;cursor:move;touch-action:none;
box-shadow:0 0 0 1px rgba(16,24,40,.25)}
.smjbg-cropghost{position:absolute;left:0;top:0;opacity:.42;pointer-events:auto;cursor:move;touch-action:none}
.smjbg-cropghost canvas{display:block;width:100%;height:100%}
.smjbg-cropmode .smjbg-cropgrid{position:absolute;inset:0;pointer-events:none;opacity:.55;
background:linear-gradient(to right,transparent calc(33.333% - .5px),rgba(255,255,255,.9) calc(33.333% - .5px),rgba(255,255,255,.9) calc(33.333% + .5px),transparent calc(33.333% + .5px),
transparent calc(66.666% - .5px),rgba(255,255,255,.9) calc(66.666% - .5px),rgba(255,255,255,.9) calc(66.666% + .5px),transparent calc(66.666% + .5px)),
linear-gradient(to bottom,transparent calc(33.333% - .5px),rgba(255,255,255,.9) calc(33.333% - .5px),rgba(255,255,255,.9) calc(33.333% + .5px),transparent calc(33.333% + .5px),
transparent calc(66.666% - .5px),rgba(255,255,255,.9) calc(66.666% - .5px),rgba(255,255,255,.9) calc(66.666% + .5px),transparent calc(66.666% + .5px))}
/* the frame's handles: corner brackets and side bars that read as a cut line */
.smjbg-cropmode .cg{position:absolute;box-sizing:border-box;pointer-events:auto;touch-action:none;z-index:2}
.smjbg-cropmode .cg.nw,.smjbg-cropmode .cg.ne,.smjbg-cropmode .cg.se,.smjbg-cropmode .cg.sw{width:18px;height:18px;border:0 solid #fff;
filter:drop-shadow(0 0 1px rgba(16,24,40,.6))}
.smjbg-cropmode .cg.nw{left:-4px;top:-4px;border-left-width:4px;border-top-width:4px;cursor:nwse-resize}
.smjbg-cropmode .cg.ne{right:-4px;top:-4px;border-right-width:4px;border-top-width:4px;cursor:nesw-resize}
.smjbg-cropmode .cg.se{right:-4px;bottom:-4px;border-right-width:4px;border-bottom-width:4px;cursor:nwse-resize}
.smjbg-cropmode .cg.sw{left:-4px;bottom:-4px;border-left-width:4px;border-bottom-width:4px;cursor:nesw-resize}
.smjbg-cropmode .cg.n,.smjbg-cropmode .cg.s{left:50%;width:24px;height:5px;margin-left:-12px;border-radius:3px;background:#fff;
box-shadow:0 0 0 1px rgba(16,24,40,.35);cursor:ns-resize}
.smjbg-cropmode .cg.n{top:-3px}.smjbg-cropmode .cg.s{bottom:-3px}
.smjbg-cropmode .cg.e,.smjbg-cropmode .cg.w{top:50%;width:5px;height:24px;margin-top:-12px;border-radius:3px;background:#fff;
box-shadow:0 0 0 1px rgba(16,24,40,.35);cursor:ew-resize}
.smjbg-cropmode .cg.e{right:-3px}.smjbg-cropmode .cg.w{left:-3px}
/* the photograph's own corners: it grows or shrinks behind the frame */
.smjbg-cropmode .cgi{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;box-sizing:border-box;border-radius:50%;
background:#fff;border:2px solid var(--ui-accent,#2667e7);box-shadow:0 1px 3px rgba(16,24,40,.35);pointer-events:auto;
touch-action:none;cursor:nwse-resize;z-index:3}
.smjbg-cropmode .cgi[data-cgi="ne"],.smjbg-cropmode .cgi[data-cgi="sw"]{cursor:nesw-resize}
@media (pointer:coarse){
.smjbg-cropmode .cgi{width:22px;height:22px;margin:-11px 0 0 -11px}
.smjbg-cropmode .cg.nw,.smjbg-cropmode .cg.ne,.smjbg-cropmode .cg.se,.smjbg-cropmode .cg.sw{width:24px;height:24px}
.smjbg-cropmode .cg.n,.smjbg-cropmode .cg.s{width:32px;height:7px;margin-left:-16px}
.smjbg-cropmode .cg.e,.smjbg-cropmode .cg.w{width:7px;height:32px;margin-top:-16px}
}
/* the toolbar while cropping: Done says what it does */
.smjbg-instb button.txt{width:auto!important;gap:5px;padding:0 12px 0 9px;font:inherit;font-size:12.5px;font-weight:650}
.smjbg-instb button.txt.pri{background:var(--ui-accent,#2667e7)!important;color:#fff!important}
.smjbg-instb button.txt.pri:hover{background:var(--ui-accent-hi,#1d52bb)!important}
.smjbg-bgbusy.iemask b{background:rgba(16,24,40,.72)}
/* on a phone the sheet holding the editor leaves the brochure undimmed and
larger, so an edit can be judged while it is made */
@media (max-width:1023px){
.smjbg-app.smjbg-ieon[data-fs="images"] .smjbg-fs{background:transparent}
.smjbg-app.smjbg-ieon[data-fs="images"] .smjbg-fs-dlg{max-height:52vh;max-height:52dvh;
box-shadow:0 -8px 28px rgba(16,24,40,.18)}
.smjbg-ie .smjbg-iefilters{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* ---- the cut-out brush -------------------------------------------------------------- */
.smjbg-app .smjbg-rfgo{display:flex;align-items:center;justify-content:center;gap:7px;margin:0 0 8px}
.smjbg-rfgo svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.smjbg-insbox.smjbg-rfmode{border:1px dashed var(--ui-accent,#2667e7);background:none;pointer-events:none}
.smjbg-rfghost{position:absolute;inset:0;width:100%;height:100%;opacity:.26;pointer-events:none;
filter:saturate(.6)}
.smjbg-rfcur{position:fixed;z-index:2147483002;box-sizing:border-box;border-radius:50%;pointer-events:none;
border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(16,24,40,.55),inset 0 0 0 1px rgba(16,24,40,.35);
background:rgba(226,72,77,.12)}
.smjbg-rfcur.restore{background:rgba(48,164,108,.14)}
.smjbg-rf .smjbg-iehead b{text-align:left}
.smjbg-rf .smjbg-iehint b{color:var(--ui-ink,#1c2024)}
/* ===== 3.38 — the layout's own photos (Photo 1, Photo 2) in the picture editor ===== */
/* the outline marks the photo; the layout places it, so there is nothing to drag */
.smjbg-insbox.smjbg-vph{cursor:default}
/* while it is cropped the photo is shown in the frame, above the faint whole photo */
.smjbg-cropmode .smjbg-cropin{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none}
/* a layout photo is mirrored, not rotated: two buttons share the row */
.smjbg-ieacts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.smjbg-vphacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 8px}
.smjbg-app .smjbg-vphacts .smjbg-ieopen{margin:0}
/* ===== 3.38.1 — a flat workspace behind the page ===== */
/* The canvas element is a rectangle with a clear margin round the page drawn on it, so a
shadow on the element outlined a second, square sheet behind the rounded page — the
stacked layers seen behind the canvas. The page keeps its own edge (its Border style);
the element itself casts nothing. Nothing about the canvas's size or place changes. */
@media (min-width:1024px){
.smjbg-app.smjbg-edge .smjbg-prevcol #prev canvas{box-shadow:none!important}
}
/* ===== 3.38.2 — Layers: a smooth, exact drag =====
The gap is shown by a thin line exactly between the two rows — no halo, no end cap
and no easing (it is where the drop will be, not on its way there) — and by nothing
where the drop would change nothing. The layer being moved stays faded in its place,
without the striped band; its lifted copy is sized to its name, lifted lightly, and
follows the pointer by transform alone. */
.smjbg-lyline{top:0!important;height:2px!important;margin-top:0!important;border-radius:1px!important;box-shadow:none!important;transition:none!important;will-change:transform}
.smjbg-lyline::before{content:none!important;display:none!important}
.smjbg-lyline,.smjbg-lyline.noop{display:none!important}
.smjbg-lyrow.dragging{background:transparent!important;opacity:.4!important}
.smjbg-lyghost{width:max-content;opacity:1!important;box-shadow:0 2px 8px rgba(16,24,40,.12),0 0 0 1px rgba(38,103,231,.35)!important;transition:margin-left .1s ease;font-family:var(--ui-font,Inter,system-ui,sans-serif)}
/* the clear cover that carries the grabbing hand during a drag (above the page, below the copy) */
.smjbg-lycover{position:fixed;left:0;top:0;right:0;bottom:0;z-index:2147483150;cursor:grabbing;background:transparent;user-select:none;-webkit-user-select:none}
/* a finger takes a row by its grip at once; a swipe elsewhere on the row still scrolls the list */
.smjbg-lyrow .dh{touch-action:none}
.smjbg-lyrow{-webkit-touch-callout:none}
/* ===== 3.39 — the phone and tablet editor =====================================
Everything here is scoped to .smjbg-mob, which the script sets only below 1024px,
so the desktop editor never sees any of it. The layout: a slim top bar (menu,
logo, Undo, Redo, Preview, Save, account, Share); the page on a grey workspace;
one bar under the page holding either the pages or the selected element's own
controls; the tools along the bottom; and each tool's controls in a sheet that
rises above the tool bar while the page stays in view, smaller. Turned sideways
the tools run down the left and the sheet opens on the right. */
@media (max-width:1023px){
.smjbg-app.smjbg-mob{--mtop:52px;--mbar:60px;--mslot:58px;--msh:clamp(250px,44vh,540px);
--mac:var(--ui-accent,#2667e7);--mac-soft:var(--ui-accent-soft,#f1f8ff);--mline:var(--ui-line,#d9dde1);
--mline2:var(--ui-line-soft,#eaedf0);--mink:var(--ui-ink,#1c2024);--msub:var(--ui-sub,#565b61);
--mmuted:var(--ui-muted,#81878d);--mws:var(--rsk-canvas,#f2f3f7);background:#fff}
@supports (height:1dvh){ .smjbg-app.smjbg-mob{--msh:clamp(250px,44dvh,540px)} }
/* ---- top bar ---------------------------------------------------------------- */
.smjbg-app.smjbg-mob .smjbg-appbar{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;
justify-content:flex-start!important;gap:2px!important;row-gap:0!important;flex:0 0 auto!important;box-sizing:border-box!important;
height:calc(var(--mtop) + env(safe-area-inset-top,0px))!important;min-height:0!important;
padding:env(safe-area-inset-top,0px) 6px 0 4px!important;margin:0!important;background:#fff!important;
border:0!important;border-bottom:1px solid var(--mline2)!important;box-shadow:none!important;position:relative;z-index:45;overflow:visible}
.smjbg-app.smjbg-mob .smjbg-appbar>*{flex-shrink:0}
.smjbg-app.smjbg-mob .smjbg-appbar .smjbg-foot-burger{order:1;flex:0 0 42px!important;width:42px!important;height:42px!important;
min-height:0!important;border-radius:10px!important;color:var(--mink)!important}
.smjbg-app.smjbg-mob .smjbg-appbar .smjbg-logoimg{order:2;height:22px!important;width:auto!important;max-width:96px!important;
margin:0 4px 0 2px!important;flex:0 1 auto!important;min-width:0!important;object-fit:contain}
.smjbg-app.smjbg-mob .smjbg-appbar .smjbg-proj,.smjbg-app.smjbg-mob .smjbg-appbar .smjbg-pmwrap{display:none!important}
.smjbg-app.smjbg-mob .smjbg-appbar .smjbg-undo{order:4;flex:0 0 auto!important;width:38px!important;height:38px!important;margin:0!important;
padding:0!important;display:inline-flex!important;align-items:center;justify-content:center;border:0!important;border-radius:10px!important;
background:transparent!important;color:var(--mink)!important;box-shadow:none!important}
.smjbg-app.smjbg-mob .smjbg-appbar .smjbg-undo:not(.smjbg-redo){margin-left:auto!important}
.smjbg-app.smjbg-mob .smjbg-appbar .smjbg-redo{order:5}
.smjbg-app.smjbg-mob .smjbg-appbar .smjbg-undo svg{width:21px!important;height:21px!important;stroke-width:1.9!important}
.smjbg-app.smjbg-mob .smjbg-appbar .smjbg-undo:disabled{opacity:.32!important}
.smjbg-app.smjbg-mob .smjbg-appbar :is(.smjbg-undo,.smjbg-act,.smjbg-appnav button,.smjbg-foot-burger):active:not(:disabled){background:var(--ui-subtle,#f1f3f5)!important}
.smjbg-app.smjbg-mob .smjbg-appbar .smjbg-acts{order:6;display:flex!important;flex:0 0 auto!important;width:auto!important;gap:2px!important;
align-items:center!important;margin:0 0 0 3px!important;padding:0 0 0 3px!important;border:0!important;
border-left:1px solid var(--mline2)!important;height:28px;overflow:visible}
.smjbg-app.smjbg-mob .smjbg-appbar .smjbg-act{flex:0 0 auto!important;width:38px!important;height:38px!important;min-height:0!important;
padding:0!important;margin:0!important;border:0!important;border-radius:10px!important;background:transparent!important;
color:var(--mink)!important;font-size:0!important;gap:0!important;display:inline-flex!important;align-items:center!important;
justify-content:center!important;box-shadow:none!important}
.smjbg-app.smjbg-mob .smjbg-appbar .smjbg-act svg{width:20px!important;height:20px!important;stroke-width:1.8!important}
.smjbg-app.smjbg-mob .smjbg-appbar .smjbg-act-save{order:2}
.smjbg-app.smjbg-mob .smjbg-appbar .smjbg-appnav{order:7;display:flex!important;flex:0 0 auto!important;align-items:center!important;gap:2px!important;
grid-template-columns:none!important;margin:0 0 0 3px!important;padding:0 0 0 3px!important;border:0!important;
border-left:1px solid var(--mline2)!important;background:none!important;height:28px!important;overflow:visible}
.smjbg-app.smjbg-mob .smjbg-appbar .smjbg-appnav button{flex:0 0 auto!important;width:38px!important;height:38px!important;min-height:0!important;
padding:0!important;margin:0!important;display:inline-flex!important;flex-direction:row!important;align-items:center!important;
justify-content:center!important;gap:6px!important;border:0!important;border-radius:10px!important;background:transparent!important;
color:var(--mink)!important;font:600 13px/1 var(--ui-font)!important;box-shadow:none!important}
.smjbg-app.smjbg-mob .smjbg-appbar .smjbg-appnav button i{display:none!important;font-style:normal}
.smjbg-app.smjbg-mob .smjbg-appbar .smjbg-appnav svg{width:20px!important;height:20px!important}
.smjbg-app.smjbg-mob .smjbg-appbar .smjbg-appnav [data-nav="share"]{background:var(--mac)!important;color:#fff!important;margin-left:3px!important}
.smjbg-app.smjbg-mob .smjbg-appbar .smjbg-appnav [data-nav="share"]:active{background:var(--ui-accent-hi,#1d52bb)!important}
.smjbg-app.smjbg-mob .smjbg-appbar .smjbg-appnav [data-nav="location"]{display:none!important}
.smjbg-app.smjbg-mob .smjbg-foot-links .smjbg-mloc{display:flex}
/* the narrowest phones: slightly smaller targets so the logo keeps its room */
@media (max-width:359px){
.smjbg-app.smjbg-mob .smjbg-appbar{gap:0!important;padding-right:4px!important;padding-left:2px!important}
.smjbg-app.smjbg-mob .smjbg-appbar .smjbg-foot-burger{flex:0 0 36px!important;width:36px!important}
.smjbg-app.smjbg-mob .smjbg-appbar :is(.smjbg-undo,.smjbg-act,.smjbg-appnav button){width:34px!important}
.smjbg-app.smjbg-mob .smjbg-appbar :is(.smjbg-acts,.smjbg-appnav){margin-left:2px!important;padding-left:2px!important}
}
@media (min-width:480px){
.smjbg-app.smjbg-mob .smjbg-appbar .smjbg-appnav [data-nav="location"]{display:inline-flex!important}
.smjbg-app.smjbg-mob .smjbg-foot-links .smjbg-mloc{display:none!important}
}
/* the burger's menu hangs under the top bar, over the page */
.smjbg-app.smjbg-mob .smjbg-foot-in{z-index:60}
/* ---- the editor's column ----------------------------------------------------- */
.smjbg-app.smjbg-mob .smjbg-shellmain{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;
min-height:0!important;min-width:0!important;overflow:hidden!important;background:#fff}
.smjbg-app.smjbg-mob .smjbg-pantog,.smjbg-app.smjbg-mob .smjbg-handle,.smjbg-app.smjbg-mob .smjbg-mbar .smjbg-mb{display:none!important}
/* ---- the page, on a grey workspace -------------------------------------------- */
.smjbg-app.smjbg-mob .smjbg-prevcol{position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;flex:1 1 auto!important;min-height:0!important;min-width:0!important;
display:flex!important;flex-direction:column!important;padding:0!important;margin:0!important;background:var(--mws)!important;
border:0!important;overflow:hidden!important;max-height:none!important;height:auto!important;max-width:none!important}
.smjbg-app.smjbg-mob .smjbg-prevcol #out{flex:1 1 auto!important;min-height:0!important;padding:14px 12px 8px!important;
box-sizing:border-box!important;margin:0!important;width:100%!important}
.smjbg-app.smjbg-mob .smjbg-prevcol #out .smjbg-prev{flex:1 1 auto!important;min-height:0!important;align-items:center;justify-content:center}
/* a first visit has no page yet */
.smjbg-app.smjbg-mob .smjbg-mempty{display:none}
.smjbg-app.smjbg-mob #out[style*="none"]~.smjbg-mempty{display:flex}
.smjbg-app.smjbg-mob .smjbg-mempty{flex:1 1 auto;min-height:0;flex-direction:column;align-items:center;justify-content:center;
gap:6px;padding:24px 20px;text-align:center;color:var(--msub);font-family:var(--ui-font)}
.smjbg-app.smjbg-mob .smjbg-mempty-ic{width:64px;height:64px;margin:0 0 8px;border-radius:18px;background:#fff;color:var(--mac);
display:flex;align-items:center;justify-content:center;box-shadow:0 1px 2px rgba(16,24,40,.06),0 4px 14px rgba(16,24,40,.06)}
.smjbg-app.smjbg-mob .smjbg-mempty-ic svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.smjbg-app.smjbg-mob .smjbg-mempty>b{font-size:18px;font-weight:700;color:var(--mink);line-height:1.25}
.smjbg-app.smjbg-mob .smjbg-mempty-t{font-size:13.5px;line-height:1.5;max-width:290px}
.smjbg-app.smjbg-mob .smjbg-mempty-b{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
.smjbg-app.smjbg-mob .smjbg-mempty-b button{height:44px;padding:0 18px;border:1px solid var(--mline);border-radius:11px;background:#fff;
color:var(--mink);font:600 14px/1 var(--ui-font);cursor:pointer}
.smjbg-app.smjbg-mob .smjbg-mempty-b button.pri{background:var(--mac);border-color:var(--mac);color:#fff}
/* ---- one bar under the page: the pages, or the selected element's controls ---- */
.smjbg-app.smjbg-mob .smjbg-mslot{position:relative;flex:0 0 var(--mslot);height:var(--mslot);z-index:8;background:var(--mws)}
.smjbg-app.smjbg-mob[data-msheet] .smjbg-mslot{display:none}
.smjbg-app.smjbg-mob .smjbg-mslot .smjbg-cvfoot{position:absolute!important;left:0;right:0;top:0;bottom:0;z-index:1;margin:0!important;
padding:0 8px 8px!important;display:flex!important;align-items:center;justify-content:center;gap:8px;background:none!important}
.smjbg-app.smjbg-mob .smjbg-mslot .smjbg-zoombar{display:none!important}
.smjbg-app.smjbg-mob .smjbg-mslot .smjbg-pgbar{display:inline-flex!important;flex-wrap:nowrap!important;align-items:center!important;
justify-content:flex-start!important;gap:2px!important;height:44px;box-sizing:border-box;padding:3px!important;max-width:100%!important;
border-radius:13px!important;background:#fff!important;border:1px solid var(--mline2)!important;
box-shadow:0 1px 2px rgba(16,24,40,.05),0 3px 10px rgba(16,24,40,.06)!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.smjbg-app.smjbg-mob .smjbg-mslot .smjbg-pgbar::-webkit-scrollbar{display:none}
.smjbg-app.smjbg-mob .smjbg-mslot .smjbg-pgbar button{flex:0 0 auto;height:36px!important;min-width:40px;padding:0 10px!important;
border-radius:10px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;
font:600 12.5px/1 var(--ui-font)!important;color:var(--mink)!important;white-space:nowrap}
.smjbg-app.smjbg-mob .smjbg-mslot .smjbg-pgbar button:disabled{color:var(--mmuted)!important;opacity:.55}
.smjbg-app.smjbg-mob .smjbg-mslot .smjbg-pgbar button svg{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:currentColor;
stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.smjbg-app.smjbg-mob .smjbg-mslot .smjbg-pgnav:not([hidden]){display:inline-flex!important;align-items:center;flex:0 0 auto!important;
flex-basis:auto!important;border:0!important;margin:0!important;padding:0!important}
.smjbg-app.smjbg-mob .smjbg-mslot .smjbg-pgnav i{display:block!important;width:1px;height:22px;background:var(--mline2);margin:0 3px 0 5px}
.smjbg-app.smjbg-mob .smjbg-mslot .smjbg-pgnav button{width:34px!important;min-width:34px;padding:0!important;font-size:21px!important;font-weight:500!important}
.smjbg-app.smjbg-mob .smjbg-mslot .smjbg-pgnav span{font:600 12.5px/1 var(--ui-font);color:var(--msub);padding:0 2px;white-space:nowrap}
/* where the bar is narrow the page actions keep their icons and drop their words
(measured on the bar itself where the browser can, otherwise on the screen) */
.smjbg-app.smjbg-mob .smjbg-mslot{container-type:inline-size}
@container (max-width:519px){
.smjbg-app.smjbg-mob .smjbg-mslot .smjbg-pgbar button>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.smjbg-app.smjbg-mob .smjbg-mslot .smjbg-pgbar>button{width:44px;padding:0!important}
}
@supports not (container-type:inline-size){
@media (max-width:519px),(min-aspect-ratio:5/4){
.smjbg-app.smjbg-mob .smjbg-mslot .smjbg-pgbar button>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.smjbg-app.smjbg-mob .smjbg-mslot .smjbg-pgbar>button{width:44px;padding:0!important}
}
}
.smjbg-app.smjbg-mob .smjbg-mslot .smjbg-tbdock{position:absolute!important;left:0;right:0;top:0;bottom:0;z-index:2;margin:0!important;
width:auto!important;max-width:none!important;height:auto!important;min-height:0!important;display:none!important;align-items:center!important;
justify-content:flex-start!important;gap:0!important;padding:0!important;background:#fff!important;border-top:1px solid var(--mline2);
box-sizing:border-box;container-type:normal}
.smjbg-app.smjbg-mob .smjbg-mslot .smjbg-tbdock.has,.smjbg-app.smjbg-mob .smjbg-mslot .smjbg-tbdock.csz{display:flex!important}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-cszbtn,.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-lyrbtn,
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-tbhint{display:none!important}
.smjbg-app.smjbg-mob .smjbg-mtbx{flex:0 0 auto;width:46px;height:100%;display:flex;align-items:center;justify-content:center;padding:0;
border:0;border-right:1px solid var(--mline2);background:none;color:var(--msub);cursor:pointer;-webkit-tap-highlight-color:transparent}
.smjbg-app.smjbg-mob .smjbg-mtbx svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.smjbg-app.smjbg-mob .smjbg-mtbx:active{background:var(--ui-subtle,#f1f3f5)}
.smjbg-app.smjbg-mob .smjbg-tbdock.csz .smjbg-mtbx{display:none}
.smjbg-app.smjbg-mob .smjbg-tbdock:has(.smjbg-instb button.txt) .smjbg-mtbx{display:none}
/* the element bar: every control named under its icon, the row scrolling sideways */
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb.docked{position:static!important;flex:1 1 auto!important;min-width:0!important;width:auto!important;
max-width:none!important;height:100%!important;align-items:center!important;justify-content:flex-start!important;gap:0!important;
padding:0 6px!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;
overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb.docked::-webkit-scrollbar{display:none}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb]{flex:0 0 auto!important;width:56px!important;height:50px!important;min-width:0!important;
padding:5px 0 3px!important;margin:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;
justify-content:center!important;gap:4px!important;border:0!important;border-radius:10px!important;background:transparent!important;
color:var(--mink)!important;box-shadow:none!important}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb]:active{background:var(--ui-subtle,#f1f3f5)!important}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb].on{background:var(--mac-soft)!important;color:var(--mac)!important}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb] svg{width:22px!important;height:22px!important;flex:0 0 auto}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb]::after{content:attr(aria-label);display:block;max-width:54px;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap;font:600 10px/1.15 var(--ui-font);color:var(--msub)}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb].on::after{color:var(--mac)}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb="props"]::after{content:"Settings"}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb="edit"]::after,.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb="iedit"]::after{content:"Edit"}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb="crop"]::after{content:"Crop"}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb="fliph"]::after{content:"Flip"}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb="img"]::after{content:"Replace"}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb="rmbg"]::after{content:"BG remove"}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb="dup"]::after{content:"Duplicate"}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb="fwd"]::after{content:"Forward"}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb="back"]::after{content:"Backward"}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb="lock"]::after{content:"Lock"}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb="unlock"]::after{content:"Unlock"}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb="del"]::after{content:"Delete"}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb="more"]::after{content:"More"}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb="grp"]::after{content:"Group"}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb="ungrp"]::after{content:"Ungroup"}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb="dh"]::after,.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb="dv"]::after{content:"Spacing"}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb="bold"]::after{content:"Bold"}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb="ital"]::after{content:"Italic"}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button:is([data-tb="al"],[data-tb="ac"],[data-tb="ar"])::after{content:"Align"}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button:is([data-tb="cropno"],[data-tb="rfno"])::after{content:"Cancel"}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb="cropreset"]::after{content:"Reset"}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb="rferase"]::after{content:"Erase"}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb="rfrestore"]::after{content:"Restore"}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb="rfundo"]::after{content:"Undo"}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button[data-tb="del"]{color:var(--ui-danger,#bf3e43)!important}
/* Done while cropping or refining: a filled button with its word beside the tick */
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button.txt{width:auto!important;height:40px!important;flex-direction:row!important;
gap:6px!important;padding:0 16px 0 12px!important;margin:0 8px 0 4px!important;font:700 13.5px/1 var(--ui-font)!important}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button.txt::after{content:none!important;display:none!important}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button.txt.pri{background:var(--mac)!important;color:#fff!important}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb button.txt svg{width:18px!important;height:18px!important}
/* the font, the size and the colour keep their own compact shapes */
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb .sep{flex:0 0 auto;width:1px;height:30px;margin:0 4px;background:var(--mline2)}
.smjbg-app.smjbg-mob .smjbg-prevcol .smjbg-tbdock .smjbg-instb select.fam{flex:0 0 auto;width:132px;height:38px!important;margin:0 4px!important;
font-size:13.5px!important;border-radius:9px!important}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb .sz{flex:0 0 auto;height:38px!important;margin:0 4px!important;border-radius:9px!important}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb .sz button[data-tb]{width:34px!important;height:36px!important;padding:0!important;
flex-direction:row!important;gap:0!important;border-radius:0!important}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb .sz button[data-tb]::after{content:none!important;display:none!important}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb .sz button[data-tb] svg{width:15px!important;height:15px!important}
.smjbg-app.smjbg-mob .smjbg-prevcol .smjbg-tbdock .smjbg-instb .sz input[data-tbs]{width:44px;height:36px!important;font-size:14px!important}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-instb .col{flex:0 0 auto;width:40px!important;height:40px!important;margin:0 4px!important}
/* Custom size: its fields in the same bar */
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-cszstrip:not([hidden]){display:flex!important;flex:1 1 auto;min-width:0;height:100%;
align-items:center;gap:6px;padding:0 6px 0 10px!important;margin:0!important;overflow-x:auto;scrollbar-width:none;
border:0!important;box-shadow:none!important;background:transparent!important;border-radius:0!important}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-cszstrip::-webkit-scrollbar{display:none}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-cszstrip .smjbg-cszf input{width:64px;height:38px!important;font-size:15px!important}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-cszstrip select,.smjbg-app.smjbg-mob .smjbg-cszstrip select#cszU{height:38px!important;font-size:16px!important}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-cszapply{height:38px!important;padding:0 14px!important;border-radius:9px!important;flex:0 0 auto}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-cszclose{flex:0 0 auto;width:38px!important;height:38px!important}
@media (max-width:399px){
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-cszstrip:not([hidden]){gap:4px;padding:0 4px 0 8px!important}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-cszstrip .smjbg-cszf input{width:54px}
.smjbg-app.smjbg-mob .smjbg-cszstrip select#cszU{padding:0 20px 0 6px!important}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-cszapply{padding:0 11px!important}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-cszclose{width:32px!important}
}
@media (max-width:339px){
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-cszstrip .smjbg-cszx{display:none}
.smjbg-app.smjbg-mob .smjbg-tbdock .smjbg-cszstrip .smjbg-cszf input{width:50px}
}
/* ---- the tools, along the bottom ---------------------------------------------- */
.smjbg-app.smjbg-mob .smjbg-mainrow{display:flex!important;flex:0 0 auto!important;flex-direction:row!important;flex-wrap:nowrap!important;
align-items:stretch!important;justify-content:flex-start!important;gap:0!important;box-sizing:border-box!important;
height:calc(var(--mbar) + env(safe-area-inset-bottom,0px))!important;min-height:0!important;max-width:none!important;
padding:0 4px env(safe-area-inset-bottom,0px)!important;margin:0!important;overflow-x:auto!important;overflow-y:hidden!important;
border:0!important;border-top:1px solid var(--mline2)!important;background:#fff!important;scrollbar-width:none;
-webkit-overflow-scrolling:touch;touch-action:pan-x;overscroll-behavior:contain;position:relative;z-index:30;white-space:nowrap!important}
.smjbg-app.smjbg-mob .smjbg-mainrow::-webkit-scrollbar{display:none}
.smjbg-app.smjbg-mob .smjbg-mainrow .smjbg-mogrp{display:none!important}
.smjbg-app.smjbg-mob .smjbg-mainrow .smjbg-mo{--m-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3C/svg%3E");flex:0 0 auto!important;width:66px!important;height:auto!important;min-width:0!important;
min-height:0!important;margin:0!important;padding:8px 0 6px!important;display:flex!important;flex-direction:column!important;
align-items:center!important;justify-content:center!important;gap:4px!important;align-self:stretch!important;border:0!important;
border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--msub)!important;
font-size:0!important;line-height:0!important;letter-spacing:0!important;text-transform:none!important;white-space:nowrap!important;
position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
.smjbg-app.smjbg-mob .smjbg-mainrow>.smjbg-mo:first-of-type{margin-left:auto!important}
.smjbg-app.smjbg-mob .smjbg-mainrow>.smjbg-mo:last-of-type{margin-right:auto!important}
.smjbg-app.smjbg-mob .smjbg-mainrow .smjbg-mo::before{content:""!important;display:block!important;position:static!important;
width:24px!important;height:24px!important;flex:0 0 auto;margin:0!important;border:0!important;border-radius:0!important;background:currentColor!important;
-webkit-mask:var(--m-ic) center/contain no-repeat;mask:var(--m-ic) center/contain no-repeat;opacity:1!important;transform:none!important}
.smjbg-app.smjbg-mob .smjbg-mainrow .smjbg-mo::after{content:attr(data-s)!important;display:block!important;position:static!important;
left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:auto!important;height:auto!important;
background:none!important;border:0!important;font:600 10.5px/1.15 var(--ui-font)!important;color:inherit!important;
opacity:1!important;transform:none!important;white-space:nowrap}
.smjbg-app.smjbg-mob .smjbg-mainrow .smjbg-mo:active{background:var(--ui-subtle,#f1f3f5)!important}
/* the open tool: its colour and a short bar over it */
.smjbg-app.smjbg-mob .smjbg-mainrow .smjbg-mo.on,
.smjbg-app.smjbg-mob[data-mview="templates"] .smjbg-mainrow [data-mob="tpl"],
.smjbg-app.smjbg-mob[data-mview="elements"] .smjbg-mainrow [data-mob="text"],
.smjbg-app.smjbg-mob[data-layers="on"] .smjbg-mainrow [data-mob="layers"]{color:var(--mac)!important;
background:linear-gradient(var(--mac),var(--mac)) top center/26px 3px no-repeat!important}
.smjbg-app.smjbg-mob[data-mview="templates"] .smjbg-mainrow [data-opt-go="insert"].on,
.smjbg-app.smjbg-mob[data-mview="elements"] .smjbg-mainrow [data-opt-go="insert"].on{color:var(--msub)!important;background:transparent!important}
.smjbg-app.smjbg-mob .smjbg-mainrow [data-mob="tpl"]{--m-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='8' height='8' rx='1.6'/%3E%3Crect x='13' y='3' width='8' height='5' rx='1.6'/%3E%3Crect x='13' y='10' width='8' height='11' rx='1.6'/%3E%3Crect x='3' y='13' width='8' height='8' rx='1.6'/%3E%3C/svg%3E")}
.smjbg-app.smjbg-mob .smjbg-mainrow [data-opt-go="insert"]{--m-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E")}
.smjbg-app.smjbg-mob .smjbg-mainrow [data-mob="text"]{--m-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7V5h14v2M12 5v14M9 19h6'/%3E%3C/svg%3E")}
.smjbg-app.smjbg-mob .smjbg-mainrow [data-opt-go="images"]{--m-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18a4.5 4.5 0 0 1-.6-8.96A6 6 0 0 1 18 9.5a4 4 0 0 1-.5 8.5'/%3E%3Cpath d='M12 12v8M9 15l3-3 3 3'/%3E%3C/svg%3E")}
.smjbg-app.smjbg-mob .smjbg-mainrow [data-opt-go="price"]{--m-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5' fill='%23000'/%3E%3C/svg%3E")}
.smjbg-app.smjbg-mob .smjbg-mainrow [data-opt-go="layout"]{--m-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M3 9h18M10 9v12'/%3E%3C/svg%3E")}
.smjbg-app.smjbg-mob .smjbg-mainrow [data-opt-go="bgimg"]{--m-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 16l-5-5-9 9'/%3E%3C/svg%3E")}
.smjbg-app.smjbg-mob .smjbg-mainrow [data-opt-go="theme"]{--m-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18c1.1 0 2-.8 2-1.8 0-.5-.2-.9-.5-1.2-.3-.3-.5-.7-.5-1.2 0-1 .8-1.8 1.8-1.8H17a4 4 0 0 0 4-4c0-4.4-4-8-9-8z'/%3E%3Ccircle cx='7.5' cy='11.5' r='1.2' fill='%23000' stroke='none'/%3E%3Ccircle cx='10.5' cy='7.5' r='1.2' fill='%23000' stroke='none'/%3E%3Ccircle cx='15.5' cy='8' r='1.2' fill='%23000' stroke='none'/%3E%3C/svg%3E")}
.smjbg-app.smjbg-mob .smjbg-mainrow [data-opt-go="ftheme"]{--m-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 18.5L7 6h1.2l4.5 12.5'/%3E%3Cpath d='M4.2 14h6.8'/%3E%3Ccircle cx='17.4' cy='15.4' r='3.1'/%3E%3Cpath d='M20.5 12v6.5'/%3E%3C/svg%3E")}
.smjbg-app.smjbg-mob .smjbg-mainrow [data-opt-go="border"]{--m-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Crect x='7.5' y='7.5' width='9' height='9' rx='1.5'/%3E%3C/svg%3E")}
.smjbg-app.smjbg-mob .smjbg-mainrow [data-opt-go="ribbon"]{--m-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h18l-3 4 3 4H3l3-4z'/%3E%3C/svg%3E")}
.smjbg-app.smjbg-mob .smjbg-mainrow [data-mob="layers"]{--m-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l8.5 4.6L12 12.7 3.5 8.1z'/%3E%3Cpath d='M3.5 12.1l8.5 4.6 8.5-4.6'/%3E%3Cpath d='M3.5 16l8.5 4.6 8.5-4.6'/%3E%3C/svg%3E")}
/* ---- the sheet a tool opens in ------------------------------------------------ */
.smjbg-app.smjbg-mob .smjbg-subrow{display:none!important}
.smjbg-app.smjbg-mob[data-msheet="sub"] .smjbg-subrow{display:flex!important;flex-direction:column!important;flex:0 0 var(--msh)!important;
height:var(--msh)!important;min-height:0!important;width:auto!important;max-width:none!important;margin:0!important;padding:0!important;
overflow:hidden!important;white-space:normal!important;background:#fff!important;border:0!important;border-top:1px solid var(--mline2)!important;
border-radius:16px 16px 0 0!important;box-shadow:0 -6px 22px rgba(16,24,40,.09)!important;position:relative;z-index:20}
.smjbg-app.smjbg-mob[data-opt]:not([data-fs]) .smjbg-subrow:has(>.smjbg-sub.on){display:flex!important}
.smjbg-app.smjbg-mob .smjbg-msh{flex:0 0 50px;display:flex;align-items:center;gap:8px;min-width:0;box-sizing:border-box;
padding:0 10px 0 16px;border-bottom:1px solid var(--mline2);font-family:var(--ui-font)}
.smjbg-app.smjbg-mob .smjbg-msh-t{flex:1 1 auto;min-width:0;font:700 15.5px/1.2 var(--ui-font);color:var(--mink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smjbg-app.smjbg-mob .smjbg-msh-a{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.smjbg-app.smjbg-mob .smjbg-msh-a:empty{display:none}
.smjbg-app.smjbg-mob .smjbg-msh-b{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 11px;box-sizing:border-box;
border:1px solid var(--mline);border-radius:9px;background:#fff;color:var(--mink);font:600 12.5px/1 var(--ui-font);
white-space:nowrap;cursor:pointer;flex:0 0 auto}
.smjbg-app.smjbg-mob .smjbg-msh-b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.smjbg-app.smjbg-mob .smjbg-msh-b:active{background:var(--ui-subtle,#f1f3f5)}
.smjbg-app.smjbg-mob .smjbg-msh-done{flex:0 0 auto;height:34px;padding:0 15px;border:0;border-radius:9px;background:var(--mac);color:#fff;
font:700 13px/1 var(--ui-font);cursor:pointer}
.smjbg-app.smjbg-mob .smjbg-msh-done:active{background:var(--ui-accent-hi,#1d52bb)}
.smjbg-app.smjbg-mob .smjbg-subrow .smjbg-sub{display:none!important}
.smjbg-app.smjbg-mob .smjbg-subrow .smjbg-sub.on{display:block!important;flex:1 1 auto!important;min-height:0!important;height:auto!important;
max-height:none!important;width:auto!important;max-width:none!important;overflow-x:hidden!important;overflow-y:auto!important;
overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y!important;gap:0!important;white-space:normal!important;
padding:14px 14px calc(18px + env(safe-area-inset-bottom,0px))!important;margin:0!important;box-sizing:border-box}
.smjbg-app.smjbg-mob .smjbg-subrow .smjbg-sub.on>*{max-width:100%!important;min-width:0!important}
.smjbg-app.smjbg-mob .smjbg-subrow .smjbg-sub.on>.smjbg-tg{height:auto!important;flex:none!important;width:auto!important;
max-width:100%!important;margin:0 0 16px!important;align-items:stretch}
.smjbg-app.smjbg-mob .smjbg-subrow .smjbg-sub.on>.smjbg-tg:last-child{margin-bottom:0!important}
.smjbg-app.smjbg-mob .smjbg-subrow .smjbg-sub.on>.smjbg-tg>.smjbg-tiles{height:auto!important}
/* Text style: the type controls first, all four shown at once; then alignment,
spacing and the card, each under its own name */
.smjbg-app.smjbg-mob .smjbg-subrow .smjbg-sub.on[data-opt="typo"]{display:flex!important;flex-direction:column!important;align-items:stretch!important}
.smjbg-app.smjbg-mob .smjbg-subrow .smjbg-sub[data-opt="typo"]>#typoGrid{order:-1;margin:0 0 18px!important;padding:0!important;gap:12px!important}
.smjbg-app.smjbg-mob .smjbg-subrow .smjbg-sub[data-opt="typo"]>.smjbg-tg{flex-direction:column!important}
.smjbg-app.smjbg-mob .smjbg-subrow .smjbg-sub[data-opt="typo"]>.smjbg-tg>.smjbg-lbl,
.smjbg-app.smjbg-mob .smjbg-subrow .smjbg-sub[data-opt="typo"] .smjbg-typocap,
.smjbg-app.smjbg-mob .smjbg-subrow .smjbg-sub[data-opt="typo"] .smjbg-applycap{display:block!important;margin:0 0 8px!important;
font:700 11px/1.2 var(--ui-font)!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:var(--mmuted)!important}
.smjbg-app.smjbg-mob .smjbg-subrow .smjbg-sub[data-opt="typo"] .smjbg-applybar{flex-wrap:wrap!important;overflow:visible!important;gap:6px!important;margin:0!important}
.smjbg-app.smjbg-mob .smjbg-subrow .smjbg-sub[data-opt="typo"] .smjbg-applycap{flex:0 0 100%!important;margin:0 0 2px!important}
.smjbg-app.smjbg-mob .smjbg-subrow .smjbg-sub[data-opt="typo"] .smjbg-applybtn{height:34px!important;padding:0 11px 0 9px!important;font-size:12.5px!important;
border-radius:9px!important}
.smjbg-app.smjbg-mob .smjbg-subrow .smjbg-sub[data-opt="typo"] .smjbg-applybtn svg{width:15px!important;height:15px!important}
.smjbg-app.smjbg-mob .smjbg-subrow .smjbg-sub[data-opt="typo"] .smjbg-typonav{display:block!important}
.smjbg-app.smjbg-mob .smjbg-subrow .smjbg-sub[data-opt="typo"] .smjbg-typoarrow{display:none!important}
.smjbg-app.smjbg-mob .smjbg-subrow .smjbg-sub[data-opt="typo"] .smjbg-typorows{display:flex!important;flex-direction:column!important;gap:14px!important;
overflow:visible!important;scroll-snap-type:none!important;width:100%!important;max-width:100%!important}
.smjbg-app.smjbg-mob .smjbg-subrow .smjbg-sub[data-opt="typo"] .smjbg-typocell{flex:none!important;width:100%!important;min-width:0!important;gap:0!important}
/* the colour and font theme libraries: a grid that scrolls down, its search and
categories held at the top of the sheet */
.smjbg-app.smjbg-mob .smjbg-subrow .smjbg-tg.smjbg-libg{display:block!important;height:auto!important;width:auto!important}
.smjbg-app.smjbg-mob .smjbg-subrow .smjbg-libg .smjbg-lib{position:sticky;top:-14px;z-index:3;background:#fff;margin:-14px -14px 8px!important;
padding:14px 14px 8px!important;width:auto!important;box-sizing:border-box}
.smjbg-app.smjbg-mob .smjbg-subrow .smjbg-libg .smjbg-tiles{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(106px,1fr))!important;
gap:8px!important;flex-wrap:wrap!important;overflow:visible!important;max-height:none!important;height:auto!important;padding:2px!important;align-content:start}
.smjbg-app.smjbg-mob .smjbg-subrow .smjbg-libg .smjbg-tiles.g-font{grid-template-columns:repeat(auto-fill,minmax(158px,1fr))!important}
.smjbg-app.smjbg-mob .smjbg-subrow .smjbg-libg .smjbg-tile{width:auto!important;min-width:0!important}
/* the price choices: the radio mark sits in its own space, clear of the words */
.smjbg-app.smjbg-mob .smjbg-pricecard .smjbg-seg>button{padding-left:26px!important}
.smjbg-app.smjbg-mob .smjbg-pricecard .smjbg-seg>button::before{left:9px!important;top:11px!important}
.smjbg-app.smjbg-mob .smjbg-pmnow:empty{display:none!important}
/* ---- the popups are the same sheet ------------------------------------------- */
.smjbg-app.smjbg-mob .smjbg-fs{display:none!important}
.smjbg-app.smjbg-mob[data-fs] .smjbg-fs{display:flex!important;position:relative!important;top:auto!important;left:auto!important;
right:auto!important;bottom:auto!important;flex:0 0 var(--msh)!important;height:var(--msh)!important;min-height:0!important;padding:0!important;
margin:0!important;background:transparent!important;z-index:20!important;align-items:stretch!important;justify-content:stretch!important}
.smjbg-app.smjbg-mob .smjbg-fs-dlg{width:100%!important;max-width:none!important;height:100%!important;max-height:none!important;
min-height:0!important;transform:none!important;margin:0!important;border:0!important;border-top:1px solid var(--mline2)!important;
border-radius:16px 16px 0 0!important;box-shadow:0 -6px 22px rgba(16,24,40,.09)!important;background:#fff!important}
.smjbg-app.smjbg-mob .smjbg-fs-hd{flex:0 0 50px!important;height:50px!important;padding:0 10px 0 16px!important;gap:8px!important;
cursor:default!important;touch-action:auto!important;border-bottom:1px solid var(--mline2)!important;background:#fff!important}
.smjbg-app.smjbg-mob .smjbg-fs-dock{display:none!important}
.smjbg-app.smjbg-mob:not([data-fs="price"]) .smjbg-fs-back{display:none!important}
.smjbg-app.smjbg-mob .smjbg-fs-back{order:-1;height:34px!important;padding:0 11px!important;border-radius:9px!important;
border:1px solid var(--mline)!important;font:600 12.5px/1 var(--ui-font)!important}
.smjbg-app.smjbg-mob .smjbg-fs-t{flex:1 1 auto!important;min-width:0;text-align:left!important;font:700 15.5px/1.2 var(--ui-font)!important;
color:var(--mink)!important;letter-spacing:0!important;text-transform:none!important}
.smjbg-app.smjbg-mob .smjbg-fs-done{flex:0 0 auto;height:34px!important;padding:0 15px!important;margin:0!important;border:0!important;
border-radius:9px!important;background:var(--mac)!important;color:#fff!important;font:700 13px/1 var(--ui-font)!important}
.smjbg-app.smjbg-mob .smjbg-mfs-style{display:none}
.smjbg-app.smjbg-mob:is([data-fs="head"],[data-fs="tags"],[data-fs="specs"],[data-fs="hl"]) .smjbg-mfs-style{display:inline-flex}
.smjbg-app.smjbg-mob .smjbg-fs-body{flex:1 1 auto!important;min-height:0!important;padding:14px 14px calc(18px + env(safe-area-inset-bottom,0px))!important;
overflow-y:auto!important;overscroll-behavior:contain}
.smjbg-app.smjbg-mob .smjbg-fs-nav{flex:0 0 auto;border-top:1px solid var(--mline2)}
/* dragging a tile out of the sheet: the page above is already in view, so the sheet stays put */
.smjbg-app.smjbg-mob.smjbg-fsdnd[data-fs] .smjbg-fs-dlg{transform:none!important}
/* ---- the layer list is the same sheet ----------------------------------------- */
.smjbg-app.smjbg-mob[data-layers="on"] .smjbg-prevcol{padding-bottom:var(--msh)!important}
.smjbg-app.smjbg-mob .smjbg-lyr{position:absolute!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;
width:auto!important;min-width:0!important;max-width:none!important;height:var(--msh)!important;transform:none!important;z-index:25!important;
border:0!important;border-top:1px solid var(--mline2)!important;border-radius:16px 16px 0 0!important;box-shadow:0 -6px 22px rgba(16,24,40,.09)!important}
/* ---- messages and the share menu ------------------------------------------------
A message rises above the bar under the page instead of over the tools; the share
menu drops from Share in the top bar and is only as tall as its list. */
.smjbg-app.smjbg-mob .smjbg-toast{bottom:calc(var(--mbar) + var(--mslot) + 10px + env(safe-area-inset-bottom,0px));
max-width:calc(100vw - 32px);z-index:2147483200}
.smjbg-app.smjbg-mob .smjbg-mmenu{bottom:auto;min-width:210px;max-height:calc(100% - 70px);overflow-y:auto;border-radius:12px;
box-shadow:0 12px 32px rgba(16,24,40,.18)}
.smjbg-app.smjbg-mob .smjbg-mmenu button{min-height:44px;font-size:14px}
/* the menus opened on the page itself never run off a short (sideways) screen */
html.smjbg-mobpage .smjbg-insmenu,html.smjbg-mobpage .smjbg-lymenu,html.smjbg-mobpage .smjbg-acmenu{
box-sizing:border-box;max-height:calc(100vh - 12px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@supports (height:1dvh){ html.smjbg-mobpage .smjbg-insmenu,html.smjbg-mobpage .smjbg-lymenu,html.smjbg-mobpage .smjbg-acmenu{max-height:calc(100dvh - 12px)} }
/* ---- a finger-sized reach on the selection's handles --------------------------
The handles keep their look; an invisible disc round each answers to a finger,
so a corner, an edge or the turn grip can be taken without precise aim. */
.smjbg-app.smjbg-mob .smjbg-insbox .g::before,.smjbg-app.smjbg-mob .smjbg-insbox .rot::before{content:"";position:absolute;
left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:transparent}
.smjbg-app.smjbg-mob .smjbg-insbox .rot::before{width:40px;height:40px;margin:-20px 0 0 -20px}
/* ---- a sheet's header is its handle: pulled up for more room, pushed down to close ---- */
.smjbg-app.smjbg-mob .smjbg-msh,.smjbg-app.smjbg-mob .smjbg-fs-hd,.smjbg-app.smjbg-mob .smjbg-lyhd{position:relative;touch-action:none!important;
-webkit-user-select:none;user-select:none}
.smjbg-app.smjbg-mob .smjbg-msh::before,.smjbg-app.smjbg-mob .smjbg-fs-hd::before,.smjbg-app.smjbg-mob .smjbg-lyhd::before{content:"";
position:absolute;left:50%;top:5px;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--mline);pointer-events:none}
.smjbg-app.smjbg-mob .smjbg-lyhd{height:50px!important;padding-top:6px!important;box-sizing:border-box}
.smjbg-app.smjbg-mob[data-mtall]{--msh:calc(100vh - var(--mtop) - var(--mbar) - 132px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
@supports (height:1dvh){ .smjbg-app.smjbg-mob[data-mtall]{--msh:calc(100dvh - var(--mtop) - var(--mbar) - 132px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))} }
/* ---- typing: the keyboard is up, the tools step aside and the sheet keeps to its share ---- */
.smjbg-app.smjbg-mob.smjbg-mkb .smjbg-mainrow{display:none!important}
.smjbg-app.smjbg-mob.smjbg-mkb .smjbg-subrow,.smjbg-app.smjbg-mob.smjbg-mkb .smjbg-fs{flex-basis:min(var(--msh),62%)!important;height:min(var(--msh),62%)!important}
/* ---- fields: at 16px a phone does not zoom the page in when one is tapped ---------- */
.smjbg-app.smjbg-mob{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.smjbg-app.smjbg-mob :is(.smjbg-appbar,.smjbg-subrow,.smjbg-fs,.smjbg-mslot,.smjbg-lyr) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select,textarea),
html.smjbg-mobpage .smjbg-acm :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px!important}
/* ---- the busy spinners keep turning (the phone shell stills other motion) ------- */
.smjbg-app.smjbg-mob .smjbg-bgbusy i{animation:smjbg-bgspin .8s linear infinite!important}
.smjbg-app.smjbg-mob .smjbg-iemask.busy i{animation:smjbgIeSpin .8s linear infinite!important}
}
/* ---- turned sideways: tools down the left, the sheet on the right ---------------- */
@media (max-width:1023px) and (min-aspect-ratio:5/4){
.smjbg-app.smjbg-mob{--mtop:46px;--mrail:74px;--mside:min(360px,46vw);--mslot:54px}
.smjbg-app.smjbg-mob .smjbg-shellmain{flex-direction:row!important}
.smjbg-app.smjbg-mob .smjbg-mainrow{order:-1!important;flex-direction:column!important;flex:0 0 var(--mrail)!important;width:var(--mrail)!important;
height:auto!important;padding:2px 0 env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)!important;overflow-x:hidden!important;
overflow-y:auto!important;border-top:0!important;border-right:1px solid var(--mline2)!important;touch-action:pan-y}
.smjbg-app.smjbg-mob .smjbg-mainrow .smjbg-mo{width:auto!important;flex:0 0 56px!important;height:56px!important;padding:6px 0 5px!important}
.smjbg-app.smjbg-mob .smjbg-mainrow>.smjbg-mo:first-of-type,.smjbg-app.smjbg-mob .smjbg-mainrow>.smjbg-mo:last-of-type{margin:0!important}
.smjbg-app.smjbg-mob .smjbg-mainrow .smjbg-mo.on,
.smjbg-app.smjbg-mob[data-mview="templates"] .smjbg-mainrow [data-mob="tpl"],
.smjbg-app.smjbg-mob[data-mview="elements"] .smjbg-mainrow [data-mob="text"],
.smjbg-app.smjbg-mob[data-layers="on"] .smjbg-mainrow [data-mob="layers"]{background:linear-gradient(var(--mac),var(--mac)) left center/3px 26px no-repeat!important}
.smjbg-app.smjbg-mob .smjbg-prevcol{order:0}
.smjbg-app.smjbg-mob[data-msheet="sub"] .smjbg-subrow,.smjbg-app.smjbg-mob[data-msheet="fs"] .smjbg-fs{order:2!important;
flex:0 0 var(--mside)!important;width:var(--mside)!important;height:auto!important;border-radius:0!important;border-top:0!important;
border-left:1px solid var(--mline2)!important;box-shadow:none!important}
.smjbg-app.smjbg-mob .smjbg-fs-dlg{border-radius:0!important;border:0!important;box-shadow:none!important}
.smjbg-app.smjbg-mob[data-msheet] .smjbg-mslot{display:block}
.smjbg-app.smjbg-mob[data-layers="on"] .smjbg-prevcol{padding-bottom:0!important;padding-right:var(--mside)!important}
.smjbg-app.smjbg-mob .smjbg-lyr{top:0!important;bottom:0!important;left:auto!important;right:0!important;width:var(--mside)!important;
height:auto!important;border-radius:0!important;border-top:0!important;border-left:1px solid var(--mline2)!important;box-shadow:none!important}
.smjbg-app.smjbg-mob .smjbg-prevcol #out{padding:8px 10px 4px!important}
.smjbg-app.smjbg-mob .smjbg-toast{bottom:calc(var(--mslot) + 10px + env(safe-area-inset-bottom,0px))}
.smjbg-app.smjbg-mob .smjbg-msh::before,.smjbg-app.smjbg-mob .smjbg-fs-hd::before,.smjbg-app.smjbg-mob .smjbg-lyhd::before{display:none}
}
/* ---- tablets: more room, so the words come back ----------------------------------- */
@media (min-width:600px) and (max-width:1023px){
.smjbg-app.smjbg-mob{--mtop:56px;--mbar:64px}
.smjbg-app.smjbg-mob .smjbg-appbar{padding-left:8px!important;padding-right:10px!important;gap:4px!important}
.smjbg-app.smjbg-mob .smjbg-appbar .smjbg-logoimg{height:24px!important;max-width:120px!important;margin-right:10px!important}
.smjbg-app.smjbg-mob .smjbg-appbar .smjbg-act{width:auto!important;padding:0 12px!important;gap:7px!important;font-size:13.5px!important;font-weight:600!important}
.smjbg-app.smjbg-mob .smjbg-appbar .smjbg-appnav [data-nav="share"]{width:auto!important;padding:0 16px 0 13px!important}
.smjbg-app.smjbg-mob .smjbg-appbar .smjbg-appnav [data-nav="share"] i{display:inline!important;font:600 13.5px/1 var(--ui-font)}
.smjbg-app.smjbg-mob .smjbg-mainrow .smjbg-mo{width:78px!important}
}
@media (min-width:600px) and (max-width:1023px) and (max-aspect-ratio:5/4){
.smjbg-app.smjbg-mob{--msh:clamp(280px,40vh,600px)}
/* a tablet held upright has the width for every tool at once: they share the bar */
.smjbg-app.smjbg-mob .smjbg-mainrow .smjbg-mo{flex:1 0 62px!important;width:auto!important;max-width:104px!important}
@supports (height:1dvh){ .smjbg-app.smjbg-mob{--msh:clamp(280px,40dvh,600px)} }
}
/* ==========================================================================
3.40 — Layers as picture cards: each layer shows the element itself
========================================================================== */
.smjbg-app .smjbg-lylist{padding:4px 8px 10px!important}
.smjbg-app .smjbg-lylist .smjbg-lyrow{height:36px!important;min-height:36px!important;margin:0 0 4px!important;padding:0 4px 0 2px!important;gap:2px!important;
border-radius:8px!important;background:#e4e5ea!important;box-shadow:none!important;transition:background .12s,box-shadow .12s}
.smjbg-app .smjbg-lylist .smjbg-lyrow:hover{background:#dadbe1!important}
.smjbg-app .smjbg-lylist .smjbg-lyrow.on{background:#e4e5ea!important;box-shadow:inset 0 0 0 2px var(--ui-accent,#2667e7)!important}
.smjbg-app .smjbg-lylist .smjbg-lyrow.dropped{animation:none}
.smjbg-app .smjbg-lylist .smjbg-lyrow.dropped{box-shadow:inset 0 0 0 2px rgba(38,103,231,.55)!important}
.smjbg-app .smjbg-lylist .smjbg-lyrow.on.dropped{box-shadow:inset 0 0 0 2px var(--ui-accent,#2667e7)!important}
/* the grip: always there, dark, on the left */
.smjbg-app .smjbg-lylist .smjbg-lyrow .dh{flex:0 0 20px!important;width:20px;height:26px!important;opacity:1!important;color:#3f434a!important}
.smjbg-app .smjbg-lylist .smjbg-lyrow .dh svg{width:16px!important;height:16px!important}
/* the picture of the layer fills the middle */
.smjbg-app .smjbg-lylist .smjbg-lyrow .th.pv{flex:1 1 auto!important;min-width:0;width:auto!important;height:32px!important;border-radius:5px!important;
background:transparent!important;box-shadow:none!important;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:2px 4px}
.smjbg-app .smjbg-lylist .smjbg-lyrow .th.pv img{display:block;max-width:100%;max-height:28px;width:auto;height:auto;object-fit:contain}
.smjbg-app .smjbg-lylist .smjbg-lyrow .th.pv.lt{background:#454b57!important}
.smjbg-app .smjbg-lylist .smjbg-lyrow .th.pv.emp::after{content:attr(data-k);font:600 12px/1 var(--ui-font,Inter,system-ui,sans-serif);color:#6b7078}
.smjbg-app .smjbg-lylist .smjbg-lyrow.hid .th.pv{opacity:.35}
/* the name: in the tooltip; shown in place only while it is being renamed */
.smjbg-app .smjbg-lylist .smjbg-lyrow .nm{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0);white-space:nowrap;flex:none!important}
.smjbg-app .smjbg-lylist .smjbg-lyrow .nm:has(input.ren){left:24px!important;right:10px!important;top:50%!important;width:auto!important;height:auto!important;
transform:translateY(-50%);clip:auto;overflow:visible!important;z-index:3}
.smjbg-app .smjbg-lylist .smjbg-lyrow .nm:has(input.ren) em{display:none}
.smjbg-app .smjbg-lylist .smjbg-lyrow input.ren{width:100%!important;height:26px!important;font-size:13px!important}
/* hide, lock and the menu: on the right, over the card's own colour */
.smjbg-app .smjbg-lylist .smjbg-lyrow .ic{flex:0 0 24px!important;width:24px!important;height:24px!important;border-radius:7px!important;color:#3f434a}
.smjbg-app .smjbg-lylist .smjbg-lyrow .ic:hover{background:rgba(16,24,40,.08)!important}
.smjbg-app .smjbg-lylist .smjbg-lyrow .ic svg{width:15px!important;height:15px!important}
.smjbg-app .smjbg-lylist .smjbg-lyrow:not(:hover):not(.on) .ic:not(.off):not(.lk.on){width:0!important;flex-basis:0!important;opacity:0;overflow:hidden}
/* a group: its members together, a count, the fold arrow; members sit in under it */
.smjbg-app .smjbg-lylist .smjbg-lyrow.grp .tw{flex:0 0 18px!important;margin-left:-2px!important}
.smjbg-app .smjbg-lylist .smjbg-lyrow .gct{position:absolute;top:2px;left:40px;display:inline-flex;align-items:center;gap:3px;height:14px;padding:0 4px;border-radius:7px;
background:rgba(255,255,255,.85);color:#3f434a;font:700 10.5px/1 var(--ui-font,Inter,system-ui,sans-serif);pointer-events:none;z-index:1}
.smjbg-app .smjbg-lylist .smjbg-lyrow .gct svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.smjbg-app .smjbg-lylist .smjbg-lyrow.ing{margin-left:16px!important;height:32px!important;min-height:32px!important;padding-left:2px!important}
.smjbg-app .smjbg-lylist .smjbg-lyrow.ing::before{left:-10px!important;top:-4px!important;bottom:0!important;width:2px!important;background:#d0d2d8!important}
.smjbg-app .smjbg-lylist .smjbg-lyrow.ing .th.pv{height:28px!important}
.smjbg-app .smjbg-lylist .smjbg-lyrow.ing .th.pv img{max-height:24px}
/* the page: a white sheet with a hatched mark, as its own card */
.smjbg-app .smjbg-lylist .smjbg-lypage{height:36px!important;margin:0 0 4px!important;padding:0 10px 0 24px!important;gap:10px!important;border:0!important;
border-radius:8px!important;background:#e4e5ea!important;color:#6b7078!important}
.smjbg-app .smjbg-lylist .smjbg-lypage>svg{display:none}
.smjbg-lypage .pgw{flex:1 1 auto;height:24px;border-radius:3px;background:#fff;box-shadow:0 0 0 1px rgba(16,24,40,.06);display:flex;align-items:center;justify-content:center;
font:600 11px/1 var(--ui-font,Inter,system-ui,sans-serif);font-style:normal;letter-spacing:.02em;color:#9a9ea6}
.smjbg-lypage .pgh{flex:0 0 18px;height:18px;border-radius:3px;
background:repeating-linear-gradient(135deg,#3f434a 0 2.5px,transparent 2.5px 6px);-webkit-mask:linear-gradient(#000,#000);opacity:.85}
/* while dragging: the lifted copy is a card too */
.smjbg-lyghost{border-radius:8px!important}
.smjbg-lyghost .smjbg-lyrow{height:36px!important;border-radius:8px!important;background:#e4e5ea!important;box-shadow:inset 0 0 0 2px var(--ui-accent,#2667e7)!important;display:flex;align-items:center;gap:4px;padding:0 6px 0 4px}
.smjbg-lyghost .smjbg-lyrow .nm,.smjbg-lyghost .smjbg-lyrow .gct,.smjbg-lyghost .smjbg-lyrow .tw{display:none!important}
.smjbg-lyghost .smjbg-lyrow .dh{flex:0 0 20px;display:flex;align-items:center;justify-content:center;color:#3f434a!important}
.smjbg-lyghost .smjbg-lyrow .dh svg{width:16px;height:16px;fill:currentColor}
.smjbg-lyghost .smjbg-lyrow .th.pv{flex:1 1 auto;height:32px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:8px}
.smjbg-lyghost .smjbg-lyrow .th.pv img{max-width:100%;max-height:28px;object-fit:contain}
.smjbg-lyghost .smjbg-lyrow .th.pv.lt{background:#454b57}
.smjbg-app .smjbg-lylist .smjbg-lyrow.dragging{opacity:.35!important}
/* 3.40.3: the whole card is lifted, at the card's own width, exactly as it looks in the list */
.smjbg-lyghost{opacity:1!important;background:transparent!important;box-shadow:0 10px 24px rgba(16,24,40,.22)!important}
.smjbg-lyghost .smjbg-lyrow{width:100%!important;box-sizing:border-box!important;height:36px!important;padding:0 4px 0 2px!important;gap:2px!important;opacity:1!important}
.smjbg-lyghost .smjbg-lyrow .dh,.smjbg-lyr.dragging .smjbg-lyghost .smjbg-lyrow .dh{display:flex!important;flex:0 0 20px!important;width:20px!important;height:26px!important;opacity:1!important}
.smjbg-lyghost .smjbg-lyrow .th.pv{flex:1 1 auto!important;width:auto!important;min-width:0!important;height:32px!important;border-radius:5px!important;
background:transparent!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:2px 4px!important}
.smjbg-lyghost .smjbg-lyrow .th.pv.lt{background:#454b57!important}
.smjbg-lyghost .smjbg-lyrow .th.pv img{display:block!important;max-width:100%!important;max-height:28px!important;width:auto!important;height:auto!important}
/* ===== 3.40.5 — Page thumbnails as cards: one size for every page, a clear picture, the page number on it ===== */
@media (min-width:1024px){
/* the page lies beside the cards, never under them */
.smjbg-app.smjbg-edge .smjbg-prevcol:has(> .smjbg-pgthumbs){padding-left:96px!important}
.smjbg-app.smjbg-edge .smjbg-prevcol > .smjbg-pgthumbs{width:72px!important;left:10px;top:10px;gap:6px}
.smjbg-app.smjbg-edge .smjbg-pgthumbs-tog{width:72px!important;height:24px!important;font-size:10.5px!important;gap:4px!important}
.smjbg-app.smjbg-edge .smjbg-pgthumbs-panel{width:72px!important;gap:6px!important}
.smjbg-app.smjbg-edge .smjbg-pgthumbs-list{gap:6px!important;padding:3px 3px!important;align-items:stretch!important}
.smjbg-app.smjbg-edge .smjbg-pgthumb{width:62px;align-self:center}
.smjbg-app.smjbg-edge .smjbg-pgthumb .go{position:relative;display:flex!important;align-items:center!important;justify-content:center!important;width:62px!important;height:46px!important;
padding:0!important;border-radius:7px!important;background:#eceef2!important;box-shadow:inset 0 0 0 1px #dcdfe5;box-sizing:border-box;overflow:hidden}
.smjbg-app.smjbg-edge .smjbg-pgthumb .go:hover{background:#e3e6eb!important;box-shadow:inset 0 0 0 1px #c9ced6}
.smjbg-app.smjbg-edge .smjbg-pgthumb .pv{border-radius:2px!important;box-shadow:0 1px 3px rgba(16,24,40,.14)!important}
.smjbg-app.smjbg-edge .smjbg-pgthumb .go:hover .pv{box-shadow:0 1px 4px rgba(16,24,40,.2)!important}
.smjbg-app.smjbg-edge .smjbg-pgthumb .pv.empty{background:#fff!important}
/* the page number, on the card's lower left */
.smjbg-app.smjbg-edge .smjbg-pgthumb .go b{position:absolute;left:3px;bottom:3px;min-width:13px;height:13px;padding:0 3px;box-sizing:border-box;border-radius:4px;
background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(16,24,40,.08);color:#1c2024;font:700 9px/13px var(--ui-font,Inter,system-ui,sans-serif)!important;text-align:center}
/* the page being edited: a bold ring with a white gap, its number in the accent colour */
.smjbg-app.smjbg-edge .smjbg-pgthumb.on .go{background:#eceef2!important;box-shadow:0 0 0 1.5px #fff,0 0 0 3px var(--ui-accent,#2667e7)!important}
.smjbg-app.smjbg-edge .smjbg-pgthumb.on .pv{box-shadow:0 1px 3px rgba(16,24,40,.14)!important}
.smjbg-app.smjbg-edge .smjbg-pgthumb.on .go b{background:var(--ui-accent,#2667e7);color:#fff;box-shadow:none}
.smjbg-app.smjbg-edge .smjbg-pgthumb .rm{top:2px!important;right:2px!important;width:16px!important;height:16px!important;z-index:2}
.smjbg-app.smjbg-edge .smjbg-pgthumb .rm svg{width:9px!important;height:9px!important}
.smjbg-app.smjbg-edge .smjbg-pgthumbs-add{width:62px!important;height:26px!important;margin-top:0!important;border-radius:7px!important;border:0!important;background:#eceef2!important;
box-shadow:inset 0 0 0 1px #dcdfe5;color:#1c2024!important}
.smjbg-app.smjbg-edge .smjbg-pgthumbs-add svg{width:15px!important;height:15px!important}
.smjbg-app.smjbg-edge .smjbg-pgthumbs-add:hover:not(:disabled){background:#e3e6eb!important;color:var(--ui-accent-hi,#1d52bb)!important}
}
/* ===== end 3.40.5 ===== */
/* ===== 3.42.0 — Right-side editor: one control system for every element =====
Whatever is selected on the canvas, its editor in the side panel is drawn with
the same controls: Text, Data fields, Price calculation, Badge / Ribbon /
Sticker, Image and Logo (with Edit image and Erase & restore), Shape, Line,
Arrow, Divider, Frame, Pattern, Decoration, Accent, Glow, Emoji, Icon, a
layout photo, and the brochure's own text and price. One corner radius, one
control height, one type scale, one border colour and one hover, selected and
focus treatment:
· option groups — rectangular option buttons in a grid whose rows fill
· preview tiles — rectangular cards (fonts, colours, ratios, filters, …)
· buttons — primary, secondary, icon and text
· fields, sliders, swatches, labels, hints and group headers
Also fixed here: the two blue lines above and below a slider in use (5b, 6),
option names cut short, and the element's name cut off in the panel header (8).
Desktop only: the phone and tablet editor keeps its own touch-sized controls.
Presentation only — no markup, attribute or behaviour is changed. Scoped by
the side panel's id; family lists sit in :where() so the weight of a rule is
always the panel id plus what follows, and later rules win predictably. */
@media (min-width:1024px){
.smjbg-app.smjbg-edge #mSub{
--ed-r:6px;--ed-r-in:4px;--ed-h:32px;--ed-hb:30px;--ed-fs:12px;--ed-fs-s:11.5px;
--ed-ink:var(--n-900,#282c2f);--ed-ink2:var(--n-800,#3e4348);--ed-sub:var(--n-700,#565b61);--ed-muted:var(--n-600,#6c7278);
--ed-line:var(--n-200,#d9dde1);--ed-line-hi:var(--n-300,#c0c5ca);--ed-fill:var(--n-050,#f6f7f9);--ed-press:var(--n-100,#eaedf0);
--ed-acc:var(--p-600,#2667e7);--ed-acc-hi:var(--p-700,#1d52bb);--ed-acc-soft:var(--p-050,#f1f8ff);
--ed-ring:0 0 0 3px color-mix(in srgb,var(--p-600,#2667e7) 22%,transparent);
--ed-t:background-color .12s ease,border-color .12s ease,color .12s ease,box-shadow .12s ease}
/* ---------- 1 · labels, group headers, hints ---------------------------------- */
/* a group of settings (Text, Colour, Effects…) and the image editor's sections */
.smjbg-app.smjbg-edge #mSub .smjbg-insprops .smjbg-pgrp>summary{min-height:40px!important;font-size:13px!important;
font-weight:600!important;letter-spacing:0!important;color:var(--ed-ink)!important}
.smjbg-app.smjbg-edge #mSub .smjbg-insprops .smjbg-pgbody{padding:2px 0 14px!important}
.smjbg-app.smjbg-edge #mSub .smjbg-insprops .smjbg-pgrp>summary:focus-visible{outline:none!important;box-shadow:var(--ed-ring)!important;border-radius:var(--ed-r)!important}
.smjbg-app.smjbg-edge #mSub .smjbg-ie .smjbg-iegrp>h4{font-size:13px!important;font-weight:600!important;letter-spacing:0!important;
text-transform:none!important;color:var(--ed-ink)!important;margin:0 0 10px!important}
/* the label over a control — one style for every element */
.smjbg-app.smjbg-edge #mSub .smjbg-insprops .smjbg-insrow{margin:0 0 12px!important}
.smjbg-app.smjbg-edge #mSub .smjbg-insprops .smjbg-insrow>span,
.smjbg-app.smjbg-edge #mSub .smjbg-ie .smjbg-ielab>span,
.smjbg-app.smjbg-edge #mSub :where(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) :is(.smjbg-lbl,.smjbg-typocap,.smjbg-applycap,.smjbg-tg>b,.smjbg-f>span){
font-size:12px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;
line-height:1.35!important;color:var(--ed-sub)!important}
.smjbg-app.smjbg-edge #mSub .smjbg-insprops .smjbg-insrow:not(:has(> .smjbg-csw))>span{margin:0 0 6px!important}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) :is(.smjbg-lbl,.smjbg-typocap,.smjbg-tg>b){
margin:0 0 6px!important}
/* the value shown beside a slider's label */
.smjbg-app.smjbg-edge #mSub .smjbg-ie .smjbg-ielab output{font-size:12px!important;font-weight:600!important;color:var(--ed-ink2)!important;
font-variant-numeric:tabular-nums}
/* hints */
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops,.smjbg-vphp) .smjbg-canvashint{border-radius:var(--ed-r)!important;padding:8px 10px!important;
font-size:12px!important;line-height:1.45!important;color:var(--ed-sub)!important;background:var(--ed-fill)!important;margin:0 0 12px!important}
.smjbg-app.smjbg-edge #mSub .smjbg-insprops .smjbg-canvashint b{letter-spacing:0!important;font-weight:600!important;color:var(--ed-ink2)!important}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops,.smjbg-ie,.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) :is(.smjbg-hint,.smjbg-iehint,.smjbg-selval){
font-size:12px!important;line-height:1.45!important;color:var(--ed-muted)!important}
/* ---------- 2 · option groups: rectangular option buttons -----------------------
Weight, Style, Capitals, Gradient, Shadow, Background, Fit, Shape, Border,
Off-canvas, the image editor's tabs and choices, Apply to / Editing / Style,
and the brochure text's thickness and size. One look for all of them.
Layout, counted in buttons (a caption before them is not counted):
· 2, 3 or 4 — one row, equal widths while every name fits; a longer name
keeps its full width and the others share the rest, so no name is cut
· 5 to 7 — rows that fill: thirds, a short last row shares the width,
and 7 is 4 + 3
· 8 or more, Weight and Shape — two a row, an odd last one takes the row */
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops .smjbg-instiles,.smjbg-ie .smjbg-ietabs,.smjbg-ie .smjbg-ieseg,
:is(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) .smjbg-applybar,
.smjbg-sub[data-opt="typo"] :is([data-tg="dFontWeight"],[data-tg="dFontScale"]) .smjbg-tiles){
display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;gap:4px!important;
padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
width:100%!important;max-width:none!important;height:auto!important;flex-wrap:nowrap!important;overflow:visible!important;
container:edopt / inline-size}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops .smjbg-instiles,.smjbg-ie .smjbg-ietabs,.smjbg-ie .smjbg-ieseg,
:is(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) .smjbg-applybar,
.smjbg-sub[data-opt="typo"] :is([data-tg="dFontWeight"],[data-tg="dFontScale"]) .smjbg-tiles)>button{
grid-column:span 4!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:6px!important;
width:auto!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:var(--ed-hb)!important;max-height:none!important;
aspect-ratio:auto!important;justify-self:stretch!important;margin:0!important;padding:0 6px!important;
border:1px solid var(--ed-line)!important;border-radius:var(--ed-r)!important;background:#fff!important;box-shadow:none!important;outline:none!important;
font-family:inherit!important;font-size:var(--ed-fs)!important;font-weight:500!important;line-height:1.2!important;letter-spacing:0!important;text-transform:none!important;
color:var(--ed-ink2)!important;text-align:center!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
transform:none!important;transition:var(--ed-t)!important;flex:initial!important;cursor:pointer}
/* the label inside a button (Apply to, Editing, Style, thickness, size) */
.smjbg-app.smjbg-edge #mSub :where(:is(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) .smjbg-applybar,
.smjbg-sub[data-opt="typo"] :is([data-tg="dFontWeight"],[data-tg="dFontScale"]) .smjbg-tiles)>button :is(b,span,.smjbg-tl){
font:inherit!important;color:inherit!important;letter-spacing:0!important;text-transform:none!important;margin:0!important;padding:0!important;
white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;min-width:0}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) .smjbg-applybar>button{gap:5px!important}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) .smjbg-applybar>button svg{
flex:0 0 auto!important;width:14px!important;height:14px!important;margin:0!important}
/* the caption inside the Apply to / Editing / Style bars sits above its buttons */
.smjbg-app.smjbg-edge #mSub :where(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) .smjbg-applybar>.smjbg-applycap{
grid-column:1 / -1!important;display:block!important;margin:0 0 2px!important;padding:0!important;text-align:left!important}
/* Apply to: a list of targets, so its names line up on the left */
.smjbg-app.smjbg-edge #mSub .smjbg-sub[data-opt="typo"] #typoApply>button{justify-content:flex-start!important;padding:0 8px!important}
/* hover, selected, focus — the weight never changes, so a name never moves */
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops .smjbg-instiles,.smjbg-ie .smjbg-ietabs,.smjbg-ie .smjbg-ieseg,
:is(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) .smjbg-applybar,
.smjbg-sub[data-opt="typo"] :is([data-tg="dFontWeight"],[data-tg="dFontScale"]) .smjbg-tiles)>button:hover:not(:is(.sel,.on,[aria-pressed="true"],[aria-selected="true"])){
border-color:var(--ed-line-hi)!important;background:var(--ed-fill)!important;color:var(--ed-ink)!important}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops .smjbg-instiles,.smjbg-ie .smjbg-ietabs,.smjbg-ie .smjbg-ieseg,
:is(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) .smjbg-applybar,
.smjbg-sub[data-opt="typo"] :is([data-tg="dFontWeight"],[data-tg="dFontScale"]) .smjbg-tiles)>button:is(.sel,.on,[aria-pressed="true"],[aria-selected="true"]){
border-color:var(--ed-acc)!important;background:var(--ed-acc-soft)!important;color:var(--ed-acc-hi)!important}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops .smjbg-instiles,.smjbg-ie .smjbg-ietabs,.smjbg-ie .smjbg-ieseg,
:is(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) .smjbg-applybar,
.smjbg-sub[data-opt="typo"] :is([data-tg="dFontWeight"],[data-tg="dFontScale"]) .smjbg-tiles)>button:focus-visible{
box-shadow:var(--ed-ring)!important}
/* 5 to 7: rows that fill */
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops .smjbg-instiles,.smjbg-ie .smjbg-ietabs,.smjbg-ie .smjbg-ieseg,
:is(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) .smjbg-applybar,
.smjbg-sub[data-opt="typo"] :is([data-tg="dFontWeight"],[data-tg="dFontScale"]) .smjbg-tiles)>button:nth-of-type(3n+1):last-of-type{grid-column:span 12!important}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops .smjbg-instiles,.smjbg-ie .smjbg-ietabs,.smjbg-ie .smjbg-ieseg,
:is(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) .smjbg-applybar,
.smjbg-sub[data-opt="typo"] :is([data-tg="dFontWeight"],[data-tg="dFontScale"]) .smjbg-tiles)>button:is(:nth-of-type(3n+1):nth-last-of-type(2),:nth-of-type(3n+2):last-of-type){grid-column:span 6!important}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops .smjbg-instiles,.smjbg-ie .smjbg-ietabs,.smjbg-ie .smjbg-ieseg,
:is(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) .smjbg-applybar,
.smjbg-sub[data-opt="typo"] :is([data-tg="dFontWeight"],[data-tg="dFontScale"]) .smjbg-tiles):has(>button:nth-of-type(7):last-of-type)>button{grid-column:span 3!important}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops .smjbg-instiles,.smjbg-ie .smjbg-ietabs,.smjbg-ie .smjbg-ieseg,
:is(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) .smjbg-applybar,
.smjbg-sub[data-opt="typo"] :is([data-tg="dFontWeight"],[data-tg="dFontScale"]) .smjbg-tiles):has(>button:nth-of-type(7):last-of-type)>button:nth-of-type(n+5){grid-column:span 4!important}
/* 2, 3 or 4: one row */
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops .smjbg-instiles,.smjbg-ie .smjbg-ietabs,.smjbg-ie .smjbg-ieseg,
:is(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) .smjbg-applybar,
.smjbg-sub[data-opt="typo"] :is([data-tg="dFontWeight"],[data-tg="dFontScale"]) .smjbg-tiles):has(>button:nth-of-type(2):last-of-type){
grid-template-columns:repeat(2,minmax(max-content,1fr))!important}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops .smjbg-instiles,.smjbg-ie .smjbg-ietabs,.smjbg-ie .smjbg-ieseg,
:is(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) .smjbg-applybar,
.smjbg-sub[data-opt="typo"] :is([data-tg="dFontWeight"],[data-tg="dFontScale"]) .smjbg-tiles):has(>button:nth-of-type(3):last-of-type){
grid-template-columns:repeat(3,minmax(max-content,1fr))!important}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops .smjbg-instiles,.smjbg-ie .smjbg-ietabs,.smjbg-ie .smjbg-ieseg,
:is(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) .smjbg-applybar,
.smjbg-sub[data-opt="typo"] :is([data-tg="dFontWeight"],[data-tg="dFontScale"]) .smjbg-tiles):has(>button:nth-of-type(4):last-of-type){
grid-template-columns:repeat(4,minmax(max-content,1fr))!important}
/* two a row: Weight and Shape (Regular / Medium, Square / Rounded need the room),
and the long lists — Apply to, Visual style */
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops .smjbg-instiles,.smjbg-ie .smjbg-ietabs,.smjbg-ie .smjbg-ieseg,
:is(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) .smjbg-applybar,
.smjbg-sub[data-opt="typo"] :is([data-tg="dFontWeight"],[data-tg="dFontScale"]) .smjbg-tiles):has(>button:nth-of-type(8)),
.smjbg-app.smjbg-edge #mSub .smjbg-insprops .smjbg-instiles:has(>button:nth-of-type(4):last-of-type):has(>button:is([data-set="weight"],[data-set="mask"])){
grid-template-columns:repeat(2,minmax(max-content,1fr))!important}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops .smjbg-instiles,.smjbg-ie .smjbg-ietabs,.smjbg-ie .smjbg-ieseg,
:is(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) .smjbg-applybar,
.smjbg-sub[data-opt="typo"] :is([data-tg="dFontWeight"],[data-tg="dFontScale"]) .smjbg-tiles):is(:has(>button:nth-of-type(2):last-of-type),
:has(>button:nth-of-type(3):last-of-type),:has(>button:nth-of-type(4):last-of-type),:has(>button:nth-of-type(8)))>button{grid-column:auto!important}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops .smjbg-instiles,.smjbg-ie .smjbg-ietabs,.smjbg-ie .smjbg-ieseg,
:is(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) .smjbg-applybar,
.smjbg-sub[data-opt="typo"] :is([data-tg="dFontWeight"],[data-tg="dFontScale"]) .smjbg-tiles):has(>button:nth-of-type(8))>button:nth-of-type(odd):last-of-type{
grid-column:1 / -1!important}
/* a narrow panel: a little less room either side of a name */
@container edopt (max-width:224px){
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops .smjbg-instiles,.smjbg-ie .smjbg-ietabs,.smjbg-ie .smjbg-ieseg,
:is(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) .smjbg-applybar,
.smjbg-sub[data-opt="typo"] :is([data-tg="dFontWeight"],[data-tg="dFontScale"]) .smjbg-tiles)>button{padding:0 4px!important}
.smjbg-app.smjbg-edge #mSub .smjbg-sub[data-opt="typo"] #typoApply>button{padding:0 6px!important}
}
/* ---------- 3 · preview tiles: rectangular cards -------------------------------
Fonts, colours, alignment, spacing, card styles and the price's own styles;
the image editor's ratios, turns, filters and the emoji set. Same border,
radius and states as the option buttons; the picture inside sets the size. */
.smjbg-app.smjbg-edge #mSub :where(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) .smjbg-tg:not(:is([data-tg="dFontWeight"],[data-tg="dFontScale"])) .smjbg-tiles{
gap:6px!important}
.smjbg-app.smjbg-edge #mSub :where(:is(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) .smjbg-tg:not(:is([data-tg="dFontWeight"],[data-tg="dFontScale"])) .smjbg-tile,
.smjbg-ie :is(.smjbg-ieratios,.smjbg-ieacts)>button,.smjbg-ie .smjbg-iefilters>.smjbg-ieft,.smjbg-insprops .smjbg-insemoji>button,
.smjbg-sub[data-opt="price"] .smjbg-seg>button){
border:1px solid var(--ed-line)!important;border-radius:var(--ed-r)!important;background:#fff!important;box-shadow:none!important;outline:none!important;
transform:none!important;transition:var(--ed-t)!important;color:var(--ed-ink2)!important}
.smjbg-app.smjbg-edge #mSub :where(:is(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) .smjbg-tg:not(:is([data-tg="dFontWeight"],[data-tg="dFontScale"])) .smjbg-tile,
.smjbg-ie :is(.smjbg-ieratios,.smjbg-ieacts)>button,.smjbg-ie .smjbg-iefilters>.smjbg-ieft,.smjbg-insprops .smjbg-insemoji>button,
.smjbg-sub[data-opt="price"] .smjbg-seg>button):hover:not(:is(.sel,.on,[aria-pressed="true"],[aria-checked="true"])){
border-color:var(--ed-line-hi)!important;background:var(--ed-fill)!important}
.smjbg-app.smjbg-edge #mSub :where(:is(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) .smjbg-tg:not(:is([data-tg="dFontWeight"],[data-tg="dFontScale"])) .smjbg-tile,
.smjbg-ie :is(.smjbg-ieratios,.smjbg-ieacts)>button,.smjbg-ie .smjbg-iefilters>.smjbg-ieft,.smjbg-insprops .smjbg-insemoji>button,
.smjbg-sub[data-opt="price"] .smjbg-seg>button):is(.sel,.on,[aria-pressed="true"],[aria-checked="true"]){
border-color:var(--ed-acc)!important;background:var(--ed-acc-soft)!important;box-shadow:inset 0 0 0 1px var(--ed-acc)!important;color:var(--ed-acc-hi)!important}
.smjbg-app.smjbg-edge #mSub :where(:is(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) .smjbg-tg:not(:is([data-tg="dFontWeight"],[data-tg="dFontScale"])) .smjbg-tile,
.smjbg-ie :is(.smjbg-ieratios,.smjbg-ieacts)>button,.smjbg-ie .smjbg-iefilters>.smjbg-ieft,.smjbg-insprops .smjbg-insemoji>button,
.smjbg-sub[data-opt="price"] .smjbg-seg>button):focus-visible{box-shadow:var(--ed-ring)!important}
/* a tile's name — the same weight selected or not, as on the option buttons */
.smjbg-app.smjbg-edge #mSub :where(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) .smjbg-tile .smjbg-tl,
.smjbg-app.smjbg-edge #mSub .smjbg-ie :is(.smjbg-ieratios,.smjbg-ieacts)>button span{
font-size:var(--ed-fs-s)!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;color:inherit!important;line-height:1.25!important}
/* ratios and turns: icon over name, one height */
.smjbg-app.smjbg-edge #mSub .smjbg-ie :is(.smjbg-ieratios,.smjbg-ieacts){gap:6px!important}
.smjbg-app.smjbg-edge #mSub .smjbg-ie :is(.smjbg-ieratios,.smjbg-ieacts)>button{min-height:52px!important;height:auto!important;padding:6px 4px!important;gap:4px!important}
/* filters: the preview inside the card, a name under it; a row's cards share one height */
.smjbg-app.smjbg-edge #mSub .smjbg-ie .smjbg-iefilters{gap:6px!important;align-items:stretch!important}
.smjbg-app.smjbg-edge #mSub .smjbg-ie .smjbg-iefilters>.smjbg-ieft{padding:4px 4px 6px!important;gap:5px!important;
font-size:var(--ed-fs-s)!important;font-weight:500!important;line-height:1.25!important}
.smjbg-app.smjbg-edge #mSub .smjbg-ie .smjbg-iefilters>.smjbg-ieft canvas{border-radius:var(--ed-r-in)!important;box-shadow:none!important;transform:none!important}
/* emoji: a square grid of cells */
.smjbg-app.smjbg-edge #mSub .smjbg-insprops .smjbg-insemoji{gap:4px!important}
.smjbg-app.smjbg-edge #mSub .smjbg-insprops .smjbg-insemoji>button{aspect-ratio:1;height:auto!important;padding:0!important;display:flex!important;
align-items:center!important;justify-content:center!important}
/* the price's Detailed / Single choice: a title and a line under it */
.smjbg-app.smjbg-edge #mSub .smjbg-sub[data-opt="price"] .smjbg-seg{gap:6px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.smjbg-app.smjbg-edge #mSub .smjbg-sub[data-opt="price"] .smjbg-seg>button{padding:9px 10px 9px 26px!important;text-align:left!important}
.smjbg-app.smjbg-edge #mSub .smjbg-sub[data-opt="price"] .smjbg-seg>button b{font-size:var(--ed-fs)!important;font-weight:600!important;color:var(--ed-ink)!important}
.smjbg-app.smjbg-edge #mSub .smjbg-sub[data-opt="price"] .smjbg-seg>button.on b{color:var(--ed-acc-hi)!important}
.smjbg-app.smjbg-edge #mSub .smjbg-sub[data-opt="price"] .smjbg-seg>button span{font-size:var(--ed-fs-s)!important;color:var(--ed-muted)!important;line-height:1.35!important}
/* ---------- 4 · buttons ---------------------------------------------------------- */
/* secondary: white, one border — Erase / restore, Restore original, Auto enhance,
Invert, Add / Remove row, Copy / Paste / Reset all, the way back */
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops .smjbg-insadd.alt,.smjbg-insprops .smjbg-bgrm>.smjbg-instile,.smjbg-insprops .smjbg-pcrows>button,
.smjbg-ie .smjbg-iebtn,.smjbg-ie .smjbg-iefoot>button,.smjbg-ie .smjbg-ieback,.smjbg-insback.sel>button,
.smjbg-sub[data-opt="price"] :is(#autoTotal,.smjbg-b:not(.pri))){
display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;
height:var(--ed-h)!important;min-height:var(--ed-h)!important;padding:0 12px!important;margin:0!important;
border:1px solid var(--ed-line)!important;border-radius:var(--ed-r)!important;background:#fff!important;box-shadow:none!important;outline:none!important;
font-family:inherit!important;font-size:var(--ed-fs)!important;font-weight:600!important;line-height:1!important;letter-spacing:0!important;text-transform:none!important;
color:var(--ed-ink2)!important;white-space:nowrap!important;transform:none!important;transition:var(--ed-t)!important}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops .smjbg-insadd.alt,.smjbg-insprops .smjbg-bgrm>.smjbg-instile,.smjbg-insprops .smjbg-pcrows>button,
.smjbg-ie .smjbg-iebtn,.smjbg-ie .smjbg-iefoot>button,.smjbg-ie .smjbg-ieback,.smjbg-insback.sel>button,
.smjbg-sub[data-opt="price"] :is(#autoTotal,.smjbg-b:not(.pri))):hover:not(:disabled){
border-color:var(--ed-line-hi)!important;background:var(--ed-fill)!important;color:var(--ed-ink)!important}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops .smjbg-insadd.alt,.smjbg-insprops .smjbg-bgrm>.smjbg-instile,.smjbg-insprops .smjbg-pcrows>button,
.smjbg-ie .smjbg-iebtn,.smjbg-ie .smjbg-iefoot>button,.smjbg-ie .smjbg-ieback,.smjbg-insback.sel>button,
.smjbg-sub[data-opt="price"] :is(#autoTotal,.smjbg-b:not(.pri))):active:not(:disabled){background:var(--ed-press)!important}
/* primary: the one filled button — Crop on canvas, and Edit image with several selected */
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops,.smjbg-ie) .smjbg-insadd:not(.alt){
display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;width:100%!important;
height:var(--ed-h)!important;min-height:var(--ed-h)!important;padding:0 12px!important;margin:0 0 8px!important;
border:1px solid var(--ed-acc)!important;border-radius:var(--ed-r)!important;background:var(--ed-acc)!important;background-image:none!important;
box-shadow:none!important;font-family:inherit!important;font-size:var(--ed-fs)!important;font-weight:600!important;line-height:1!important;
letter-spacing:0!important;color:#fff!important;transform:none!important;transition:var(--ed-t)!important}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops,.smjbg-ie) .smjbg-insadd:not(.alt):hover:not(:disabled){
background:var(--ed-acc-hi)!important;border-color:var(--ed-acc-hi)!important}
/* the icons inside buttons */
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops .smjbg-insadd,.smjbg-ie .smjbg-insadd,.smjbg-ie .smjbg-iebtn,.smjbg-ie .smjbg-iefoot>button,.smjbg-ie .smjbg-ieback) svg{
width:15px!important;height:15px!important;flex:0 0 auto!important;margin:0!important}
/* full-width secondary buttons stay full width */
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops .smjbg-insadd.alt,.smjbg-ie .smjbg-iebtn){display:flex!important;width:100%!important;margin:0 0 8px!important}
.smjbg-app.smjbg-edge #mSub .smjbg-insprops .smjbg-bgrm{display:flex!important;gap:6px!important;margin:0 0 8px!important}
.smjbg-app.smjbg-edge #mSub .smjbg-insprops .smjbg-bgrm>*{flex:1 1 0!important;min-width:0!important}
.smjbg-app.smjbg-edge #mSub .smjbg-insprops .smjbg-pcrows{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important;margin:8px 0 0!important}
.smjbg-app.smjbg-edge #mSub .smjbg-insprops .smjbg-pcrows>button{width:100%!important;padding:0 8px!important}
/* the image editor's foot: Copy edits, Paste edits, Reset all */
.smjbg-app.smjbg-edge #mSub .smjbg-ie .smjbg-iefoot{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
.smjbg-app.smjbg-edge #mSub .smjbg-ie .smjbg-iefoot>button{width:100%!important;padding:0 6px!important;font-size:12px!important;flex-direction:row!important}
.smjbg-app.smjbg-edge #mSub .smjbg-ie .smjbg-iefoot>button svg{display:none!important}
.smjbg-app.smjbg-edge #mSub .smjbg-ie .smjbg-iefoot>button.rm:not(:disabled){color:var(--er-700,#9e2b32)!important}
/* disabled */
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops,.smjbg-ie,.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) button:disabled{
opacity:.45!important;cursor:not-allowed!important}
/* icon-only: Compare in the editor's header, and the price rows' add / subtract / remove */
.smjbg-app.smjbg-edge #mSub :where(.smjbg-ie .smjbg-iecmp,.smjbg-sub[data-opt="price"] :is(.smjbg-tybtn,.smjbg-pract button)){
width:var(--ed-h)!important;min-width:var(--ed-h)!important;height:var(--ed-h)!important;padding:0!important;border-radius:var(--ed-r)!important;
display:inline-flex!important;align-items:center!important;justify-content:center!important;box-shadow:none!important}
.smjbg-app.smjbg-edge #mSub .smjbg-ie .smjbg-iecmp{border:1px solid var(--ed-line)!important;background:#fff!important;color:var(--ed-ink2)!important}
/* the price rows' add / subtract and remove sit in narrow table columns (13% each), so they stay 24px */
.smjbg-app.smjbg-edge #mSub .smjbg-sub[data-opt="price"] :is(.smjbg-tybtn,.smjbg-pract button){width:24px!important;min-width:24px!important;height:24px!important;
min-height:24px!important;margin:0 auto!important}
.smjbg-app.smjbg-edge #mSub .smjbg-sub[data-opt="price"] :is(.smjbg-tybtn,.smjbg-pract button) svg{width:13px!important;height:13px!important}
/* text buttons: Reset adjustments, Reset crop, Add another row, Show all */
.smjbg-app.smjbg-edge #mSub :where(.smjbg-ie .smjbg-iereset,.smjbg-sub[data-opt="price"] .smjbg-praddrow,
:is(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) .smjbg-cardmore){
display:inline-flex!important;align-items:center!important;gap:6px!important;height:28px!important;min-height:28px!important;padding:0 8px!important;
border:0!important;border-radius:var(--ed-r)!important;background:transparent!important;box-shadow:none!important;
font-family:inherit!important;font-size:var(--ed-fs)!important;font-weight:600!important;line-height:1!important;letter-spacing:0!important;
color:var(--ed-acc-hi)!important;text-decoration:none!important;transition:var(--ed-t)!important}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-ie .smjbg-iereset,.smjbg-sub[data-opt="price"] .smjbg-praddrow,
:is(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) .smjbg-cardmore):hover:not(:disabled){background:var(--ed-acc-soft)!important}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-ie .smjbg-iereset,.smjbg-sub[data-opt="price"] .smjbg-praddrow) svg{width:15px!important;height:15px!important}
.smjbg-app.smjbg-edge #mSub .smjbg-ie .smjbg-iereset:disabled{background:transparent!important;color:var(--ed-muted)!important}
/* focus for every button in the element editors */
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops,.smjbg-ie,.smjbg-insback,.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) button:focus-visible{
outline:none!important;box-shadow:var(--ed-ring)!important}
/* ---------- 5 · fields: text, numbers, menus -------------------------------------- */
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops,.smjbg-ie,.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) :is(select,input:is([type="text"],[type="number"],:not([type])),textarea){
height:var(--ed-h)!important;min-height:var(--ed-h)!important;padding:0 10px!important;
border:1px solid var(--ed-line)!important;border-radius:var(--ed-r)!important;background-color:#fff!important;box-shadow:none!important;outline:none!important;
font-family:inherit!important;font-size:var(--ed-fs)!important;font-weight:450!important;line-height:1.2!important;color:var(--ed-ink)!important;
transition:var(--ed-t)!important}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops,.smjbg-ie,.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) textarea{height:auto!important;padding:7px 10px!important;line-height:1.4!important}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops,.smjbg-ie,.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) :is(select,input:is([type="text"],[type="number"],:not([type])),textarea):hover{
border-color:var(--ed-line-hi)!important}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops,.smjbg-ie,.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) :is(select,input:is([type="text"],[type="number"],:not([type])),textarea):focus{
border-color:var(--ed-acc)!important;box-shadow:var(--ed-ring)!important;outline:none!important}
/* ---------- 5b · room for the focus ring ----------------------------------------------
The host of the element editors hides anything wider than the panel, and its edge
is exactly the edge of the controls — so a focus ring (or the old slider outline)
lost its left and right sides and showed as two lines, one above and one below.
The host now reaches 4px further on each side and pads them back, so the controls
stay exactly where they were and a ring is drawn whole. */
.smjbg-app.smjbg-edge #mSub .smjbg-inshost{margin-left:-4px!important;margin-right:-4px!important;padding-left:4px!important;padding-right:4px!important;
max-width:none!important}
/* ---------- 6 · sliders ------------------------------------------------------------
A thin track and a round handle. The handle shows the keyboard focus; the
slider's own box never draws an outline — that box-wide outline, clipped at the
panel's sides, was the extra blue line above and below a slider in use. */
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops,.smjbg-ie,.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) input[type="range"]{
-webkit-appearance:none!important;appearance:none!important;display:block;width:100%!important;height:20px!important;min-height:0!important;margin:0!important;padding:0!important;
border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:none!important;cursor:pointer}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops,.smjbg-ie,.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) input[type="range"]:is(:focus,:focus-visible,:active,:hover){
outline:none!important;box-shadow:none!important;border:0!important}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops,.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) input[type="range"]::-webkit-slider-runnable-track{
height:4px!important;border-radius:2px!important;background:var(--ed-line)!important;border:0!important;box-shadow:none!important}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops,.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) input[type="range"]::-moz-range-track{
height:4px!important;border-radius:2px!important;background:var(--ed-line)!important;border:0!important}
.smjbg-app.smjbg-edge #mSub .smjbg-ie input[type="range"]::-webkit-slider-runnable-track{height:4px!important;border-radius:2px!important;border:0!important;box-shadow:none!important}
.smjbg-app.smjbg-edge #mSub .smjbg-ie input[type="range"]::-moz-range-track{height:4px!important;border-radius:2px!important;border:0!important}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops,.smjbg-ie,.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) input[type="range"]::-moz-range-progress{height:4px!important;border-radius:2px!important}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops,.smjbg-ie,.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none!important;appearance:none!important;width:14px!important;height:14px!important;margin-top:-5px!important;border-radius:50%!important;
background:#fff!important;border:2px solid var(--ed-acc)!important;box-shadow:0 1px 2px rgba(16,24,40,.18)!important;transform:none!important;transition:box-shadow .12s ease!important}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops,.smjbg-ie,.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) input[type="range"]::-moz-range-thumb{
width:10px!important;height:10px!important;border-radius:50%!important;background:#fff!important;border:2px solid var(--ed-acc)!important;box-shadow:0 1px 2px rgba(16,24,40,.18)!important}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops,.smjbg-ie,.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) input[type="range"]:hover::-webkit-slider-thumb{
box-shadow:0 0 0 4px color-mix(in srgb,var(--p-600,#2667e7) 12%,transparent),0 1px 2px rgba(16,24,40,.18)!important}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops,.smjbg-ie,.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) input[type="range"]:focus-visible::-webkit-slider-thumb{
box-shadow:var(--ed-ring)!important}
.smjbg-app.smjbg-edge #mSub :where(.smjbg-insprops,.smjbg-ie,.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) input[type="range"]:focus-visible::-moz-range-thumb{
box-shadow:var(--ed-ring)!important}
/* ---------- 7 · colour swatches ----------------------------------------------------- */
.smjbg-app.smjbg-edge #mSub .smjbg-insprops .smjbg-csw{width:28px!important;height:28px!important;border-radius:var(--ed-r)!important;
border:1px solid var(--ed-line)!important;box-shadow:inset 0 0 0 2px #fff!important;transform:none!important}
.smjbg-app.smjbg-edge #mSub .smjbg-insprops .smjbg-csw:hover{border-color:var(--ed-line-hi)!important}
.smjbg-app.smjbg-edge #mSub .smjbg-insprops .smjbg-csw:focus-visible{outline:none!important;box-shadow:inset 0 0 0 2px #fff,var(--ed-ring)!important}
/* the image editor's colour dots (Colour mix, Duotone): squares like every other swatch */
.smjbg-app.smjbg-edge #mSub .smjbg-ie :is(.smjbg-iebands,.smjbg-ieduo)>button{border-radius:var(--ed-r-in)!important}
/* ---------- 8 · the editor's header ------------------------------------------------- */
/* the way back, the element's name and its preset. The name is set like the image
editor's own title (Edit image, Erase & restore): sentence case, no tracking — so
Price calculation or Gradient / Glow fit instead of being cut at the panel's edge.
The name keeps its full width and the preset takes what is left; only a name
longer than the whole row would end in "…". */
.smjbg-app.smjbg-edge #mSub .smjbg-insback.sel{display:grid!important;grid-template-columns:auto minmax(0,max-content) minmax(0,1fr)!important;
align-items:center!important;gap:6px!important}
.smjbg-app.smjbg-edge #mSub .smjbg-insback.sel>b{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
font-size:14px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;color:var(--ed-ink)!important}
.smjbg-app.smjbg-edge #mSub .smjbg-insback.sel>em{min-width:0!important}
.smjbg-app.smjbg-edge #mSub .smjbg-insback.sel>button{height:28px!important;min-height:28px!important;padding:0 8px 0 4px!important;gap:4px!important;font-weight:500!important}
.smjbg-app.smjbg-edge #mSub .smjbg-insback.sel>button svg{width:14px!important;height:14px!important}
.smjbg-app.smjbg-edge #mSub .smjbg-ie .smjbg-iehead b{font-size:14px!important;font-weight:600!important;letter-spacing:0!important;color:var(--ed-ink)!important}
.smjbg-app.smjbg-edge #mSub .smjbg-ie .smjbg-ieback{height:28px!important;min-height:28px!important;padding:0 8px 0 4px!important;gap:4px!important;font-weight:500!important}
.smjbg-app.smjbg-edge #mSub .smjbg-ie .smjbg-iecmp{width:28px!important;min-width:28px!important;height:28px!important}
/* ---------- 9 · a picture's editor: the same frame as every other element ------------
The Uploads card around it is dropped while a picture is selected, so its editor
has the full panel width and no second heading, like Text or Shape. */
.smjbg-app.smjbg-edge #mSub #imgFreeCard:has(:is(.smjbg-insprops,.smjbg-ie)){border:0!important;padding:0!important;margin:0!important;
border-radius:0!important;background:transparent!important;box-shadow:none!important}
.smjbg-app.smjbg-edge #mSub #imgFreeCard:has(:is(.smjbg-insprops,.smjbg-ie))>h3{display:none!important}
/* the price's on / off switch: one full-width row */
.smjbg-app.smjbg-edge #mSub .smjbg-sub[data-opt="price"] .smjbg-toggles{display:block!important;width:100%!important;max-width:none!important;
height:auto!important;overflow:visible!important;margin:0 0 10px!important}
.smjbg-app.smjbg-edge #mSub .smjbg-sub[data-opt="price"] .smjbg-toggles .smjbg-tgl{display:flex!important;align-items:center!important;gap:10px!important;
width:100%!important;height:auto!important;min-height:40px!important;margin:0!important;padding:8px 12px!important;
border:1px solid var(--ed-line)!important;border-radius:var(--ed-r)!important;background:#fff!important;box-shadow:none!important}
.smjbg-app.smjbg-edge #mSub .smjbg-sub[data-opt="price"] .smjbg-toggles .smjbg-tgl:hover{border-color:var(--ed-line-hi)!important}
.smjbg-app.smjbg-edge #mSub .smjbg-sub[data-opt="price"] .smjbg-toggles .smjbg-tgl .tt{font-size:var(--ed-fs)!important;font-weight:600!important;
line-height:1.3!important;color:var(--ed-ink)!important;white-space:normal!important;text-transform:none!important;letter-spacing:0!important;max-width:none!important}
/* ---------- 10 · a picture's uploads strip, above its settings ----------------------- */
.smjbg-app.smjbg-edge #mSub .smjbg-imgpick .smjbg-insmedia.mini button.pri{grid-column:1 / -1!important;height:var(--ed-h)!important;min-height:var(--ed-h)!important;
border:1px solid var(--ed-acc)!important;border-radius:var(--ed-r)!important;background:var(--ed-acc)!important;background-image:none!important;color:#fff!important;
white-space:nowrap!important;font-size:var(--ed-fs)!important;font-weight:600!important;box-shadow:none!important;transform:none!important}
.smjbg-app.smjbg-edge #mSub .smjbg-imgpick .smjbg-insmedia.mini button.pri:hover:not(:disabled){background:var(--ed-acc-hi)!important;border-color:var(--ed-acc-hi)!important;box-shadow:none!important}
.smjbg-app.smjbg-edge #mSub .smjbg-imgpick .smjbg-insimgs>button{border-radius:var(--ed-r)!important}
/* ---------- 11 · the brochure text and price: pictures that fit their tiles ------------ */
/* colours: a square chip filling its tile (it was squeezed into a tall pill) */
.smjbg-app.smjbg-edge #mSub .smjbg-sub[data-opt="typo"] [data-tg="dTypoColour"] .smjbg-tile{padding:3px!important;aspect-ratio:1 / 1;height:auto!important}
.smjbg-app.smjbg-edge #mSub .smjbg-sub[data-opt="typo"] [data-tg="dTypoColour"] .smjbg-tile>.smjbg-xpv{display:block!important;width:100%!important;height:100%!important;
margin:0!important;border-radius:var(--ed-r-in)!important}
.smjbg-app.smjbg-edge #mSub .smjbg-sub[data-opt="typo"] [data-tg="dTypoColour"] .smjbg-tile>.smjbg-xpv>i{width:100%!important;height:100%!important;
border-radius:var(--ed-r-in)!important;box-sizing:border-box!important}
/* text alignment: its two choices share the row */
.smjbg-app.smjbg-edge #mSub :where(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) [data-tg="xAlign"] .smjbg-tiles{grid-template-columns:repeat(2,minmax(0,1fr))!important}
/* the alignment and spacing pictures stay inside their card */
.smjbg-app.smjbg-edge #mSub :where(.smjbg-sub[data-opt="typo"],.smjbg-sub[data-opt="price"]) :is(.smjbg-alpv,.smjbg-sppv){width:100%!important;max-width:78px!important;
box-sizing:border-box!important;margin:0 auto!important}
/* the price rows: column names in the panel's label style; the actions column
needs no name (its button says what it does), so a cut-off "AC…" is not shown */
.smjbg-app.smjbg-edge #mSub .smjbg-sub[data-opt="price"] .smjbg-prtable thead th{background:transparent!important;font-size:11px!important;font-weight:500!important;
letter-spacing:0!important;text-transform:none!important;color:var(--ed-muted)!important;padding-top:0!important;padding-bottom:6px!important;
border-bottom:1px solid var(--ed-line)!important}
.smjbg-app.smjbg-edge #mSub .smjbg-sub[data-opt="price"] .smjbg-prtable thead th.typ{padding-left:0!important;padding-right:0!important;text-align:center!important}
.smjbg-app.smjbg-edge #mSub .smjbg-sub[data-opt="price"] .smjbg-prtable thead th.act{font-size:0!important}
.smjbg-app.smjbg-edge #mSub .smjbg-sub[data-opt="price"] .smjbg-prtable td input{padding:0 8px!important}
}
/* ===== end 3.42.0 ===== */
/* ===== 3.43.0 — Nested options: sub-option containers and option trays =====
Two shared pieces for every editor section in the side panel:
· .smjbg-nest — the settings a choice brings with it (Gradient → colours and
angle, Outline → colour and letters, Glow / Highlight / Background → colour,
Border → colour and width; in Edit image: Auto enhance, Subject / Background,
Colour mix, a filter's intensity, Duotone and Shadow) sit together in one
container right under that choice.
· .smjbg-tray — a row of choices that can be wider than the panel scrolls
sideways in one contained row instead of wrapping (library categories, the
Insert tabs and image groups, each platform's sizes in Layout, Visual style,
Emoji, Duotone, crop ratios, and the brochure text's and price's galleries).
Rows that always fit keep their grid. A fade and a small arrow show which
side has more; the arrow moves the row along.
The trays are marked by the editor script; this block only draws them.
Desktop only: below 1024px the wrapper is transparent and nothing moves. */
.smjbg-nest{display:contents}
/* a colour band's name still heads its sliders when they are wrapped (all sizes) */
.smjbg-iebands + .smjbg-nest > .smjbg-iehint:first-child{margin:0 0 6px;font-weight:600;color:var(--ui-sub,#565b61)}
@media (min-width:1024px){
.smjbg-app.smjbg-edge #mSub{--ed-line-soft:var(--n-100,#eaedf0);--ed-r-box:8px;--tray-bg:var(--n-050,#f6f7f9);--tray-pad:6px}
/* ---------- 1 · sub-option container ---------------------------------------------------- */
.smjbg-app.smjbg-edge #mSub .smjbg-nest{display:block!important;margin:0 0 12px!important;padding:10px 12px!important;
background:var(--tray-bg)!important;border:1px solid var(--ed-line-soft)!important;border-radius:var(--ed-r-box)!important;box-shadow:none!important;
min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
/* close to the choice it belongs to */
.smjbg-app.smjbg-edge #mSub :is(.smjbg-insrow,.smjbg-iebtn,.smjbg-ieseg,.smjbg-iebands,.smjbg-ieduo,.smjbg-iefilters,.smjbg-ierow):has(+ .smjbg-nest){
margin-bottom:8px!important}
.smjbg-app.smjbg-edge #mSub .smjbg-nest>*{margin-top:0!important}
.smjbg-app.smjbg-edge #mSub .smjbg-nest>*:not(:last-child){margin-bottom:10px!important}
.smjbg-app.smjbg-edge #mSub .smjbg-nest>*:last-child{margin-bottom:0!important}
/* the colour band's name heads its sliders */
.smjbg-app.smjbg-edge #mSub .smjbg-nest>.smjbg-iehint:first-child{margin:0 0 8px!important;font-weight:600!important;color:var(--ed-ink2)!important}
/* the "find the subject" note inside it needs no box of its own */
.smjbg-app.smjbg-edge #mSub .smjbg-nest>.smjbg-iemask{margin:0!important}
/* ---------- 2 · option tray: one row that scrolls sideways --------------------------------- */
.smjbg-app.smjbg-edge #mSub .smjbg-tray{display:flex!important;flex-wrap:nowrap!important;flex-direction:row!important;align-items:stretch!important;
justify-content:flex-start!important;gap:6px!important;grid-template-columns:none!important;
width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;max-height:none!important;
margin:0 0 6px!important;padding:var(--tray-pad)!important;box-sizing:border-box!important;
overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;
background:var(--tray-bg)!important;border:1px solid var(--ed-line-soft)!important;border-radius:var(--ed-r-box)!important;box-shadow:none!important;
scrollbar-width:thin;scrollbar-color:transparent transparent}
/* the scrollbar is there, but quiet until the pointer is on the row */
.smjbg-app.smjbg-edge #mSub .smjbg-tray:is(:hover,:focus-within){scrollbar-color:var(--ed-line-hi) transparent}
.smjbg-app.smjbg-edge #mSub .smjbg-tray::-webkit-scrollbar{display:block!important;height:6px!important;background:transparent}
.smjbg-app.smjbg-edge #mSub .smjbg-tray::-webkit-scrollbar-thumb{background:transparent;border-radius:3px}
.smjbg-app.smjbg-edge #mSub .smjbg-tray:is(:hover,:focus-within)::-webkit-scrollbar-thumb{background:var(--ed-line-hi)}
/* the side that has more: a fade over the row with a small arrow — click it to move
along by most of a row. Drawn over the row, never over the tray's own edge. */
.smjbg-app.smjbg-edge #mSub .smjbg-tray::before,
.smjbg-app.smjbg-edge #mSub .smjbg-tray::after{content:""!important;display:block!important;position:sticky!important;z-index:3;flex:0 0 34px!important;
align-self:stretch!important;margin-block:calc(var(--tray-pad) * -1)!important;pointer-events:none;opacity:0;cursor:pointer;
transition:opacity .15s ease}
.smjbg-app.smjbg-edge #mSub .smjbg-tray::before{left:0;margin-inline:calc(var(--tray-pad) * -1) -34px!important;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10.5' fill='%23fff' stroke='%23d9dde1'/%3E%3Cpath d='M12.5 7l-4 4 4 4' fill='none' stroke='%233e4348' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left 3px center / 22px 22px,linear-gradient(90deg,var(--tray-bg) 55%,transparent)}
.smjbg-app.smjbg-edge #mSub .smjbg-tray::after{right:0;margin-inline:-34px calc(var(--tray-pad) * -1)!important;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10.5' fill='%23fff' stroke='%23d9dde1'/%3E%3Cpath d='M9.5 7l4 4-4 4' fill='none' stroke='%233e4348' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 3px center / 22px 22px,linear-gradient(270deg,var(--tray-bg) 55%,transparent)}
.smjbg-app.smjbg-edge #mSub .smjbg-tray[data-more*="l"]::before,
.smjbg-app.smjbg-edge #mSub .smjbg-tray[data-more*="r"]::after{opacity:1;pointer-events:auto}
/* every item keeps its size: the row scrolls, nothing wraps or squeezes */
.smjbg-app.smjbg-edge #mSub .smjbg-tray>*{flex:0 0 auto!important;margin:0!important;min-width:0!important;max-width:none!important;
grid-column:auto!important;justify-self:auto!important}
.smjbg-app.smjbg-edge #mSub .smjbg-tray[data-tray="card"]>*{flex-basis:72px!important;width:72px!important}
.smjbg-app.smjbg-edge #mSub .smjbg-tray[data-tray="wide"]>*{flex-basis:104px!important;width:104px!important}
.smjbg-app.smjbg-edge #mSub .smjbg-tray[data-tray="font"]>*{flex-basis:46px!important;width:46px!important}
.smjbg-app.smjbg-edge #mSub .smjbg-tray[data-tray="tile"]>*{flex-basis:54px!important;width:54px!important}
.smjbg-app.smjbg-edge #mSub .smjbg-tray[data-tray="swatch"]>*{flex-basis:30px!important;width:30px!important;height:30px!important;aspect-ratio:1 / 1}
.smjbg-app.smjbg-edge #mSub .smjbg-tray[data-tray="duo"]>*{flex-basis:34px!important;width:34px!important;height:34px!important;aspect-ratio:1 / 1}
.smjbg-app.smjbg-edge #mSub .smjbg-tray[data-tray="glyph"]>*{flex-basis:34px!important;width:34px!important;height:34px!important;aspect-ratio:1 / 1}
/* a platform's sizes: two share the row, one takes half of it, more scroll */
.smjbg-app.smjbg-edge #mSub .smjbg-tray[data-tray="size"]>*{flex:1 0 96px!important;width:auto!important;max-width:calc(50% - 3px)!important}
.smjbg-app.smjbg-edge #mSub .smjbg-tray[data-tray="size"]:has(>*:nth-child(3))>*{flex:0 0 96px!important;max-width:none!important}
.smjbg-app.smjbg-edge #mSub .smjbg-tray[data-tray="size"]>.smjbg-szc{padding:8px!important}
.smjbg-app.smjbg-edge #mSub .smjbg-tray[data-tray="size"] .smjbg-szpx{white-space:nowrap!important;font-size:11px!important}
/* chips: categories, tabs, groups and the image's visual styles */
.smjbg-app.smjbg-edge #mSub .smjbg-tray[data-tray="chips"]>*{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;
width:auto!important;height:30px!important;min-height:30px!important;max-height:none!important;padding:0 12px!important;
border:1px solid var(--ed-line)!important;border-radius:var(--ed-r)!important;background:#fff!important;box-shadow:none!important;outline:none!important;
font-family:inherit!important;font-size:var(--ed-fs)!important;font-weight:500!important;line-height:1!important;letter-spacing:0!important;text-transform:none!important;
color:var(--ed-ink2)!important;white-space:nowrap!important;overflow:visible!important;transform:none!important;transition:var(--ed-t)!important;cursor:pointer;opacity:1}
.smjbg-app.smjbg-edge #mSub .smjbg-tray[data-tray="chips"]>*:hover:not(:is(.on,.sel,[aria-selected="true"],[aria-pressed="true"])){
border-color:var(--ed-line-hi)!important;background:var(--ed-fill)!important;color:var(--ed-ink)!important}
.smjbg-app.smjbg-edge #mSub .smjbg-tray[data-tray="chips"]>*:is(.on,.sel,[aria-selected="true"],[aria-pressed="true"]){
border-color:var(--ed-acc)!important;background:var(--ed-acc-soft)!important;color:var(--ed-acc-hi)!important}
.smjbg-app.smjbg-edge #mSub .smjbg-tray[data-tray="chips"]>*:focus-visible{box-shadow:var(--ed-ring)!important}
.smjbg-app.smjbg-edge #mSub .smjbg-tray[data-tray="chips"]>.empty:not(.on){opacity:.5}
/* a category's count beside its name */
.smjbg-app.smjbg-edge #mSub .smjbg-tray[data-tray="chips"]>* em{font-style:normal!important;font-size:11px!important;font-weight:500!important;
color:var(--ed-muted)!important;opacity:1!important}
.smjbg-app.smjbg-edge #mSub .smjbg-tray[data-tray="chips"]>*:is(.on,.sel) em{color:var(--ed-acc-hi)!important}
/* Show all: the card styles open as the full grid again, and Show less closes it */
.smjbg-app.smjbg-edge #mSub .smjbg-tray.open{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
overflow-x:hidden!important;overflow-y:auto!important;max-height:420px!important}
.smjbg-app.smjbg-edge #mSub .smjbg-tray.open>*{width:auto!important;flex:none!important}
.smjbg-app.smjbg-edge #mSub .smjbg-tray.open::before,
.smjbg-app.smjbg-edge #mSub .smjbg-tray.open::after{display:none!important}
/* ---------- 3 · the big libraries keep their grid, inside the same container ---------------
Colour and font themes: the gallery under the categories scrolls up and down inside
a bounded box, so its cards never look cut off by the next section. */
.smjbg-app.smjbg-edge #mSub .smjbg-tg.smjbg-libg>.smjbg-tiles{padding:var(--tray-pad)!important;background:var(--tray-bg)!important;
border:1px solid var(--ed-line-soft)!important;border-radius:var(--ed-r-box)!important;box-shadow:none!important}
}
/* ===== end 3.43.0 ===== */
/* ===== 3.44.0 — Element settings in containers, not folding groups =====
Text, Image and every other element: in the desktop editor each group (Text,
Colour, Effects, Background, Fit & shape, Visual style, Outline, Appearance,
Canvas, …) is an open container — its title on top and all of its settings
inside, nothing folded behind a chevron. A choice's own settings sit in their
sub-container inside it (3.43), and a row of options wider than the container
scrolls sideways within it. The picture's top tools get the same container.
Desktop only — the phone keeps its folding groups. */
@media (min-width:1024px){
.smjbg-app.smjbg-edge #mSub{--ed-line-card:#e3e6ea}
/* the container */
.smjbg-app.smjbg-edge #mSub .smjbg-insprops :is(.smjbg-pgrp,.smjbg-pgtop){display:block!important;margin:0 0 10px!important;padding:12px!important;
background:#fff!important;border:1px solid var(--ed-line-card)!important;border-radius:var(--ed-r-box)!important;box-shadow:none!important;
min-width:0!important;box-sizing:border-box!important}
.smjbg-app.smjbg-edge #mSub .smjbg-insprops .smjbg-pgrp:last-child{border-bottom:1px solid var(--ed-line-card)!important}
/* its title: a heading, not a button */
.smjbg-app.smjbg-edge #mSub .smjbg-insprops .smjbg-pgrp>summary{display:flex!important;align-items:center!important;min-height:0!important;height:auto!important;
margin:0 0 12px!important;padding:0!important;cursor:default!important;font-size:13px!important;font-weight:600!important;line-height:1.3!important;
letter-spacing:0!important;color:var(--ed-ink)!important;background:none!important;border:0!important;box-shadow:none!important;user-select:none}
.smjbg-app.smjbg-edge #mSub .smjbg-insprops .smjbg-pgrp>summary svg{display:none!important}
.smjbg-app.smjbg-edge #mSub .smjbg-insprops .smjbg-pgrp>summary::-webkit-details-marker{display:none!important}
/* its settings */
.smjbg-app.smjbg-edge #mSub .smjbg-insprops .smjbg-pgbody{padding:0!important;margin:0!important}
.smjbg-app.smjbg-edge #mSub .smjbg-insprops :is(.smjbg-pgbody,.smjbg-pgtop)>*:last-child{margin-bottom:0!important}
}
/* ===== end 3.44.0 ===== */
/* ===== 3.45.0 — Footer: one Help menu and social links ===== */
/* Footer only. User Guide, Terms & Conditions, Privacy Policy and Contact & Support
now open from one Help button, and the site's YouTube, Facebook and Instagram links
sit beside it. The zoom controls and the copyright keep their places and styles.
Wide screens: Help opens a small menu above the footer. Phones and tablets: the
footer sheet shows Help, which unfolds in place, then the social links. */
.smjbg-foot-menu[hidden]{display:none!important}
.smjbg-foot-chev{width:14px;height:14px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.smjbg-foot-soc{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;text-decoration:none!important;
-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,color .15s ease,opacity .15s ease}
.smjbg-foot-soc svg{display:block;width:18px;height:18px;fill:currentColor;pointer-events:none}
.smjbg-foot-soct{font-size:12px;font-weight:600;line-height:1}
/* a platform with no address yet: shown to site admins only, dimmed, with a + */
.smjbg-foot-socset{position:relative;opacity:.5}
.smjbg-foot-socset:hover,.smjbg-foot-socset:focus-visible{opacity:1}
.smjbg-foot-socset::after{content:"+";position:absolute;top:3px;right:3px;width:11px;height:11px;border-radius:50%;
background:var(--ui-accent,#2667e7);color:#fff;font:700 10px/11px system-ui,-apple-system,"Segoe UI",sans-serif;text-align:center}
@keyframes smjbg-footmenu{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* ---- wide screens -------------------------------------------------------- */
@media (min-width:1024px){
.smjbg-foot-help{position:relative;display:inline-flex;align-items:center;flex:0 0 auto}
.smjbg-foot-helpbtn{display:inline-flex;align-items:center;gap:6px}
/* the menu opens upwards, so the chevron points up until it is open */
.smjbg-foot-helpbtn .smjbg-foot-chev{transform:rotate(180deg);transition:transform .15s ease}
.smjbg-foot-helpbtn[aria-expanded="true"] .smjbg-foot-chev{transform:none}
.smjbg-foot-menu{position:absolute;left:0;bottom:calc(100% + 8px);z-index:80;display:flex;flex-direction:column;align-items:stretch;gap:2px;
min-width:224px;margin:0;padding:6px;box-sizing:border-box;background:#fff;border:1px solid #e4e7ec;border-radius:12px;
box-shadow:0 16px 36px rgba(16,24,40,.14),0 3px 8px rgba(16,24,40,.06);animation:smjbg-footmenu .14s ease-out}
.smjbg-foot-menu button{display:flex;align-items:center;width:100%;text-align:left;white-space:nowrap}
.smjbg-foot-sep{display:block;flex:0 0 auto;width:1px;height:18px;margin:0 6px;background:#e1e4e9}
.smjbg-foot-social{display:inline-flex;align-items:center;gap:2px;flex:0 0 auto}
.smjbg-foot-soc{width:32px;height:32px;border-radius:8px;color:#5d636a}
.smjbg-foot-soc:hover{background:#f2f3f7}
.smjbg-foot-soc:focus-visible{outline:2px solid var(--ui-accent,#2667e7);outline-offset:1px}
/* the editor's footer (desktop): Help where the four links were, same button style */
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-links .smjbg-foot-helpbtn{gap:6px!important;padding:0 8px 0 10px!important;font-size:13px!important;
--smjbg-fic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.2 9.1a2.9 2.9 0 0 1 5.6 1c0 1.9-2.8 2.7-2.8 2.7'/%3E%3Cpath d='M12 16.9h.01'/%3E%3C/svg%3E")}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-links .smjbg-foot-helpbtn::before{display:block!important}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-links .smjbg-foot-helpbtn[aria-expanded="true"]{background:var(--rsk-canvas,#f2f3f7)!important;color:var(--ui-ink,#1c2024)!important}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-links .smjbg-foot-helpbtn[aria-expanded="true"]::before{opacity:1}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-links .smjbg-foot-helpbtn .smjbg-foot-chev{opacity:.7}
/* its menu floats just above the footer's top line */
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-links .smjbg-foot-menu{bottom:calc(100% + 18px)}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-links .smjbg-foot-menu button{justify-content:flex-start!important;width:100%!important;height:36px!important;
padding:0 10px!important;gap:10px!important;border-radius:8px!important;color:var(--rsk-ink2,#3d434a)!important;font-size:13px!important;font-weight:500!important}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-links .smjbg-foot-menu button::before{display:block!important;width:16px;height:16px;opacity:.7}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-links .smjbg-foot-menu button:hover{background:var(--rsk-canvas,#f2f3f7)!important;color:var(--ui-ink,#1c2024)!important}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-links .smjbg-foot-menu button:hover::before{opacity:1}
/* the social links: the footer's quiet grey, the platform's colour on hover */
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-soc{color:var(--rsk-sub,#4b5159)}
.smjbg-app.smjbg-edge .smjbg-foot .smjbg-foot-soc:hover{background:var(--rsk-canvas,#f2f3f7)}
.smjbg-foot-soc[data-soc="youtube"]:hover{color:#ff0000!important}
.smjbg-foot-soc[data-soc="facebook"]:hover{color:#0866ff!important}
.smjbg-foot-soc[data-soc="instagram"]:hover{color:#e4405f!important}
}
/* ---- phones and tablets: the footer sheet ---------------------------------- */
@media (max-width:1023px){
/* a short screen scrolls the sheet rather than cutting it off; one column, never wrapped into two */
.smjbg-app .smjbg-foot-in{flex-wrap:nowrap;max-height:calc(100% - var(--mtop,52px) - env(safe-area-inset-top,0px) - 12px);overflow-y:auto;overscroll-behavior:contain}
.smjbg-app .smjbg-foot-in>*{flex-shrink:0}
.smjbg-foot-help{display:flex;flex-direction:column;align-items:stretch;align-self:stretch}
.smjbg-foot-links .smjbg-foot-helpbtn{gap:8px}
.smjbg-foot-helpbtn>span{flex:1 1 auto;min-width:0}
.smjbg-foot-helpbtn .smjbg-foot-chev{width:16px;height:16px;opacity:.6;transition:transform .15s ease}
.smjbg-foot-helpbtn[aria-expanded="true"] .smjbg-foot-chev{transform:rotate(180deg)}
.smjbg-foot-menu{display:flex;flex-direction:column;align-items:stretch;gap:2px;margin:0 0 4px 14px;padding:0 0 0 8px;
border-left:1px solid var(--color-border-subtle,#eceef1)}
.smjbg-foot-links .smjbg-foot-menu button{min-height:44px;color:var(--color-text-secondary,#4b5159)}
.smjbg-foot-sep{display:none}
.smjbg-foot-social{order:5;align-self:stretch;display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:2px 0 0;padding:6px 6px 4px;
border-top:1px solid var(--color-border-subtle,#eceef1)}
.smjbg-foot-soc{width:44px;height:44px;border-radius:var(--rad,10px);color:var(--color-text-secondary,#4b5159)}
.smjbg-foot-soc svg{width:22px;height:22px}
.smjbg-foot-soc:active{background:var(--color-state-hover,#f2f3f7)}
.smjbg-foot-soc:focus-visible{outline:2px solid var(--color-focus-ring,#2667e7);outline-offset:-2px}
}
@media (prefers-reduced-motion:reduce){
.smjbg-foot-menu{animation:none!important}
.smjbg-foot-chev,.smjbg-foot-soc{transition:none!important}
}
/* ===== end 3.45.0 ===== */
/* ===== 3.47.0 — Mockups: scenes with a design area ===== */
/* A mockup is a scene (a phone, a brochure, a T-shirt…) with a design area the user's
design is placed into — in the library, on the canvas and in the right-side panel.
Everything here is editor furniture; the mockup itself is drawn on the canvas. */
/* ---- the library: each scene drawn live, on a soft studio backdrop ---- */
.smjbg-iatile.smjbg-mocktile>span{background:radial-gradient(120% 90% at 50% 30%,#ffffff 0%,#f2f4f8 62%,#e6eaf0 100%)!important}
.smjbg-iatile.smjbg-mocktile i{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.5em;line-height:1.25;padding-top:5px}
.smjbg-iatile>span canvas{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);display:block;pointer-events:none}
.smjbg-iacat .pv.mockups canvas{display:block;height:100%;width:auto;max-width:100%;min-width:0;object-fit:contain}
/* ---- on the canvas: the design area of the selected mockup ---- */
.smjbg-mockslot{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.smjbg-mockslot path{fill:none;stroke:var(--ui-accent,#2667e7);stroke-width:1.5px;stroke-dasharray:6 4;vector-effect:non-scaling-stroke;opacity:.9}
.smjbg-insbox.smjbg-mocksel{background:none}
.smjbg-mockadd{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px 0 9px;margin:0;
border:0;border-radius:999px;background:var(--ui-accent,#2667e7);color:#fff;font:600 12px/1 var(--ui-font,Inter,system-ui,sans-serif);
white-space:nowrap;box-shadow:0 4px 14px rgba(16,24,40,.22);cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.smjbg-mockadd:hover{background:var(--ui-accent-hi,#1d52bb)}
.smjbg-mockadd:focus-visible{outline:2px solid #fff;outline-offset:2px}
.smjbg-mockadd svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
/* moving the design: the whole design's outline, the design area, and a hint */
.smjbg-insbox.smjbg-mockadj{border:1.5px solid var(--ui-accent,#2667e7);background:none;pointer-events:auto;cursor:move;touch-action:none;
box-shadow:0 0 0 1px rgba(255,255,255,.7)}
.smjbg-mockadj .smjbg-mockslot path.s{stroke:#fff;stroke-dasharray:none;stroke-width:2px;filter:drop-shadow(0 0 1.5px rgba(16,24,40,.6))}
.smjbg-mockadj .smjbg-mockslot path.d{stroke:var(--ui-accent,#2667e7);stroke-dasharray:5 4;stroke-width:1.5px;opacity:1}
.smjbg-mocktip{position:absolute;left:50%;top:100%;margin-top:8px;transform:translateX(-50%);padding:4px 9px;border-radius:999px;
background:rgba(28,32,36,.86);color:#fff;font:500 11px/1.3 var(--ui-font,Inter,system-ui,sans-serif);white-space:nowrap;pointer-events:none}
/* a picture from Uploads held over a mockup */
.smjbg-insbox.smjbg-mockdrop{border:2px solid var(--ui-accent,#2667e7)!important;background:color-mix(in srgb,var(--ui-accent,#2667e7) 10%,transparent)!important}
/* ---- the right-side panel ---- */
.smjbg-mockdes{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.smjbg-mockdes .th{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:10px;overflow:hidden;
background:#fff linear-gradient(45deg,#f3f5f8 25%,transparent 25%,transparent 75%,#f3f5f8 75%) 0 0/10px 10px;border:1px solid var(--ui-line-soft,#eaedf0)}
.smjbg-mockdes .th.ph{background:var(--ui-accent-soft,#f1f8ff);border-style:dashed;border-color:color-mix(in srgb,var(--ui-accent,#2667e7) 45%,transparent)}
.smjbg-mockdes .th canvas{display:block;width:100%;height:100%}
.smjbg-mockdes .th svg{width:24px;height:24px;fill:none;stroke:var(--ui-accent,#2667e7);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.smjbg-mockdes b{display:block;font:600 13px/1.25 var(--ui-font,Inter,system-ui,sans-serif);color:var(--ui-ink,#1c2024)}
.smjbg-mockdes em{display:block;margin-top:2px;font:500 11px/1.35 var(--ui-font,Inter,system-ui,sans-serif);font-style:normal;color:var(--ui-muted,#81878d)}
.smjbg-mockpages{display:flex;flex-wrap:wrap;gap:6px}
.smjbg-app .smjbg-mockpages button{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px 0 8px!important;border:1px solid var(--ui-line,#d9dde1)!important;
border-radius:8px!important;background:#fff!important;box-shadow:none!important;font:500 12px/1 var(--ui-font,Inter,system-ui,sans-serif)!important;color:var(--ui-ink,#1c2024)!important;cursor:pointer}
.smjbg-app .smjbg-mockpages button:hover{border-color:var(--ui-accent,#2667e7)!important}
.smjbg-mockpages button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;opacity:.7}
.smjbg-mockpages button.busy{opacity:.55;cursor:progress}
.smjbg-mockmedia{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}
.smjbg-app .smjbg-mockmedia button{aspect-ratio:1;padding:3px!important;border:1px solid var(--ui-line,#d9dde1)!important;border-radius:8px!important;background:#fff!important;cursor:pointer;box-shadow:none!important}
.smjbg-app .smjbg-mockmedia button:hover{border-color:var(--ui-accent,#2667e7)!important}
.smjbg-mockmedia img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.smjbg-mockrow>span{display:flex!important;align-items:baseline;justify-content:space-between;gap:8px}
.smjbg-mockrow>span em{font-style:normal;font-weight:500;font-size:11px;color:var(--ui-muted,#81878d);font-variant-numeric:tabular-nums}
.smjbg-mockrow input[type=range]:disabled{opacity:.45}
.smjbg-mockcols{display:flex;flex-wrap:wrap;gap:6px}
.smjbg-app .smjbg-mockcols button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 6px!important;border:1px solid var(--ui-line,#d9dde1)!important;
border-radius:999px!important;background:#fff!important;box-shadow:none!important;font:500 12px/1 var(--ui-font,Inter,system-ui,sans-serif)!important;color:var(--ui-ink,#1c2024)!important;cursor:pointer}
.smjbg-app .smjbg-mockcols button.on{border-color:var(--ui-accent,#2667e7)!important;box-shadow:0 0 0 1px var(--ui-accent,#2667e7) inset!important}
.smjbg-mockcols i{display:block;width:18px;height:18px;border-radius:50%;box-shadow:0 0 0 1px rgba(16,24,40,.18) inset}
.smjbg-mockscenes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.smjbg-app .smjbg-mockscenes button{display:flex;flex-direction:column;align-items:stretch;min-width:0;padding:0!important;border:1px solid var(--ui-line-soft,#eaedf0)!important;
border-radius:9px!important;background:#fff!important;box-shadow:none!important;overflow:hidden;cursor:pointer}
.smjbg-app .smjbg-mockscenes button:hover{border-color:var(--ui-accent,#2667e7)!important}
.smjbg-app .smjbg-mockscenes button.on{border-color:var(--ui-accent,#2667e7)!important;box-shadow:0 0 0 1px var(--ui-accent,#2667e7) inset!important}
.smjbg-mockscenes canvas{display:block;width:100%;height:auto;aspect-ratio:132/110;background:radial-gradient(120% 90% at 50% 30%,#fff 0%,#f2f4f8 70%,#e9edf2 100%);pointer-events:none}
.smjbg-mockscenes i{display:block;padding:3px 4px 5px;font:500 10px/1.2 var(--ui-font,Inter,system-ui,sans-serif);font-style:normal;color:var(--ui-sub,#565b61);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
@media (max-width:1023px){
.smjbg-mockadd{height:36px;font-size:13px}
.smjbg-app .smjbg-mockpages button,.smjbg-app .smjbg-mockcols button{height:38px}
.smjbg-mockscenes{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){ .smjbg-mockadd{transition:none} }
/* ===== end 3.47.0 ===== */
/* ===== 3.48.0 — Mockup library: 100+ scenes, by group ===== */
/* The library is read from assets/library/mockups/scenes.json the first time it is needed;
these are the controls that browse it — in Insert and in a mockup's panel. */
/* ---- Insert: one section per group, then a group or a search as one grid ---- */
.smjbg-mksec{margin:0 0 14px}
.smjbg-mksec .smjbg-libhd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px}
.smjbg-app .smjbg-mkall{height:24px;padding:0 9px!important;border:0!important;border-radius:999px!important;background:var(--ui-accent-soft,#f1f8ff)!important;
color:var(--ui-accent,#2667e7)!important;font:600 11px/1 var(--ui-font,Inter,system-ui,sans-serif)!important;box-shadow:none!important;cursor:pointer;white-space:nowrap}
.smjbg-app .smjbg-mkall:hover{background:color-mix(in srgb,var(--ui-accent,#2667e7) 14%,#fff)!important}
.smjbg-mkload{color:var(--ui-muted,#81878d)}
.smjbg-mkload::before{content:"";display:inline-block;width:12px;height:12px;margin:0 7px -2px 0;border-radius:50%;
border:2px solid color-mix(in srgb,var(--ui-accent,#2667e7) 25%,transparent);border-top-color:var(--ui-accent,#2667e7);animation:smjbg-mkspin .8s linear infinite}
@keyframes smjbg-mkspin{to{transform:rotate(360deg)}}
.smjbg-app .smjbg-mkretry{margin-left:6px;height:26px;padding:0 10px!important;border:1px solid var(--ui-line,#d9dde1)!important;border-radius:8px!important;
background:#fff!important;box-shadow:none!important;font:600 12px/1 var(--ui-font,Inter,system-ui,sans-serif)!important;color:var(--ui-ink,#1c2024)!important;cursor:pointer}
/* a tile shows its whole scene: landscape scenes sit on the tile's backdrop */
.smjbg-iatile.smjbg-mocktile>span canvas{inset:2px;width:calc(100% - 4px);height:calc(100% - 4px)}
/* a longer name stops at two lines, with an ellipsis */
.smjbg-iatile.smjbg-mocktile i{overflow:hidden;max-height:calc(2.5em + 5px)}
/* ---- the panel: Change mockup, one group at a time ---- */
.smjbg-mockgrps{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 8px}
.smjbg-app .smjbg-mockgrps button{height:26px;padding:0 9px!important;border:1px solid var(--ui-line,#d9dde1)!important;border-radius:999px!important;background:#fff!important;
box-shadow:none!important;font:500 11px/1 var(--ui-font,Inter,system-ui,sans-serif)!important;color:var(--ui-sub,#565b61)!important;cursor:pointer;white-space:nowrap}
.smjbg-app .smjbg-mockgrps button:hover{border-color:var(--ui-accent,#2667e7)!important;color:var(--ui-ink,#1c2024)!important}
.smjbg-app .smjbg-mockgrps button.on{border-color:var(--ui-accent,#2667e7)!important;background:var(--ui-accent-soft,#f1f8ff)!important;color:var(--ui-accent,#2667e7)!important;font-weight:600!important}
.smjbg-mockscenes{max-height:420px;overflow-y:auto;overscroll-behavior:contain;padding:1px}
@media (max-width:1023px){
.smjbg-app .smjbg-mockgrps button{height:34px;font-size:12px!important}
.smjbg-mockscenes{max-height:none}
}
@media (prefers-reduced-motion:reduce){ .smjbg-mkload::before{animation:none} }
/* ===== end 3.48.0 ===== */
/* ===== 3.49.0 — Frames: picture containers ===== */
/* a picture held over a frame: the frame it will go into */
.smjbg-insbox.smjbg-frdrop{border:2px solid var(--ui-accent,#2667e7)!important;background:color-mix(in srgb,var(--ui-accent,#2667e7) 8%,transparent)!important;
box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-accent,#2667e7) 22%,transparent)}
/* an empty frame's Add image button (the mockup's button, with its words dropped on a small frame) */
.smjbg-fradd span{pointer-events:none}
.smjbg-frdrop .smjbg-fradd{display:none}
/* a frame's box is its outline only: no selection tint over what its shape leaves empty */
.smjbg-insbox.smjbg-frbox.on{background:none}
.smjbg-fradd.ic{width:30px;padding:0;justify-content:center}
.smjbg-fradd.ic span{display:none}
/* the frame's panel */
.smjbg-mockdes .th img{display:block;width:100%;height:100%;object-fit:cover}
.smjbg-fracts{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:6px;margin:0 0 4px}
.smjbg-app .smjbg-fracts button{height:32px;padding:0 8px!important;border:1px solid var(--ui-line,#d9dde1)!important;border-radius:8px!important;
background:#fff!important;box-shadow:none!important;font:600 12px/1 var(--ui-font,Inter,system-ui,sans-serif)!important;color:var(--ui-ink,#1c2024)!important;
cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smjbg-app .smjbg-fracts button:hover{border-color:var(--ui-accent,#2667e7)!important}
.smjbg-frshapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.smjbg-app .smjbg-frshapes button{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:5px 2px 4px!important;
border:1px solid var(--ui-line-soft,#eaedf0)!important;border-radius:9px!important;background:#fff!important;box-shadow:none!important;cursor:pointer}
.smjbg-app .smjbg-frshapes button:hover{border-color:var(--ui-accent,#2667e7)!important}
.smjbg-app .smjbg-frshapes button.on{border-color:var(--ui-accent,#2667e7)!important;background:var(--ui-accent-soft,#f1f8ff)!important;
box-shadow:0 0 0 1px var(--ui-accent,#2667e7) inset!important}
.smjbg-frshapes canvas{display:block;width:100%;max-width:48px;height:auto;aspect-ratio:48/40;pointer-events:none}
.smjbg-frshapes i{display:block;max-width:100%;font:500 10px/1.2 var(--ui-font,Inter,system-ui,sans-serif);font-style:normal;color:var(--ui-sub,#565b61);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1023px){
.smjbg-frshapes{grid-template-columns:repeat(5,minmax(0,1fr))}
.smjbg-fradd.ic{width:36px}
.smjbg-app .smjbg-fracts button{height:40px}
}
/* ===== end 3.49.0 ===== */