*{box-sizing:border-box}body{margin:0;background:#f4f5f7;color:#17181a;font-family:Inter,Arial,sans-serif}.wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.card{width:min(680px,100%);background:#fff;border-radius:24px;padding:32px;box-shadow:0 12px 40px #00000012}.logo{font-weight:800;letter-spacing:.12em;font-size:13px;color:#666}h1{font-size:32px;margin:12px 0 8px}.sub{color:#6d7075;margin:0 0 28px}.label{display:block;font-size:14px;font-weight:700;margin-bottom:8px}.input{width:100%;height:52px;border:1px solid #dfe1e5;border-radius:14px;padding:0 16px;font-size:16px;outline:none}.input:focus{border-color:#111}.drop{margin-top:18px;border:2px dashed #d9dce1;border-radius:18px;min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-align:center}.drop:hover{background:#fafafa}.drop input{display:none}.dropIcon{font-size:38px;line-height:1}.drop small{color:#85888e}.preview{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:18px}.thumb{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#eee}.thumb img{width:100%;height:100%;object-fit:cover}.remove{position:absolute;right:4px;top:4px;width:25px;height:25px;border:0;border-radius:50%;background:#fff;cursor:pointer;font-size:15px}.bottom{margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:15px}.button{border:0;background:#111;color:#fff;border-radius:14px;padding:14px 20px;font-size:15px;font-weight:700;cursor:pointer}.button:disabled{opacity:.4;cursor:not-allowed}.status{margin-top:15px;min-height:22px;text-align:center;font-weight:600}.ok{color:#16834b}.err{color:#c52828}@media(max-width:560px){.card{padding:22px;border-radius:20px}h1{font-size:26px}.preview{grid-template-columns:repeat(3,1fr)}.bottom{flex-direction:column;align-items:stretch}.button{width:100%}}