.image-flip-container{max-width:1200px;margin:0 auto;padding:40px var(--space-5);color:#333;font-family:Inter,system-ui,-apple-system,sans-serif;min-height:100vh}.flip-header{text-align:center;margin-bottom:40px}.flip-title{font-size:2.5rem;font-weight:800;background:linear-gradient(135deg,var(--color-primary-500) 0%,#a855f7 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:10px}.flip-subtitle{font-size:1.1rem;color:#666}.flip-content{display:grid;grid-template-columns:300px 1fr;gap:30px;background:var(--color-white);border-radius:var(--space-6);padding:30px;box-shadow:0 10px 40px #00000014}.controls-panel{display:flex;flex-direction:column;gap:var(--space-6);padding-right:30px;border-right:1px solid #eee}.upload-section{width:100%}.upload-btn{width:100%;padding:var(--space-4);border:2px dashed var(--color-gray-200);border-radius:var(--space-3);background:var(--color-gray-50);color:var(--color-gray-500);font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.upload-btn:hover{border-color:var(--color-primary-500);color:var(--color-primary-500);background:var(--color-primary-50)}.control-group{display:flex;flex-direction:column;gap:var(--space-3)}.group-label{font-size:.9rem;font-weight:600;color:var(--color-gray-900);text-transform:uppercase;letter-spacing:.05em}.btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.action-btn{padding:var(--space-3);border:1px solid var(--color-gray-200);border-radius:10px;background:var(--color-white);color:var(--color-gray-600);font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px}.action-btn:hover{border-color:var(--color-gray-300);background:var(--color-gray-50);transform:translateY(-1px)}.action-btn.active{background:var(--color-primary-50);border-color:var(--color-primary-500);color:var(--color-primary-500)}.action-btn.primary{background:var(--color-primary-500);color:var(--color-white);border:none;box-shadow:0 4px var(--space-3) rgba(var(--color-primary-rgb),.2)}.action-btn.primary:hover{background:var(--color-primary-700);transform:translateY(-2px);box-shadow:0 6px var(--space-4) rgba(var(--color-primary-rgb),.3)}.preview-area{background:var(--color-gray-50);border-radius:var(--space-4);min-height:400px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;background-image:radial-gradient(var(--color-gray-200) 1px,transparent 1px);background-size:var(--space-5) var(--space-5)}.empty-state{text-align:center;color:var(--color-gray-400)}.preview-image{max-width:100%;max-height:600px;object-fit:contain;transition:transform .3s ease;box-shadow:0 var(--space-5) 40px #0000001a}.preview-info{position:absolute;bottom:var(--space-4);left:50%;transform:translate(-50%);background:#000000b3;color:var(--color-white);padding:6px var(--space-4);border-radius:var(--space-5);font-size:.85rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@media (max-width: 768px){.flip-content{grid-template-columns:1fr}.controls-panel{padding-right:0;border-right:none;border-bottom:1px solid #eee;padding-bottom:var(--space-6)}}