:root{--bg-color: #0f172a;--bg-surface: #1e293b;--bg-surface-hover: #334155;--text-primary: #f8fafc;--text-secondary: #94a3b8;--accent: #3b82f6;--accent-hover: #2563eb;--danger: #ef4444;--border: #334155;--ring: #3b82f680}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,system-ui,-apple-system,sans-serif;background-color:var(--bg-color);color:var(--text-primary);min-height:100vh}.app-container{max-width:1200px;margin:0 auto;padding:2rem;display:flex;flex-direction:column;gap:2rem}.header{text-align:center}.header h1{font-size:2.5rem;font-weight:800;background:linear-gradient(135deg,#60a5fa,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.5rem}.header p{color:var(--text-secondary);font-size:1.1rem}.workspace{display:grid;grid-template-columns:3fr 1fr;gap:2rem;align-items:start}@media(max-width:900px){.workspace{grid-template-columns:1fr}}.card{background-color:var(--bg-surface);border-radius:1rem;border:1px solid var(--border);padding:1.5rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.card-title{font-size:1.25rem;font-weight:600;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:.5rem;font-weight:500;cursor:pointer;transition:all .2s;border:none;font-size:1rem}.btn-primary{background-color:var(--accent);color:#fff}.btn-primary:hover{background-color:var(--accent-hover)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background-color:transparent;border:1px solid var(--border);color:var(--text-primary)}.btn-secondary:hover{background-color:var(--bg-surface-hover)}.btn-full{width:100%}.uploader-zone{border:2px dashed var(--border);border-radius:.75rem;padding:2rem;text-align:center;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;color:var(--text-secondary)}.uploader-zone:hover{border-color:var(--accent);background-color:#3b82f60d;color:var(--accent)}.canvas-wrapper{position:relative;width:100%;display:flex;justify-content:center;background-color:#000;border-radius:.5rem;overflow:hidden;-webkit-user-select:none;user-select:none}.canvas-image{max-width:100%;max-height:70vh;object-fit:contain;display:block}.point{position:absolute;width:16px;height:16px;background-color:var(--accent);border:2px solid white;border-radius:50%;transform:translate(-50%,-50%);cursor:grab;box-shadow:0 0 10px #00000080;z-index:10}.point:active{cursor:grabbing}.point:after{content:attr(data-index);position:absolute;top:-24px;left:50%;transform:translate(-50%);background:var(--bg-surface);color:#fff;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:700;pointer-events:none}svg.polygon-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5}.polygon{fill:#3b82f633;stroke:var(--accent);stroke-width:2;stroke-dasharray:4}.controls{display:flex;flex-direction:column;gap:1.5rem}.control-group{display:flex;flex-direction:column;gap:.5rem}.control-label{font-weight:600;font-size:.9rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.image-preview{width:100%;height:120px;object-fit:contain;background-color:#000;border-radius:.5rem;border:1px solid var(--border)}.mapped-logo-container{position:absolute;top:0;left:0;transform-origin:0 0;z-index:8;pointer-events:none}.mapped-logo{width:100%;height:100%;object-fit:contain}