*{box-sizing:border-box;margin:0;padding:0}body{color:#1a1a1a;background:#f5f5f5;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}#app{max-width:900px;margin:0 auto;padding:24px 16px 60px}header{text-align:center;margin-bottom:24px}header h1{font-size:22px;font-weight:700}.subtitle{color:#888;margin-top:4px;font-size:12px}.canvas-wrap{background:#eee;border-radius:12px;width:100%;margin-bottom:24px;position:relative;overflow:hidden;box-shadow:0 4px 24px #0000001f}.canvas-wrap canvas{width:100%;height:auto;display:block}.processing{background:#ffffffd9;flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex;position:absolute;inset:0}.spinner{border:4px solid #0000001a;border-top-color:#333;border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.processing p{color:#333;font-size:14px}.panel{flex-direction:column;gap:24px;display:flex}section{background:#fff;border-radius:12px;padding:20px;box-shadow:0 1px 4px #0000000f}section h2{color:#333;border-bottom:1px solid #f0f0f0;margin-bottom:14px;padding-bottom:10px;font-size:14px;font-weight:600}.field{margin-bottom:12px}.field:last-child{margin-bottom:0}.field label{color:#888;margin-bottom:4px;font-size:12px;display:block}.field input[type=text],.field textarea{resize:none;border:1px solid #e0e0e0;border-radius:8px;outline:none;width:100%;padding:8px 10px;font-family:inherit;font-size:15px;transition:border-color .2s}.field input[type=text]:focus,.field textarea:focus{border-color:#333}.upload-area{text-align:center;cursor:pointer;border:2px dashed #ddd;border-radius:10px;padding:28px 16px;transition:all .2s}.upload-area:hover{background:#fafafa;border-color:#333}.upload-area.has-image{border-style:solid;border-color:#ccc;padding:12px}.upload-icon{margin-bottom:8px;font-size:32px;display:block}.upload-area p{color:#666;font-size:13px}.upload-sub{color:#aaa;margin-top:2px;font-size:11px}.upload-area img.thumb{object-fit:cover;border-radius:50%;width:80px;height:80px;margin:0 auto 6px;display:block}.ctrl-section-label{color:#aaa;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;font-size:11px}.slider-row{align-items:center;gap:10px;margin-bottom:8px;display:flex}.slider-row label{color:#666;white-space:nowrap;width:60px;font-size:12px}input[type=range]{-webkit-appearance:none;cursor:pointer;background:#e0e0e0;border-radius:2px;outline:none;flex:1;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#333;border-radius:50%;width:18px;height:18px}.output-actions{gap:8px;display:flex}.btn{cursor:pointer;border:none;border-radius:10px;flex:1;padding:13px;font-size:14px;font-weight:600;transition:opacity .2s}.btn:active{opacity:.7}.btn-primary{color:#fff;background:#1a1a1a}.hidden{display:none!important}