:root{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;color:#27243a;background:#f7f5fb}*{box-sizing:border-box}body{margin:0}.app{max-width:850px;margin:auto;padding:24px 16px 64px}header{padding:30px 6px 16px}.eyebrow{font-size:11px;letter-spacing:.24em;color:#8d80ac;font-weight:800}h1{font-size:clamp(26px,6vw,40px);letter-spacing:-.04em;margin:8px 0}h1 span{color:#b48fca}h2{font-size:17px;margin:0 0 12px}p{line-height:1.65;color:#716b81}header p{margin:0}.panel{background:white;border-radius:23px;padding:22px;margin-top:16px;border:1px solid #ede9f2;box-shadow:0 8px 28px #55447708}.section-title{display:flex;justify-content:space-between;align-items:center;gap:10px}.section-title span{font-size:12px;color:#8d8398}.upload{display:block;text-align:center;cursor:pointer;background:#f3edf9;border:2px dashed #c7b4de;color:#664c89;font-weight:750;border-radius:15px;padding:22px}.upload input{display:none}.thumbs{display:flex;gap:8px;overflow:auto;margin-top:12px}.thumbs img{height:84px;width:84px;object-fit:cover;border-radius:11px;border:1px solid #eee}.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0}.controls>label{flex:1;min-width:130px;font-size:12px;color:#666}.controls>label select,.controls>label input{display:block;width:100%;margin-top:7px}select,input:not([type=file]),button{font:inherit}select,input[type=number]{border:1px solid #ded8e8;border-radius:11px;padding:10px;background:white;min-width:0}button{border:0;border-radius:12px;padding:12px 16px;cursor:pointer;font-weight:750}.secondary{background:#f0eaf6;color:#694f88}.primary{background:#7757a0;color:white}.full{width:100%;margin-top:12px}.steps{display:grid;gap:10px}.step{padding:12px;border:1px solid #e7e1ee;border-radius:13px;background:#fdfcff}.step-head{display:flex;align-items:center;gap:7px}.step-head strong{flex:1}.step-head button{padding:8px;font-size:12px}.step-options{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.step-options label{display:grid;gap:5px;font-size:12px;color:#666;flex:1;min-width:95px}.step-options input,.step-options select{width:100%}.muted,.hint{font-size:13px}.hint{color:#8d849a;margin-bottom:0}.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-top:15px}.result{border:1px solid #eee;border-radius:13px;padding:8px}.result img{width:100%;aspect-ratio:1;object-fit:contain;background:#f5f3f8}.result p{font-size:11px;overflow-wrap:anywhere}.result button{width:100%;font-size:12px}.hidden{display:none!important}#picker{display:block;width:100%;max-height:290px;object-fit:contain;touch-action:manipulation;border-radius:10px;background:#f3eff7}.swatch{height:33px;width:33px;border:1px solid #ddd;border-radius:9px;background:white}#colorValue{font-size:12px;overflow-wrap:anywhere}#status{font-size:13px}footer{text-align:center;font-size:11px;color:#a097aa;margin-top:30px;line-height:2}@media(max-width:450px){.panel{padding:16px}.controls>select{max-width:100%;flex:1}.result button{padding:10px 3px}}

/* v0.2.0: mobile tap behavior and accessible thumbnail actions */
html{touch-action:manipulation;-webkit-text-size-adjust:100%}
button,.upload,#picker{touch-action:manipulation}
input,select,textarea{font-size:16px!important} /* iOS Safari focus zoom prevention */
.thumb-card{position:relative;flex:0 0 88px;width:88px;height:88px}
.thumb-card img{width:100%;height:100%;object-fit:cover;border-radius:11px;border:1px solid #eee}
.thumb-remove{position:absolute;right:3px;top:3px;display:grid;place-items:center;width:29px;height:29px;padding:0;border-radius:50%;background:#30253bea;color:#fff;font-size:24px;line-height:1;box-shadow:0 1px 6px #0005}
.tool-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:9px;margin:12px 0 17px}
.tool-button{background:#f3edf9;border:1px solid #d8cbe7;color:#654789;padding:14px 9px;min-height:48px;text-align:center}
.tool-button:active{background:#ddcce9}
.logo-library{border:1px solid #ede8f4;border-radius:14px;padding:13px;margin-bottom:14px}
.logo-library h3{margin:0;font-size:14px}
.mini-upload{padding:12px;font-size:13px;border-width:1px}
.saved-logos{display:flex;flex-wrap:wrap;gap:8px}
.saved-logo{border:1px solid #e2dae9;border-radius:10px;padding:7px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:100%}
.saved-logo.is-selected{border-color:#9975bd;background:#faf6fd}
.saved-logo img{width:48px;height:48px;object-fit:contain;background:#f3f0f7;border-radius:8px}
.saved-logo span{font-size:12px;max-width:140px;overflow-wrap:anywhere}
.saved-logo button{font-size:12px;padding:8px}
.delete-logo{color:#9c375b}
#qualityValue{margin-left:5px;color:#664c89;font-size:14px}
#qualityNote{display:block;font-size:11px;line-height:1.5;margin-top:5px}
button:focus-visible{outline:3px solid #a481c4;outline-offset:2px}

/* v0.3.0 interactive preview and service-specific social presets */
.color-control{flex:1 1 100%!important;min-width:100%!important;gap:8px!important;padding:4px 0}.color-label{display:flex;justify-content:space-between;align-items:center}.color-label output{font-weight:800;color:#694f88;font-size:15px}.color-control input[type=range]{width:100%;accent-color:#7757a0;height:25px}.reset-colors{font-size:12px;padding:9px 12px}.live-preview{margin-top:16px;background:#f8f5fb;border-radius:14px;padding:12px}.preview-choice{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;font-weight:700}.preview-choice select{flex:1;max-width:100%;font-size:16px;min-width:0}.color-compare{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}.compare-item{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}.compare-item strong{font-size:13px;color:#654b83}.compare-canvas{width:100%;height:170px;object-fit:contain;background:repeating-conic-gradient(#e8e5eb 0% 25%,#fff 0% 50%) 50% / 16px 16px;border:1px solid #ded9e5;border-radius:9px}.preview-info{margin:9px 0 0}.social-buttons{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:8px}.social-preset{background:#f4eef9;color:#5f4980;border:2px solid #ded1e9;text-align:left;font-size:13px;min-height:54px}.social-preset.active{background:#715394;color:white;border-color:#715394}.full-line{flex-basis:100%;margin-top:0}.step-options:has(.social-buttons){align-items:stretch}@media(max-width:480px){.compare-canvas{height:145px}.social-buttons{grid-template-columns:1fr 1fr}.social-preset{font-size:12px;padding:10px 8px}}

/* v0.4.0 comparison maker */
.step-options .full-line{flex-basis:100%}

/* v0.5.0: source order controls */
.thumb-card{height:auto;display:flex;flex-direction:column;gap:5px;align-self:flex-start}
.thumb-card>img{height:88px;flex:0 0 88px}
.thumb-order{display:flex;align-items:center;justify-content:space-between;gap:3px}
.thumb-move{padding:4px 7px;font-size:17px;min-width:31px;min-height:33px;border:1px solid #d8cbe7;background:#f3edf9;color:#654789;border-radius:8px}
.thumb-move:disabled{opacity:.3;cursor:not-allowed}
.thumb-number{font-size:12px;font-weight:800;color:#654789}


/* v0.8.0 social manual crop tuning */
.social-check{display:flex!important;align-items:center;gap:8px}.social-check input{width:auto}.step-options .color-control.full-line{min-width:100%!important}

/* v0.9.0: live social cropping preview */
.social-live-preview{display:flex;flex-direction:column;align-items:center;gap:10px}
.social-preview-selects{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.social-preview-selects label{display:grid;gap:5px;font-size:12px;font-weight:700;color:#645674}
.social-preview-selects select{width:100%;max-width:100%;font-size:16px}
.social-preview-canvas{display:block;max-width:100%;width:auto;height:auto;max-height:350px;object-fit:contain;background:repeating-conic-gradient(#e8e5eb 0% 25%,#fff 0% 50%) 50% / 16px 16px;border:1px solid #ded9e5;border-radius:10px}
.social-preview-info{width:100%;margin:0;text-align:center}


/* v0.10.0 direct drag crop adjustment */
.social-live-preview{user-select:none}.social-preview-canvas{display:block;width:min(100%,320px);height:auto;max-height:420px;aspect-ratio:auto;object-fit:contain;margin-top:10px;background:repeating-conic-gradient(#e8e5eb 0% 25%,#fff 0% 50%) 50% / 16px 16px;border:1px solid #ded9e5;border-radius:9px;touch-action:none;cursor:grab}.social-preview-canvas.is-dragging{cursor:grabbing}.social-preview-selects{display:flex;gap:8px;flex-wrap:wrap}.social-preview-selects label{display:grid;gap:5px;font-size:12px;color:#666;flex:1;min-width:130px}.social-preview-selects select{width:100%}