*{margin:0;padding:0;box-sizing:border-box}
body{background:#FDF6E4;font-family:'Comic Sans MS','Fredoka',sans-serif;color:#444}
.app{max-width:960px;padding:16px;margin:auto;display:flex;}
h1{text-align:center;font-size:26px;margin-bottom:15px;color:#FF7A5A;text-shadow:1px 1px #fff}
.toolbar{background:#FFF8EE;padding:14px;border-radius:16px;box-shadow:0 3px 10px rgba(255,150,100,.2);display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.tool-group{background:#FFE9D6;padding:8px 12px;border-radius:12px;display:flex;align-items:center;gap:8px}
input[type=text]{padding:6px 10px;border-radius:10px;border:1px solid #ccc;width:200px}
button{padding:7px 12px;border-radius:12px;border:none;background:#FFB7A5;color:#000;font-weight:bold;cursor:pointer;transition:.2s}
button:hover{background:#FF9C87}
.primary{background:#58C8F2}
.primary:hover{background:#40B8E5}
.canvas-wrapper{margin-top:16px;position:relative;border-radius:16px;overflow:hidden;background:#fff}
#templateImage{width:100%;display:block;opacity:.35;pointer-events:none}
#drawCanvas{position:absolute;inset:0;cursor:crosshair}
.gallery{display:flex;flex-wrap:wrap;gap:12px;margin-top:15px;justify-content:center;width:20%;overflow-y: scroll;height: 70vh;}
.drawing-container{width:80%}
.gallery img{width:120px;height:120px;object-fit:cover;border-radius:12px;cursor:pointer;border:3px solid #FFF8EE;box-shadow:0 3px 8px rgba(0,0,0,.15);transition:.2s}
.gallery img:hover{transform:scale(1.07);border-color:#FF9C87}
@media (max-width: 600px){h1{font-size:22px}.toolbar{flex-direction:column}input[type=text]{width:100%}}
/* thumbnail wrap + view button */
.gallery-item{position:relative}
.gallery-item .view-btn{position:absolute;top:6px;right:6px;background:#58C8F2;color:#fff;border:0;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:14px;text-decoration:none;box-shadow:0 2px 6px rgba(0,0,0,.25);opacity:0;transition:.2s}
.gallery-item:hover .view-btn{opacity:1}
.gallery-item .view-btn:hover{background:#40B8E5}
/* visually hidden text for crawlers/screen readers */
.visually-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0 !important}
.gallery-item .view-btn::after{content:attr(data-label);font-size:12px;opacity:0;max-width:0;overflow:hidden;transition:.2s}
.gallery-item:hover .view-btn{border-radius:16px}
.gallery-item:hover .view-btn::after{opacity:1;max-width:140px}