:root{--toolbar-width:260px;--bg:#f5f7fb;--canvas-safe-inset:8px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg)}
.editor-root{display:flex;height:100vh}
.toolbar{width:var(--toolbar-width);padding:16px;background:#fff;border-right:1px solid #e6e9ef;overflow:auto}
.toolbar h2,h3{margin:.2rem 0}
.toolbar label{display:block;margin:8px 0;font-size:14px}

/* Color swatches */
.color-section{margin:8px 0}
.color-section label{margin-bottom:4px}
.color-swatches{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 10px}
.color-swatch{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;box-shadow:0 1px 3px rgba(0,0,0,.15);transition:border-color .12s,transform .12s}
.color-swatch:hover{transform:scale(1.15)}
.color-swatch.active{border-color:#333;box-shadow:0 0 0 2px #fff,0 0 0 4px #333}

/* Range value indicators */
.range-row{display:flex;align-items:center;gap:8px}
.range-row input[type="range"]{flex:1;min-width:0}
.range-value{font-size:12px;font-weight:600;color:#555;min-width:38px;text-align:right}
.title-label{font-weight:600;font-size:15px;margin-top:12px !important}
.title-input{font-size:15px;padding:10px;border:2px solid #dde1e8;border-radius:10px;transition:border-color .15s}
.title-input:focus{border-color:var(--cs-accent-color,#2453a6);outline:none}
.title-input::placeholder{color:#aaa}
.artist-name-label{font-size:13px;color:#666}
.drafts-section{margin-top:4px}
.drafts-section summary{cursor:pointer;font-weight:600;font-size:14px;padding:6px 0;color:#555}
.drafts-section summary:hover{color:#333}
.drafts-section[open] summary{margin-bottom:4px}
.toolbar input[type="text"]{width:100%;padding:6px}
.toolbar input[type="text"].input-missing{
	border:2px solid #e53935;
	box-shadow:0 0 0 3px rgba(229,57,53,.18);
	background:#fff7f7;
}
.buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.buttons button{padding:6px 10px;border:1px solid #bbb;background:#fafafa;color:#333;cursor:pointer}
.buttons button:hover{filter:brightness(0.97)}
.buttons button.publish-button{background:#ffe7a9;color:#2b1a10;border:none;border-radius:999px;padding:8px 14px;font-weight:600;width:100%;box-shadow:0 4px 10px rgba(0,0,0,.18)}
.buttons button.publish-button:hover{filter:brightness(0.94)}
.canvas-wrap{flex:1;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:12px;min-height:0;overflow:hidden}
.canvas-viewport{position:relative;overflow:hidden;flex:1;min-height:0;border-radius:4px}
.canvas-toolbar{min-height:36px;color:#666;padding:4px 8px;font-size:13px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.canvas-toolbar-actions{display:flex;align-items:center;gap:8px}
.canvas-zoom-controls{display:flex;align-items:center;gap:6px}
.zoom-btn{min-width:36px;padding:6px 8px}
.zoom-btn#zoomReset{min-width:60px}
.zoom-btn#togglePan[aria-pressed="true"]{background:#ffc854;color:#2b1a10;border-color:#e0a830}
.maximize-btn{padding:6px 10px;border:1px solid #bbb;background:#fafafa;color:#333;cursor:pointer;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.maximize-btn:hover{filter:brightness(0.96)}
#canvas{display:block;background:white;border:1px solid #ddd;border-radius:4px;width:100%;height:100%;max-width:100%;max-height:100%}
body.editor-maximized{overflow:hidden}
.editor-root.is-maximized{position:fixed;inset:0;z-index:var(--z-editor-maximized,500);background:var(--bg,#f5f7fb)}
.editor-root.is-maximized,
.editor-root.is-maximized .canvas-wrap,
.editor-root.is-maximized .canvas-viewport,
.editor-root.is-maximized #canvas{
	touch-action:none;
	overscroll-behavior:none;
}
.editor-root.is-maximized .canvas-wrap{position:fixed;inset:0;padding:0;height:100dvh}
.editor-root.is-maximized .canvas-viewport{border-radius:6px;position:fixed;inset:var(--canvas-safe-inset,8px);width:auto;height:auto;max-height:none;min-height:0;aspect-ratio:auto;flex:none;overflow:hidden;border:2px solid rgba(0,0,0,.08)}
.editor-root.is-maximized .canvas-toolbar{position:fixed;top:10px;right:10px;left:10px;z-index:var(--z-editor-toolbar,510);padding:0;background:transparent;justify-content:flex-end;pointer-events:none}
.editor-root.is-maximized .canvas-toolbar > span{display:none}
.editor-root.is-maximized .canvas-toolbar-actions{pointer-events:auto}
.editor-root.is-maximized #canvas{height:100%;width:100%;max-height:none;min-height:0;aspect-ratio:auto;border:none;border-radius:0}
.tools-toggle-btn{display:none}
.editor-root.is-maximized .tools-toggle-btn{display:inline-flex}
.canvas-icon-btn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0;font-size:18px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 2px 6px rgba(0,0,0,.10)}
.editor-root.is-maximized .canvas-toolbar-actions .maximize-btn{
	min-width:40px;
	height:40px;
	padding:0;
	font-size:18px;
	justify-content:center;
	align-items:center;
	border-radius:999px;
}
.editor-root.is-maximized #toggleTools{
	color:#111;
	font-family:"Segoe UI Symbol","Noto Sans Symbols2","Arial Unicode MS",sans-serif;
	font-size:19px;
}
.editor-root.is-maximized .toolbar{position:fixed;top:62px;right:10px;left:auto;z-index:var(--z-editor-tools,520);width:min(var(--toolbar-width),92vw);max-height:calc(100dvh - 72px);overflow:auto;border:1px solid #e6e9ef;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.22);background:rgba(255,255,255,.97);transform:translateY(-14px);opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease}
.editor-root.is-maximized.tools-open .toolbar{transform:translateY(0);opacity:1;pointer-events:auto}
.editor-root.is-maximized.orientation-blocked #canvas{filter:brightness(.82)}
.editor-root.is-maximized.orientation-blocked .canvas-wrap::after{content:'Gira el dispositivo a horizontal para dibujar en modo maximizado';position:fixed;left:16px;right:16px;bottom:18px;z-index:var(--z-editor-orientation,530);background:rgba(0,0,0,.78);color:#fff;padding:10px 12px;border-radius:10px;font-size:13px;font-weight:600;text-align:center;pointer-events:none}
@media (max-width:800px){
	.editor-root.is-maximized .canvas-toolbar{top:8px;right:8px;left:8px}
	.editor-root.is-maximized .canvas-toolbar-actions{gap:6px}
	.editor-root.is-maximized .toolbar{left:8px;right:8px;top:auto;bottom:8px;width:auto;max-height:56dvh;transform:translateY(16px)}
}
@media (max-width:800px){
	.editor-root{flex-direction:column;height:auto;min-height:100dvh}
	.toolbar{width:100%;order:2;max-height:44dvh;overflow:auto}
	.canvas-wrap{order:1;height:auto;min-height:0}
	.canvas-viewport{flex:0 0 auto;aspect-ratio:8 / 5;min-height:210px;max-height:56dvh}
	#canvas{height:auto;aspect-ratio:8 / 5;min-height:210px;max-height:56dvh}
	.canvas-toolbar-actions{flex-wrap:wrap;gap:6px}
	.canvas-icon-btn{min-width:36px;height:36px;font-size:16px}
}

.guest-publish-modal{
	position:fixed;
	inset:0;
	background:rgba(0,0,0,.45);
	z-index:var(--z-modal,600);
	display:flex;
	align-items:center;
	justify-content:center;
	padding:16px;
}

.guest-publish-modal[hidden]{
	display:none !important;
}

.guest-publish-dialog{
	width:min(560px, 100%);
	background:#fff;
	border-radius:14px;
	padding:18px;
	box-shadow:0 18px 40px rgba(0,0,0,.28);
}

.guest-publish-dialog h3{
	margin:0 0 10px;
}

.guest-publish-dialog p{
	margin:0 0 10px;
	font-size:14px;
	line-height:1.45;
	color:#444;
}

.guest-publish-actions{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	justify-content:flex-end;
	margin-top:14px;
}

.guest-publish-actions .button{
	border-radius:999px;
}