/* SurfoMailomat v3: compact workspace, collapsible settings and visual image editor */
.app{grid-template-columns:214px minmax(340px,415px) minmax(390px,1fr)}
.sidebar{padding:22px 12px 17px;gap:13px}.sidebar .brand{padding:5px 9px 12px;font-size:17px;gap:9px;white-space:nowrap}.brand-icon{width:33px;height:33px;flex:0 0 33px}
.sidebar .side-label{margin-top:8px;margin-bottom:6px}.sidebar .side-btn{padding:10px 11px;margin:2px 0;border-radius:10px;font-size:12px;gap:10px}
.sidebar .side-btn .ico{font-size:17px;width:19px}.sidebar .side-btn .chev{margin-left:auto;opacity:.6;font-size:11px}
.editor-header{padding:23px 23px 15px}.editor-header .heading{font-size:22px}.main-content{padding:18px 23px 35px}
.main-content>.section{display:none;margin-bottom:0}.main-content>.section.surfo-active-section{display:block}.main-content>.divider{display:none}
.section-header{margin-bottom:12px}.section-title{font-size:14px}.viewer{padding:23px 22px 35px}.viewer-top{margin-bottom:14px}
.viewer-title{font-size:21px}.viewer .actions{gap:7px}.viewer .actions button{font-size:11px}
.main-content label.field{margin-top:12px}.main-content input.text,.main-content select.text,.main-content textarea.text{padding:10px 12px;margin-top:5px}
.viewer .preview-wrap{padding:18px 10px 38px;min-height:560px}
.surfo-sidebar-title{font-size:10px;font-weight:800;letter-spacing:1.8px;color:#837caa;padding:5px 11px 7px}
.surfo-sidebar-separator{border-top:1px solid #39334f;margin:11px 8px}
.surfo-nav-list{display:flex;flex-direction:column;gap:2px}
.surfo-nav-list button{border:0;width:100%;display:flex;align-items:center;gap:11px;background:transparent;text-align:left;color:#bdb7d3;border-radius:9px;padding:11px;font-size:12px;font-weight:600}
.surfo-nav-list button:hover{background:#28223f;color:#fff}
.surfo-nav-list button.active{color:white;background:#393052;box-shadow:inset 3px 0 #b6a2ff}
.surfo-nav-list button .nav-icon{font-size:17px;width:20px;text-align:center}
.surfo-nav-list button .chev{margin-left:auto;color:#8c82aa}
.surfo-hero-stage{position:relative;overflow:hidden;border:1px dashed #c5badc;border-radius:14px;background:linear-gradient(145deg,#f7f2ff,#e2edf3);aspect-ratio:3/1;min-height:140px;touch-action:none}
.surfo-hero-stage canvas{display:block;width:100%;height:100%;object-fit:fill;touch-action:none;cursor:grab}
.surfo-hero-stage.dragging canvas{cursor:grabbing}
.surfo-hero-stage .empty-label{display:none;position:absolute;inset:0;align-items:center;justify-content:center;flex-direction:column;color:#817298;gap:5px;font-size:12px;font-weight:700;pointer-events:none}
.surfo-hero-stage.empty .empty-label{display:flex}.surfo-hero-stage.empty canvas{visibility:hidden}
.surfo-stage-actions{position:absolute;bottom:9px;right:10px;display:flex;gap:6px;z-index:3}
.surfo-stage-actions button{border:1px solid #ffffff86;border-radius:8px;background:#201b32d9;color:#fff;font-size:11px;padding:9px 13px;font-weight:800;backdrop-filter:blur(12px)}
.surfo-stage-actions button:hover{background:#6c50ce}
.surfo-crop-control{display:flex;align-items:center;gap:10px;margin-top:10px;background:#faf9fe;border:1px solid #ede9f7;border-radius:10px;padding:9px 11px}
.surfo-crop-control span{font-size:11px;color:#6e6385;font-weight:700;white-space:nowrap}.surfo-crop-control input{flex:1;min-width:40px;accent-color:#8063e3}
.surfo-crop-control button{font-size:10px;border:1px solid #e0d9f0;border-radius:7px;background:#fff;color:#6a578f;padding:7px}
.surfo-crop-help{font-size:11px;color:#8b83a0;margin-top:8px;line-height:1.5}
.surfo-modal-bg{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:18px;background:#181327b3;backdrop-filter:blur(5px)}
.surfo-modal-bg.open{display:flex}
.surfo-ai-modal{width:min(710px,100%);max-height:91vh;overflow:auto;background:#fff;border-radius:18px;padding:25px;box-shadow:0 28px 90px #1612285e}
.surfo-ai-header{display:flex;align-items:start;justify-content:space-between;gap:12px;margin-bottom:15px}
.surfo-ai-header h2{margin:2px 0 5px;font-size:22px;letter-spacing:-.7px}
.surfo-ai-header p{font-size:12px;color:#857f99;margin:0;line-height:1.5}
.surfo-close{font-size:22px;border:0;background:#f3f0f9;color:#67577c;border-radius:8px;width:32px;height:32px}
.surfo-style-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:14px 0 19px}
.surfo-style-tile{text-align:left;min-width:0;border:1px solid #e5e0ed;background:#fff;border-radius:10px;padding:10px 8px}
.surfo-style-tile.active{border:2px solid #8e70e8;background:#f7f4ff;padding:9px 7px}
.surfo-style-tile .tile-mark{height:39px;border-radius:7px;margin-bottom:8px;background:linear-gradient(115deg,#b4dbe1 0%,#f2d9df 58%,#81b6c2 100%)}
.surfo-style-tile strong{font-size:11px;line-height:1.25;display:block;color:#332946}
.surfo-style-tile small{display:block;font-size:10px;line-height:1.4;margin-top:4px;color:#91899e}
.surfo-ai-modal #imagePrompt{height:98px;min-height:98px}
.surfo-ai-modal #magnButton{margin-top:12px}
.surfo-ai-modal .prompt-area{margin-top:0!important}
@media(min-width:1001px) and (max-width:1380px){.app{grid-template-columns:72px minmax(330px,400px) minmax(360px,1fr)}.sidebar .brand span,.sidebar .side-label,.surfo-sidebar-title,.surfo-nav-list button span:not(.nav-icon),.sidebar .side-bottom{display:none}.surfo-nav-list button{justify-content:center}.surfo-nav-list button .chev{display:none}}
@media(max-width:1000px){.app{grid-template-columns:78px minmax(0,1fr)}.sidebar{grid-row:1 / 3}.sidebar .brand span,.surfo-sidebar-title,.surfo-nav-list button span:not(.nav-icon),.sidebar .side-bottom{display:none}.surfo-nav-list button{justify-content:center}.surfo-nav-list button .chev{display:none}.editor{height:auto}.viewer{grid-column:2;height:auto}}
@media(max-width:680px){.app{display:block}.sidebar{height:auto;min-height:60px;display:flex;flex-direction:row;align-items:center;padding:9px;gap:4px}.sidebar .brand{margin-right:5px;padding:0}.sidebar .brand span{display:none}.sidebar>.surfo-nav-list{display:flex;flex-direction:row;gap:1px;flex-wrap:wrap}.surfo-sidebar-separator,.surfo-sidebar-title{display:none}.surfo-nav-list button{width:auto;padding:8px}.surfo-nav-list button .nav-icon{font-size:18px}.sidebar .side-bottom{display:none}.main-content{padding:19px}.viewer{padding:18px 8px}.surfo-style-grid{grid-template-columns:repeat(2,1fr)}.surfo-ai-modal{padding:17px}}