* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "Hiragino Sans", sans-serif; color: #333; background: #fafafa; }
header { padding: 24px 20px 8px; }
h1 { font-size: 20px; margin: 0 0 4px; }
h2 { font-size: 14px; margin: 20px 0 8px; }
.layout { display: grid; grid-template-columns: 320px 1fr; gap: 24px; padding: 0 20px 40px; }
@media (max-width: 720px) { .layout { grid-template-columns: 1fr; } }
.tones { display: flex; flex-wrap: wrap; gap: 4px; }
.tones button { font-size: 12px; padding: 4px 8px; border: 1px solid #ccc; background: #fff; border-radius: 12px; cursor: pointer; }
.tones button.active { background: #333; color: #fff; border-color: #333; }
.swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-top: 10px; }
.swatches button { aspect-ratio: 1; border: 2px solid transparent; border-radius: 6px; cursor: pointer; }
.swatches button.active { border-color: #333; }
.fonts label { display: block; margin: 4px 0; }
input#name { width: 100%; padding: 8px; font-size: 14px; border: 1px solid #ccc; border-radius: 6px; }
.order { margin-top: 24px; width: 100%; padding: 12px; font-size: 15px; background: #333; color: #fff; border: 0; border-radius: 8px; cursor: pointer; }
.order:disabled { opacity: .5; cursor: default; }
.order-error { color: #c0392b; font-size: 12px; margin: 8px 0 0; min-height: 16px; }
.unlimited-link { margin-top: 8px; font-size: 13px; }
.unlimited-link a { color: #555; }
.dl-result { margin-top: 12px; padding: 10px; background: #eef7ee; border-radius: 6px; font-size: 13px; }
.dl-result a { color: #1a6e1a; word-break: break-all; }
.resend { margin-top: 20px; font-size: 13px; color: #666; }
.resend summary { cursor: pointer; }
.resend .picker-row { margin-top: 8px; }
.resend input[type=email] { flex: 1; padding: 6px; border: 1px solid #ccc; border-radius: 6px; }
.preview { min-height: 400px; }
.status { font-size: 12px; color: #888; height: 18px; }
.images { display: flex; flex-direction: column; gap: 16px; transition: opacity .2s; }
.images.loading { opacity: .4; }
.images img { width: 100%; max-width: 520px; box-shadow: 0 2px 12px rgba(0,0,0,.12); background: #fff; }
.picker-row { display:flex; gap:8px; align-items:center; margin-top:10px }
.picker-row input[type=color]{ width:44px; height:32px; padding:0; border:1px solid #ccc; border-radius:6px }
.picker-row input[type=text]{ flex:1 }
.suggest{ font-size:12px; color:#666; margin-top:6px }
.suggest .chip{ display:inline-block; width:14px; height:14px; border-radius:3px; vertical-align:middle; border:1px solid #ccc }