/* SurfoMailomat v4 – accordion editor and inline email preview */
.app{grid-template-columns:210px minmax(350px,430px) minmax(450px,1fr);min-height:100vh}
.sidebar{padding:22px 13px 20px;gap:15px}.sidebar .brand{font-size:18px;padding:5px 9px 16px}.sidebar .brand span{display:inline}.sidebar .side-bottom{display:block}
.sidebar #surfoNav,.sidebar .surfo-sidebar-title,.sidebar .surfo-sidebar-separator,.sidebar .surfo-nav-list{display:none!important}
.surfo-simple-nav{display:flex;flex-direction:column;gap:5px}
.surfo-simple-nav button{display:flex;align-items:center;gap:11px;background:transparent;border:0;border-radius:10px;color:#c1bad9;font-size:13px;padding:12px 13px;text-align:left}
.surfo-simple-nav button:hover,.surfo-simple-nav button.is-current{background:#383050;color:white}
.surfo-simple-nav .nav-icon{font-size:17px;width:22px;text-align:center}
.editor-header{padding:22px 23px 17px}.editor-header .heading{font-size:23px}.main-content{padding:16px 18px 45px;display:flex;flex-direction:column;gap:9px}
.main-content>.divider{display:none!important}
.surfo-accordion{border:1px solid #e9e5f0;border-radius:12px;background:#fff;overflow:hidden;flex-shrink:0;box-shadow:0 2px 12px #3e286608}
.surfo-accordion[open]{border-color:#d3c7f2;box-shadow:0 3px 16px #5b39af0b}
.surfo-accordion>summary{list-style:none;cursor:pointer;padding:15px 16px;display:flex;align-items:center;gap:11px;font-size:13px;font-weight:800;color:#29223c;user-select:none}
.surfo-accordion>summary::-webkit-details-marker{display:none}
.surfo-accordion .acc-icon{font-size:16px;display:grid;place-items:center;width:25px;height:25px;background:#f1edfa;border-radius:8px;color:#6d54c7}
.surfo-accordion .acc-arrow{margin-left:auto;color:#8f82aa;transition:transform .2s}
.surfo-accordion[open] .acc-arrow{transform:rotate(90deg)}
.surfo-accordion>.section{display:block!important;padding:4px 16px 18px;margin:0!important}
.surfo-accordion .section-header{display:none}
.surfo-accordion .hint{font-size:11px}
.main-content .section label.field{margin-top:11px}
.main-content input.text,.main-content textarea.text,.main-content select.text{padding:10px 12px;margin-top:5px}
.surfo-accordion .prompt-area{padding:10px}
.surfo-accordion .three{gap:7px}
.viewer{padding:22px clamp(16px,2.1vw,34px) 42px}
.viewer .viewer-top{margin-bottom:13px}.viewer-title{font-size:21px}
.viewer .preview-wrap{min-height:690px;padding:18px 10px 36px}
.preview-card{position:relative;max-width:740px}
.preview-card .surfo-hero-stage{position:absolute;z-index:8;border:0;border-radius:0;min-height:0!important;height:220px;aspect-ratio:auto;touch-action:none;box-shadow:0 4px 12px #1a133b19;overflow:hidden;background:#ede8fb}
.preview-card .surfo-hero-stage canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.preview-card .surfo-hero-stage.dragging canvas{cursor:grabbing}
.preview-card .surfo-hero-stage.empty{background:linear-gradient(130deg,#e8e1fb 0%,#e1eff3 55%,#eee2f2 100%);border:1px dashed #a998d5}
.preview-card .surfo-hero-stage .empty-label{font-size:13px}
.preview-card .surfo-hero-stage .surfo-stage-actions{bottom:11px;right:12px}
.preview-card .surfo-hero-stage .surfo-stage-actions button{background:#211a36d9;border:1px solid #ffffff80;padding:9px 14px;font-size:12px}
.preview-card .surfo-live-wave{pointer-events:none;position:absolute;bottom:0;left:0;width:100%;height:auto;z-index:2}
.preview-card .surfo-crop-control{z-index:12;position:absolute;top:0;left:0;margin:0;max-width:250px;padding:6px 10px;gap:6px;background:#ffffffed;border:1px solid #e6dff0;box-shadow:0 3px 10px #2b18492b}
.preview-card .surfo-crop-control span{font-size:10px}
.preview-card .surfo-crop-control input{width:72px;flex:1}
.preview-card .surfo-crop-help{display:none}
.surfo-edit-hint{font-size:11px;color:#777088;display:flex;align-items:center;gap:8px;margin:10px 2px 0}
.surfo-preview-meta{display:grid;gap:6px;margin:0 0 12px;padding:12px 14px;border:1px solid #e5e0ef;background:white;border-radius:10px;font-size:12px}
.surfo-preview-meta .meta-row{display:flex;gap:10px;align-items:center}
.surfo-preview-meta .meta-row strong{min-width:64px;color:#726484;font-size:11px}
.surfo-preview-meta [contenteditable]{flex:1;border-radius:5px;min-width:0;padding:3px 5px;outline:none;line-height:1.5}
.surfo-preview-meta [contenteditable]:hover,.surfo-preview-meta [contenteditable]:focus{background:#f2eeff;outline:1px dashed #ac96eb}
.surfo-graphic-info{display:flex;gap:8px;align-items:flex-start;border:1px solid #e9e0f5;background:#faf8ff;padding:12px 13px;border-radius:9px;color:#77698f;font-size:12px;line-height:1.55}
.surfo-graphic-info .ico{font-size:17px}
.surfo-accent-wave-note{font-size:11px;line-height:1.55;color:#8a8099;margin-top:9px}
.surfo-wave-option img{height:25px!important;object-fit:contain!important}
.surfo-accordion .wave-variants{grid-template-columns:repeat(3,minmax(0,1fr))}
.surfo-accordion .wave-variant img{height:24px;background:#e9e5f2}
.surfo-accordion .wave-variant{padding:7px 4px}
.surfo-accordion .wave-variant.active{padding:6px 3px}
body.surfo-image-editing .preview-wrap{outline:1px solid #d4c2f4}
@media(max-width:1370px){.app{grid-template-columns:172px minmax(335px,395px) minmax(380px,1fr)}.sidebar .brand{font-size:15px;gap:7px}.sidebar .brand span{display:inline}.surfo-simple-nav button{font-size:12px;padding:10px 8px}}
@media(max-width:1050px){.app{grid-template-columns:180px minmax(0,1fr)}.sidebar{grid-row:1 / 3}.editor{height:auto;max-height:none}.viewer{grid-column:2;height:auto}.viewer .preview-wrap{min-height:580px}}
@media(max-width:680px){.app{display:block}.sidebar{min-height:65px;height:auto;display:flex;flex-direction:column;padding:10px}.sidebar .brand{justify-content:flex-start}.sidebar .brand span{display:inline}.surfo-simple-nav{flex-direction:row;gap:3px}.surfo-simple-nav button{font-size:11px;padding:9px 8px}.sidebar .side-bottom{display:none}.editor-header{padding:18px}.main-content{padding:14px}.viewer{padding:18px 9px}.preview-card .surfo-hero-stage .surfo-stage-actions button{padding:8px 10px}}

.app.surfo-compact-sidebar{grid-template-columns:72px minmax(350px,430px) minmax(450px,1fr)}
.surfo-compact-sidebar .sidebar{padding:20px 7px}
.surfo-compact-sidebar .sidebar .brand{justify-content:center;padding:4px 0;gap:0}
.surfo-compact-sidebar .sidebar .brand>span{display:none}
.surfo-compact-sidebar .sidebar .brand #surfoCollapseSidebar{margin-left:5px;padding:4px 7px}
.surfo-compact-sidebar .sidebar .surfo-simple-nav button{font-size:0;justify-content:center;padding:12px 6px}
.surfo-compact-sidebar .sidebar .surfo-simple-nav .nav-icon{font-size:19px}
.surfo-compact-sidebar .sidebar .side-bottom{display:none}
@media(max-width:1050px){.app.surfo-compact-sidebar{grid-template-columns:72px minmax(0,1fr)}}
@media(max-width:680px){.app.surfo-compact-sidebar{display:block}.surfo-compact-sidebar .sidebar .brand>span{display:inline}.surfo-compact-sidebar .sidebar .surfo-simple-nav button{font-size:11px}}