html,body{height:100%;margin:0;overflow:hidden}.color-preset-list[data-v-b7ac2d8a]{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}.color-preset-swatch[data-v-b7ac2d8a]{cursor:pointer;border:2px solid #0000;border-radius:50%;outline:none;width:28px;height:28px;transition:transform .15s,border-color .15s;box-shadow:0 0 0 1px #00000026}.color-preset-swatch[data-v-b7ac2d8a]:hover{transform:scale(1.15)}.color-preset-swatch.active[data-v-b7ac2d8a]{border-color:currentColor;box-shadow:0 0 0 2px #fff,0 0 0 4px}.app{background:#f5f6f8;flex-direction:row;min-height:100vh;font-family:system-ui,sans-serif;display:flex}.sidebar{box-sizing:border-box;background:#fff;border-right:1px solid #e5e7eb;flex-direction:column;gap:20px;width:50%;padding:40px;display:flex}.form-group{flex-direction:column;gap:6px;display:flex}label{color:#333;font-size:13px;font-weight:600}.text-input{background:#fff;border:1px solid #d1d5db;border-radius:8px;outline:none;width:100%;padding:12px 14px;font-size:14px}.text-input:focus{border-color:#6366f1}.color-picker{background:#fff;border:1px solid #d1d5db;border-radius:8px;width:100%;height:42px;padding:4px}.btn{cursor:pointer;color:#fff;background:#111;border:none;border-radius:8px;padding:12px 14px;font-size:14px}.btn.secondary{color:#111;background:0 0;border:1px solid #d1d5db}.preview{box-sizing:border-box;background:#0f0f10;justify-content:center;align-items:center;width:50%;padding:40px;display:flex}.canvas-container{aspect-ratio:1;border-radius:12px;width:min(600px,90%);padding:10px;box-shadow:0 10px 25px #00000014}@media (width<=900px){.app{flex-direction:column}.sidebar,.preview{width:100%}}.preset-container{margin-top:auto}.preset-list{gap:10px;padding-top:10px;padding-bottom:8px;display:flex;overflow-x:auto}.preset-item{cursor:pointer;flex-direction:column;gap:6px;min-width:80px;font-size:12px;display:flex}.preset-item img{object-fit:cover;border:1px solid #ddd;border-radius:6px;width:100%;height:60px;transition:all .2s}.preset-item:hover img{border-color:#6366f1;transform:scale(1.05)}