.preview-container{background:linear-gradient(135deg,#f3f4f6 25%,transparent 25%),linear-gradient(225deg,#f3f4f6 25%,transparent 25%),linear-gradient(45deg,#f3f4f6 25%,transparent 25%),linear-gradient(315deg,#f3f4f6 25%,#e5e7eb 25%);background-size:20px 20px;background-position:0 0,10px 0,10px -10px,0 10px;border-radius:12px;padding:20px;display:flex;justify-content:center;align-items:center;min-height:300px}#preview-canvas{max-width:100%;max-height:350px;transition:transform 0.3s ease}.rotate-btn,.flip-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 8px;background:#fff;border:2px solid #e5e7eb;border-radius:10px;cursor:pointer;transition:all 0.2s ease;font-size:12px;font-weight:600;color:#374151}.rotate-btn i,.flip-btn i{font-size:20px;color:#6366f1}.rotate-btn:hover,.flip-btn:hover{border-color:#6366f1;background:#eef2ff;transform:translateY(-2px)}.rotate-btn:active,.flip-btn:active{transform:translateY(0)}.rotate-btn[data-action="reset"]{border-color:#fecaca}.rotate-btn[data-action="reset"]:hover{background:#fef2f2;border-color:#ef4444}.rotate-btn[data-action="reset"] i{color:#ef4444}.flip-btn.active{background:#eef2ff;border-color:#6366f1;box-shadow:0 0 0 3px rgb(99 102 241 / .2)}#angle-slider{-webkit-appearance:none;appearance:none;height:8px;background:linear-gradient(to right,#ef4444,#f59e0b,#10b981,#f59e0b,#ef4444);border-radius:4px;outline:none}#angle-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;background:#fff;border:3px solid #4f46e5;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px rgb(0 0 0 / .15);transition:transform 0.2s ease}#angle-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}#angle-slider::-moz-range-thumb{width:22px;height:22px;background:#fff;border:3px solid #4f46e5;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px rgb(0 0 0 / .15)}#angle-value{min-width:50px;font-size:16px}#state-display{background:#f9fafb;padding:10px;border-radius:8px;border:1px dashed #d1d5db}@media (max-width:640px){.rotate-btn,.flip-btn{padding:10px 6px;font-size:11px}.rotate-btn i,.flip-btn i{font-size:18px}.preview-container{padding:12px;min-height:200px}#preview-canvas{max-height:250px}}@keyframes rotateAnimation{0%{opacity:.7}100%{opacity:1}}.rotating{animation:rotateAnimation 0.2s ease}