/* A native file input covers the button so iOS opens Photos in the tap gesture. */
.native-file-trigger{position:relative;overflow:hidden;isolation:isolate}
.native-image-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2;font-size:16px;margin:0;padding:0;border:0;border-radius:inherit}
.native-file-trigger:focus-within{outline:3px solid #b3aaff;outline-offset:3px}
.editor-feature-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:28px 0 14px}
.editor-feature-heading h2{font-size:17px;margin:0}.editor-feature-heading a{color:#6555cf;font-size:13px;min-height:44px;display:flex;align-items:center}
#mobile-panel-close{display:none}
.directory-upload{display:none}
@media(max-width:760px){
 html{scroll-padding-bottom:96px}body{background:#f6f7fb}
 main{padding:0 16px}.site-header{padding-top:max(12px,env(safe-area-inset-top));min-height:100px}
 .brand .brand-en{font-size:10px}.site-header>nav{gap:26px}.site-header .nav-button{min-height:44px}
 #editor-view>.page-heading{padding:22px 4px 12px;margin:0}
 #editor-view>.page-heading h1{font-size:25px;letter-spacing:-.7px;margin:0 0 8px;line-height:1.3}
 #editor-view>.page-heading .subtitle{font-size:14px;line-height:1.7;margin:0;max-width:32em}
 #editor-view .editor-heading-actions{display:none}
 #editor-view>.editor-flow{margin:0 0 16px;padding:0 4px;justify-content:space-between;gap:8px;font-size:12px}
 .editor-flow li{gap:6px}.editor-flow li>span{width:22px;height:22px;font-size:11px}
 #editor-view[data-has-image=false] .workspace-toolbar,#editor-view[data-has-image=false] .workspace-bottom{display:none}
 #editor-view[data-has-image=false] .workspace-card{border:1px solid #dfdff0;box-shadow:0 4px 22px #44327806;border-radius:20px}
 #editor-view[data-has-image=false] .canvas-stage{background:linear-gradient(155deg,#fff 30%,#f2efff);height:auto;min-height:310px;padding:28px 18px}
 .empty-state{width:100%}.empty-art{width:76px;height:60px;margin:0 auto 20px}
 .empty-state h2{font-size:21px;line-height:1.4;margin:0 0 8px;color:#292d3b}
 .empty-state>p{font-size:14px!important;line-height:1.6;margin:0 auto 22px!important;color:#737888;max-width:100%}
 .empty-state .upload-button{min-height:56px;width:100%;max-width:300px;display:inline-flex;justify-content:center;font-size:16px;gap:9px;border-radius:12px;box-shadow:0 5px 12px #6553e51c}
 .empty-state #load-demo{display:block;margin:12px auto 0;min-height:44px;font-size:13px}
 .empty-note{font-size:12px;margin-top:10px;line-height:1.5}
 #editor-view>.editor-feature-heading{margin:24px 4px 12px}.editor-feature-heading h2{font-size:16px}
 #editor-view>.feature-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}
 #editor-view>.feature-links>a{min-height:70px;padding:14px 12px;display:flex;align-items:center;flex-wrap:nowrap;gap:10px;border-radius:13px}
 #editor-view>.feature-links .feature-copy{min-width:0;gap:0}.feature-links .feature-copy strong{font-size:14px;line-height:1.4}
 #editor-view>.feature-links .feature-copy>span,#editor-view>.feature-links .feature-arrow{display:none}
 #editor-view>.benefits{display:none}
 #editor-view[data-has-image=true]>.page-heading{padding:14px 4px 12px}
 #editor-view[data-has-image=true]>.page-heading h1{font-size:20px;margin:0}
 #editor-view[data-has-image=true]>.page-heading .subtitle,#editor-view[data-has-image=true]>.editor-flow,
 #editor-view[data-has-image=true]>.feature-links,#editor-view[data-has-image=true]>.editor-feature-heading{display:none}
 .editor-layout{gap:12px}.workspace-card{overflow:hidden;border-radius:16px}
 .workspace-toolbar{min-height:54px;padding:10px 12px;display:flex;flex-wrap:nowrap;align-items:center;gap:8px}
 .file-info{min-width:0;flex:1}.file-info .file-icon{display:none}.file-info>div{min-width:0}
 .file-info strong{max-width:160px;font-size:12px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
 .file-info>div>span{font-size:10px}.toolbar-actions{width:auto;gap:8px;margin-left:0;flex-wrap:nowrap!important}
 .toolbar-actions #compare,.toolbar-actions #reset,.toolbar-actions #quick-export{display:none}
 .toolbar-actions #change-file{min-height:44px;padding:8px 12px;white-space:nowrap;font-size:13px}
 .canvas-stage{height:320px;height:clamp(240px,42svh,360px);min-height:240px;padding:20px;background:#e9ebf2!important}
 .workspace-bottom{padding:10px 12px;min-height:36px;font-size:10px}.workspace-bottom #crop-info{max-width:45%;text-align:right}
 .tools-card{border-radius:16px;scroll-margin-top:12px;overflow:hidden}
 .tools-title{padding:12px 16px 8px;font-size:13px;min-height:42px}.tools-title>.subtle{display:none}
 .tool-tabs,html[lang=en] .tool-tabs{margin:0;padding:0 8px 8px;gap:3px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
 .tool-tab{min-height:56px;font-size:13px;padding:8px 2px;flex-direction:column;gap:6px;border-radius:10px}
 .tool-tab svg{width:19px;height:19px}.tool-panel{padding:18px 16px;border-top:1px solid #eeedf4;max-height:none}
 body:not(.mobile-settings-open) .tools-card>#edit-controls,body:not(.mobile-settings-open) .tools-card>.export-footer{display:none}
 body.mobile-settings-open #mobile-panel-close{display:block;font-size:13px;min-height:36px;padding:6px 0;margin-left:auto}
 .mobile-editor-actions{padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:10px;background:#fff;backdrop-filter:none}
 .mobile-editor-actions>button{min-height:48px;font-size:14px;padding:10px 12px}.mobile-editor-actions>.primary-button{font-size:15px;border-radius:10px}
 .mobile-editor-actions #mobile-preview{display:none}.mobile-editor-actions #mobile-settings{flex:1}.mobile-editor-actions #mobile-save{flex:1.3}
 body.mobile-settings-open .mobile-editor-actions #mobile-preview{display:block}
 .mobile-editor-actions #mobile-settings[aria-expanded=true]{background:#eeeaff;color:#5949c3;border-color:#dcd5fd}
 body.editor-active.editor-has-image{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
 .tool-panel select,.tool-panel textarea,.tool-panel input[type=text],.tool-panel input[type=number]{font-size:16px}
 .range-field input[type=range]{min-height:36px}.text-inline-popover{max-width:calc(100% - 20px)}
 .directory-upload{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:0 0 22px;padding:20px;background:#fff;border:1px solid #dfdff0;border-radius:17px}
 .directory-upload strong{font-size:18px;line-height:1.5}.directory-upload p{font-size:13px;line-height:1.7;color:#737888;margin:0 0 8px}
 .directory-upload .primary-button{min-height:54px;justify-content:center;font-size:16px;border-radius:11px}
 .directory-upload .native-image-input{min-height:0}
 .feature-guide{margin-top:24px}.feature-guide h2{font-size:18px}
 html[lang=en] .tool-tab{font-size:11px}html[lang=en] .mobile-editor-actions>button{font-size:13px}
 .image-save-card{border-radius:18px}.image-save-header h2{font-size:19px}.image-save-card #image-save-download{min-height:52px;font-size:16px}
}
@media(max-width:360px){main{padding:0 12px}.file-info strong{max-width:120px}.canvas-stage{height:260px}.mobile-editor-actions{padding-left:12px;padding-right:12px}.empty-state>p{font-size:13px!important}.editor-flow li{font-size:11px}}

@media(max-width:760px){
 body.mobile-settings-open .workspace-card{position:sticky;top:0;z-index:12;box-shadow:0 5px 15px #29344b12}
 body.mobile-settings-open .workspace-toolbar,body.mobile-settings-open .workspace-bottom{display:none}
 body.mobile-settings-open .canvas-stage{height:240px;height:clamp(180px,30svh,250px);min-height:180px}
 body.mobile-settings-open .tools-card{overflow:visible;scroll-margin-top:calc(30svh + 12px)}
 body.mobile-settings-open .tool-tabs{background:#fff}
}

@media(max-width:760px){
 .site-header>nav{justify-content:space-between!important;gap:8px!important}
 .site-header .nav-button{white-space:nowrap;flex-shrink:0;font-size:13px!important}
 .editor-flow{flex-wrap:nowrap!important}.editor-flow li{white-space:nowrap;font-size:11px}
 .empty-state .upload-button{white-space:nowrap}
}
@media(max-width:360px){
 #editor-view>.page-heading{padding-top:18px;padding-bottom:10px}#editor-view>.page-heading h1{font-size:23px}
 .empty-art{width:62px;height:48px;margin-bottom:14px}.empty-state h2{font-size:19px}
 #editor-view[data-has-image=false] .canvas-stage{padding:22px 16px;min-height:290px}
 .empty-state>p{margin-bottom:16px!important}.empty-state .upload-button{font-size:15px}
}

@media(max-width:760px){html{scroll-behavior:auto!important}}