*{box-sizing:border-box}
:root{--bg:#f5f7fb;--card:#ffffff;--text:#172033;--muted:#667085;--line:#e4e7ec;--blue:#2563eb;--blue2:#1d4ed8;--soft:#eff6ff;--shadow:0 16px 40px rgba(16,24,40,.08)}
body{margin:0;background:#fff;color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}.wrap{max-width:880px;margin:0 auto;padding:28px 18px 44px}.hero{display:flex;align-items:center;justify-content:center;gap:18px;margin:8px 0 22px;text-align:center}.title h1{font-size:26px;line-height:1.15;margin:0}.grid{display:grid;grid-template-columns:1fr;gap:16px}.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--shadow)}.cardTitle{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800;margin:0 0 16px}label{display:block;margin:14px 0 7px;color:#344054;font-size:13px;font-weight:700}input{width:100%;padding:13px 14px;border-radius:13px;border:1px solid #d0d5dd;background:#fff;color:var(--text);font-size:15px;transition:.15s}input:focus{outline:none;border-color:#84a9ff;box-shadow:0 0 0 4px rgba(37,99,235,.12)}input[type=file]{padding:12px;background:#fbfcff;border-style:dashed}button{cursor:pointer;margin-top:16px;padding:13px 18px;border:0;border-radius:14px;background:var(--blue);color:#fff;font-weight:800;font-size:15px;box-shadow:0 10px 24px rgba(37,99,235,.22);transition:.15s}button:hover{background:var(--blue2);transform:translateY(-1px)}button:disabled{opacity:.6;cursor:not-allowed;transform:none}.secondaryBtn{margin-top:0;background:#fff;color:#344054;border:1px solid #d0d5dd;box-shadow:none}.secondaryBtn:hover{background:#f9fafb;color:#111827}.hint{font-size:12px;color:var(--muted);margin-top:8px}.previews{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px;margin-top:14px}.previews img{width:100%;height:220px;object-fit:contain;border-radius:16px;border:1px solid var(--line);background:#f8fafc}.resultCard{min-height:278px}.resultBox{position:relative}.loadingCard{min-height:236px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:18px}.loadingCard[hidden]{display:none}.loadingImages{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:nowrap}.loadingImages img:first-child{width:clamp(168px,30vw,225px);height:clamp(168px,30vw,225px);object-fit:cover;background:#fff;border:none;border-radius:0;box-shadow:none}.loadingImages img:last-child{width:clamp(105px,19vw,145px);height:auto;object-fit:contain;background:#fff;border:none;border-radius:0;box-shadow:none}.row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.row h2{margin:0;font-size:18px}textarea{width:100%;min-height:170px;font-size:17px;line-height:1.75;background:#fcfcfd;border:1px solid #d0d5dd;border-radius:16px;color:#101828;padding:16px;resize:vertical}textarea:focus{outline:none;border-color:#84a9ff;box-shadow:0 0 0 4px rgba(37,99,235,.1)}.footerNote{margin-top:14px;color:var(--muted);font-size:12px;text-align:center}@media (max-width:640px){.hero{align-items:center;flex-direction:column}.title h1{font-size:23px}.card{padding:17px}.previews{grid-template-columns:repeat(2,1fr)}.previews img{height:180px}.loadingImages{gap:10px}}
.previews img{cursor:zoom-in;transition:.15s}.previews img:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(16,24,40,.12)}.previewModal{position:fixed;inset:0;z-index:50;background:rgba(255,255,255,.96);display:flex;align-items:center;justify-content:center;padding:24px}.previewModal[hidden]{display:none}.previewModal img{max-width:min(96vw,1100px);max-height:92vh;object-fit:contain;border-radius:18px;box-shadow:0 24px 80px rgba(16,24,40,.18);background:#fff}.modalClose{position:fixed;top:16px;right:16px;margin:0;width:44px;height:44px;border-radius:999px;background:#fff;color:#111827;border:1px solid #d0d5dd;box-shadow:0 10px 24px rgba(16,24,40,.12);font-size:28px;line-height:1;padding:0;display:grid;place-items:center}.modalClose:hover{background:#f9fafb;transform:none}
.previewItem{position:relative}.previewItem img{display:block}.removePreview{position:absolute;top:8px;right:8px;margin:0;width:30px;height:30px;border-radius:999px;background:rgba(17,24,39,.82);color:#fff;border:1px solid rgba(255,255,255,.75);box-shadow:0 8px 20px rgba(16,24,40,.18);font-size:22px;line-height:1;padding:0;display:grid;place-items:center}.removePreview:hover{background:#dc2626;transform:none}.removePreview:focus{outline:3px solid rgba(37,99,235,.25)}
.submitBtn{display:block;width:100%;max-width:220px;margin:18px auto 0}.submitBtn[hidden]{display:none!important}
.inputHeader{margin-bottom:4px}.smallBtn{padding:8px 12px;border-radius:11px;font-size:13px}.characterSets{display:grid;gap:18px}.characterSet{border:1px solid #e4e7ec;border-radius:18px;padding:16px;background:#fcfcfd}.characterSetHead{display:flex;align-items:center;justify-content:space-between;gap:12px}.setTitle{font-weight:900;color:#172033}.removeSetBtn{margin:0;color:#b42318;border-color:#fecdca}.removeSetBtn:hover{background:#fff5f5;color:#991b1b}
.addSetBtn{display:block;width:100%;margin:18px auto 0;border-style:dashed;background:#fff;color:#2563eb;border-color:#bfdbfe;box-shadow:none}.addSetBtn:hover{background:#eff6ff;color:#1d4ed8;transform:none}
.headerLogo{display:block;width:min(100%,760px);height:auto;margin:0 auto}.hero{margin:4px 0 22px}
.headerLogo{width:min(92vw,420px)!important;max-height:120px;object-fit:contain}.hero{margin:8px 0 18px!important}
@media (max-width:640px){.headerLogo{width:min(88vw,340px)!important;max-height:96px}}
@media (max-width:640px){
  .wrap{padding-top:14px}
  header.hero .headerLogo{width:260px!important;max-width:82vw!important;max-height:74px!important;object-fit:contain!important}
}
@media (max-width:380px){
  header.hero .headerLogo{width:230px!important;max-width:80vw!important;max-height:66px!important}
}