:root{
  --red:#e94a55;--navy:#173b68;--blue:#2798df;--green:#3ca878;
  --cream:#fff9e9;--white:#fff;--line:#e4e8ea;--muted:#687586;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;background:linear-gradient(135deg,#fff9e9,#f4fbf7);color:var(--navy)}
button,input{font:inherit}
.app{width:min(1500px,100%);margin:auto;padding:26px}
.top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}
.brand{font-size:clamp(1.4rem,3vw,2.3rem);font-weight:900}.sub{color:var(--muted)}
.icon-btn,.actions button,.tool{border:1px solid var(--line);background:#fff;border-radius:14px;padding:12px 16px;cursor:pointer;box-shadow:0 5px 14px rgba(23,59,104,.07)}
.notice{display:flex;gap:14px;align-items:center;background:#fff8de;border:1px solid #f0d68b;border-radius:18px;padding:16px 20px;margin-bottom:22px}
.notice strong{color:#bd8a00}.workspace{display:grid;grid-template-columns:270px minmax(0,1fr) 300px;gap:22px;align-items:start}
.panel,.canvas-panel,.upgrade{background:#fff;border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:0 12px 30px rgba(23,59,104,.08)}
.step{font-size:.8rem;font-weight:900;color:var(--red);letter-spacing:.08em}.panel h2{margin:4px 0 16px}
.canvas-title{margin:4px 0 16px}
.image-list{display:grid;gap:12px}.image-choice{display:flex;align-items:center;gap:12px;width:100%;border:2px solid transparent;background:#f7f9f7;border-radius:16px;padding:10px;text-align:left;cursor:pointer;font-weight:800;color:var(--navy)}
.image-choice.active{border-color:var(--blue);background:#edf8ff}.image-choice img{width:65px;height:52px;object-fit:contain;background:#fff;border-radius:10px}
.canvas-wrap{position:relative;overflow:hidden;border-radius:20px;border:1px solid #dfe4e7;background:#fff;touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.canvas-wrap{aspect-ratio:4/3}
canvas{position:absolute;inset:0;display:block;width:100%;height:100%;cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#paintCanvas{z-index:1;background:#fff}
#outlineCanvas{z-index:2;pointer-events:none}
.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}.actions .primary{background:var(--green);color:#fff;border-color:var(--green)}
.right-col{display:grid;gap:22px}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tool.active{border-color:#ed8a78;background:#fff1ec;color:#ad3e2d}
.range-label{display:flex;justify-content:space-between;margin-top:18px;font-weight:700}input[type=range]{width:100%}
.palette{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.swatch{aspect-ratio:1;border-radius:50%;border:3px solid #fff;outline:1px solid #d7dde1;cursor:pointer}.swatch.active{outline:4px solid #244c76}
.custom-color{display:flex;justify-content:space-between;align-items:center;margin-top:18px;font-weight:700}.custom-color input{width:54px;height:38px;border:0;background:none}
.upgrade{text-align:center;margin-top:24px}.upgrade h2{margin:0 0 8px}.upgrade p{color:var(--muted)}.demo-buy{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 20px;border-radius:15px;background:var(--green);color:#fff;font-weight:900;text-decoration:none;box-shadow:0 8px 20px rgba(60,168,120,.25)}.demo-buy:hover{background:#318f65}.demo-buy:focus-visible{outline:4px solid #155eef;outline-offset:3px}
@media(max-width:1050px){.workspace{grid-template-columns:240px 1fr}.right-col{grid-column:1/-1;grid-template-columns:1fr 1fr}}
@media(max-width:760px){.app{padding:14px}.top{align-items:flex-start}.notice{align-items:flex-start;flex-direction:column}.workspace{grid-template-columns:1fr}.image-panel{order:1}.right-col{display:contents}.right-col .panel:first-child{order:2}.right-col .panel:last-child{order:3}.canvas-panel{order:4}.image-list{grid-template-columns:repeat(3,1fr)}.image-choice{display:grid;justify-items:center;text-align:center}.image-choice img{width:80px}.actions button{flex:1 1 40%}.upgrade{margin-top:22px}}