/* Online návrh oznámení – štúdio */
.sko-cta{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;margin:0 0 16px;padding:14px 18px;border:0;border-radius:14px;cursor:pointer;text-align:left;color:#fff;background:linear-gradient(135deg,#b76e79,#8e5a6b 60%,#6b4a5a);box-shadow:0 10px 24px -14px rgba(110,60,80,.8)}
.sko-cta b{font-size:18px}
.sko-cta small{opacity:.9;font-size:13px}
.sko-cta:hover{filter:brightness(1.05)}
.sko-preview{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:-6px 0 16px;padding:10px;border:1px solid #eadde0;border-radius:12px;background:#fcf8f8}
.sko-preview img{max-height:140px;max-width:46%;border-radius:4px;box-shadow:0 4px 14px -6px rgba(0,0,0,.35)}
.sko-preview button{border:1px solid #b76e79;color:#8e5a6b;background:#fff;border-radius:999px;padding:6px 14px;cursor:pointer}
html.sko-open,html.sko-open body{overflow:hidden}
.sko{position:fixed;inset:0;z-index:100001;background:#f4f1ee;display:flex;flex-direction:column;font-size:14px;color:#1f2328}
.sko[hidden]{display:none}
.sko button{font:inherit}
.sko-head{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#fff;border-bottom:1px solid #e6e1dc}
.sko-title{display:flex;flex-direction:column;line-height:1.2;margin-right:auto;min-width:0}
.sko-title span{color:#7a7570;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sko-tools{display:flex;gap:4px}
.sko-tools button{width:36px;height:36px;border:1px solid #e0dbd5;border-radius:8px;background:#fff;cursor:pointer;font-size:18px}
.sko-done{border:0;border-radius:10px;background:#1565c0;color:#fff;padding:9px 16px;font-weight:600;cursor:pointer}
.sko-done:disabled{opacity:.6;cursor:wait}
.sko-x{border:0;background:none;font-size:28px;line-height:1;cursor:pointer;padding:0 6px;color:#666}
.sko-body{flex:1;min-height:0;display:grid;grid-template-columns:72px 280px 1fr 270px;min-height:0}
.sko-rail{background:#2b2a33;display:flex;flex-direction:column;padding:6px 0}
.sko-rail button{border:0;background:none;color:#cfcbd6;padding:10px 2px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px}
.sko-rail button i{font-style:normal;font-size:20px}
.sko-rail button.is-on{background:#3c3a47;color:#fff}
.sko-drawer,.sko-panel{background:#fff;overflow:auto;padding:12px 14px;border-right:1px solid #e6e1dc}
.sko-panel{border-right:0;border-left:1px solid #e6e1dc}
.sko-drawer h4,.sko-panel h4{margin:4px 0 8px;font-size:15px}
.sko-muted{color:#7a7570;font-size:12.5px;margin:0 0 10px;line-height:1.45}
.sko-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.sko-chips button{border:1px solid #e0dbd5;border-radius:999px;background:#fff;padding:3px 10px;cursor:pointer;font-size:12px}
.sko-chips button.is-on{background:#2b2a33;color:#fff;border-color:#2b2a33}
.sko-tpls{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sko-tpl{border:1px solid #e6e1dc;border-radius:8px;background:#faf8f6;padding:6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px}
.sko-tpl canvas{width:100%;height:auto;box-shadow:0 2px 8px -4px rgba(0,0,0,.35)}
.sko-tpl small{font-size:11.5px}
.sko-tpl:hover{border-color:#b76e79}
.sko-mots{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.sko-mots button{border:1px solid #eee;border-radius:8px;background:#fff;padding:4px;cursor:pointer;display:flex;flex-direction:column;align-items:center}
.sko-mots img{width:100%;aspect-ratio:1;object-fit:contain}
.sko-mots small{font-size:10px;color:#777;line-height:1.2;text-align:center}
.sko-mots button:hover{border-color:#b76e79}
.sko-addtxt{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.sko-addtxt button{border:1px dashed #cfc8c0;border-radius:8px;background:#faf8f6;padding:10px;cursor:pointer;font-size:18px}
.sko-fontlist{display:flex;flex-direction:column;gap:4px}
.sko-fontlist button{border:1px solid #eee;border-radius:8px;background:#fff;padding:6px 10px;cursor:pointer;text-align:left;font-size:22px;line-height:1.2;display:flex;justify-content:space-between;align-items:center;gap:6px}
.sko-fontlist small{font-family:system-ui,sans-serif;font-size:10px;color:#999;white-space:nowrap}
.sko-paps{display:flex;flex-direction:column;gap:6px}
.sko-paps button{display:flex;align-items:center;gap:10px;border:1px solid #eee;border-radius:8px;background:#fff;padding:6px 8px;cursor:pointer;text-align:left;font-size:12.5px}
.sko-paps button.is-on{border-color:#1565c0;box-shadow:0 0 0 1px #1565c0}
.sko-paps i{width:34px;height:34px;border-radius:6px;border:1px solid rgba(0,0,0,.12);flex:none}
.sko-paps span{flex:1}
.sko-paps em{font-style:normal;padding:4px}
.sko-stage{display:flex;flex-direction:column;align-items:center;min-width:0;min-height:0;padding:10px;overflow:hidden}
.sko-tabs{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;margin-bottom:8px}
.sko-tabs button{border:1px solid #ddd6cf;background:#fff;border-radius:999px;padding:5px 12px;cursor:pointer;font-size:12.5px}
.sko-tabs button.is-on{background:#2b2a33;color:#fff;border-color:#2b2a33}
.sko-canvas-wrap{position:relative;width:100%;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.sko-canvas{box-shadow:0 12px 30px -12px rgba(60,40,30,.45),0 0 0 1px rgba(0,0,0,.05);touch-action:none;cursor:default}
.sko-sel{position:absolute;border:1.5px dashed #1565c0;pointer-events:none;transform-origin:center}
.sko-h{position:absolute;right:-9px;bottom:-9px;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #1565c0;pointer-events:auto;cursor:nwse-resize;touch-action:none}
.sko-hint{color:#8a847e;font-size:12px;margin:8px 0 0;text-align:center}
.sko-in{width:100%;box-sizing:border-box;border:1px solid #ddd6cf;border-radius:8px;padding:7px 9px;font-size:14px;background:#fff}
textarea.sko-in{resize:vertical;font-family:inherit}
input[type=range].sko-in{padding:0;border:0}
.sko-lab{display:block;font-size:12px;color:#7a7570;margin:10px 0 4px}
.sko-fontprev{font-size:30px;line-height:1.3;margin:8px 0 2px;padding:6px 8px;background:#faf8f6;border-radius:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sko-row{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}
.sko-row button{flex:1;border:1px solid #ddd6cf;background:#fff;border-radius:8px;padding:6px 8px;cursor:pointer;font-size:13px;white-space:nowrap}
.sko-row button.is-on{background:#2b2a33;color:#fff;border-color:#2b2a33}
.sko-row button.is-danger{color:#b3261e;border-color:#f0c4c0}
.sko-row2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.sko-row2[hidden]{display:none}
.sko-row2 label{font-size:12px;color:#7a7570}
.sko-colors{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.sko-colors button{width:24px;height:24px;border-radius:50%;border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0}
.sko-colors button.is-on{outline:2px solid #1565c0;outline-offset:2px}
.sko-colors input{width:34px;height:28px;padding:0;border:0;background:none}
.sko-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#2b2a33;color:#fff;padding:10px 16px;border-radius:10px;z-index:100003}
@media (max-width:1100px){.sko-body{grid-template-columns:64px 230px 1fr 230px}}
@media (max-width:820px){
	.sko-body{grid-template-columns:1fr;grid-template-rows:auto 1fr auto auto}
	.sko-rail{flex-direction:row;order:3;justify-content:space-around;padding:0}
	.sko-rail button{flex:1;padding:8px 0}
	.sko-drawer{order:4;max-height:34vh;border-right:0;border-top:1px solid #e6e1dc}
	.sko-stage{order:1;padding:8px}
	.sko-panel{order:2;max-height:30vh;border-left:0;border-top:1px solid #e6e1dc}
	.sko-tpls{grid-template-columns:repeat(3,1fr)}
	.sko-mots{grid-template-columns:repeat(4,1fr)}
	.sko-done{padding:8px 10px;font-size:13px}
	.sko-title span{display:none}
}
@media (max-width:820px){
	.sko-body{grid-template-rows:minmax(0,1fr) auto auto auto}
	.sko-hint{display:none}
	.sko-panel{max-height:28vh}
	.sko-panel.is-empty{display:none}
	.sko-drawer{max-height:30vh}
	.sko-done span{display:none}
	.sko-head{gap:6px;padding:6px 8px}
	.sko-tools button{width:32px;height:32px}
	.sko-fontprev{font-size:22px}
	.sko-tabs button{padding:4px 9px;font-size:12px}
}
@media (max-width:820px){
	.sko-stage{min-height:48vh}
	.sko.has-sel .sko-drawer{display:none}
	.sko-panel{max-height:none}
	.sko-drawer{max-height:none}
	.sko-body{grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}
	.sko-stage{order:1}.sko-panel{order:2;overflow:auto}.sko-drawer{order:2;overflow:auto}.sko-rail{order:4}
}