:root{--ink:#262334;--muted:#777487;--line:#e8e6ee;--paper:#fff;--bg:#f5f4f8;--accent:#8056d8;--accent2:#f06b9b}*{box-sizing:border-box}body{margin:0;font:14px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}button,input{font:inherit}.topbar{height:62px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 22px;gap:18px}.brand{font-size:21px;font-weight:800;color:var(--accent);text-decoration:none;letter-spacing:-.7px}.sub,.muted,.hint{color:var(--muted)}.top-actions{margin-left:auto;display:flex;gap:8px}.app{display:grid;grid-template-columns:270px 1fr;height:calc(100vh - 62px)}.sidebar{background:#fff;border-right:1px solid var(--line);padding:18px;overflow:auto}.sidebar section{padding:0 0 18px;margin-bottom:17px;border-bottom:1px solid var(--line)}h2{font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 12px;color:#777487}.upload,.primary,.secondary,.tool{border:0;border-radius:9px;padding:10px 12px;cursor:pointer;font-weight:650}.upload{display:block;text-align:center;background:#f1ebff;color:#6941b5;border:1px dashed #bba5e9}.upload input{display:none}.hint{font-size:11px;margin:8px 2px 0}.tools{display:grid;grid-template-columns:1fr 1fr;gap:7px}.tool{background:#f5f4f8;color:#514d60;border:1px solid transparent}.tool.active{background:#efe8ff;color:#6941b5;border-color:#cbb9f2}.tool:disabled,button:disabled{opacity:.42;cursor:not-allowed}.color-input{width:100%;height:43px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:4px;cursor:pointer}.palette{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;margin-top:10px}.swatch{width:24px;height:24px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #ddd;cursor:pointer}.range-label{display:flex;justify-content:space-between;font-size:12px;margin:10px 0 5px}.range-label output{color:var(--muted)}input[type=range]{width:100%;accent-color:var(--accent)}.check{display:flex;gap:7px;align-items:center;font-size:12px;margin-top:12px}.primary{background:var(--accent);color:white;width:100%;margin-bottom:8px}.secondary{background:#f1eff5;color:#514d60;width:100%}.inline{display:inline-block;width:auto;text-decoration:none}.workspace{min-width:0;display:flex;flex-direction:column}.toolbar{height:58px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 18px;gap:12px}.toolbar strong{font-size:13px}.page-controls{display:flex;align-items:center;gap:7px}.page-controls button{border:1px solid var(--line);background:#fff;border-radius:7px;padding:5px 10px;cursor:pointer}.page-controls span{font-size:12px;color:var(--muted);min-width:42px;text-align:center}.canvas-wrap{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:30px;background-color:#f0eff4;background-image:radial-gradient(#d8d5df 1px,transparent 1px);background-size:18px 18px}.empty{text-align:center;color:var(--muted);padding:40px}.empty-icon{font-size:54px;color:#c4b2e9}.empty h1{font-size:22px;color:var(--ink);margin:8px 0}.canvas-stack{position:relative;line-height:0;box-shadow:0 8px 35px #29213a25;background:white}.canvas-stack canvas{display:block;max-width:none}.canvas-stack #paintCanvas{position:absolute;inset:0;touch-action:none;mix-blend-mode:multiply}.status{height:32px;background:#fff;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 15px;color:var(--muted);font-size:11px}@media(max-width:760px){.app{grid-template-columns:1fr;height:auto;min-height:calc(100vh - 62px)}.sidebar{order:2;border-right:0;border-top:1px solid var(--line)}.workspace{min-height:65vh}.toolbar{height:auto;min-height:58px;flex-wrap:wrap;padding:10px}.canvas-wrap{min-height:420px;padding:12px}.page-controls{flex-wrap:wrap}.topbar{padding:0 12px}}

/* FanArt 1.1: overlay de previsualización de regiones */
.canvas-stack #paintCanvas{position:absolute;inset:0;z-index:2;touch-action:none;mix-blend-mode:multiply}
.canvas-stack #hoverCanvas{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:multiply}
.canvas-stack #artCanvas{position:relative;z-index:1}

/* FanArt 1.2: action buttons */
#autoColorBtn{width:100%;margin-bottom:8px}
#jpgBtn{width:100%;margin-bottom:8px}

/* FanArt 2.0 — Magic Color and region selection */
.magic-select{width:100%;padding:10px 12px;border:1px solid #ded8eb;border-radius:10px;background:#fff;color:#33264b;margin:7px 0 10px;font:inherit}
.region-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:7px 0}
.region-actions button{font-size:12px;padding:9px 6px}
#detectRegionsBtn,#autoSelectedBtn,#autoColorBtn,#autoBookBtn{width:100%;margin:5px 0}
#autoColorBtn{background:#7c4dce}
#autoBookBtn{border:1px solid #ded8eb}